imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show a lobby screen in video rooms (#8287)

Browse source 
* 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
This commit is contained in:
Robin 2022-04-20 11:03:33 -04:00 • committed by GitHub
parent 9a065581e5
commit 6e86a14cc9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 1338 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_components.scss
View file

@ -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";

18
res/css/structures/_RoomView.scss
View file

@ -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 {

41
res/css/structures/_VideoRoomView.scss Normal file
View file

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

3
res/css/views/elements/_FacePile.scss
View file

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

4
res/css/views/rooms/_RoomHeader.scss
View file

@ -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');

174
res/css/views/voip/_VideoLobby.scss Normal file
View file

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

4
res/themes/dark/css/_dark.scss
View file

@ -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

4
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -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;

5
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -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;

5
res/themes/light/css/_light.scss
View file

@ -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