Add media key debugging option

public/locales/en-GB/app.json

@@ -146,11 +146,13 @@
     "feedback_tab_thank_you": "Thanks, we received your feedback!",
     "feedback_tab_title": "Feedback",
     "more_tab_title": "More",
+    "non_member_tiles": "Show non member tiles",
     "opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
     "preferences_tab_body": "Here you can configure extra options for an improved experience",
     "preferences_tab_h4": "Preferences",
     "preferences_tab_show_hand_raised_timer_description": "Show a timer when a participant raises their hand",
     "preferences_tab_show_hand_raised_timer_label": "Show hand raise duration",
+    "show_media_keys": "Show media encryption keys",
     "speaker_device_selection_label": "Speaker"
   },
   "star_rating_input_label_one": "{{count}} stars",

src/App.tsx

@@ -28,6 +28,8 @@ import { Initializer } from "./initializer";
 import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
 import { widget } from "./widget";
 import { useTheme } from "./useTheme";
+import { nonMemberTiles } from "./settings/settings";
+import { Config } from "./config/Config";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
@@ -71,6 +73,13 @@ export const App: FC<AppProps> = ({ history }) => {
       .catch(logger.error);
   });
 
+  // Update settings to use the non member tile information from the config if set
+  useEffect(() => {
+    if (loaded && Config.get().show_non_member_tiles) {
+      nonMemberTiles.setValue(true);
+    }
+  });
+
   const errorPage = <CrashView />;
 
   return (

src/Header.tsx

@@ -117,6 +117,7 @@ interface RoomHeaderInfoProps {
   avatarUrl: string | null;
   encrypted: boolean;
   participantCount: number | null;
+  nonMemberItemCount: number | null;
 }
 
 export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
@@ -125,6 +126,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
   avatarUrl,
   encrypted,
   participantCount,
+  nonMemberItemCount,
 }) => {
   const { t } = useTranslation();
   const size = useMediaQuery("(max-width: 550px)") ? "sm" : "lg";
@@ -157,7 +159,8 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
             aria-label={t("header_participants_label")}
           />
           <Text as="span" size="sm" weight="medium">
-            {t("participant_count", { count: participantCount ?? 0 })}
+            {t("participant_count", { count: participantCount ?? 0 })}{" "}
+            {(nonMemberItemCount ?? 0) > 0 && <>(+ {nonMemberItemCount})</>}
           </Text>
         </div>
       )}

src/config/ConfigOptions.ts

@@ -112,6 +112,7 @@ export interface ResolvedConfigOptions extends ConfigOptions {
     enable_video: boolean;
   };
   app_prompt: boolean;
+  show_non_member_tiles: boolean;
 }
 
 export const DEFAULT_CONFIG: ResolvedConfigOptions = {
@@ -127,4 +128,5 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = {
     enable_video: true,
   },
   app_prompt: true,
+  show_non_member_tiles: false,
 };

src/room/InCallView.tsx

@@ -118,20 +118,15 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   useEffect(() => {
     if (livekitRoom !== undefined) {
       const vm = new CallViewModel(
-        props.rtcSession.room,
+        props.rtcSession,
         livekitRoom,
         props.e2eeSystem,
         connStateObservable,
       );
       setVm(vm);
       return (): void => vm.destroy();
     }
-  }, [
-    props.rtcSession.room,
-    livekitRoom,
-    props.e2eeSystem,
-    connStateObservable,
-  ]);
+  }, [props.rtcSession, livekitRoom, props.e2eeSystem, connStateObservable]);
 
   if (livekitRoom === undefined || vm === null) return null;
 
@@ -194,6 +189,7 @@ export const InCallView: FC<InCallViewProps> = ({
     }
   }, [connState, onLeave]);
 
+  const nonMemberItemCount = useObservableEagerState(vm.nonMemberItemCount);
   const containerRef1 = useRef<HTMLDivElement | null>(null);
   const [containerRef2, bounds] = useMeasure();
   const boundsValid = bounds.height > 0;
@@ -633,6 +629,7 @@ export const InCallView: FC<InCallViewProps> = ({
                 avatarUrl={matrixInfo.roomAvatar}
                 encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
                 participantCount={participantCount}
+                nonMemberItemCount={nonMemberItemCount}
               />
             </LeftNav>
             <RightNav>

src/settings/SettingsModal.tsx

@@ -27,6 +27,8 @@ import {
   useSetting,
   developerSettingsTab as developerSettingsTabSetting,
   duplicateTiles as duplicateTilesSetting,
+  nonMemberTiles as nonMemberTilesSetting,
+  showMediaKeys as showMediaKeysSetting,
   useOptInAnalytics,
 } from "./settings";
 import { isFirefox } from "../Platform";
@@ -68,6 +70,10 @@ export const SettingsModal: FC<Props> = ({
   );
   const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
 
+  const [nonMemberTiles, setNonMemberTiles] = useSetting(nonMemberTilesSetting);
+
+  const [showMediaKeys, setShowMediaKeys] = useSetting(showMediaKeysSetting);
+
   // Generate a `SelectInput` with a list of devices for a given device kind.
   const generateDeviceSelection = (
     devices: MediaDevice,
@@ -236,6 +242,34 @@ export const SettingsModal: FC<Props> = ({
             )}
           />
         </FieldRow>
+        <FieldRow>
+          <InputField
+            id="nonMemberTiles"
+            type="checkbox"
+            label={t("settings.non_member_tiles")}
+            checked={nonMemberTiles}
+            onChange={useCallback(
+              (event: ChangeEvent<HTMLInputElement>): void => {
+                setNonMemberTiles(event.target.checked);
+              },
+              [setNonMemberTiles],
+            )}
+          />
+        </FieldRow>
+        <FieldRow>
+          <InputField
+            id="showMediaKeys"
+            type="checkbox"
+            label={t("settings.show_media_keys")}
+            checked={showMediaKeys}
+            onChange={useCallback(
+              (event: ChangeEvent<HTMLInputElement>): void => {
+                setShowMediaKeys(event.target.checked);
+              },
+              [setShowMediaKeys],
+            )}
+          />
+        </FieldRow>
       </>
     ),
   };

src/settings/settings.ts

@@ -72,6 +72,10 @@ export const developerSettingsTab = new Setting(
 
 export const duplicateTiles = new Setting("duplicate-tiles", 0);
 
+export const nonMemberTiles = new Setting("non-member-tiles", false);
+
+export const showMediaKeys = new Setting("non-member-tiles", false);
+
 export const audioInput = new Setting<string | undefined>(
   "audio-input",
   undefined,