add media key debugging option

public/locales/en-GB/app.json

@@ -152,6 +152,7 @@
     "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/settings/SettingsModal.tsx

@@ -28,6 +28,7 @@ import {
   developerSettingsTab as developerSettingsTabSetting,
   duplicateTiles as duplicateTilesSetting,
   nonMemberTiles as nonMemberTilesSetting,
+  showMediaKeys as showMediaKeysSetting,
   useOptInAnalytics,
 } from "./settings";
 import { isFirefox } from "../Platform";
@@ -71,6 +72,8 @@ export const SettingsModal: FC<Props> = ({
 
   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,
@@ -253,6 +256,20 @@ export const SettingsModal: FC<Props> = ({
             )}
           />
         </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,7 +72,9 @@ export const developerSettingsTab = new Setting(
 
 export const duplicateTiles = new Setting("duplicate-tiles", 0);
 
-export const nonMemberTiles = new Setting("non-member-tiles", true);
+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",

src/state/MediaViewModel.ts

@@ -41,7 +41,6 @@ import {
   MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/src/matrixrtc";
-import { logger } from "matrix-js-sdk/src/logger";
 
 import { ViewModel } from "./ViewModel";
 import { useReactiveState } from "../useReactiveState";
@@ -221,18 +220,22 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
       Track.Source.Camera,
     );
 
-    // rtcSession.on(
-    //   MatrixRTCSessionEvent.EncryptionKeyChanged,
-    //   (key, index, participantId) => {
-    //     if (id.startsWith(participantId))
-    //       logger.info("got new keys: ", participant, { index, key });
-    //     logger.info("All keys for participant ", participant, " - ", [
-    //       ...this.keys.value,
-    //       { index, key },
-    //     ]);
-    //     this.keys.next([...this.keys.value, { index, key }]);
-    //   },
-    // );
+    combineLatest([
+      participant,
+      fromEvent(rtcSession, MatrixRTCSessionEvent.EncryptionKeyChanged).pipe(
+        startWith(null),
+      ),
+    ]).subscribe(([par, ev]) => {
+      for (const participantKeys of rtcSession.getEncryptionKeys()) {
+        if (participantKeys[0] === par?.identity) {
+          this.keys.next(
+            Array.from(participantKeys[1].entries()).map(([i, k]) => {
+              return { index: i, key: k };
+            }),
+          );
+        }
+      }
+    });
 
     const media = participant.pipe(
       switchMap((p) => (p && observeParticipantMedia(p)) ?? of(undefined)),

src/tile/MediaView.tsx

@@ -7,8 +7,8 @@ Please see LICENSE in the repository root for full details.
 
 import { TrackReferenceOrPlaceholder } from "@livekit/components-core";
 import { animated } from "@react-spring/web";
-import { RoomMember } from "matrix-js-sdk/src/matrix";
-import { ComponentProps, ReactNode, forwardRef } from "react";
+import { encodeUnpaddedBase64, RoomMember } from "matrix-js-sdk/src/matrix";
+import { ComponentProps, FC, ReactNode, forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { VideoTrack } from "@livekit/components-react";
@@ -18,7 +18,11 @@ import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
-import { showHandRaisedTimer, useSetting } from "../settings/settings";
+import {
+  showHandRaisedTimer,
+  showMediaKeys as showMediaKeysSettings,
+  useSetting,
+} from "../settings/settings";
 
 interface Props extends ComponentProps<typeof animated.div> {
   className?: string;
@@ -62,6 +66,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
   ) => {
     const { t } = useTranslation();
     const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
+    const [showMediaKeys] = useSetting(showMediaKeysSettings);
 
     const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
 
@@ -100,12 +105,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
             minature={avatarSize < 96}
             showTimer={handRaiseTimerVisible}
           />
-          {/* {keys &&
-            keys.map(({ index, key }) => (
-              <Text as="span" size="sm">
-                index:{index}, key:{key}
-              </Text>
-            ))} */}
+          {keys && showMediaKeys && <MediaKeyList keys={keys} />}
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
             <Text as="span" size="sm" weight="medium" className={styles.name}>
@@ -132,5 +132,45 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
     );
   },
 );
+interface MediaKeyListProps {
+  keys: {
+    index: number;
+    key: Uint8Array;
+  }[];
+}
 
+export const MediaKeyList: FC<MediaKeyListProps> = ({ keys }) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "70%",
+        overflow: "scroll",
+        color: "white",
+      }}
+    >
+      {keys.map(({ index, key }) => (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            backgroundColor: "#000000c0",
+            margin: "3px",
+            padding: "5px",
+            borderRadius: "5px",
+          }}
+          key={index}
+        >
+          <Text as="span" size="sm">
+            index:{index}
+          </Text>
+          <Text as="span" size="xs">
+            key:{key ? encodeUnpaddedBase64(key) : "unavailable"}
+          </Text>
+        </div>
+      ))}
+    </div>
+  );
+};
 MediaView.displayName = "MediaView";