Fix not disconnecting from livekit session.

This happens if there is an error while
(due to opening the app in another tab)
the call is running. The lk session ends if we reroute
to `/` (or quit the widget IFrame)
but we never explicitly disconnect from livekit.

Signed-off-by: Timo K <toger5@hotmail.de>

src/room/GroupCallView.tsx

@@ -44,9 +44,10 @@ import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import { E2EEConfig } from "../livekit/useLiveKit";
+import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
 import { useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
+import { useOpenIDSFU } from "../livekit/openIDSFU";
 
 declare global {
   interface Window {
@@ -126,6 +127,23 @@ export const GroupCallView: FC<Props> = ({
   const latestMuteStates = useRef<MuteStates>();
   latestMuteStates.current = muteStates;
 
+  const e2eeConfig = useMemo((): E2EEConfig => {
+    if (perParticipantE2EE) {
+      return { mode: E2eeType.PER_PARTICIPANT };
+    } else if (e2eeSharedKey) {
+      return { mode: E2eeType.SHARED_KEY, sharedKey: e2eeSharedKey };
+    } else {
+      return { mode: E2eeType.NONE };
+    }
+  }, [perParticipantE2EE, e2eeSharedKey]);
+  const sfuConfig = useOpenIDSFU(client, rtcSession);
+  const { livekitRoom, connState } = useLiveKit(
+    rtcSession,
+    muteStates,
+    sfuConfig,
+    e2eeConfig,
+  );
+
   useEffect(() => {
     // this effect is only if we don't want to show the lobby (skipLobby = true)
     if (!skipLobby) return;
@@ -220,7 +238,7 @@ export const GroupCallView: FC<Props> = ({
         sendInstantly,
       );
 
-      await leaveRTCSession(rtcSession);
+      await leaveRTCSession(rtcSession, livekitRoom);
 
       if (
         !isPasswordlessUser &&
@@ -230,7 +248,7 @@ export const GroupCallView: FC<Props> = ({
         history.push("/");
       }
     },
-    [rtcSession, isPasswordlessUser, confineToRoom, history],
+    [rtcSession, livekitRoom, isPasswordlessUser, confineToRoom, history],
   );
 
   useEffect(() => {
@@ -239,24 +257,14 @@ export const GroupCallView: FC<Props> = ({
         ev: CustomEvent<IWidgetApiRequest>,
       ): Promise<void> => {
         widget!.api.transport.reply(ev.detail, {});
-        await leaveRTCSession(rtcSession);
+        await leaveRTCSession(rtcSession, livekitRoom);
       };
       widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
       return () => {
         widget!.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
       };
     }
-  }, [isJoined, rtcSession]);
-
-  const e2eeConfig = useMemo((): E2EEConfig => {
-    if (perParticipantE2EE) {
-      return { mode: E2eeType.PER_PARTICIPANT };
-    } else if (e2eeSharedKey) {
-      return { mode: E2eeType.SHARED_KEY, sharedKey: e2eeSharedKey };
-    } else {
-      return { mode: E2eeType.NONE };
-    }
-  }, [perParticipantE2EE, e2eeSharedKey]);
+  }, [isJoined, livekitRoom, rtcSession]);
 
   const onReconnect = useCallback(() => {
     setLeft(false);
@@ -318,11 +326,13 @@ export const GroupCallView: FC<Props> = ({
     />
   );
 
-  if (isJoined) {
+  if (isJoined && livekitRoom) {
     return (
       <>
         {shareModal}
         <ActiveCall
+          livekitRoom={livekitRoom}
+          connState={connState}
           client={client}
           matrixInfo={matrixInfo}
           rtcSession={rtcSession}

src/room/InCallView.tsx

@@ -72,7 +72,7 @@ import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal } from "../settings/SettingsModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
-import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
+import { E2EEConfig } from "../livekit/useLiveKit";
 import { useFullscreen } from "./useFullscreen";
 import { useLayoutStates } from "../video-grid/Layout";
 import { useWakeLock } from "../useWakeLock";
@@ -85,7 +85,6 @@ import {
   ECAddonConnectionState,
   ECConnectionState,
 } from "../livekit/useECConnectionState";
-import { useOpenIDSFU } from "../livekit/openIDSFU";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
@@ -93,27 +92,22 @@ const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 // How long we wait after a focus switch before showing the real participant list again
 const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
 
-export interface ActiveCallProps
-  extends Omit<InCallViewProps, "livekitRoom" | "connState"> {
+export interface ActiveCallProps extends InCallViewProps {
   e2eeConfig: E2EEConfig;
 }
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
-  const sfuConfig = useOpenIDSFU(props.client, props.rtcSession);
-  const { livekitRoom, connState } = useLiveKit(
-    props.rtcSession,
-    props.muteStates,
-    sfuConfig,
-    props.e2eeConfig,
-  );
-
-  if (!livekitRoom) {
+  if (!props.livekitRoom) {
     return null;
   }
 
   return (
-    <RoomContext.Provider value={livekitRoom}>
-      <InCallView {...props} livekitRoom={livekitRoom} connState={connState} />
+    <RoomContext.Provider value={props.livekitRoom}>
+      <InCallView
+        {...props}
+        livekitRoom={props.livekitRoom}
+        connState={props.connState}
+      />
     </RoomContext.Provider>
   );
 };

src/rtcSessionHelpers.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { Room } from "livekit-client";
 
 import { PosthogAnalytics } from "./analytics/PosthogAnalytics";
 import { LivekitFocus } from "./livekit/LivekitFocus";
@@ -68,7 +69,9 @@ const widgetPostHangupProcedure = async (
 
 export async function leaveRTCSession(
   rtcSession: MatrixRTCSession,
+  livekitRoom: Room | undefined,
 ): Promise<void> {
+  await livekitRoom?.disconnect();
   await rtcSession.leaveRoomSession();
   if (widget) {
     await widgetPostHangupProcedure(widget);