From 256da431fd627e8183d938b8b9bd6e3fda221ab6 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Fri, 24 Nov 2023 13:32:30 +0100
Subject: [PATCH] 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 | 42 +++++++++++++++++++++++---------------
 src/room/InCallView.tsx    | 24 ++++++++--------------
 src/rtcSessionHelpers.ts   |  3 +++
 3 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index e1e2055b..24c1568c 100644
--- a/src/room/GroupCallView.tsx
+++ b/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}
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 957acf07..5c503f14 100644
--- a/src/room/InCallView.tsx
+++ b/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>
   );
 };
diff --git a/src/rtcSessionHelpers.ts b/src/rtcSessionHelpers.ts
index 2291e80c..3f7d8492 100644
--- a/src/rtcSessionHelpers.ts
+++ b/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);