Show a lobby screen in video rooms

res/css/_components.scss

@@ -45,6 +45,7 @@
 @import "./structures/_ToastContainer.scss";
 @import "./structures/_UploadBar.scss";
 @import "./structures/_UserMenu.scss";
+@import "./structures/_VideoRoomView.scss";
 @import "./structures/_ViewSource.scss";
 @import "./structures/auth/_CompleteSecurity.scss";
 @import "./structures/auth/_Login.scss";
@@ -316,3 +317,4 @@
 @import "./views/voip/_DialPadModal.scss";
 @import "./views/voip/_PiPContainer.scss";
 @import "./views/voip/_VideoFeed.scss";
+@import "./views/voip/_VideoLobby.scss";

res/css/structures/_RoomView.scss

@@ -211,21 +211,9 @@ hr.mx_RoomView_myReadMarker {
     opacity: 1;
 }
 
-// Immersive widgets
-.mx_RoomView_immersive {
-    .mx_RoomHeader_wrapper {
-        border: unset;
-    }
-
-    .mx_AppTile {
-        margin: $container-gap-width;
-        margin-right: calc($container-gap-width / 2);
-        width: auto;
-        height: 100%;
-        padding-top: 33px; // to match the right panel chat heading
-
-        border-radius: 8px;
-    }
+// Rooms with immersive content
+.mx_RoomView_immersive .mx_RoomHeader_wrapper {
+    border: unset;
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {

res/css/structures/_VideoRoomView.scss

@@ -0,0 +1,37 @@
+/*
+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.
+*/
+
+.mx_VideoRoomView {
+    flex-grow: 1;
+    min-height: 0;
+
+    display: flex;
+    flex-direction: column;
+    padding: $container-gap-width;
+    padding-right: calc($container-gap-width / 2);
+
+    .mx_AppTile {
+        width: auto;
+        height: 100%;
+        padding-top: 33px; // to match the right panel chat heading
+        border-radius: 8px;
+    }
+
+    // While the lobby is shown, the widget needs to stay loaded but hidden in the background
+    .mx_VideoLobby ~ .mx_AppTile {
+        display: none;
+    }
+}

res/css/views/voip/_VideoLobby.scss

@@ -0,0 +1,161 @@
+/*
+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.
+*/
+
+.mx_VideoLobby {
+    height: 100%;
+    padding: 12px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 44px;
+
+    .mx_VideoLobby_preview {
+        position: relative;
+        width: 100%;
+        max-width: 800px;
+        aspect-ratio: 1.5;
+        background-color: $system;
+
+        border-radius: 20px;
+        overflow: hidden;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .mx_BaseAvatar {
+            margin: 20px;
+
+            // Responsive sizing
+            width: unset !important;
+            height: unset !important;
+            min-width: 0;
+            min-height: 0;
+            flex: 0 1 200px;
+        }
+
+        video {
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+            transform: scaleX(-1); // flip the image
+            background-color: black;
+        }
+
+        .mx_VideoLobby_controls {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 66px;
+
+            background-color: rgba($background, 0.9);
+
+            display: flex;
+            justify-content: center;
+            gap: 24px;
+
+            .mx_VideoLobby_deviceButtonWrapper {
+                position: relative;
+                margin: 6px 0 10px;
+
+                .mx_VideoLobby_deviceButton {
+                    $size: 50px;
+
+                    width: $size;
+                    height: $size;
+
+                    background-color: $primary-content;
+                    border-radius: calc($size / 2);
+
+                    &::before {
+                        content: '';
+                        display: inline-block;
+                        mask-repeat: no-repeat;
+                        mask-size: 20px;
+                        mask-position: center;
+                        background-color: $system;
+                        height: 100%;
+                        width: 100%;
+                    }
+
+                    &.mx_VideoLobby_deviceButton_audio::before {
+                        mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
+                    }
+
+                    &.mx_VideoLobby_deviceButton_video::before {
+                        mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
+                    }
+                }
+
+                .mx_VideoLobby_deviceListButton {
+                    $size: 15px;
+
+                    position: absolute;
+                    bottom: 0;
+                    right: -2.5px;
+                    width: $size;
+                    height: $size;
+
+                    background-color: $primary-content;
+                    border-radius: calc($size / 2);
+
+                    &::before {
+                        content: '';
+                        display: inline-block;
+                        mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+                        mask-size: $size;
+                        mask-position: center;
+                        background-color: $system;
+                        height: 100%;
+                        width: 100%;
+                    }
+                }
+
+                &.mx_VideoLobby_deviceButtonWrapper_active {
+                    .mx_VideoLobby_deviceButton, .mx_VideoLobby_deviceListButton {
+                        background-color: $system;
+
+                        &::before {
+                            background-color: $primary-content;
+                        }
+                    }
+
+                    .mx_VideoLobby_deviceButton {
+                        &.mx_VideoLobby_deviceButton_audio::before {
+                            mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
+                        }
+
+                        &.mx_VideoLobby_deviceButton_video::before {
+                            mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .mx_VideoLobby_joinButton {
+        padding-left: 50px;
+        padding-right: 50px;
+    }
+}

src/Lifecycle.ts

@@ -36,7 +36,6 @@ import dis from './dispatcher/dispatcher';
 import DMRoomMap from './utils/DMRoomMap';
 import Modal from './Modal';
 import ActiveWidgetStore from './stores/ActiveWidgetStore';
-import VideoChannelStore from "./stores/VideoChannelStore";
 import PlatformPeg from "./PlatformPeg";
 import { sendLoginRequest } from "./Login";
 import * as StorageManager from './utils/StorageManager';
@@ -807,7 +806,6 @@ async function startMatrixClient(startSyncing = true): Promise<void> {
     IntegrationManagers.sharedInstance().startWatching();
     ActiveWidgetStore.instance.start();
     CallHandler.instance.start();
-    if (SettingsStore.getValue("feature_video_rooms")) VideoChannelStore.instance.start();
 
     // Start Mjolnir even though we haven't checked the feature flag yet. Starting
     // the thing just wastes CPU cycles, but should result in no actual functionality
@@ -921,7 +919,6 @@ export function stopMatrixClient(unsetClient = true): void {
     UserActivity.sharedInstance().stop();
     TypingStore.sharedInstance().reset();
     Presence.stop();
-    if (SettingsStore.getValue("feature_video_rooms")) VideoChannelStore.instance.stop();
     ActiveWidgetStore.instance.stop();
     IntegrationManagers.sharedInstance().stopWatching();
     Mjolnir.sharedInstance().stop();

src/components/structures/RoomView.tsx

@@ -74,8 +74,7 @@ import EffectsOverlay from "../views/elements/EffectsOverlay";
 import { containsEmoji } from '../../effects/utils';
 import { CHAT_EFFECTS } from '../../effects';
 import WidgetStore from "../../stores/WidgetStore";
-import { getVideoChannel } from "../../utils/VideoChannelUtils";
-import AppTile from "../views/elements/AppTile";
+import VideoRoomView from "./VideoRoomView";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import Notifier from "../../Notifier";
 import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast";
@@ -2154,18 +2153,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 </>;
                 break;
             case MainSplitContentType.Video: {
-                const app = getVideoChannel(this.state.room.roomId);
-                if (!app) break;
                 mainSplitContentClassName = "mx_MainSplit_video";
-                mainSplitBody = <AppTile
-                    app={app}
-                    room={this.state.room}
-                    userId={this.context.credentials.userId}
-                    creatorUserId={app.creatorUserId}
-                    waitForIframeLoad={app.waitForIframeLoad}
-                    showMenubar={false}
-                    pointerEvents={this.state.resizing ? "none" : null}
-                />;
+                mainSplitBody = <>
+                    <VideoRoomView room={this.state.room} resizing={this.state.resizing} />
+                    { previewBar }
+                </>;
             }
         }
         const mainSplitContentClasses = classNames("mx_RoomView_body", mainSplitContentClassName);

src/components/structures/VideoRoomView.tsx

@@ -0,0 +1,67 @@
+/*
+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, { FC, useContext, useState, useMemo } from "react";
+import { logger } from "matrix-js-sdk/src/logger";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import MatrixClientContext from "../../contexts/MatrixClientContext";
+import { useEventEmitter } from "../../hooks/useEventEmitter";
+import { getVideoChannel } from "../../utils/VideoChannelUtils";
+import WidgetStore from "../../stores/WidgetStore";
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import VideoChannelStore, { VideoChannelEvent } from "../../stores/VideoChannelStore";
+import AppTile from "../views/elements/AppTile";
+import VideoLobby from "../views/voip/VideoLobby";
+
+const VideoRoomView: FC<{ room: Room, resizing: boolean }> = ({ room, resizing }) => {
+    const cli = useContext(MatrixClientContext);
+    const store = VideoChannelStore.instance;
+
+    // In case we mount before the WidgetStore knows about our Jitsi widget
+    const [widgetLoaded, setWidgetLoaded] = useState(false);
+    useEventEmitter(WidgetStore.instance, UPDATE_EVENT, (roomId: string) => {
+        if (roomId === null || roomId === room.roomId) setWidgetLoaded(true);
+    });
+
+    const app = useMemo(() => {
+        const app = getVideoChannel(room.roomId);
+        if (!app) logger.warn(`No video channel for room ${room.roomId}`);
+        return app;
+    }, [room, widgetLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const [connected, setConnected] = useState(store.connected && store.roomId === room.roomId);
+    useEventEmitter(store, VideoChannelEvent.Connect, () => setConnected(store.roomId === room.roomId));
+    useEventEmitter(store, VideoChannelEvent.Disconnect, () => setConnected(false));
+
+    if (!app) return null;
+
+    return <div className="mx_VideoRoomView">
+        { connected ? null : <VideoLobby room={room} /> }
+        { /* We render the widget even if we're disconnected, so it stays loaded */ }
+        <AppTile
+            app={app}
+            room={room}
+            userId={cli.credentials.userId}
+            creatorUserId={app.creatorUserId}
+            waitForIframeLoad={app.waitForIframeLoad}
+            showMenubar={false}
+            pointerEvents={resizing ? "none" : null}
+        />
+    </div>;
+};
+
+export default VideoRoomView;