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

Show a lobby screen in video rooms #8287

Merged
merged 35 commits into from
Apr 20, 2022
Merged
Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
5e215b5
Show a lobby screen in video rooms
robintown Apr 11, 2022
5c431c7
Add connecting state
robintown Apr 11, 2022
fb36fe0
Test VideoRoomView
robintown Apr 11, 2022
9a386cf
Test VideoLobby
robintown Apr 11, 2022
1032f07
Merge branch 'develop' into video-room-lobby
robintown Apr 12, 2022
c0ae630
Get the local video stream with useAsyncMemo
robintown Apr 12, 2022
861cce5
Clean up code review nits
robintown Apr 12, 2022
256ca1d
Explicitly state what !important is overriding
robintown Apr 12, 2022
b3522b5
Use spacing variables
robintown Apr 12, 2022
76822b8
Wait for video channel messaging
robintown Apr 12, 2022
5a9cbec
Update join button copy
robintown Apr 12, 2022
c1269d9
Show frame on both the lobby and widget
robintown Apr 12, 2022
cf4f3ef
Force dark theme for video lobby
robintown Apr 12, 2022
4f71425
Wait for the widget to be ready
robintown Apr 13, 2022
56ea403
Make VideoChannelStore constructor private
robintown Apr 13, 2022
4dc71a8
Merge branch 'develop' into video-room-lobby
robintown Apr 13, 2022
8b3c114
Allow video lobby to shrink
robintown Apr 13, 2022
e0d0ac9
Add invite button to video room header
robintown Apr 13, 2022
24d612f
Show connected members on lobby screen
robintown Apr 13, 2022
0d998a7
Make avatars in video lobby clickable
robintown Apr 13, 2022
a257abf
Merge branch 'develop' into video-room-lobby
robintown Apr 13, 2022
edecb6e
Merge branch 'develop' into video-room-lobby
robintown Apr 14, 2022
95213b1
Increase video channel store timeout
robintown Apr 14, 2022
9f77b8c
Fix Jitsi Meet getting wedged on startup in Chrome and Safari
robintown Apr 14, 2022
7b38e58
Merge branch 'develop' into video-room-lobby
robintown Apr 15, 2022
f43fb08
Revert "Fix Jitsi Meet getting wedged on startup in Chrome and Safari"
robintown Apr 15, 2022
fe99a88
Disable device buttons while connecting
robintown Apr 15, 2022
9529461
Factor RoomFacePile into a separate file
robintown Apr 15, 2022
bc43dec
Fix i18n lint
robintown Apr 15, 2022
b3c2cbd
Merge branch 'develop' into video-room-lobby
robintown Apr 18, 2022
1ea8ee2
Fix switching video channels while connected
robintown Apr 18, 2022
64efeb7
Merge branch 'develop' into video-room-lobby
robintown Apr 20, 2022
2147f82
Properly limit number of connected members in face pile
robintown Apr 20, 2022
324c96a
Merge branch 'develop' into video-room-lobby
robintown Apr 20, 2022
a15cd6c
Fix CSS lint
robintown Apr 20, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,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";
Expand Down Expand Up @@ -319,3 +320,4 @@
@import "./views/voip/_DialPadModal.scss";
@import "./views/voip/_PiPContainer.scss";
@import "./views/voip/_VideoFeed.scss";
@import "./views/voip/_VideoLobby.scss";
18 changes: 3 additions & 15 deletions res/css/structures/_RoomView.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
41 changes: 41 additions & 0 deletions res/css/structures/_VideoRoomView.scss
Original file line number Diff line number Diff line change
@@ -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 changes: 2 additions & 1 deletion res/css/views/elements/_FacePile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
4 changes: 4 additions & 0 deletions res/css/views/rooms/_RoomHeader.scss
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,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');

Expand Down
173 changes: 173 additions & 0 deletions res/css/views/voip/_VideoLobby.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
/*
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;
robintown marked this conversation as resolved.
Show resolved Hide resolved
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 changes: 4 additions & 0 deletions res/themes/dark/css/_dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions res/themes/legacy-dark/css/_legacy-dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
5 changes: 5 additions & 0 deletions res/themes/legacy-light/css/_legacy-light.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions res/themes/light/css/_light.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 0 additions & 3 deletions src/Lifecycle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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();
Expand Down
Loading