Show a lobby screen in video rooms

src/stores/VideoChannelStore.ts

@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { EventEmitter } from "events";
 import { ClientWidgetApi, IWidgetApiRequest } from "matrix-widget-api";
 
-import { MatrixClientPeg } from "../MatrixClientPeg";
+import defaultDispatcher from "../dispatcher/dispatcher";
+import { ActionPayload } from "../dispatcher/payloads";
 import { ElementWidgetActions } from "./widgets/ElementWidgetActions";
 import { WidgetMessagingStore } from "./widgets/WidgetMessagingStore";
 import {
@@ -27,6 +27,8 @@ import {
 } from "../utils/VideoChannelUtils";
 import { timeout } from "../utils/promise";
 import WidgetUtils from "../utils/WidgetUtils";
+import { UPDATE_EVENT } from "./AsyncStore";
+import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
 
 export enum VideoChannelEvent {
     StartConnect = "start_connect",
@@ -45,7 +47,7 @@ export interface IJitsiParticipant {
 /*
  * Holds information about the currently active video channel.
  */
-export default class VideoChannelStore extends EventEmitter {
+export default class VideoChannelStore extends AsyncStoreWithClient<null> {
     private static _instance: VideoChannelStore;
     private static readonly TIMEOUT_MS = 8000;
 
@@ -56,7 +58,14 @@ export default class VideoChannelStore extends EventEmitter {
         return VideoChannelStore._instance;
     }
 
-    private readonly cli = MatrixClientPeg.get();
+    constructor() {
+        super(defaultDispatcher);
+    }
+
+    protected async onAction(payload: ActionPayload): Promise<void> {
+        // nothing to do
+    }
+
     private activeChannel: ClientWidgetApi;
 
     private _roomId: string;
@@ -76,10 +85,26 @@ export default class VideoChannelStore extends EventEmitter {
 
         const jitsi = getVideoChannel(roomId);
         if (!jitsi) throw new Error(`No video channel in room ${roomId}`);
-
-        // TODO: Wait for messaging
-        const messaging = WidgetMessagingStore.instance.getMessagingForUid(WidgetUtils.getWidgetUid(jitsi));
-        if (!messaging) throw new Error(`Failed to bind video channel in room ${roomId}`);
+        const jitsiUid = WidgetUtils.getWidgetUid(jitsi);
+
+        let messaging = WidgetMessagingStore.instance.getMessagingForUid(jitsiUid);
+        if (!messaging) {
+            // The widget might still be initializing, so wait for it
+            let messagingListener;
+            const getMessaging = new Promise<void>(resolve => {
+                messagingListener = (uid: string, widgetApi: ClientWidgetApi) => {
+                    if (uid === jitsiUid) {
+                        messaging = widgetApi;
+                        resolve();
+                    }
+                };
+                WidgetMessagingStore.instance.on(UPDATE_EVENT, messagingListener);
+            });
+
+            const timedOut = await timeout(getMessaging, false, VideoChannelStore.TIMEOUT_MS) === false;
+            WidgetMessagingStore.instance.off(UPDATE_EVENT, messagingListener);
+            if (timedOut) throw new Error(`Failed to bind video channel in room ${roomId}`);
+        }
 
         this.activeChannel = messaging;
         this.roomId = roomId;
@@ -113,7 +138,7 @@ export default class VideoChannelStore extends EventEmitter {
         this.emit(VideoChannelEvent.Connect, roomId);
 
         // Tell others that we're connected, by adding our device to room state
-        this.updateDevices(roomId, devices => Array.from(new Set(devices).add(this.cli.getDeviceId())));
+        this.updateDevices(roomId, devices => Array.from(new Set(devices).add(this.matrixClient.getDeviceId())));
     };
 
     public disconnect = async () => {
@@ -145,12 +170,12 @@ export default class VideoChannelStore extends EventEmitter {
     };
 
     private updateDevices = async (roomId: string, fn: (devices: string[]) => string[]) => {
-        const room = this.cli.getRoom(roomId);
-        const devicesState = room.currentState.getStateEvents(VIDEO_CHANNEL_MEMBER, this.cli.getUserId());
+        const room = this.matrixClient.getRoom(roomId);
+        const devicesState = room.currentState.getStateEvents(VIDEO_CHANNEL_MEMBER, this.matrixClient.getUserId());
         const devices = devicesState?.getContent<IVideoChannelMemberContent>()?.devices ?? [];
 
-        await this.cli.sendStateEvent(
-            roomId, VIDEO_CHANNEL_MEMBER, { devices: fn(devices) }, this.cli.getUserId(),
+        await this.matrixClient.sendStateEvent(
+            roomId, VIDEO_CHANNEL_MEMBER, { devices: fn(devices) }, this.matrixClient.getUserId(),
         );
     };
 
@@ -171,7 +196,7 @@ export default class VideoChannelStore extends EventEmitter {
         // Tell others that we're disconnected, by removing our device from room state
         await this.updateDevices(roomId, devices => {
             const devicesSet = new Set(devices);
-            devicesSet.delete(this.cli.getDeviceId());
+            devicesSet.delete(this.matrixClient.getDeviceId());
             return Array.from(devicesSet);
         });
     };

src/stores/widgets/WidgetMessagingStore.ts

@@ -21,6 +21,7 @@ import defaultDispatcher from "../../dispatcher/dispatcher";
 import { ActionPayload } from "../../dispatcher/payloads";
 import { EnhancedMap } from "../../utils/maps";
 import WidgetUtils from "../../utils/WidgetUtils";
+import { UPDATE_EVENT } from "../AsyncStore";
 
 /**
  * Temporary holding store for widget messaging instances. This is eventually
@@ -51,7 +52,9 @@ export class WidgetMessagingStore extends AsyncStoreWithClient<unknown> {
 
     public storeMessaging(widget: Widget, roomId: string, widgetApi: ClientWidgetApi) {
         this.stopMessaging(widget, roomId);
-        this.widgetMap.set(WidgetUtils.calcWidgetUid(widget.id, roomId), widgetApi);
+        const uid = WidgetUtils.calcWidgetUid(widget.id, roomId);
+        this.widgetMap.set(uid, widgetApi);
+        this.emit(UPDATE_EVENT, uid, widgetApi);
     }
 
     public stopMessaging(widget: Widget, roomId: string) {

test/stores/VideoChannelStore-test.ts

@@ -14,81 +14,115 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ClientWidgetApi, MatrixWidgetType } from "matrix-widget-api";
+import { mocked } from "jest-mock";
+import { Widget, ClientWidgetApi, MatrixWidgetType, IWidgetApiRequest } from "matrix-widget-api";
 
-import { stubClient } from "../test-utils";
-import WidgetStore from "../../src/stores/WidgetStore";
+import { stubClient, setupAsyncStoreWithClient } from "../test-utils";
+import { MatrixClientPeg } from "../../src/MatrixClientPeg";
+import WidgetStore, { IApp } from "../../src/stores/WidgetStore";
 import { WidgetMessagingStore } from "../../src/stores/widgets/WidgetMessagingStore";
 import { ElementWidgetActions } from "../../src/stores/widgets/ElementWidgetActions";
 import VideoChannelStore, { VideoChannelEvent } from "../../src/stores/VideoChannelStore";
 import { VIDEO_CHANNEL } from "../../src/utils/VideoChannelUtils";
 
 describe("VideoChannelStore", () => {
+    const store = VideoChannelStore.instance;
+
+    const widget = { id: VIDEO_CHANNEL } as unknown as Widget;
+    const app = {
+        id: VIDEO_CHANNEL,
+        eventId: "$1:example.org",
+        roomId: "!1:example.org",
+        type: MatrixWidgetType.JitsiMeet,
+        url: "",
+        name: "Video channel",
+        creatorUserId: "@alice:example.org",
+        avatar_url: null,
+    } as IApp;
+
     // Set up mocks to simulate the remote end of the widget API
-    let messageSent;
-    let messageSendMock;
-    let onceMock;
+    let messageSent: Promise<void>;
+    let messageSendMock: () => void;
+    let onceMock: (action: string, listener: (ev: CustomEvent<IWidgetApiRequest>) => void) => void;
+    let messaging: ClientWidgetApi;
     beforeEach(() => {
         stubClient();
-        let resolveMessageSent;
+        const cli = MatrixClientPeg.get();
+        setupAsyncStoreWithClient(WidgetMessagingStore.instance, cli);
+        setupAsyncStoreWithClient(store, cli);
+
+        let resolveMessageSent: () => void;
         messageSent = new Promise(resolve => resolveMessageSent = resolve);
         messageSendMock = jest.fn().mockImplementation(() => resolveMessageSent());
         onceMock = jest.fn();
 
-        jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([{
-            id: VIDEO_CHANNEL,
-            eventId: "$1:example.org",
-            roomId: "!1:example.org",
-            type: MatrixWidgetType.JitsiMeet,
-            url: "",
-            name: "Video channel",
-            creatorUserId: "@alice:example.org",
-            avatar_url: null,
-        }]);
-        jest.spyOn(WidgetMessagingStore.instance, "getMessagingForUid").mockReturnValue({
+        jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([app]);
+        messaging = {
             on: () => {},
             off: () => {},
+            stop: () => {},
             once: onceMock,
             transport: {
                 send: messageSendMock,
                 reply: () => {},
             },
-        } as unknown as ClientWidgetApi);
+        } as unknown as ClientWidgetApi;
     });
 
-    it("connects and disconnects", async () => {
-        const store = VideoChannelStore.instance;
-
-        expect(store.roomId).toBeFalsy();
-
-        store.connect("!1:example.org", null, null);
+    const confirmConnect = async () => {
         // Wait for the store to contact the widget API
         await messageSent;
         // Then, locate the callback that will confirm the join
-        const [, join] = onceMock.mock.calls.find(([action]) =>
+        const [, join] = mocked(onceMock).mock.calls.find(([action]) =>
             action === `action:${ElementWidgetActions.JoinCall}`,
         );
         // Confirm the join, and wait for the store to update
         const waitForConnect = new Promise<void>(resolve =>
             store.once(VideoChannelEvent.Connect, resolve),
         );
-        join({ detail: {} });
+        join({ detail: {} } as unknown as CustomEvent<IWidgetApiRequest>);
         await waitForConnect;
+    };
 
-        expect(store.roomId).toEqual("!1:example.org");
-
-        store.disconnect();
+    const confirmDisconnect = async () => {
         // Locate the callback that will perform the hangup
-        const [, hangup] = onceMock.mock.calls.find(([action]) =>
+        const [, hangup] = mocked(onceMock).mock.calls.find(([action]) =>
             action === `action:${ElementWidgetActions.HangupCall}`,
         );
         // Hangup and wait for the store, once again
         const waitForHangup = new Promise<void>(resolve =>
             store.once(VideoChannelEvent.Disconnect, resolve),
         );
-        hangup({ detail: {} });
+        hangup({ detail: {} } as unknown as CustomEvent<IWidgetApiRequest>);
         await waitForHangup;
+    };
+
+    it("connects and disconnects", async () => {
+        WidgetMessagingStore.instance.storeMessaging(widget, "!1:example.org", messaging);
+        expect(store.roomId).toBeFalsy();
+        expect(store.connected).toEqual(false);
+
+        store.connect("!1:example.org", null, null);
+        await confirmConnect();
+        expect(store.roomId).toEqual("!1:example.org");
+        expect(store.connected).toEqual(true);
 
+        store.disconnect();
+        await confirmDisconnect();
         expect(store.roomId).toBeFalsy();
+        expect(store.connected).toEqual(false);
+        WidgetMessagingStore.instance.stopMessaging(widget, "!1:example.org");
+    });
+
+    it("waits for messaging when connecting", async () => {
+        store.connect("!1:example.org", null, null);
+        WidgetMessagingStore.instance.storeMessaging(widget, "!1:example.org", messaging);
+        await confirmConnect();
+        expect(store.roomId).toEqual("!1:example.org");
+        expect(store.connected).toEqual(true);
+
+        store.disconnect();
+        await confirmDisconnect();
+        WidgetMessagingStore.instance.stopMessaging(widget, "!1:example.org");
     });
 });