Merge pull request #889 from vector-im/SimonBrandner/feat/debug

public/locales/en-GB/app.json

@@ -101,6 +101,7 @@
   "Sending…": "Sending…",
   "Settings": "Settings",
   "Share screen": "Share screen",
+  "Show call feed debug info": "Show call feed debug info",
   "Show call inspector": "Show call inspector",
   "Sign in": "Sign in",
   "Sign out": "Sign out",

src/settings/SettingsModal.tsx

@@ -33,6 +33,7 @@ import {
   useShowInspector,
   useOptInAnalytics,
   canEnableSpatialAudio,
+  useShowCallFeedDebugInfo,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
@@ -60,6 +61,8 @@ 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();
 
@@ -216,6 +219,18 @@ 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,3 +90,5 @@ 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/VideoGrid.stories.tsx

@@ -82,6 +82,7 @@ export const ParticipantsTest = () => {
               name={`User ${item.id}`}
               disableSpeakingIndicator={items.length < 3}
               connectionState={ConnectionState.Connected}
+              debugInfo={{ width: undefined, height: undefined }}
               {...rest}
             />
           )}

src/video-grid/VideoTile.module.css

@@ -179,3 +179,10 @@ limitations under the License.
   max-width: 360px;
   border-radius: 20px;
 }
+
+.debugInfo {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  background-color: rgba(0, 0, 0, 0.5);
+}

src/video-grid/VideoTile.tsx

@@ -24,6 +24,8 @@ import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
 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";
 
 interface Props {
   name: string;
@@ -44,6 +46,7 @@ interface Props {
   showOptions?: boolean;
   isLocal?: boolean;
   disableSpeakingIndicator?: boolean;
+  debugInfo: CallFeedDebugInfo;
 }
 
 export const VideoTile = forwardRef<HTMLDivElement, Props>(
@@ -68,10 +71,12 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
       isLocal,
       // TODO: disableSpeakingIndicator is not used atm.
       disableSpeakingIndicator,
+      debugInfo,
       ...rest
     },
     ref
   ) => {
+    const [showCallFeedDebugInfo] = useShowCallFeedDebugInfo();
     const { t } = useTranslation();
 
     const toolbarButtons: JSX.Element[] = [];
@@ -125,6 +130,11 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
         ref={ref}
         {...rest}
       >
+        {showCallFeedDebugInfo && (
+          <div className={classNames(styles.debugInfo)}>
+            {JSON.stringify(debugInfo)}
+          </div>
+        )}
         {toolbarButtons.length > 0 && !maximised && (
           <div className={classNames(styles.toolbar)}>{toolbarButtons}</div>
         )}

src/video-grid/VideoTileContainer.tsx

@@ -66,6 +66,7 @@ export function VideoTileContainer({
     speaking,
     stream,
     purpose,
+    debugInfo,
   } = useCallFeed(item.callFeed);
   const { rawDisplayName } = useRoomMemberName(item.member);
   const [tileRef, mediaRef] = useSpatialMediaStream(
@@ -122,6 +123,7 @@ export function VideoTileContainer({
         maximised={maximised}
         fullscreen={fullscreen}
         onFullscreen={onFullscreenCallback}
+        debugInfo={debugInfo}
         {...rest}
       />
       {videoTileSettingsModalState.isOpen && !maximised && item.callFeed && (

src/video-grid/useCallFeed.ts

@@ -18,6 +18,13 @@ import { useState, useEffect } from "react";
 import { CallFeed, CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
 import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
 
+const DEBUG_INFO_INTERVAL = 1000; // ms
+
+export interface CallFeedDebugInfo {
+  width: number | undefined;
+  height: number | undefined;
+}
+
 interface CallFeedState {
   callFeed: CallFeed | undefined;
   isLocal: boolean;
@@ -29,6 +36,14 @@ interface CallFeedState {
   disposed: boolean | undefined;
   stream: MediaStream | undefined;
   purpose: SDPStreamMetadataPurpose | undefined;
+  debugInfo: CallFeedDebugInfo;
+}
+
+function getDebugInfo(callFeed: CallFeed | undefined): CallFeedDebugInfo {
+  return {
+    width: callFeed?.stream?.getVideoTracks()?.[0]?.getSettings()?.width,
+    height: callFeed?.stream?.getVideoTracks()?.[0]?.getSettings()?.height,
+  };
 }
 
 function getCallFeedState(callFeed: CallFeed | undefined): CallFeedState {
@@ -46,6 +61,7 @@ function getCallFeedState(callFeed: CallFeed | undefined): CallFeedState {
     disposed: callFeed ? callFeed.disposed : undefined,
     stream: callFeed ? callFeed.stream : undefined,
     purpose: callFeed ? callFeed.purpose : undefined,
+    debugInfo: getDebugInfo(callFeed),
   };
 }
 
@@ -81,7 +97,16 @@ export function useCallFeed(callFeed: CallFeed | undefined): CallFeedState {
 
     onUpdateCallFeed();
 
+    const debugInfoInterval = setInterval(() => {
+      setState((prevState) => ({
+        ...prevState,
+        debugInfo: getDebugInfo(callFeed),
+      }));
+    }, DEBUG_INFO_INTERVAL);
+
     return () => {
+      clearInterval(debugInfoInterval);
+
       if (callFeed) {
         callFeed.removeListener(CallFeedEvent.Speaking, onSpeaking);
         callFeed.removeListener(