From 807a6a8545ed8483d1ff5b52e77ee3bc2694a4d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 30 Jan 2023 20:43:21 +0100
Subject: [PATCH 1/5] Add call feed size debug info
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 public/locales/en-GB/app.json         |  1 +
 src/settings/SettingsModal.tsx        | 15 +++++++++++++++
 src/settings/useSetting.ts            |  2 ++
 src/video-grid/VideoTile.module.css   |  6 +++++-
 src/video-grid/VideoTile.tsx          | 12 +++++++++++-
 src/video-grid/VideoTileContainer.tsx |  2 ++
 src/video-grid/useCallFeed.ts         | 25 +++++++++++++++++++++++++
 7 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json
index b2bfc56..21af889 100644
--- a/public/locales/en-GB/app.json
+++ b/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",
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 106ef9e..ccff126 100644
--- a/src/settings/SettingsModal.tsx
+++ b/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")}
diff --git a/src/settings/useSetting.ts b/src/settings/useSetting.ts
index 75754e5..09cf6da 100644
--- a/src/settings/useSetting.ts
+++ b/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);
diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index d6f6e06..7f94a88 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/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;
+}
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index 4e04199..76ecd39 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/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 && (
           <>
diff --git a/src/video-grid/VideoTileContainer.tsx b/src/video-grid/VideoTileContainer.tsx
index 14d346a..7c0a12e 100644
--- a/src/video-grid/VideoTileContainer.tsx
+++ b/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 && (
diff --git a/src/video-grid/useCallFeed.ts b/src/video-grid/useCallFeed.ts
index e29bfac..48657a7 100644
--- a/src/video-grid/useCallFeed.ts
+++ b/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(

From abb43bfe59446b3ef68ce465fc59466e23c4255e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 30 Jan 2023 22:07:00 +0100
Subject: [PATCH 2/5] Show debug only conditionally
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/video-grid/VideoTile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index 76ecd39..df868b0 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -133,7 +133,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
         {toolbarButtons.length > 0 && !maximised && (
           <div className={classNames(styles.toolbar)}>
             <div className={classNames(styles.debugInfo)}>
-              {JSON.stringify(debugInfo)}
+              {showCallFeedDebugInfo && JSON.stringify(debugInfo)}
             </div>
             <div>{toolbarButtons}</div>
           </div>

From c492fcd448b7e0fceb8902f3446fdb68868c0497 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 31 Jan 2023 11:00:13 +0100
Subject: [PATCH 3/5] Always show debug info
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/video-grid/VideoTile.module.css | 7 +++++--
 src/video-grid/VideoTile.tsx        | 8 +++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 7f94a88..cda0057 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -96,7 +96,7 @@ limitations under the License.
 
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
 
   overflow: hidden;
   z-index: 1;
@@ -181,5 +181,8 @@ limitations under the License.
 }
 
 .debugInfo {
-  margin-left: 16px;
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  background-color: rgba(0, 0, 0, 0.5);
 }
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index df868b0..c15dd82 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -130,11 +130,13 @@ 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)}>
-            <div className={classNames(styles.debugInfo)}>
-              {showCallFeedDebugInfo && JSON.stringify(debugInfo)}
-            </div>
             <div>{toolbarButtons}</div>
           </div>
         )}

From 6ff8215e7a66a84226c3747fa5643de808f740e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 31 Jan 2023 11:01:21 +0100
Subject: [PATCH 4/5] Reduce diff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/video-grid/VideoTile.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index c15dd82..3ea6a6c 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -136,9 +136,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
           </div>
         )}
         {toolbarButtons.length > 0 && !maximised && (
-          <div className={classNames(styles.toolbar)}>
-            <div>{toolbarButtons}</div>
-          </div>
+          <div className={classNames(styles.toolbar)}>{toolbarButtons}</div>
         )}
         {videoMuted && (
           <>

From ab709262749c07071da7f21ffa9b3f6dbcb9f647 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 31 Jan 2023 11:04:48 +0100
Subject: [PATCH 5/5] Delint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/video-grid/VideoGrid.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/video-grid/VideoGrid.stories.tsx b/src/video-grid/VideoGrid.stories.tsx
index 859e593..986a63d 100644
--- a/src/video-grid/VideoGrid.stories.tsx
+++ b/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}
             />
           )}