Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-08-29 21:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Workaround horizontal scrolling

Browse Source
This commit is contained in:
Hugh Nimmo-Smith
2024-12-17 08:28:53 +00:00
parent db06a143cd
commit 2b5766c02d
1 changed files with 47 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/RTCConnectionStats.tsx
View File

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
*/ */
import { type FC } from "react"; import { type FC } from "react";
import { Text, Tooltip, TooltipProvider } from "@vector-im/compound-web"; import { IconButton, Text } from "@vector-im/compound-web";
import { import {
MicOnSolidIcon, MicOnSolidIcon,
VideoCallSolidIcon, VideoCallSolidIcon,
@@ -21,54 +21,56 @@ interface Props {
export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => { export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
return ( return (
<div> <div>
<TooltipProvider> {audio && (
{audio && ( <div>
<div> <IconButton
<Tooltip label={JSON.stringify(audio, null, 2)}> onClick={() => alert(JSON.stringify(audio, null, 2))}
<MicOnSolidIcon /> size="sm"
</Tooltip> >
{"jitter" in audio && typeof audio.jitter === "number" && ( <MicOnSolidIcon />
<Text as="span" size="xs" title="jitter"> </IconButton>
&nbsp;{(audio.jitter * 1000).toFixed(0)}ms {"jitter" in audio && typeof audio.jitter === "number" && (
<Text as="span" size="xs" title="jitter">
&nbsp;{(audio.jitter * 1000).toFixed(0)}ms
</Text>
)}
</div>
)}
{video && (
<div>
<IconButton
onClick={() => alert(JSON.stringify(video, null, 2))}
size="sm"
>
<VideoCallSolidIcon />
</IconButton>
{video?.framesPerSecond && (
<Text as="span" size="xs" title="frame rate">
&nbsp;{video.framesPerSecond.toFixed(0)}fps
</Text>
)}
{"jitter" in video && typeof video.jitter === "number" && (
<Text as="span" size="xs" title="jitter">
&nbsp;{(video.jitter * 1000).toFixed(0)}ms
</Text>
)}
{"frameHeight" in video &&
typeof video.frameHeight === "number" &&
"frameWidth" in video &&
typeof video.frameWidth === "number" && (
<Text as="span" size="xs" title="frame size">
&nbsp;{video.frameWidth}x{video.frameHeight}
</Text> </Text>
)} )}
</div> {"qualityLimitationReason" in video &&
)} typeof video.qualityLimitationReason === "string" &&
{video && ( video.qualityLimitationReason !== "none" && (
<div> <Text as="span" size="xs" title="quality limitation reason">
{video && ( &nbsp;{video.qualityLimitationReason}
<Tooltip label={JSON.stringify(video, null, 2)}>
<VideoCallSolidIcon />
</Tooltip>
)}
{video?.framesPerSecond && (
<Text as="span" size="xs" title="frame rate">
&nbsp;{video.framesPerSecond.toFixed(0)}fps
</Text> </Text>
)} )}
{"jitter" in video && typeof video.jitter === "number" && ( </div>
<Text as="span" size="xs" title="jitter"> )}
&nbsp;{(video.jitter * 1000).toFixed(0)}ms
</Text>
)}
{"frameHeight" in video &&
typeof video.frameHeight === "number" &&
"frameWidth" in video &&
typeof video.frameWidth === "number" && (
<Text as="span" size="xs" title="frame size">
&nbsp;{video.frameWidth}x{video.frameHeight}
</Text>
)}
{"qualityLimitationReason" in video &&
typeof video.qualityLimitationReason === "string" &&
video.qualityLimitationReason !== "none" && (
<Text as="span" size="xs" title="quality limitation reason">
&nbsp;{video.qualityLimitationReason}
</Text>
)}
</div>
)}
</TooltipProvider>
</div> </div>
); );
}; };