From f0b3f9e3f8a5ba7be256fcb9669f0c0f263db1c7 Mon Sep 17 00:00:00 2001
From: Timo <16718859+toger5@users.noreply.github.com>
Date: Mon, 6 Jan 2025 10:42:15 +0100
Subject: [PATCH] Changed styling and fixed fps = 0 (#2916)

(React rendered 0 instead of <Text /> for fps && <Text>{fps}</text>)
---
 src/RTCConnectionStats.module.css | 10 +++-
 src/RTCConnectionStats.tsx        | 79 +++++++++++++++++--------------
 2 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/src/RTCConnectionStats.module.css b/src/RTCConnectionStats.module.css
index d663577c..0e29eaa9 100644
--- a/src/RTCConnectionStats.module.css
+++ b/src/RTCConnectionStats.module.css
@@ -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;
 }
diff --git a/src/RTCConnectionStats.tsx b/src/RTCConnectionStats.tsx
index eedce04d..d092b677 100644
--- a/src/RTCConnectionStats.tsx
+++ b/src/RTCConnectionStats.tsx
@@ -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>