Refactor livekit disconnect to use an effect hook. (#1925)

---------

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

src/room/GroupCallView.tsx

@@ -44,10 +44,9 @@ import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
+import { E2EEConfig } from "../livekit/useLiveKit";
 import { useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
-import { useOpenIDSFU } from "../livekit/openIDSFU";
 
 declare global {
   interface Window {
@@ -136,13 +135,6 @@ export const GroupCallView: FC<Props> = ({
       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)
@@ -238,7 +230,8 @@ export const GroupCallView: FC<Props> = ({
         sendInstantly,
       );
 
-      await leaveRTCSession(rtcSession, livekitRoom);
+      // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
+      await leaveRTCSession(rtcSession);
 
       if (
         !isPasswordlessUser &&
@@ -248,7 +241,7 @@ export const GroupCallView: FC<Props> = ({
         history.push("/");
       }
     },
-    [rtcSession, livekitRoom, isPasswordlessUser, confineToRoom, history],
+    [rtcSession, isPasswordlessUser, confineToRoom, history],
   );
 
   useEffect(() => {
@@ -257,14 +250,15 @@ export const GroupCallView: FC<Props> = ({
         ev: CustomEvent<IWidgetApiRequest>,
       ): Promise<void> => {
         widget!.api.transport.reply(ev.detail, {});
-        await leaveRTCSession(rtcSession, livekitRoom);
+        // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.
+        await leaveRTCSession(rtcSession);
       };
       widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
       return () => {
         widget!.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
       };
     }
-  }, [isJoined, livekitRoom, rtcSession]);
+  }, [isJoined, rtcSession]);
 
   const onReconnect = useCallback(() => {
     setLeft(false);
@@ -326,13 +320,11 @@ export const GroupCallView: FC<Props> = ({
     />
   );
 
-  if (isJoined && livekitRoom) {
+  if (isJoined) {
     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 } from "../livekit/useLiveKit";
+import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
 import { useFullscreen } from "./useFullscreen";
 import { useLayoutStates } from "../video-grid/Layout";
 import { useWakeLock } from "../useWakeLock";
@@ -85,6 +85,7 @@ 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);
@@ -92,22 +93,32 @@ 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 InCallViewProps {
+export interface ActiveCallProps
+  extends Omit<InCallViewProps, "livekitRoom" | "connState"> {
   e2eeConfig: E2EEConfig;
 }
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
-  if (!props.livekitRoom) {
+  const sfuConfig = useOpenIDSFU(props.client, props.rtcSession);
-    return null;
+  const { livekitRoom, connState } = useLiveKit(
-  }
+    props.rtcSession,
+    props.muteStates,
+    sfuConfig,
+    props.e2eeConfig,
+  );
+
+  useEffect(() => {
+    return () => {
+      livekitRoom?.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (!livekitRoom) return null;
 
   return (
-    <RoomContext.Provider value={props.livekitRoom}>
+    <RoomContext.Provider value={livekitRoom}>
-      <InCallView
+      <InCallView {...props} livekitRoom={livekitRoom} connState={connState} />
-        {...props}
-        livekitRoom={props.livekitRoom}
-        connState={props.connState}
-      />
     </RoomContext.Provider>
   );
 };
@@ -193,14 +204,6 @@ export const InCallView: FC<InCallViewProps> = ({
     (muted) => muteStates.audio.setEnabled?.(!muted),
   );
 
-  const onLeavePress = useCallback(() => {
-    // Disconnect from the room. We don't do this in onLeave because that's
-    // also called on an unintentional disconnect. Plus we don't have the
-    // livekit room in onLeave anyway.
-    livekitRoom.disconnect();
-    onLeave();
-  }, [livekitRoom, onLeave]);
-
   useEffect(() => {
     widget?.api.transport.send(
       layout === "grid"
@@ -380,7 +383,9 @@ export const InCallView: FC<InCallViewProps> = ({
     buttons.push(
       <HangupButton
         key="6"
-        onPress={onLeavePress}
+        onPress={function (): void {
+          onLeave();
+        }}
         data-testid="incall_leave"
       />,
     );

src/rtcSessionHelpers.ts

@@ -15,7 +15,6 @@ 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";
@@ -69,10 +68,8 @@ const widgetPostHangupProcedure = async (
 
 export async function leaveRTCSession(
   rtcSession: MatrixRTCSession,
-  livekitRoom: Room | undefined,
 ): Promise<void> {
   await rtcSession.leaveRoomSession();
-  await livekitRoom?.disconnect();
   if (widget) {
     await widgetPostHangupProcedure(widget);
   }