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 9f77b8c. * 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
matrix-org · Apr 20, 2022 · 6e86a14 · 6e86a14
1 parent 9a06558
commit 6e86a14
Show file tree

Hide file tree

Showing 30 changed files with 1,337 additions and 266 deletions.
diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -52,6 +52,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";
@@ -323,3 +324,4 @@
 @import "./views/voip/_DialPadModal.scss";
 @import "./views/voip/_PiPContainer.scss";
 @import "./views/voip/_VideoFeed.scss";
+@import "./views/voip/_VideoLobby.scss";
diff --git a/res/css/structures/_RoomView.scss b/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 {

diff --git a/res/css/structures/_VideoRoomView.scss b/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;
+    }
+}
diff --git a/res/css/views/elements/_FacePile.scss b/res/css/views/elements/_FacePile.scss
@@ -20,7 +20,8 @@ limitations under the License.
         flex-direction: row-reverse;
         vertical-align: middle;
 
-        > .mx_FacePile_face + .mx_FacePile_face {
+        // Overlap the children
+        > * + * {
             margin-right: -8px;
         }
 

diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss
@@ -217,6 +217,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
 }
 
+.mx_RoomHeader_inviteButton::before {
+    mask-image: url('$(res)/img/element-icons/room/invite.svg');
+}
+
 .mx_RoomHeader_voiceCallButton::before {
     mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
 

diff --git a/res/css/views/voip/_VideoLobby.scss b/res/css/views/voip/_VideoLobby.scss
@@ -0,0 +1,174 @@
+/*
+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 {
+    min-height: 0;
+    flex-grow: 1;
+    padding: $spacing-12;
+    color: $video-lobby-primary-content;
+    background-color: $video-lobby-background;
+    border-radius: 8px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-32;
+
+    .mx_FacePile {
+        width: fit-content;
+        margin: $spacing-8 auto 0;
+
+        .mx_FacePile_faces .mx_BaseAvatar_image {
+            border-color: $video-lobby-background;
+        }
+    }
+
+    .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;
+    }
+}
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
@@ -187,6 +187,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

diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -120,6 +120,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;
 

diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
@@ -178,6 +178,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;

diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
@@ -280,6 +280,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

diff --git a/src/Lifecycle.ts b/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
@@ -926,7 +924,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();