From 7c3cfb931fd0d0c85b8d6c96a7d79bde6bcefd57 Mon Sep 17 00:00:00 2001 From: Timo Date: Mon, 4 Nov 2024 15:55:51 +0100 Subject: [PATCH] add media key debugging option --- public/locales/en-GB/app.json | 1 + src/settings/SettingsModal.tsx | 17 +++++++++++ src/settings/settings.ts | 4 ++- src/state/MediaViewModel.ts | 26 ++++++++-------- src/tile/MediaView.tsx | 56 +++++++++++++++++++++++++++++----- 5 files changed, 83 insertions(+), 21 deletions(-) diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json index 62274c216..a87aeef39 100644 --- a/public/locales/en-GB/app.json +++ b/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", diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 6ef40c890..2b1b89955 100644 --- a/src/settings/SettingsModal.tsx +++ b/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 = ({ 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 = ({ )} /> + + ): void => { + setShowMediaKeys(event.target.checked); + }, + [setShowMediaKeys], + )} + /> + ), }; diff --git a/src/settings/settings.ts b/src/settings/settings.ts index 293d5d590..f6cf3803f 100644 --- a/src/settings/settings.ts +++ b/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( "audio-input", diff --git a/src/state/MediaViewModel.ts b/src/state/MediaViewModel.ts index c83d6c08a..48722378c 100644 --- a/src/state/MediaViewModel.ts +++ b/src/state/MediaViewModel.ts @@ -221,18 +221,20 @@ 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), + ]).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)), diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx index a8ec58c94..e1119a0c9 100644 --- a/src/tile/MediaView.tsx +++ b/src/tile/MediaView.tsx @@ -8,7 +8,7 @@ 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 { 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 { className?: string; @@ -62,6 +66,7 @@ export const MediaView = forwardRef( ) => { 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( minature={avatarSize < 96} showTimer={handRaiseTimerVisible} /> - {/* {keys && - keys.map(({ index, key }) => ( - - index:{index}, key:{key} - - ))} */} + {keys && showMediaKeys && }
{nameTagLeadingIcon} @@ -132,5 +132,45 @@ export const MediaView = forwardRef( ); }, ); +interface MediaKeyListProps { + keys: { + index: number; + key: Uint8Array; + }[]; +} +export const MediaKeyList: FC = ({ keys }) => { + return ( +
+ {keys.map(({ index, key }) => ( +
+ + index:{index} + + + key:{key ?? "unavailable"} + +
+ ))} +
+ ); +}; MediaView.displayName = "MediaView";