Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-03-28 06:50:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changed styling and fixed fps = 0 (#2916)

Browse Source 
(React rendered 0 instead of <Text /> for fps && <Text>{fps}</text>)
This commit is contained in:
Timo
2025-01-06 10:42:15 +01:00
committed by GitHub
parent 2c1676be41
commit f0b3f9e3f8
2 changed files with 52 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/RTCConnectionStats.module.css
View File

@@ -9,6 +9,12 @@ Please see LICENSE in the repository root for full details.
font-size: var(--font-size-micro);
}
.icon {
color: var(--cpd-color-text-primary);
.statsPill {
border-radius: var(--media-view-border-radius);
grid-area: none;
position: absolute;
top: 0;
left: 0;
flex-direction: column;
align-items: flex-start;
}

79
src/RTCConnectionStats.tsx
View File

@@ -6,15 +6,16 @@ Please see LICENSE in the repository root for full details.
*/
import { useState, type FC } from "react";
import { IconButton, Text } from "@vector-im/compound-web";
import { Button, Text } from "@vector-im/compound-web";
import {
MicOnSolidIcon,
VideoCallSolidIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons";
import classNames from "classnames";
import { Modal } from "./Modal";
import styles from "./RTCConnectionStats.module.css";
import mediaViewStyles from "../src/tile/MediaView.module.css";
interface Props {
audio?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
video?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
@@ -37,7 +38,7 @@ export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
setModalContents("none");
};
return (
<div>
<div className={classNames(mediaViewStyles.nameTag, styles.statsPill)}>
<Modal
title="RTC Connection Stats"
open={showModal}
@@ -56,46 +57,54 @@ export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
</Modal>
{audio && (
<div>
<IconButton onClick={() => showFullModal("audio")} size="sm">
<MicOnSolidIcon className={styles.icon} />
</IconButton>
{"jitter" in audio && typeof audio.jitter === "number" && (
<Text as="span" size="xs" title="jitter">
&nbsp;{(audio.jitter * 1000).toFixed(0)}ms
</Text>
)}
<Button
onClick={() => showFullModal("audio")}
size="sm"
kind="tertiary"
Icon={MicOnSolidIcon}
>
{"jitter" in audio && typeof audio.jitter === "number" && (
<Text as="span" size="xs" title="jitter">
&nbsp;{(audio.jitter * 1000).toFixed(0)}ms
</Text>
)}
</Button>
</div>
)}
{video && (
<div>
<IconButton onClick={() => showFullModal("video")} size="sm">
<VideoCallSolidIcon className={styles.icon} />
</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}
<Button
onClick={() => showFullModal("video")}
size="sm"
kind="tertiary"
Icon={VideoCallSolidIcon}
>
{!!video?.framesPerSecond && (
<Text as="span" size="xs" title="frame rate">
&nbsp;{video.framesPerSecond.toFixed(0)}fps
</Text>
)}
{"qualityLimitationReason" in video &&
typeof video.qualityLimitationReason === "string" &&
video.qualityLimitationReason !== "none" && (
<Text as="span" size="xs" title="quality limitation reason">
&nbsp;{video.qualityLimitationReason}
{"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>
)}
{"qualityLimitationReason" in video &&
typeof video.qualityLimitationReason === "string" &&
video.qualityLimitationReason !== "none" && (
<Text as="span" size="xs" title="quality limitation reason">
&nbsp;{video.qualityLimitationReason}
</Text>
)}
</Button>
</div>
)}
</div>