Changed styling and fixed fps = 0 (#2916)

(React rendered 0 instead of <Text /> for fps && <Text>{fps}</text>)

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 {
+.statsPill {
-  color: var(--cpd-color-text-primary);
+  border-radius: var(--media-view-border-radius);
+  grid-area: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  flex-direction: column;
+  align-items: flex-start;
 }

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">
+          <Button
-            <MicOnSolidIcon className={styles.icon} />
+            onClick={() => showFullModal("audio")}
-          </IconButton>
+            size="sm"
-          {"jitter" in audio && typeof audio.jitter === "number" && (
+            kind="tertiary"
-            <Text as="span" size="xs" title="jitter">
+            Icon={MicOnSolidIcon}
-              &nbsp;{(audio.jitter * 1000).toFixed(0)}ms
+          >
-            </Text>
+            {"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">
+          <Button
-            <VideoCallSolidIcon className={styles.icon} />
+            onClick={() => showFullModal("video")}
-          </IconButton>
+            size="sm"
-          {video?.framesPerSecond && (
+            kind="tertiary"
-            <Text as="span" size="xs" title="frame rate">
+            Icon={VideoCallSolidIcon}
-              &nbsp;{video.framesPerSecond.toFixed(0)}fps
+          >
-            </Text>
+            {!!video?.framesPerSecond && (
-          )}
+              <Text as="span" size="xs" title="frame rate">
-          {"jitter" in video && typeof video.jitter === "number" && (
+                &nbsp;{video.framesPerSecond.toFixed(0)}fps
-            <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 &&
+            {"jitter" in video && typeof video.jitter === "number" && (
-            typeof video.qualityLimitationReason === "string" &&
+              <Text as="span" size="xs" title="jitter">
-            video.qualityLimitationReason !== "none" && (
+                &nbsp;{(video.jitter * 1000).toFixed(0)}ms
-              <Text as="span" size="xs" title="quality limitation reason">
-                &nbsp;{video.qualityLimitationReason}
               </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>