Store shared keys in local storage

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/room/GroupCallView.tsx

@@ -32,13 +32,14 @@ import { CallEndedView } from "./CallEndedView";
 import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
-import { E2EEConfig } from "../livekit/useLiveKit";
 import { findDeviceByName } from "../media-utils";
 import { OpenIDLoader } from "../livekit/OpenIDLoader";
 import { ActiveCall } from "./InCallView";
 import { Config } from "../config/Config";
 import { MuteStates, useMuteStates } from "./MuteStates";
 import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { useUrlParams } from "../UrlParams";
 
 declare global {
   interface Window {
@@ -73,6 +74,8 @@ export function GroupCallView({
     otelGroupCallMembership,
   } = useGroupCall(groupCall, client);
 
+  const { password } = useUrlParams();
+
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -241,8 +244,31 @@ export function GroupCallView({
     }
   }, [groupCall, state, leave]);
 
-  const [e2eeConfig, setE2EEConfig] = useState<E2EEConfig | undefined>(
-    undefined
+  const [e2eeSharedKey, setE2EESharedKey] = useRoomSharedKey(
+    groupCall.room.roomId,
+    password ?? undefined
+  );
+
+  useEffect(() => {
+    if (!password || password === e2eeSharedKey) return;
+
+    setE2EESharedKey(password);
+  }, [password, e2eeSharedKey, setE2EESharedKey]);
+
+  useEffect(() => {
+    const originalHash = location.hash;
+    let hash = originalHash === "" ? "#" : originalHash;
+    hash = hash.split("?password=")[0];
+    hash += `?password=${e2eeSharedKey ?? ""}`;
+
+    if (originalHash !== hash) {
+      location.replace(hash);
+    }
+  }, [e2eeSharedKey]);
+
+  const e2eeConfig = useMemo(
+    () => (e2eeSharedKey ? { sharedKey: e2eeSharedKey } : undefined),
+    [e2eeSharedKey]
   );
 
   const onReconnect = useCallback(() => {
@@ -319,10 +345,7 @@ export function GroupCallView({
       <LobbyView
         matrixInfo={matrixInfo}
         muteStates={muteStates}
-        onEnter={(e2eeConfig?: E2EEConfig) => {
-          setE2EEConfig(e2eeConfig);
-          enter();
-        }}
+        onEnter={() => enter()}
         isEmbedded={isEmbedded}
         hideHeader={hideHeader}
       />