review

src/e2ee/sharedKeyManagement.ts

@@ -7,16 +7,27 @@ Please see LICENSE in the repository root for full details.
 
 import { useEffect, useMemo } from "react";
 
-import { setLocalStorageItem, useLocalStorage } from "../useLocalStorage";
+import {
+  setLocalStorageItemReactive,
+  useLocalStorage,
+} from "../useLocalStorage";
 import { getUrlParams } from "../UrlParams";
 import { E2eeType } from "./e2eeType";
 import { useClient } from "../ClientContext";
+import { logger } from "matrix-js-sdk/lib/logger";
 
 /**
  * This setter will update the state for all `useRoomSharedKey` hooks
+ * if the password is different from the one in local storage or if its not yet in the local storage.
  */
 export function saveKeyForRoom(roomId: string, password: string): void {
-  setLocalStorageItem(getRoomSharedKeyLocalStorageKey(roomId), password);
+  if (
+    localStorage.getItem(getRoomSharedKeyLocalStorageKey(roomId)) !== password
+  )
+    setLocalStorageItemReactive(
+      getRoomSharedKeyLocalStorageKey(roomId),
+      password,
+    );
 }
 
 const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
@@ -48,7 +59,12 @@ const useRoomSharedKey = (
 
 export function getKeyForRoom(roomId: string): string | null {
   const { roomId: urlRoomId, password } = getUrlParams();
-  if (roomId !== urlRoomId) return null;
+  if (roomId !== urlRoomId)
+    logger.warn(
+      "requested key for a roomId which is not the current call room id (from the URL)",
+      roomId,
+      urlRoomId,
+    );
   return (
     password ?? localStorage.getItem(getRoomSharedKeyLocalStorageKey(roomId))
   );

src/home/useGroupCallRooms.ts

@@ -21,7 +21,7 @@ import {
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 
-import { getKeyForRoom, saveKeyForRoom } from "../e2ee/sharedKeyManagement";
+import { getKeyForRoom } from "../e2ee/sharedKeyManagement";
 
 export interface GroupCallRoom {
   roomAlias?: string;
@@ -87,7 +87,6 @@ const roomIsJoinable = (room: Room): boolean => {
     // in case this key also does not exists we cannot join the room.
     return false;
   }
-  if (password) saveKeyForRoom(room.roomId, password);
   // otherwise we can always join rooms because we will automatically decide if we want to use perParticipant or password
   switch (room.getJoinRule()) {
     case JoinRule.Public:

src/room/GroupCallView.tsx

@@ -43,7 +43,10 @@ import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates";
 import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
-import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
+import {
+  saveKeyForRoom,
+  useRoomEncryptionSystem,
+} from "../e2ee/sharedKeyManagement";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
@@ -167,6 +170,12 @@ export const GroupCallView: FC<Props> = ({
     useExperimentalToDeviceTransportSetting,
   );
 
+  // Save the password once we start the groupCallView
+  const { password: passwordFromUrl } = useUrlParams();
+  useEffect(() => {
+    if (passwordFromUrl) saveKeyForRoom(room.roomId, passwordFromUrl);
+  }, [passwordFromUrl, room.roomId]);
+
   usePageTitle(roomName);
 
   const matrixInfo = useMemo((): MatrixInfo => {

src/useLocalStorage.ts

@@ -15,8 +15,8 @@ export const localStorageBus = new EventEmitter();
 
 /**
  * Like useState, but reads from and persists the value to localStorage
- * this hook will not update when we write to localStorage.setItem(key, value) directly.
- * For the hook to react either use the returned setter or `saveKeyForRoom`.
+ * This hook will not update when we write to localStorage.setItem(key, value) directly.
+ * For the hook to react either use the returned setter or `setLocalStorageItemReactive`.
  */
 export const useLocalStorage = (
   key: string,
@@ -45,7 +45,10 @@ export const useLocalStorage = (
   ];
 };
 
-export const setLocalStorageItem = (key: string, value: string): void => {
+export const setLocalStorageItemReactive = (
+  key: string,
+  value: string,
+): void => {
   localStorage.setItem(key, value);
   localStorageBus.emit(key, value);
 };