Extend developer view with media debug information (#909)

* interceptor: add MediaStream feed debug interceptor

- interceptor displays nick name for default and nick name + user id if user gast
- interceptor displays track id  + media stream ids

src/inspectors/MediaInspector.module.css

@@ -0,0 +1,53 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+element {
+  --table-header: #1976d2;
+  --table-header-border: #1565c0;
+  --table-border: #d9d9d9;
+  --row-bg: #ffffff;
+}
+
+.scrollContainer {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.voIPInspectorViewer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+.voIPInspectorViewer :global(.messageText) {
+  font-size: var(--font-size-caption);
+  fill: var(--primary-content) !important;
+  stroke: var(--primary-content) !important;
+}
+
+.section {
+  display: table;
+  width: 100%;
+}
+
+.section > * {
+  display: table-row;
+}
+
+.section .col {
+  display: table-cell;
+}

src/inspectors/MediaInspector.tsx

@@ -0,0 +1,134 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+import React from "react";
+import { t } from "i18next";
+
+import styles from "./MediaInspector.module.css";
+
+interface MediaViewerProps {
+  client: MatrixClient;
+  groupCall: GroupCall;
+  userMediaFeeds: CallFeed[];
+  screenshareFeeds: CallFeed[];
+}
+
+export function MediaViewer({
+  client,
+  groupCall,
+  userMediaFeeds,
+  screenshareFeeds,
+}: MediaViewerProps) {
+  return (
+    <div className={styles.scrollContainer}>
+      <div className={styles.voIPInspectorViewer}>
+        <Table name={t("Media Feeds")} feeds={userMediaFeeds} />
+        <Table name={t("Screen Share Feeds")} feeds={screenshareFeeds} />
+      </div>
+    </div>
+  );
+}
+
+// View Items ##########################################################################################################
+
+interface TableProp {
+  name: string;
+  feeds: CallFeed[];
+}
+
+function Table({ name, feeds }: TableProp): JSX.Element {
+  // Catch case if feeds is empty
+  if (feeds.length === 0) {
+    const noFeed = t("No Feeds…");
+    return (
+      <div className={styles.section}>
+        <p className={styles.sectionTitle}>{name}</p>
+
+        <div className={styles.centerMessage}>
+          <p>{noFeed}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Render Table
+  return (
+    <div className={styles.section}>
+      <p className={styles.sectionTitle}>{name}</p>
+      <header>
+        <div className={styles.col}>Feed</div>
+        <div className={styles.col}>User</div>
+        <div className={styles.col}>StreamID</div>
+        <div className={styles.col}>Tracks</div>
+      </header>
+      {feeds.map((feed, i) => {
+        const user = feed.isLocal()
+          ? "local"
+          : feed.getMember() !== null
+          ? feed.getMember()?.name
+          : feed.userId;
+        return (
+          <TableRow
+            key={feed.feedId}
+            index={i}
+            user={user ? user : feed.userId}
+            stream={feed.stream}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+interface TableRowProp {
+  index: number;
+  user: string;
+  stream: MediaStream | undefined;
+}
+
+function TableRow({ index, user, stream }: TableRowProp): JSX.Element {
+  return (
+    <div className={styles.row}>
+      <div className={styles.col}>{index}</div>
+      <div className={styles.col}>{user}</div>
+      <div className={styles.col}>{stream?.id}</div>
+      <div className={styles.col}>
+        {stream?.getTracks().map(
+          (track): JSX.Element => (
+            <TrackColumn key={track.id} kind={track.kind} trackId={track.id} />
+          )
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface TrackColumnProp {
+  kind: string;
+  trackId: string;
+}
+
+function TrackColumn({ kind, trackId }: TrackColumnProp): JSX.Element {
+  return (
+    <div className={styles.row}>
+      <div className={styles.col}>{kind} &nbsp;</div>
+      <div className={styles.col}>{trackId}</div>
+    </div>
+  );
+}

src/room/GroupCallInspector.tsx

@@ -36,6 +36,7 @@ import { CallEvent } from "matrix-js-sdk/src/webrtc/call";
 import styles from "./GroupCallInspector.module.css";
 import { SelectInput } from "../input/SelectInput";
 import { PosthogAnalytics } from "../PosthogAnalytics";
+import { MediaViewer } from "../inspectors/MediaInspector";
 
 interface InspectorContextState {
   eventsByUserId?: { [userId: string]: SequenceDiagramMatrixEvent[] };
@@ -464,6 +465,7 @@ export function GroupCallInspector({
           Sequence Diagrams
         </button>
         <button onClick={() => setCurrentTab("inspector")}>Inspector</button>
+        <button onClick={() => setCurrentTab("voip")}>Media</button>
       </div>
       {currentTab === "sequence-diagrams" && (
         <SequenceDiagramViewer
@@ -487,6 +489,14 @@ export function GroupCallInspector({
           style={{ height: "100%", overflowY: "scroll" }}
         />
       )}
+      {currentTab === "voip" && (
+        <MediaViewer
+          client={client}
+          groupCall={groupCall}
+          userMediaFeeds={groupCall.userMediaFeeds}
+          screenshareFeeds={groupCall.screenshareFeeds}
+        />
+      )}
     </Resizable>
   );
 }

src/settings/SettingsModal.tsx

@@ -33,7 +33,6 @@ import {
   useShowInspector,
   useOptInAnalytics,
   canEnableSpatialAudio,
-  useShowCallFeedDebugInfo,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
@@ -61,8 +60,6 @@ export const SettingsModal = (props: Props) => {
 
   const [spatialAudio, setSpatialAudio] = useSpatialAudio();
   const [showInspector, setShowInspector] = useShowInspector();
-  const [showCallFeedDebugInfo, setShowCallFeedDebugInfo] =
-    useShowCallFeedDebugInfo();
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const [keyboardShortcuts, setKeyboardShortcuts] = useKeyboardShortcuts();
 
@@ -219,18 +216,6 @@ export const SettingsModal = (props: Props) => {
               }
             />
           </FieldRow>
-          <FieldRow>
-            <InputField
-              id="showCallFeedDebugInfo"
-              name="callFeedDebugInfo"
-              label={t("Show call feed debug info")}
-              type="checkbox"
-              checked={showCallFeedDebugInfo}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setShowCallFeedDebugInfo(e.target.checked)
-              }
-            />
-          </FieldRow>
           <FieldRow>
             <Button onPress={downloadDebugLog}>
               {t("Download debug logs")}

src/settings/useSetting.ts

@@ -90,5 +90,3 @@ export const useShowInspector = () => useSetting("show-inspector", false);
 export const useOptInAnalytics = () => useSetting("opt-in-analytics", false);
 export const useKeyboardShortcuts = () =>
   useSetting("keyboard-shortcuts", true);
-export const useShowCallFeedDebugInfo = () =>
-  useSetting("show-call-feed-debug-info", false);

src/video-grid/VideoTile.tsx

@@ -25,7 +25,7 @@ import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
 import { AudioButton, FullscreenButton } from "../button/Button";
 import { ConnectionState } from "../room/useGroupCall";
 import { CallFeedDebugInfo } from "./useCallFeed";
-import { useShowCallFeedDebugInfo } from "../settings/useSetting";
+import { useShowInspector } from "../settings/useSetting";
 
 interface Props {
   name: string;
@@ -76,7 +76,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
     },
     ref
   ) => {
-    const [showCallFeedDebugInfo] = useShowCallFeedDebugInfo();
+    const [showInspector] = useShowInspector();
     const { t } = useTranslation();
 
     const toolbarButtons: JSX.Element[] = [];
@@ -130,7 +130,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
         ref={ref}
         {...rest}
       >
-        {showCallFeedDebugInfo && (
+        {showInspector && (
           <div className={classNames(styles.debugInfo)}>
             {JSON.stringify(debugInfo)}
           </div>