Show a lobby screen in video rooms

res/css/_components.scss

@@ -47,6 +47,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";
@@ -318,3 +319,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,41 @@
+/*
+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;
+    margin: $container-gap-width;
+    margin-right: calc($container-gap-width / 2);
+
+    background-color: $header-panel-bg-color;
+    padding-top: 33px; // to match the right panel chat heading
+    border: 8px solid $header-panel-bg-color;
+    border-radius: 8px;
+
+    .mx_AppTile {
+        width: auto;
+        height: 100%;
+        border: none;
+    }
+
+    // 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,162 @@
+/*
+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: $spacing-12;
+    background-color: $video-lobby-background;
+    border-radius: 8px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-40;
+
+    .mx_VideoLobby_preview {
+        position: relative;
+        width: 100%;
+        max-width: 800px;
+        aspect-ratio: 1.5;
+        background-color: $video-lobby-system;
+
+        border-radius: 20px;
+        overflow: hidden;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .mx_BaseAvatar {
+            margin: $spacing-20;
+
+            // Override the explicit dimensions on the element so that this gets sized responsively
+            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;
+
+            background-color: rgba($video-lobby-background, 0.9);
+
+            display: flex;
+            justify-content: center;
+            gap: $spacing-24;
+
+            .mx_VideoLobby_deviceButtonWrapper {
+                position: relative;
+                margin: 6px 0 10px;
+
+                .mx_VideoLobby_deviceButton {
+                    $size: 50px;
+
+                    width: $size;
+                    height: $size;
+
+                    background-color: $video-lobby-primary-content;
+                    border-radius: calc($size / 2);
+
+                    &::before {
+                        content: '';
+                        display: inline-block;
+                        mask-repeat: no-repeat;
+                        mask-size: 20px;
+                        mask-position: center;
+                        background-color: $video-lobby-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: $video-lobby-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: $video-lobby-system;
+                        height: 100%;
+                        width: 100%;
+                    }
+                }
+
+                &.mx_VideoLobby_deviceButtonWrapper_active {
+                    .mx_VideoLobby_deviceButton, .mx_VideoLobby_deviceListButton {
+                        background-color: $video-lobby-system;
+
+                        &::before {
+                            background-color: $video-lobby-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;
+    }
+}

res/themes/dark/css/_dark.scss

@@ -185,6 +185,10 @@ $call-view-button-off-foreground: $system;
 $call-view-button-off-background: $primary-content;
 
 $video-feed-secondary-background: $system;
+
+$video-lobby-system: $system;
+$video-lobby-background: $background;
+$video-lobby-primary-content: $primary-content;
 // ********************
 
 // Location sharing

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -116,6 +116,10 @@ $call-view-button-off-background: $primary-content;
 
 $video-feed-secondary-background: $system;
 
+$video-lobby-system: $system;
+$video-lobby-background: $background;
+$video-lobby-primary-content: $primary-content;
+
 $roomlist-filter-active-bg-color: $panel-actions;
 $roomlist-bg-color: $header-panel-bg-color;
 

res/themes/legacy-light/css/_legacy-light.scss

@@ -175,6 +175,11 @@ $call-view-button-off-background: $secondary-content;
 
 $video-feed-secondary-background: #394049; // XXX: Color from dark theme
 
+// All of these are from dark theme
+$video-lobby-system: #21262C;
+$video-lobby-background: #15191E;
+$video-lobby-primary-content: #FFFFFF;
+
 $username-variant1-color: #368bd6;
 $username-variant2-color: #ac3ba8;
 $username-variant3-color: #03b381;

res/themes/light/css/_light.scss

@@ -278,6 +278,11 @@ $call-view-button-off-background: $secondary-content;
 
 $video-feed-secondary-background: #394049; // XXX: Color from dark theme
 $voipcall-plinth-color: $system;
+
+// All of these are from dark theme
+$video-lobby-system: #21262C;
+$video-lobby-background: #15191E;
+$video-lobby-primary-content: #FFFFFF;
 // ********************
 
 // One-off colors

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

@@ -75,8 +75,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";
@@ -2167,18 +2166,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);