Stop connecting to a video room if the widget messaging disappears (#8660)

* Stop connecting to a video room if the widget messaging disappears

* Clean up more listeners

* Clean up even more listeners

src/stores/VideoChannelStore.ts

@@ -136,14 +136,40 @@ export default class VideoChannelStore extends AsyncStoreWithClient<null> {
             }
         }
 
+        // Now that we got the messaging, we need a way to ensure that it doesn't get stopped
+        const dontStopMessaging = new Promise<void>((resolve, reject) => {
+            const listener = (uid: string) => {
+                if (uid === jitsiUid) {
+                    cleanup();
+                    reject(new Error("Messaging stopped"));
+                }
+            };
+            const done = () => {
+                cleanup();
+                resolve();
+            };
+            const cleanup = () => {
+                messagingStore.off(WidgetMessagingStoreEvent.StopMessaging, listener);
+                this.off(VideoChannelEvent.Connect, done);
+                this.off(VideoChannelEvent.Disconnect, done);
+            };
+
+            messagingStore.on(WidgetMessagingStoreEvent.StopMessaging, listener);
+            this.on(VideoChannelEvent.Connect, done);
+            this.on(VideoChannelEvent.Disconnect, done);
+        });
+
         if (!messagingStore.isWidgetReady(jitsiUid)) {
             // Wait for the widget to be ready to receive our join event
             try {
-                await waitForEvent(
-                    messagingStore,
-                    WidgetMessagingStoreEvent.WidgetReady,
-                    (uid: string) => uid === jitsiUid,
-                );
+                await Promise.race([
+                    waitForEvent(
+                        messagingStore,
+                        WidgetMessagingStoreEvent.WidgetReady,
+                        (uid: string) => uid === jitsiUid,
+                    ),
+                    dontStopMessaging,
+                ]);
             } catch (e) {
                 throw new Error(`Video channel in room ${roomId} never became ready: ${e}`);
             }
@@ -178,11 +204,12 @@ export default class VideoChannelStore extends AsyncStoreWithClient<null> {
             videoDevice: videoDevice?.label,
         });
         try {
-            await waitForJoin;
+            await Promise.race([waitForJoin, dontStopMessaging]);
         } catch (e) {
             // If it timed out, clean up our advance preparations
             this.activeChannel = null;
             this.roomId = null;
+
             messaging.off(`action:${ElementWidgetActions.CallParticipants}`, this.onParticipants);
             messaging.off(`action:${ElementWidgetActions.MuteAudio}`, this.onMuteAudio);
             messaging.off(`action:${ElementWidgetActions.UnmuteAudio}`, this.onUnmuteAudio);

src/stores/widgets/WidgetMessagingStore.ts

@@ -25,6 +25,7 @@ import WidgetUtils from "../../utils/WidgetUtils";
 
 export enum WidgetMessagingStoreEvent {
     StoreMessaging = "store_messaging",
+    StopMessaging = "stop_messaging",
     WidgetReady = "widget_ready",
 }
 
@@ -71,9 +72,7 @@ export class WidgetMessagingStore extends AsyncStoreWithClient<unknown> {
     }
 
     public stopMessaging(widget: Widget, roomId: string) {
-        const uid = WidgetUtils.calcWidgetUid(widget.id, roomId);
-        this.widgetMap.remove(uid)?.stop();
-        this.readyWidgets.delete(uid);
+        this.stopMessagingByUid(WidgetUtils.calcWidgetUid(widget.id, roomId));
     }
 
     public getMessaging(widget: Widget, roomId: string): ClientWidgetApi {
@@ -86,6 +85,8 @@ export class WidgetMessagingStore extends AsyncStoreWithClient<unknown> {
      */
     public stopMessagingByUid(widgetUid: string) {
         this.widgetMap.remove(widgetUid)?.stop();
+        this.readyWidgets.delete(widgetUid);
+        this.emit(WidgetMessagingStoreEvent.StopMessaging, widgetUid);
     }
 
     /**