Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 6e86a14

Browse files
robintownrobintown
authored
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
1 parent 9a06558 commit 6e86a14

File tree

30 files changed

+1337
-266
lines changed

30 files changed

+1337
-266
lines changed

‎res/css/_components.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
@import "./structures/_ToastContainer.scss";
5353
@import "./structures/_UploadBar.scss";
5454
@import "./structures/_UserMenu.scss";
55+
@import "./structures/_VideoRoomView.scss";
5556
@import "./structures/_ViewSource.scss";
5657
@import "./structures/auth/_CompleteSecurity.scss";
5758
@import "./structures/auth/_Login.scss";
@@ -323,3 +324,4 @@
323324
@import "./views/voip/_DialPadModal.scss";
324325
@import "./views/voip/_PiPContainer.scss";
325326
@import "./views/voip/_VideoFeed.scss";
327+
@import "./views/voip/_VideoLobby.scss";

‎res/css/structures/_RoomView.scss‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -211,21 +211,9 @@ hr.mx_RoomView_myReadMarker {
211211
opacity: 1;
212212
}
213213

214-
// Immersive widgets
215-
.mx_RoomView_immersive {
216-
.mx_RoomHeader_wrapper {
217-
border: unset;
218-
}
219-
220-
.mx_AppTile {
221-
margin: $container-gap-width;
222-
margin-right: calc($container-gap-width / 2);
223-
width: auto;
224-
height: 100%;
225-
padding-top: 33px; // to match the right panel chat heading
226-
227-
border-radius: 8px;
228-
}
214+
// Rooms with immersive content
215+
.mx_RoomView_immersive .mx_RoomHeader_wrapper {
216+
border: unset;
229217
}
230218

231219
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {

‎res/css/structures/_VideoRoomView.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_VideoRoomView {
18+
flex-grow: 1;
19+
min-height: 0;
20+
21+
display: flex;
22+
flex-direction: column;
23+
margin: $container-gap-width;
24+
margin-right: calc($container-gap-width / 2);
25+
26+
background-color: $header-panel-bg-color;
27+
padding-top: 33px; // to match the right panel chat heading
28+
border: 8px solid $header-panel-bg-color;
29+
border-radius: 8px;
30+
31+
.mx_AppTile {
32+
width: auto;
33+
height: 100%;
34+
border: none;
35+
}
36+
37+
// While the lobby is shown, the widget needs to stay loaded but hidden in the background
38+
.mx_VideoLobby ~ .mx_AppTile {
39+
display: none;
40+
}
41+
}

‎res/css/views/elements/_FacePile.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ limitations under the License.
2020
flex-direction: row-reverse;
2121
vertical-align: middle;
2222

23-
> .mx_FacePile_face + .mx_FacePile_face {
23+
// Overlap the children
24+
> * + * {
2425
margin-right: -8px;
2526
}
2627

‎res/css/views/rooms/_RoomHeader.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,10 @@ limitations under the License.
217217
mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
218218
}
219219

220+
.mx_RoomHeader_inviteButton::before {
221+
mask-image: url('$(res)/img/element-icons/room/invite.svg');
222+
}
223+
220224
.mx_RoomHeader_voiceCallButton::before {
221225
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
222226

‎res/css/views/voip/_VideoLobby.scss‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_VideoLobby {
18+
min-height: 0;
19+
flex-grow: 1;
20+
padding: $spacing-12;
21+
color: $video-lobby-primary-content;
22+
background-color: $video-lobby-background;
23+
border-radius: 8px;
24+
25+
display: flex;
26+
flex-direction: column;
27+
align-items: center;
28+
justify-content: center;
29+
gap: $spacing-32;
30+
31+
.mx_FacePile {
32+
width: fit-content;
33+
margin: $spacing-8 auto 0;
34+
35+
.mx_FacePile_faces .mx_BaseAvatar_image {
36+
border-color: $video-lobby-background;
37+
}
38+
}
39+
40+
.mx_VideoLobby_preview {
41+
position: relative;
42+
width: 100%;
43+
max-width: 800px;
44+
aspect-ratio: 1.5;
45+
background-color: $video-lobby-system;
46+
47+
border-radius: 20px;
48+
overflow: hidden;
49+
50+
display: flex;
51+
flex-direction: column;
52+
justify-content: center;
53+
align-items: center;
54+
55+
.mx_BaseAvatar {
56+
margin: $spacing-20;
57+
58+
// Override the explicit dimensions on the element so that this gets sized responsively
59+
width: unset !important;
60+
height: unset !important;
61+
min-width: 0;
62+
min-height: 0;
63+
flex: 0 1 200px;
64+
}
65+
66+
video {
67+
position: absolute;
68+
top: 0;
69+
width: 100%;
70+
height: 100%;
71+
object-fit: cover;
72+
display: block;
73+
transform: scaleX(-1); // flip the image
74+
background-color: black;
75+
}
76+
77+
.mx_VideoLobby_controls {
78+
position: absolute;
79+
bottom: 0;
80+
left: 0;
81+
right: 0;
82+
83+
background-color: rgba($video-lobby-background, 0.9);
84+
85+
display: flex;
86+
justify-content: center;
87+
gap: $spacing-24;
88+
89+
.mx_VideoLobby_deviceButtonWrapper {
90+
position: relative;
91+
margin: 6px 0 10px;
92+
93+
.mx_VideoLobby_deviceButton {
94+
$size: 50px;
95+
96+
width: $size;
97+
height: $size;
98+
99+
background-color: $video-lobby-primary-content;
100+
border-radius: calc($size / 2);
101+
102+
&::before {
103+
content: '';
104+
display: inline-block;
105+
mask-repeat: no-repeat;
106+
mask-size: 20px;
107+
mask-position: center;
108+
background-color: $video-lobby-system;
109+
height: 100%;
110+
width: 100%;
111+
}
112+
113+
&.mx_VideoLobby_deviceButton_audio::before {
114+
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
115+
}
116+
117+
&.mx_VideoLobby_deviceButton_video::before {
118+
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
119+
}
120+
}
121+
122+
.mx_VideoLobby_deviceListButton {
123+
$size: 15px;
124+
125+
position: absolute;
126+
bottom: 0;
127+
right: -2.5px;
128+
width: $size;
129+
height: $size;
130+
131+
background-color: $video-lobby-primary-content;
132+
border-radius: calc($size / 2);
133+
134+
&::before {
135+
content: '';
136+
display: inline-block;
137+
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
138+
mask-size: $size;
139+
mask-position: center;
140+
background-color: $video-lobby-system;
141+
height: 100%;
142+
width: 100%;
143+
}
144+
}
145+
146+
&.mx_VideoLobby_deviceButtonWrapper_active {
147+
.mx_VideoLobby_deviceButton,
148+
.mx_VideoLobby_deviceListButton {
149+
background-color: $video-lobby-system;
150+
151+
&::before {
152+
background-color: $video-lobby-primary-content;
153+
}
154+
}
155+
156+
.mx_VideoLobby_deviceButton {
157+
&.mx_VideoLobby_deviceButton_audio::before {
158+
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
159+
}
160+
161+
&.mx_VideoLobby_deviceButton_video::before {
162+
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
163+
}
164+
}
165+
}
166+
}
167+
}
168+
}
169+
170+
.mx_VideoLobby_joinButton {
171+
padding-left: 50px;
172+
padding-right: 50px;
173+
}
174+
}

‎res/themes/dark/css/_dark.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,10 @@ $call-view-button-off-foreground: $system;
187187
$call-view-button-off-background: $primary-content;
188188

189189
$video-feed-secondary-background: $system;
190+
191+
$video-lobby-system: $system;
192+
$video-lobby-background: $background;
193+
$video-lobby-primary-content: $primary-content;
190194
// ********************
191195

192196
// Location sharing

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,10 @@ $call-view-button-off-background: $primary-content;
120120

121121
$video-feed-secondary-background: $system;
122122

123+
$video-lobby-system: $system;
124+
$video-lobby-background: $background;
125+
$video-lobby-primary-content: $primary-content;
126+
123127
$roomlist-filter-active-bg-color: $panel-actions;
124128
$roomlist-bg-color: $header-panel-bg-color;
125129

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,11 @@ $call-view-button-off-background: $secondary-content;
178178

179179
$video-feed-secondary-background: #394049; // XXX: Color from dark theme
180180

181+
// All of these are from dark theme
182+
$video-lobby-system: #21262C;
183+
$video-lobby-background: #15191E;
184+
$video-lobby-primary-content: #FFFFFF;
185+
181186
$username-variant1-color: #368bd6;
182187
$username-variant2-color: #ac3ba8;
183188
$username-variant3-color: #03b381;

‎res/themes/light/css/_light.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,11 @@ $call-view-button-off-background: $secondary-content;
280280

281281
$video-feed-secondary-background: #394049; // XXX: Color from dark theme
282282
$voipcall-plinth-color: $system;
283+
284+
// All of these are from dark theme
285+
$video-lobby-system: #21262C;
286+
$video-lobby-background: #15191E;
287+
$video-lobby-primary-content: #FFFFFF;
283288
// ********************
284289

285290
// One-off colors

0 commit comments

Comments
 (0)