Add call feed size debug info

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/video-grid/VideoTile.module.css

@@ -96,7 +96,7 @@ limitations under the License.
 
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
 
   overflow: hidden;
   z-index: 1;
@@ -179,3 +179,7 @@ limitations under the License.
   max-width: 360px;
   border-radius: 20px;
 }
+
+.debugInfo {
+  margin-left: 16px;
+}

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[] = [];
@@ -126,7 +131,12 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
         {...rest}
       >
         {toolbarButtons.length > 0 && !maximised && (
-          <div className={classNames(styles.toolbar)}>{toolbarButtons}</div>
+          <div className={classNames(styles.toolbar)}>
+            <div className={classNames(styles.debugInfo)}>
+              {JSON.stringify(debugInfo)}
+            </div>
+            <div>{toolbarButtons}</div>
+          </div>
         )}
         {videoMuted && (
           <>

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(