Use modal to show detailed stats instead of alert

src/RTCConnectionStats.module.css

@@ -0,0 +1,14 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+.modal pre {
+  font-size: var(--font-size-micro);
+}
+
+.icon {
+  color: var(--cpd-color-text-primary);
+}

src/RTCConnectionStats.tsx

@@ -5,13 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC } from "react";
+import { useState, type FC } from "react";
 import { IconButton, Text } from "@vector-im/compound-web";
 import {
   MicOnSolidIcon,
   VideoCallSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
+import { Modal } from "./Modal";
+import styles from "./RTCConnectionStats.module.css";
+
 interface Props {
   audio?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   video?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
@@ -19,15 +22,42 @@ interface Props {
 
 // This is only used in developer mode for debugging purposes, so we don't need full localization
 export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [modalContents, setModalContents] = useState<
+    "video" | "audio" | "none"
+  >("none");
+
+  const showFullModal = (contents: "video" | "audio"): void => {
+    setShowModal(true);
+    setModalContents(contents);
+  };
+
+  const onDismissModal = (): void => {
+    setShowModal(false);
+    setModalContents("none");
+  };
   return (
     <div>
+      <Modal
+        title="RTC Connection Stats"
+        open={showModal}
+        onDismiss={onDismissModal}
+      >
+        <div className={styles.modal}>
+          <pre>
+            {modalContents !== "none" &&
+              JSON.stringify(
+                modalContents === "video" ? video : audio,
+                null,
+                2,
+              )}
+          </pre>
+        </div>
+      </Modal>
       {audio && (
         <div>
-          <IconButton
+          <IconButton onClick={() => showFullModal("audio")} size="sm">
-            onClick={() => alert(JSON.stringify(audio, null, 2))}
+            <MicOnSolidIcon className={styles.icon} />
-            size="sm"
-          >
-            <MicOnSolidIcon />
           </IconButton>
           {"jitter" in audio && typeof audio.jitter === "number" && (
             <Text as="span" size="xs" title="jitter">
@@ -38,11 +68,8 @@ export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
       )}
       {video && (
         <div>
-          <IconButton
+          <IconButton onClick={() => showFullModal("video")} size="sm">
-            onClick={() => alert(JSON.stringify(video, null, 2))}
+            <VideoCallSolidIcon className={styles.icon} />
-            size="sm"
-          >
-            <VideoCallSolidIcon />
           </IconButton>
           {video?.framesPerSecond && (
             <Text as="span" size="xs" title="frame rate">