ElementCall fix strict mode call creation loop

src/components/structures/RoomView.tsx

@@ -1689,7 +1689,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             .sendStickerContentToRoom(url, roomId, threadId, info, text, this.context.client)
             .then(undefined, (error) => {
                 if (error.name === "UnknownDeviceError") {
-                    // Let the staus bar handle this
+                    // Let the status bar handle this
                     return;
                 }
             });

src/components/views/voip/CallView.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { FC, useContext, useEffect, AriaRole, useCallback } from "react";
 
 import type { Room } from "matrix-js-sdk/src/matrix";
-import { Call, ConnectionState, ElementCall } from "../../../models/Call";
+import { Call, ConnectionState } from "../../../models/Call";
 import { useCall } from "../../../hooks/useCall";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AppTile from "../elements/AppTile";
@@ -29,6 +29,7 @@ const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call, skipLobby,
 
     useEffect(() => {
         // We'll take this opportunity to tidy up our room state
+        // Only needed for jitsi.
         call.clean();
     }, [call]);
 
@@ -44,10 +45,6 @@ const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call, skipLobby,
             // (this will start the lobby view in the widget and connect to all required widget events)
             call.start();
         }
-        return (): void => {
-            // If we are connected the widget is sticky and we do not want to destroy the call.
-            if (!call.connected) call.destroy();
-        };
     }, [call]);
     const disconnectAllOtherCalls: () => Promise<void> = useCallback(async () => {
         // The stickyPromise has to resolve before the widget actually becomes sticky.
@@ -88,11 +85,6 @@ interface CallViewProps {
 export const CallView: FC<CallViewProps> = ({ room, resizing, waitForCall, skipLobby, role }) => {
     const call = useCall(room.roomId);
 
-    useEffect(() => {
-        if (call === null && !waitForCall) {
-            ElementCall.create(room, skipLobby);
-        }
-    }, [call, room, skipLobby, waitForCall]);
     if (call === null) {
         return null;
     } else {

src/models/Call.ts

@@ -720,7 +720,7 @@
         preload: boolean | undefined,
         returnToLobby: boolean | undefined,
     ): IApp {
         const ecWidget = WidgetStore.instance.getApps(roomId).find((app) => WidgetType.CALL.matches(app.type));
         if (ecWidget) {
             // Always update the widget data because even if the widget is already created,
             // we might have settings changes that update the widget.
@@ -741,7 +741,7 @@
         // To use Element Call without touching room state, we create a virtual
         // widget (one that doesn't have a corresponding state event)
         const url = ElementCall.generateWidgetUrl(client, roomId);
-        return WidgetStore.instance.addVirtualWidget(
+        const createdWidget = WidgetStore.instance.addVirtualWidget(
             {
                 id: secureRandomString(24), // So that it's globally unique
                 creatorUserId: client.getUserId()!,
@@ -762,6 +762,8 @@
             },
             roomId,
         );
+        WidgetStore.instance.emit(UPDATE_EVENT, null);
+        return createdWidget;
     }
 
     private static getWidgetData(
@@ -830,7 +832,6 @@
 
     public static async create(room: Room, skipLobby = false): Promise<void> {
         ElementCall.createOrGetCallWidget(room.roomId, room.client, skipLobby, false, isVideoRoom(room));
-        WidgetStore.instance.emit(UPDATE_EVENT, null);
     }
 
     protected async sendCallNotify(): Promise<void> {

src/stores/RoomViewStore.tsx

@@ -47,6 +47,7 @@ import { CancelAskToJoinPayload } from "../dispatcher/payloads/CancelAskToJoinPa
 import { SubmitAskToJoinPayload } from "../dispatcher/payloads/SubmitAskToJoinPayload";
 import { ModuleRunner } from "../modules/ModuleRunner";
 import { setMarkedUnreadState } from "../utils/notifications";
+import { ElementCall } from "../models/Call";
 
 const NUM_JOIN_RETRY = 5;
 
@@ -350,6 +351,19 @@ export class RoomViewStore extends EventEmitter {
                 });
             }
 
+            // Start call when requested
+            const currentRoomCall = this.state.roomId ? CallStore.instance.getCall(this.state.roomId) : null;
+            if (payload.view_call && room) {
+                if (!currentRoomCall) {
+                    ElementCall.create(room, false);
+                }
+            }
+            // Destroy call when requested leaving call view
+            const prevRoomCall = this.state.roomId ? CallStore.instance.getCall(this.state.roomId) : null;
+            if (prevRoomCall && !prevRoomCall.connected) {
+                currentRoomCall?.destroy();
+            }
+
             if (SettingsStore.getValue("feature_sliding_sync") && this.state.roomId !== payload.room_id) {
                 if (this.state.subscribingRoomId && this.state.subscribingRoomId !== payload.room_id) {
                     // unsubscribe from this room, but don't await it as we don't care when this gets done.