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 9f77b8c227c1a5bffa5d91b0c48bf3bbc44d4cec.

* 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

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;
+    }
+}