Show a lobby screen in video rooms (#8287)

* Show a lobby screen in video rooms

* Add connecting state

* Test VideoRoomView

* Test VideoLobby

* Get the local video stream with useAsyncMemo

* Clean up code review nits

* Explicitly state what !important is overriding

* Use spacing variables

* Wait for video channel messaging

* Update join button copy

* Show frame on both the lobby and widget

* Force dark theme for video lobby

* Wait for the widget to be ready

* Make VideoChannelStore constructor private

* Allow video lobby to shrink

* Add invite button to video room header

* Show connected members on lobby screen

* Make avatars in video lobby clickable

* Increase video channel store timeout

* Fix Jitsi Meet getting wedged on startup in Chrome and Safari

* Revert "Fix Jitsi Meet getting wedged on startup in Chrome and Safari"

This reverts commit 9f77b8c227.

* Disable device buttons while connecting

* Factor RoomFacePile into a separate file

* Fix i18n lint

* Fix switching video channels while connected

* Properly limit number of connected members in face pile

* Fix CSS lint

test/components/structures/VideoRoomView-test.tsx

@@ -0,0 +1,78 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { mount } from "enzyme";
+import { act } from "react-dom/test-utils";
+import { MatrixWidgetType } from "matrix-widget-api";
+
+import { stubClient, stubVideoChannelStore, mkRoom, wrapInMatrixClientContext } from "../../test-utils";
+import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+import { VIDEO_CHANNEL } from "../../../src/utils/VideoChannelUtils";
+import WidgetStore from "../../../src/stores/WidgetStore";
+import _VideoRoomView from "../../../src/components/structures/VideoRoomView";
+import VideoLobby from "../../../src/components/views/voip/VideoLobby";
+import AppTile from "../../../src/components/views/elements/AppTile";
+
+const VideoRoomView = wrapInMatrixClientContext(_VideoRoomView);
+
+describe("VideoRoomView", () => {
+    stubClient();
+    jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([{
+        id: VIDEO_CHANNEL,
+        eventId: "$1:example.org",
+        roomId: "!1:example.org",
+        type: MatrixWidgetType.JitsiMeet,
+        url: "https://example.org",
+        name: "Video channel",
+        creatorUserId: "@alice:example.org",
+        avatar_url: null,
+    }]);
+    Object.defineProperty(navigator, "mediaDevices", {
+        value: { enumerateDevices: () => [] },
+    });
+
+    const cli = MatrixClientPeg.get();
+    const room = mkRoom(cli, "!1:example.org");
+
+    let store;
+    beforeEach(() => {
+        store = stubVideoChannelStore();
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("shows lobby and keeps widget loaded when disconnected", async () => {
+        const view = mount(<VideoRoomView room={room} resizing={false} />);
+        // Wait for state to settle
+        await act(async () => Promise.resolve());
+
+        expect(view.find(VideoLobby).exists()).toEqual(true);
+        expect(view.find(AppTile).exists()).toEqual(true);
+    });
+
+    it("only shows widget when connected", async () => {
+        store.connect("!1:example.org");
+        const view = mount(<VideoRoomView room={room} resizing={false} />);
+        // Wait for state to settle
+        await act(async () => Promise.resolve());
+
+        expect(view.find(VideoLobby).exists()).toEqual(false);
+        expect(view.find(AppTile).exists()).toEqual(true);
+    });
+});

test/components/views/rooms/RoomHeader-test.tsx

@@ -176,6 +176,7 @@ function render(room: Room, roomContext?: Partial<IRoomState>): ReactWrapper {
                 room={room}
                 inRoom={true}
                 onSearchClick={() => {}}
+                onInviteClick={null}
                 onForgetClick={() => {}}
                 onCallPlaced={(_type) => { }}
                 onAppsClick={() => {}}

test/components/views/rooms/RoomTile-test.tsx

@@ -18,34 +18,23 @@ import React from "react";
 import { mount } from "enzyme";
 import { act } from "react-dom/test-utils";
 import { mocked } from "jest-mock";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import {
     stubClient,
     mockStateEventImplementation,
     mkRoom,
-    mkEvent,
+    mkVideoChannelMember,
     stubVideoChannelStore,
 } from "../../../test-utils";
 import RoomTile from "../../../../src/components/views/rooms/RoomTile";
 import SettingsStore from "../../../../src/settings/SettingsStore";
 import { DefaultTagID } from "../../../../src/stores/room-list/models";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
-import { VIDEO_CHANNEL_MEMBER } from "../../../../src/utils/VideoChannelUtils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import PlatformPeg from "../../../../src/PlatformPeg";
 import BasePlatform from "../../../../src/BasePlatform";
 
-const mkVideoChannelMember = (userId: string, devices: string[]): MatrixEvent => mkEvent({
-    event: true,
-    type: VIDEO_CHANNEL_MEMBER,
-    room: "!1:example.org",
-    user: userId,
-    skey: userId,
-    content: { devices },
-});
-
 describe("RoomTile", () => {
     jest.spyOn(PlatformPeg, 'get')
         .mockReturnValue({ overrideBrowserShortcuts: () => false } as unknown as BasePlatform);
@@ -85,6 +74,10 @@ describe("RoomTile", () => {
             );
             expect(tile.find(".mx_RoomTile_videoIndicator").text()).toEqual("Video");
 
+            act(() => { store.startConnect("!1:example.org"); });
+            tile.update();
+            expect(tile.find(".mx_RoomTile_videoIndicator").text()).toEqual("Connecting...");
+
             act(() => { store.connect("!1:example.org"); });
             tile.update();
             expect(tile.find(".mx_RoomTile_videoIndicator").text()).toEqual("Connected");

test/components/views/voip/VideoLobby-test.tsx

@@ -0,0 +1,167 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { mount } from "enzyme";
+import { act } from "react-dom/test-utils";
+import { mocked } from "jest-mock";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+
+import {
+    stubClient,
+    stubVideoChannelStore,
+    mkRoom,
+    mkVideoChannelMember,
+    mockStateEventImplementation,
+} from "../../../test-utils";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import FacePile from "../../../../src/components/views/elements/FacePile";
+import MemberAvatar from "../../../../src/components/views/avatars/MemberAvatar";
+import VideoLobby from "../../../../src/components/views/voip/VideoLobby";
+
+describe("VideoLobby", () => {
+    stubClient();
+    Object.defineProperty(navigator, "mediaDevices", {
+        value: {
+            enumerateDevices: jest.fn(),
+            getUserMedia: () => null,
+        },
+    });
+    jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
+
+    const cli = MatrixClientPeg.get();
+    const room = mkRoom(cli, "!1:example.org");
+
+    let store;
+    beforeEach(() => {
+        store = stubVideoChannelStore();
+        mocked(navigator.mediaDevices.enumerateDevices).mockResolvedValue([]);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe("connected members", () => {
+        it("hides when no one is connected", async () => {
+            const lobby = mount(<VideoLobby room={room} />);
+            // Wait for state to settle
+            await act(() => Promise.resolve());
+            lobby.update();
+
+            expect(lobby.find(".mx_VideoLobby_connectedMembers").exists()).toEqual(false);
+        });
+
+        it("is shown when someone is connected", async () => {
+            mocked(room.currentState).getStateEvents.mockImplementation(mockStateEventImplementation([
+                // A user connected from 2 devices
+                mkVideoChannelMember("@alice:example.org", ["device 1", "device 2"]),
+                // A disconnected user
+                mkVideoChannelMember("@bob:example.org", []),
+                // A user that claims to have a connected device, but has left the room
+                mkVideoChannelMember("@chris:example.org", ["device 1"]),
+            ]));
+
+            mocked(room.currentState).getMember.mockImplementation(userId => ({
+                userId,
+                membership: userId === "@chris:example.org" ? "leave" : "join",
+                name: userId,
+                rawDisplayName: userId,
+                roomId: "!1:example.org",
+                getAvatarUrl: () => {},
+                getMxcAvatarUrl: () => {},
+            }) as unknown as RoomMember);
+
+            const lobby = mount(<VideoLobby room={room} />);
+            // Wait for state to settle
+            await act(() => Promise.resolve());
+            lobby.update();
+
+            // Only Alice should display as connected
+            const memberText = lobby.find(".mx_VideoLobby_connectedMembers").children().at(0).text();
+            expect(memberText).toEqual("1 person connected");
+            expect(lobby.find(FacePile).find(MemberAvatar).props().member.userId).toEqual("@alice:example.org");
+        });
+    });
+
+    describe("device buttons", () => {
+        it("hides when no devices are available", async () => {
+            const lobby = mount(<VideoLobby room={room} />);
+            // Wait for state to settle
+            await act(() => Promise.resolve());
+            lobby.update();
+
+            expect(lobby.find("DeviceButton").children().exists()).toEqual(false);
+        });
+
+        it("hides device list when only one device is available", async () => {
+            mocked(navigator.mediaDevices.enumerateDevices).mockResolvedValue([{
+                deviceId: "1",
+                groupId: "1",
+                label: "Webcam",
+                kind: "videoinput",
+                toJSON: () => {},
+            }]);
+
+            const lobby = mount(<VideoLobby room={room} />);
+            // Wait for state to settle
+            await act(() => Promise.resolve());
+            lobby.update();
+
+            expect(lobby.find(".mx_VideoLobby_deviceListButton").exists()).toEqual(false);
+        });
+
+        it("shows device list when multiple devices are available", async () => {
+            mocked(navigator.mediaDevices.enumerateDevices).mockResolvedValue([
+                {
+                    deviceId: "1",
+                    groupId: "1",
+                    label: "Front camera",
+                    kind: "videoinput",
+                    toJSON: () => {},
+                },
+                {
+                    deviceId: "2",
+                    groupId: "1",
+                    label: "Back camera",
+                    kind: "videoinput",
+                    toJSON: () => {},
+                },
+            ]);
+
+            const lobby = mount(<VideoLobby room={room} />);
+            // Wait for state to settle
+            await act(() => Promise.resolve());
+            lobby.update();
+
+            expect(lobby.find(".mx_VideoLobby_deviceListButton").exists()).toEqual(true);
+        });
+    });
+
+    describe("join button", () => {
+        it("works", async () => {
+            const lobby = mount(<VideoLobby room={room} />);
+            // Wait for state to settle
+            await act(() => Promise.resolve());
+            lobby.update();
+
+            act(() => {
+                lobby.find("AccessibleButton.mx_VideoLobby_joinButton").simulate("click");
+            });
+            expect(store.connect).toHaveBeenCalled();
+        });
+    });
+});

test/stores/VideoChannelStore-test.ts

@@ -14,24 +14,22 @@ 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, mkRoom } from "../test-utils";
+import { stubClient, setupAsyncStoreWithClient } from "../test-utils";
 import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import WidgetStore from "../../src/stores/WidgetStore";
-import ActiveWidgetStore from "../../src/stores/ActiveWidgetStore";
+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", () => {
-    stubClient();
-    mkRoom(MatrixClientPeg.get(), "!1:example.org");
+    const store = VideoChannelStore.instance;
 
-    const videoStore = VideoChannelStore.instance;
-    const widgetStore = ActiveWidgetStore.instance;
-
-    jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([{
+    const widget = { id: VIDEO_CHANNEL } as unknown as Widget;
+    const app = {
         id: VIDEO_CHANNEL,
         eventId: "$1:example.org",
         roomId: "!1:example.org",
@@ -40,43 +38,103 @@ describe("VideoChannelStore", () => {
         name: "Video channel",
         creatorUserId: "@alice:example.org",
         avatar_url: null,
-    }]);
-    jest.spyOn(WidgetMessagingStore.instance, "getMessagingForUid").mockReturnValue({
-        on: () => {},
-        off: () => {},
-        once: () => {},
-        transport: {
-            send: () => {},
-            reply: () => {},
-        },
-    } as unknown as ClientWidgetApi);
+    } as IApp;
 
+    // Set up mocks to simulate the remote end of the widget API
+    let messageSent: Promise<void>;
+    let messageSendMock: () => void;
+    let onMock: (action: string, listener: (ev: CustomEvent<IWidgetApiRequest>) => void) => void;
+    let onceMock: (action: string, listener: (ev: CustomEvent<IWidgetApiRequest>) => void) => void;
+    let messaging: ClientWidgetApi;
     beforeEach(() => {
-        videoStore.start();
+        stubClient();
+        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());
+        onMock = jest.fn();
+        onceMock = jest.fn();
+
+        jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([app]);
+        messaging = {
+            on: onMock,
+            off: () => {},
+            stop: () => {},
+            once: onceMock,
+            transport: {
+                send: messageSendMock,
+                reply: () => {},
+            },
+        } as unknown as ClientWidgetApi;
     });
 
-    afterEach(() => {
-        videoStore.stop();
-        jest.clearAllMocks();
-    });
-
-    it("tracks connection state", async () => {
-        expect(videoStore.roomId).toBeFalsy();
+    const widgetReady = () => {
+        // Tell the WidgetStore that the widget is ready
+        const [, ready] = mocked(onceMock).mock.calls.find(([action]) =>
+            action === `action:${ElementWidgetActions.WidgetReady}`,
+        );
+        ready({ detail: {} } as unknown as CustomEvent<IWidgetApiRequest>);
+    };
 
+    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] = mocked(onMock).mock.calls.find(([action]) =>
+            action === `action:${ElementWidgetActions.JoinCall}`,
+        );
+        // Confirm the join, and wait for the store to update
         const waitForConnect = new Promise<void>(resolve =>
-            videoStore.once(VideoChannelEvent.Connect, resolve),
+            store.once(VideoChannelEvent.Connect, resolve),
         );
-        widgetStore.setWidgetPersistence(VIDEO_CHANNEL, "!1:example.org", true);
+        join({ detail: {} } as unknown as CustomEvent<IWidgetApiRequest>);
         await waitForConnect;
+    };
 
-        expect(videoStore.roomId).toEqual("!1:example.org");
-
-        const waitForDisconnect = new Promise<void>(resolve =>
-            videoStore.once(VideoChannelEvent.Disconnect, resolve),
+    const confirmDisconnect = async () => {
+        // Locate the callback that will perform the hangup
+        const [, hangup] = mocked(onceMock).mock.calls.find(([action]) =>
+            action === `action:${ElementWidgetActions.HangupCall}`,
         );
-        widgetStore.setWidgetPersistence(VIDEO_CHANNEL, "!1:example.org", false);
-        await waitForDisconnect;
+        // Hangup and wait for the store, once again
+        const waitForHangup = new Promise<void>(resolve =>
+            store.once(VideoChannelEvent.Disconnect, resolve),
+        );
+        hangup({ detail: {} } as unknown as CustomEvent<IWidgetApiRequest>);
+        await waitForHangup;
+    };
 
-        expect(videoStore.roomId).toBeFalsy();
+    it("connects and disconnects", async () => {
+        WidgetMessagingStore.instance.storeMessaging(widget, "!1:example.org", messaging);
+        widgetReady();
+        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);
+        widgetReady();
+        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");
     });
 });

test/test-utils/video.ts

@@ -15,21 +15,34 @@ limitations under the License.
 */
 
 import { EventEmitter } from "events";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
-import VideoChannelStore, { VideoChannelEvent } from "../../src/stores/VideoChannelStore";
+import { mkEvent } from "./test-utils";
+import { VIDEO_CHANNEL_MEMBER } from "../../src/utils/VideoChannelUtils";
+import VideoChannelStore, { VideoChannelEvent, IJitsiParticipant } from "../../src/stores/VideoChannelStore";
 
 class StubVideoChannelStore extends EventEmitter {
     private _roomId: string;
     public get roomId(): string { return this._roomId; }
+    private _connected: boolean;
+    public get connected(): boolean { return this._connected; }
+    public get participants(): IJitsiParticipant[] { return []; }
 
-    public connect = (roomId: string) => {
+    public startConnect = (roomId: string) => {
         this._roomId = roomId;
-        this.emit(VideoChannelEvent.Connect);
+        this.emit(VideoChannelEvent.StartConnect, roomId);
     };
-    public disconnect = () => {
+    public connect = jest.fn((roomId: string) => {
+        this._roomId = roomId;
+        this._connected = true;
+        this.emit(VideoChannelEvent.Connect, roomId);
+    });
+    public disconnect = jest.fn(() => {
+        const roomId = this._roomId;
         this._roomId = null;
-        this.emit(VideoChannelEvent.Disconnect);
-    };
+        this._connected = false;
+        this.emit(VideoChannelEvent.Disconnect, roomId);
+    });
 }
 
 export const stubVideoChannelStore = (): StubVideoChannelStore => {
@@ -37,3 +50,12 @@ export const stubVideoChannelStore = (): StubVideoChannelStore => {
     jest.spyOn(VideoChannelStore, "instance", "get").mockReturnValue(store as unknown as VideoChannelStore);
     return store;
 };
+
+export const mkVideoChannelMember = (userId: string, devices: string[]): MatrixEvent => mkEvent({
+    event: true,
+    type: VIDEO_CHANNEL_MEMBER,
+    room: "!1:example.org",
+    user: userId,
+    skey: userId,
+    content: { devices },
+});