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

Prepare for Element Call integration (#9224)

Browse source 
* Improve accessibility and testability of Tooltip

Adding a role to Tooltip was motivated by React Testing Library's
reliance on accessibility-related attributes to locate elements.

* Make the ReadyWatchingStore constructor safer

The ReadyWatchingStore constructor previously had a chance to
immediately call onReady, which was dangerous because it was potentially
calling the derived class's onReady at a point when the derived class
hadn't even finished construction yet. In normal usage, I guess this
never was a problem, but it was causing some of the tests I was writing
to crash. This is solved by separating out the onReady call into a start
method.

* Rename 1:1 call components to 'LegacyCall'

to reflect the fact that they're slated for removal, and to not clash
with the new Call code.

* Refactor VideoChannelStore into Call and CallStore

Call is an abstract class that currently only has a Jitsi
implementation, but this will make it easy to later add an Element Call
implementation.

* Remove WidgetReady, ClientReady, and ForceHangupCall hacks

These are no longer used by the new Jitsi call implementation, and can
be removed.

* yarn i18n

* Delete call map entries instead of inserting nulls

* Allow multiple active calls and consolidate call listeners

* Fix a race condition when creating a video room

* Un-hardcode the media device fallback labels

* Apply misc code review fixes

* yarn i18n

* Disconnect from calls more politely on logout

* Fix some strict mode errors

* Fix another updateRoom race condition
This commit is contained in:
Robin 2022-08-30 15:13:39 -04:00 • committed by GitHub
parent 50f6986f6c
commit 0d6a550c33
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
107 changed files with 2573 additions and 2157 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_common.pcss
View file

@ -752,7 +752,7 @@ legend {
cursor: pointer;
}
@define-mixin CallButton {
@define-mixin LegacyCallButton {
box-sizing: border-box;
font-weight: 600;
height: $font-24px;

22
res/css/_components.pcss
View file

@ -97,9 +97,9 @@
@import "./views/avatars/_DecoratedRoomAvatar.pcss";
@import "./views/avatars/_WidgetAvatar.pcss";
@import "./views/beta/_BetaCard.pcss";
@import "./views/context_menus/_CallContextMenu.pcss";
@import "./views/context_menus/_DeviceContextMenu.pcss";
@import "./views/context_menus/_IconizedContextMenu.pcss";
@import "./views/context_menus/_LegacyCallContextMenu.pcss";
@import "./views/context_menus/_MessageContextMenu.pcss";
@import "./views/context_menus/_RoomGeneralContextMenu.pcss";
@import "./views/context_menus/_RoomNotificationContextMenu.pcss";
@ -207,13 +207,13 @@
@import "./views/elements/_Validation.pcss";
@import "./views/emojipicker/_EmojiPicker.pcss";
@import "./views/location/_LocationPicker.pcss";
@import "./views/messages/_CallEvent.pcss";
@import "./views/messages/_CreateEvent.pcss";
@import "./views/messages/_DateSeparator.pcss";
@import "./views/messages/_DisambiguatedProfile.pcss";
@import "./views/messages/_EventTileBubble.pcss";
@import "./views/messages/_HiddenBody.pcss";
@import "./views/messages/_JumpToDatePicker.pcss";
@import "./views/messages/_LegacyCallEvent.pcss";
@import "./views/messages/_MEmoteBody.pcss";
@import "./views/messages/_MFileBody.pcss";
@import "./views/messages/_MImageBody.pcss";
@ -282,13 +282,13 @@
@import "./views/rooms/_RoomPreviewCard.pcss";
@import "./views/rooms/_RoomSublist.pcss";
@import "./views/rooms/_RoomTile.pcss";
@import "./views/rooms/_RoomTileCallSummary.pcss";
@import "./views/rooms/_RoomUpgradeWarningBar.pcss";
@import "./views/rooms/_SearchBar.pcss";
@import "./views/rooms/_SendMessageComposer.pcss";
@import "./views/rooms/_Stickers.pcss";
@import "./views/rooms/_ThreadSummary.pcss";
@import "./views/rooms/_TopUnreadMessagesBar.pcss";
@import "./views/rooms/_VideoRoomSummary.pcss";
@import "./views/rooms/_VoiceRecordComposerTile.pcss";
@import "./views/rooms/_WhoIsTypingTile.pcss";
@import "./views/settings/_AvatarSetting.pcss";
@ -333,7 +333,7 @@
@import "./views/spaces/_SpacePublicShare.pcss";
@import "./views/terms/_InlineTermsAgreement.pcss";
@import "./views/toasts/_AnalyticsToast.pcss";
@import "./views/toasts/_IncomingCallToast.pcss";
@import "./views/toasts/_IncomingLegacyCallToast.pcss";
@import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
@import "./views/typography/_Heading.pcss";
@import "./views/user-onboarding/_UserOnboardingButton.pcss";
@ -343,15 +343,15 @@
@import "./views/user-onboarding/_UserOnboardingPage.pcss";
@import "./views/user-onboarding/_UserOnboardingTask.pcss";
@import "./views/verification/_VerificationShowSas.pcss";
@import "./views/voip/CallView/_CallViewButtons.pcss";
@import "./views/voip/_CallPreview.pcss";
@import "./views/voip/_CallView.pcss";
@import "./views/voip/_CallViewForRoom.pcss";
@import "./views/voip/_CallViewHeader.pcss";
@import "./views/voip/_CallViewSidebar.pcss";
@import "./views/voip/LegacyCallView/_LegacyCallViewButtons.pcss";
@import "./views/voip/_CallLobby.pcss";
@import "./views/voip/_DialPad.pcss";
@import "./views/voip/_DialPadContextMenu.pcss";
@import "./views/voip/_DialPadModal.pcss";
@import "./views/voip/_LegacyCallPreview.pcss";
@import "./views/voip/_LegacyCallView.pcss";
@import "./views/voip/_LegacyCallViewForRoom.pcss";
@import "./views/voip/_LegacyCallViewHeader.pcss";
@import "./views/voip/_LegacyCallViewSidebar.pcss";
@import "./views/voip/_PiPContainer.pcss";
@import "./views/voip/_VideoFeed.pcss";
@import "./views/voip/_VideoLobby.pcss";

2
res/css/structures/_VideoRoomView.pcss
View file

@ -34,7 +34,7 @@ limitations under the License.
}
/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
.mx_VideoLobby ~ .mx_AppTile {
.mx_CallLobby ~ .mx_AppTile {
display: none;
}
}

2
res/css/views/context_menus/_CallContextMenu.pcss → res/css/views/context_menus/_LegacyCallContextMenu.pcss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallContextMenu_item {
.mx_LegacyCallContextMenu_item {
width: 205px;
height: 40px;
padding-left: 16px;

94
res/css/views/messages/_CallEvent.pcss → res/css/views/messages/_LegacyCallEvent.pcss
View file

@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallEvent_wrapper {
.mx_LegacyCallEvent_wrapper {
display: flex;
width: 100%;
.mx_CallEvent {
.mx_LegacyCallEvent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@ -35,7 +35,7 @@ limitations under the License.
width: 65%;
height: fit-content;
.mx_CallEvent_iconButton {
.mx_LegacyCallEvent_iconButton {
display: inline-flex;
&::before {
@ -50,74 +50,74 @@ limitations under the License.
}
}
.mx_CallEvent_silence::before {
.mx_LegacyCallEvent_silence::before {
mask-image: url('$(res)/img/voip/silence.svg');
}
.mx_CallEvent_unSilence::before {
.mx_LegacyCallEvent_unSilence::before {
mask-image: url('$(res)/img/voip/un-silence.svg');
}
&.mx_CallEvent_voice {
.mx_CallEvent_type_icon::before,
.mx_CallEvent_content_button_callBack span::before,
.mx_CallEvent_content_button_answer span::before {
&.mx_LegacyCallEvent_voice {
.mx_LegacyCallEvent_type_icon::before,
.mx_LegacyCallEvent_content_button_callBack span::before,
.mx_LegacyCallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
&.mx_CallEvent_rejected,
&.mx_CallEvent_noAnswer {
.mx_CallEvent_type_icon::before {
&.mx_LegacyCallEvent_rejected,
&.mx_LegacyCallEvent_noAnswer {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/declined-voice.svg');
}
}
}
&.mx_CallEvent_video {
.mx_CallEvent_type_icon::before,
.mx_CallEvent_content_button_callBack span::before,
.mx_CallEvent_content_button_answer span::before {
&.mx_LegacyCallEvent_video {
.mx_LegacyCallEvent_type_icon::before,
.mx_LegacyCallEvent_content_button_callBack span::before,
.mx_LegacyCallEvent_content_button_answer span::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
&.mx_CallEvent_rejected,
&.mx_CallEvent_noAnswer {
.mx_CallEvent_type_icon::before {
&.mx_LegacyCallEvent_rejected,
&.mx_LegacyCallEvent_noAnswer {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/declined-video.svg');
}
}
}
&.mx_CallEvent_missed {
&.mx_CallEvent_voice {
.mx_CallEvent_type_icon::before {
&.mx_LegacyCallEvent_missed {
&.mx_LegacyCallEvent_voice {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-voice.svg');
}
}
&.mx_CallEvent_video {
.mx_CallEvent_type_icon::before {
&.mx_LegacyCallEvent_video {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url('$(res)/img/voip/missed-video.svg');
}
}
}
.mx_CallEvent_info {
.mx_LegacyCallEvent_info {
display: flex;
flex-direction: row;
align-items: center;
width: fit-content;
max-width: 100%;
.mx_CallEvent_info_basic {
.mx_LegacyCallEvent_info_basic {
display: flex;
flex-direction: column;
gap: $spacing-4;
margin-left: 10px; /* To match mx_CallEvent */
margin-left: 10px; /* To match mx_LegacyCallEvent */
margin-right: 10px;
min-width: 0;
.mx_CallEvent_sender {
.mx_LegacyCallEvent_sender {
font-weight: 600;
font-size: 1.5rem;
line-height: 1.8rem;
@ -128,7 +128,7 @@ limitations under the License.
text-overflow: ellipsis;
}
.mx_CallEvent_type {
.mx_LegacyCallEvent_type {
display: flex;
align-items: center;
font-weight: 400;
@ -136,7 +136,7 @@ limitations under the License.
font-size: 1.2rem;
line-height: $font-13px;
.mx_CallEvent_type_icon {
.mx_LegacyCallEvent_type_icon {
height: 13px;
width: 13px;
margin-right: 5px;
@ -155,18 +155,18 @@ limitations under the License.
}
}
.mx_CallEvent_content {
.mx_LegacyCallEvent_content {
display: flex;
flex-wrap: wrap;
align-items: center;
color: $secondary-content;
gap: $spacing-12; /* See mx_IncomingCallToast_buttons */
margin-inline-start: 42px; /* avatar (32px) + mx_CallEvent_info_basic margin (10px) */
gap: $spacing-12; /* See mx_IncomingLegacyCallToast_buttons */
margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */
word-break: break-word;
max-width: fit-content;
.mx_CallEvent_content_button {
@mixin CallButton;
.mx_LegacyCallEvent_content_button {
@mixin LegacyCallButton;
padding: 0 $spacing-12;
span::before {
@ -177,25 +177,25 @@ limitations under the License.
}
}
.mx_CallEvent_content_button_reject {
.mx_LegacyCallEvent_content_button_reject {
span::before {
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
}
}
.mx_CallEvent_content_tooltip {
.mx_LegacyCallEvent_content_tooltip {
margin-right: 5px;
}
}
&.mx_CallEvent_narrow {
&.mx_LegacyCallEvent_narrow {
flex-direction: column;
align-items: unset;
gap: $spacing-4 $spacing-16;
height: unset;
min-width: 290px;
.mx_CallEvent_iconButton {
.mx_LegacyCallEvent_iconButton {
position: absolute;
margin-right: 0;
top: 12px;
@ -205,7 +205,7 @@ limitations under the License.
display: flex;
}
.mx_CallEvent_info {
.mx_LegacyCallEvent_info {
align-items: unset;
}
}
@ -213,8 +213,8 @@ limitations under the License.
}
.mx_EventTile[data-layout="bubble"] {
.mx_EventTile_e2eIcon + .mx_CallEvent_wrapper {
.mx_CallEvent {
.mx_EventTile_e2eIcon + .mx_LegacyCallEvent_wrapper {
.mx_LegacyCallEvent {
position: relative;
/* 5px (gap) + 14px (e2e icon size * mask-size) + 9px (margin-left of e2e icon) */
@ -224,9 +224,9 @@ limitations under the License.
}
.mx_EventTile_leftAlignedBubble {
.mx_CallEvent_wrapper {
.mx_CallEvent {
&.mx_CallEvent_narrow {
.mx_LegacyCallEvent_wrapper {
.mx_LegacyCallEvent {
&.mx_LegacyCallEvent_narrow {
gap: $spacing-8 $spacing-4;
}
}
@ -234,8 +234,8 @@ limitations under the License.
}
.mx_IRCLayout {
.mx_CallEvent_wrapper {
.mx_CallEvent {
.mx_LegacyCallEvent_wrapper {
.mx_LegacyCallEvent {
margin-inline-start: $spacing-4; /* display green line */
}
}

8
res/css/views/rooms/_VideoRoomSummary.pcss → res/css/views/rooms/_RoomTileCallSummary.pcss
View file

@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_VideoRoomSummary {
.mx_VideoRoomSummary_indicator {
.mx_RoomTileCallSummary {
.mx_RoomTileCallSummary_text {
&::before {
display: inline-block;
vertical-align: text-bottom;
@ -28,7 +28,7 @@ limitations under the License.
margin-right: 4px;
}
&.mx_VideoRoomSummary_indicator_active {
&.mx_RoomTileCallSummary_text_active {
color: $accent;
&::before {
@ -37,7 +37,7 @@ limitations under the License.
}
}
.mx_VideoRoomSummary_participants::before {
.mx_RoomTileCallSummary_participants::before {
display: inline-block;
vertical-align: text-bottom;
content: '';

38
res/css/views/toasts/_IncomingCallToast.pcss → res/css/views/toasts/_IncomingLegacyCallToast.pcss
View file

@ -15,17 +15,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_IncomingCallToast {
.mx_IncomingLegacyCallToast {
display: flex;
flex-direction: row;
pointer-events: initial; /* restore pointer events so the user can accept/decline */
.mx_IncomingCallToast_content {
.mx_IncomingLegacyCallToast_content {
display: flex;
flex-direction: column;
margin-left: 8px;
.mx_CallEvent_caller {
.mx_LegacyCallEvent_caller {
font-weight: bold;
font-size: $font-15px;
line-height: $font-18px;
@ -40,7 +40,7 @@ limitations under the License.
max-width: 200px;
}
.mx_CallEvent_type {
.mx_LegacyCallEvent_type {
font-size: $font-12px;
line-height: $font-15px;
color: $tertiary-content;
@ -52,7 +52,7 @@ limitations under the License.
flex-direction: row;
align-items: center;
.mx_CallEvent_type_icon {
.mx_LegacyCallEvent_type_icon {
height: 16px;
width: 16px;
margin-right: 6px;
@ -69,28 +69,28 @@ limitations under the License.
}
}
&.mx_IncomingCallToast_content_voice {
.mx_CallEvent_type .mx_CallEvent_type_icon::before,
.mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
&.mx_IncomingLegacyCallToast_content_voice {
.mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before,
.mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before {
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
}
}
&.mx_IncomingCallToast_content_video {
.mx_CallEvent_type .mx_CallEvent_type_icon::before,
.mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
&.mx_IncomingLegacyCallToast_content_video {
.mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before,
.mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before {
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
}
}
.mx_IncomingCallToast_buttons {
.mx_IncomingLegacyCallToast_buttons {
margin-top: 8px;
display: flex;
flex-direction: row;
gap: 12px;
.mx_IncomingCallToast_button {
@mixin CallButton;
.mx_IncomingLegacyCallToast_button {
@mixin LegacyCallButton;
padding: 0px 8px;
flex-shrink: 0;
flex-grow: 1;
@ -100,13 +100,13 @@ limitations under the License.
padding: 8px 0;
}
&.mx_IncomingCallToast_button_accept span::before {
&.mx_IncomingLegacyCallToast_button_accept span::before {
mask-size: 13px;
width: 13px;
height: 13px;
}
&.mx_IncomingCallToast_button_decline span::before {
&.mx_IncomingLegacyCallToast_button_decline span::before {
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
mask-size: 16px;
width: 16px;
@ -116,7 +116,7 @@ limitations under the License.
}
}
.mx_IncomingCallToast_iconButton {
.mx_IncomingLegacyCallToast_iconButton {
display: flex;
height: 20px;
width: 20px;
@ -133,11 +133,11 @@ limitations under the License.
}
}
.mx_IncomingCallToast_silence::before {
.mx_IncomingLegacyCallToast_silence::before {
mask-image: url('$(res)/img/voip/silence.svg');
}
.mx_IncomingCallToast_unSilence::before {
.mx_IncomingLegacyCallToast_unSilence::before {
mask-image: url('$(res)/img/voip/un-silence.svg');
}
}

44
res/css/views/voip/CallView/_CallViewButtons.pcss → res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss
View file

@ -18,13 +18,13 @@ limitations under the License.
/* data-whatintent makes more sense here semantically but then the tooltip would stay visible without the button */
/* which looks broken, so we match the behaviour of tooltips which is fine too. */
[data-whatinput="mouse"] .mx_CallViewButtons.mx_CallViewButtons_hidden {
[data-whatinput="mouse"] .mx_LegacyCallViewButtons.mx_LegacyCallViewButtons_hidden {
opacity: 0.001; /* opacity 0 can cause a re-layout */
pointer-events: none;
}
.mx_CallViewButtons {
--CallViewButtons_dropdownButton-size: 16px;
.mx_LegacyCallViewButtons {
--LegacyCallViewButtons_dropdownButton-size: 16px;
position: absolute;
display: flex;
@ -35,7 +35,7 @@ limitations under the License.
z-index: 200; /* To be above _all_ feeds */
gap: 18px;
.mx_CallViewButtons_button {
.mx_LegacyCallViewButtons_button {
cursor: pointer;
background-color: $call-view-button-on-background;
@ -66,9 +66,9 @@ limitations under the License.
width: 24px;
}
&.mx_CallViewButtons_dropdownButton {
width: var(--CallViewButtons_dropdownButton-size);
height: var(--CallViewButtons_dropdownButton-size);
&.mx_LegacyCallViewButtons_dropdownButton {
width: var(--LegacyCallViewButtons_dropdownButton-size);
height: var(--LegacyCallViewButtons_dropdownButton-size);
position: absolute;
right: 0;
@ -80,28 +80,28 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/message/chevron-up.svg');
}
&.mx_CallViewButtons_dropdownButton_collapsed::before {
&.mx_LegacyCallViewButtons_dropdownButton_collapsed::before {
transform: rotate(180deg);
}
}
/* State buttons */
&.mx_CallViewButtons_button_on {
&.mx_LegacyCallViewButtons_button_on {
background-color: $call-view-button-on-background;
&::before {
background-color: $call-view-button-on-foreground;
}
&.mx_CallViewButtons_button_mic::before {
&.mx_LegacyCallViewButtons_button_mic::before {
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
}
&.mx_CallViewButtons_button_vid::before {
&.mx_LegacyCallViewButtons_button_vid::before {
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
}
&.mx_CallViewButtons_button_screensharing {
&.mx_LegacyCallViewButtons_button_screensharing {
background-color: $accent;
&::before {
@ -110,27 +110,27 @@ limitations under the License.
}
}
&.mx_CallViewButtons_button_sidebar::before {
&.mx_LegacyCallViewButtons_button_sidebar::before {
mask-image: url('$(res)/img/voip/call-view/sidebar-on.svg');
}
}
&.mx_CallViewButtons_button_off {
&.mx_LegacyCallViewButtons_button_off {
background-color: $call-view-button-off-background;
&::before {
background-color: $call-view-button-off-foreground;
}
&.mx_CallViewButtons_button_mic::before {
&.mx_LegacyCallViewButtons_button_mic::before {
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
}
&.mx_CallViewButtons_button_vid::before {
&.mx_LegacyCallViewButtons_button_vid::before {
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
}
&.mx_CallViewButtons_button_screensharing {
&.mx_LegacyCallViewButtons_button_screensharing {
background-color: $call-view-button-on-background;
&::before {
@ -139,7 +139,7 @@ limitations under the License.
}
}
&.mx_CallViewButtons_button_sidebar {
&.mx_LegacyCallViewButtons_button_sidebar {
background-color: $call-view-button-on-background;
&::before {
@ -151,11 +151,11 @@ limitations under the License.
/* State buttons */
/* Stateless buttons */
&.mx_CallViewButtons_dialpad::before {
&.mx_LegacyCallViewButtons_dialpad::before {
mask-image: url('$(res)/img/voip/call-view/dialpad.svg');
}
&.mx_CallViewButtons_button_hangup {
&.mx_LegacyCallViewButtons_button_hangup {
background-color: $alert;
&::before {
@ -164,13 +164,13 @@ limitations under the License.
}
}
&.mx_CallViewButtons_button_more::before {
&.mx_LegacyCallViewButtons_button_more::before {
mask-image: url('$(res)/img/voip/call-view/more.svg');
}
/* Stateless buttons */
/* Invisible state */
&.mx_CallViewButtons_button_invisible {
&.mx_LegacyCallViewButtons_button_invisible {
visibility: hidden;
pointer-events: none;
position: absolute;

60
res/css/views/voip/_VideoLobby.pcss → res/css/views/voip/_CallLobby.pcss
View file

@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_VideoLobby {
.mx_CallLobby {
min-height: 0;
flex-grow: 1;
padding: $spacing-12;
color: $video-lobby-primary-content;
background-color: $video-lobby-background;
color: $call-lobby-primary-content;
background-color: $call-lobby-background;
border-radius: 8px;
display: flex;
@ -33,16 +33,16 @@ limitations under the License.
margin: $spacing-8 auto 0;
.mx_FacePile_faces .mx_BaseAvatar_image {
border-color: $video-lobby-background;
border-color: $call-lobby-background;
}
}
.mx_VideoLobby_preview {
.mx_CallLobby_preview {
position: relative;
width: 100%;
max-width: 800px;
aspect-ratio: 1.5;
background-color: $video-lobby-system;
background-color: $call-lobby-system;
border-radius: 20px;
overflow: hidden;
@ -74,29 +74,29 @@ limitations under the License.
background-color: black;
}
.mx_VideoLobby_controls {
.mx_CallLobby_controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba($video-lobby-background, 0.9);
background-color: rgba($call-lobby-background, 0.9);
display: flex;
justify-content: center;
gap: $spacing-24;
.mx_VideoLobby_deviceButtonWrapper {
.mx_CallLobby_deviceButtonWrapper {
position: relative;
margin: 6px 0 10px;
.mx_VideoLobby_deviceButton {
.mx_CallLobby_deviceButton {
$size: 50px;
width: $size;
height: $size;
background-color: $video-lobby-primary-content;
background-color: $call-lobby-system;
border-radius: calc($size / 2);
&::before {
@ -105,21 +105,21 @@ limitations under the License.
mask-repeat: no-repeat;
mask-size: 20px;
mask-position: center;
background-color: $video-lobby-system;
background-color: $call-lobby-primary-content;
height: 100%;
width: 100%;
}
&.mx_VideoLobby_deviceButton_audio::before {
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
&.mx_CallLobby_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-off.svg');
&.mx_CallLobby_deviceButton_video::before {
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
}
}
.mx_VideoLobby_deviceListButton {
.mx_CallLobby_deviceListButton {
$size: 15px;
position: absolute;
@ -128,7 +128,7 @@ limitations under the License.
width: $size;
height: $size;
background-color: $video-lobby-primary-content;
background-color: $call-lobby-system;
border-radius: calc($size / 2);
&::before {
@ -137,29 +137,29 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
mask-size: $size;
mask-position: center;
background-color: $video-lobby-system;
background-color: $call-lobby-primary-content;
height: 100%;
width: 100%;
}
}
&.mx_VideoLobby_deviceButtonWrapper_active {
.mx_VideoLobby_deviceButton,
.mx_VideoLobby_deviceListButton {
background-color: $video-lobby-system;
&.mx_CallLobby_deviceButtonWrapper_muted {
.mx_CallLobby_deviceButton,
.mx_CallLobby_deviceListButton {
background-color: $call-lobby-primary-content;
&::before {
background-color: $video-lobby-primary-content;
background-color: $call-lobby-system;
}
}
.mx_VideoLobby_deviceButton {
&.mx_VideoLobby_deviceButton_audio::before {
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
.mx_CallLobby_deviceButton {
&.mx_CallLobby_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-on.svg');
&.mx_CallLobby_deviceButton_video::before {
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
}
}
}
@ -167,7 +167,7 @@ limitations under the License.
}
}
.mx_VideoLobby_joinButton {
.mx_CallLobby_connectButton {
padding-left: 50px;
padding-right: 50px;
}

2
res/css/views/voip/_CallPreview.pcss → res/css/views/voip/_LegacyCallPreview.pcss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallPreview {
.mx_LegacyCallPreview {
position: fixed;
left: 0;
top: 0;

38
res/css/views/voip/_CallView.pcss → res/css/views/voip/_LegacyCallView.pcss
View file

@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallView {
.mx_LegacyCallView {
border-radius: 8px;
background-color: $dark-panel-bg-color;
padding-left: 8px;
@ -24,7 +24,7 @@ limitations under the License.
/* XXX: PiPContainer sets pointer-events: none - should probably be set back in a better place */
pointer-events: initial;
.mx_CallView_toast {
.mx_LegacyCallView_toast {
position: absolute;
top: 74px;
@ -38,7 +38,7 @@ limitations under the License.
background-color: #17191c;
}
.mx_CallView_content_wrapper {
.mx_LegacyCallView_content_wrapper {
display: flex;
justify-content: center;
@ -47,7 +47,7 @@ limitations under the License.
overflow: hidden;
.mx_CallView_content {
.mx_LegacyCallView_content {
position: relative;
display: flex;
@ -65,12 +65,12 @@ limitations under the License.
background-color: $call-view-content-background;
.mx_CallView_status {
.mx_LegacyCallView_status {
z-index: 50;
color: $accent-fg-color;
}
.mx_CallView_avatarsContainer {
.mx_LegacyCallView_avatarsContainer {
display: flex;
flex-direction: row;
align-items: center;
@ -82,7 +82,7 @@ limitations under the License.
}
}
.mx_CallView_holdBackground {
.mx_LegacyCallView_holdBackground {
position: absolute;
left: 0;
right: 0;
@ -107,7 +107,7 @@ limitations under the License.
}
}
&.mx_CallView_content_hold .mx_CallView_status {
&.mx_LegacyCallView_content_hold .mx_LegacyCallView_status {
font-weight: bold;
text-align: center;
@ -123,7 +123,7 @@ limitations under the License.
background-size: cover;
}
.mx_CallView_pip &::before {
.mx_LegacyCallView_pip &::before {
width: 30px;
height: 30px;
}
@ -131,7 +131,7 @@ limitations under the License.
}
}
&:not(.mx_CallView_sidebar) .mx_CallView_content {
&:not(.mx_LegacyCallView_sidebar) .mx_LegacyCallView_content {
padding: 0;
width: 100%;
height: 100%;
@ -145,7 +145,7 @@ limitations under the License.
}
}
&.mx_CallView_pip {
&.mx_LegacyCallView_pip {
width: 320px;
padding-bottom: 8px;
@ -154,16 +154,16 @@ limitations under the License.
background-color: $system;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
.mx_CallViewButtons {
.mx_LegacyCallViewButtons {
bottom: 13px;
.mx_CallViewButtons_button {
.mx_LegacyCallViewButtons_button {
width: 34px;
height: 34px;
&.mx_CallViewButtons_dropdownButton {
width: var(--CallViewButtons_dropdownButton-size);
height: var(--CallViewButtons_dropdownButton-size);
&.mx_LegacyCallViewButtons_dropdownButton {
width: var(--LegacyCallViewButtons_dropdownButton-size);
height: var(--LegacyCallViewButtons_dropdownButton-size);
}
&::before {
@ -173,12 +173,12 @@ limitations under the License.
}
}
.mx_CallView_content {
.mx_LegacyCallView_content {
min-height: 180px;
}
}
&.mx_CallView_large {
&.mx_LegacyCallView_large {
display: flex;
flex-direction: column;
align-items: center;
@ -193,7 +193,7 @@ limitations under the License.
margin-bottom: 10px;
}
&.mx_CallView_belowWidget {
&.mx_LegacyCallView_belowWidget {
margin-top: 0;
}
}

6
res/css/views/voip/_CallViewForRoom.pcss → res/css/views/voip/_LegacyCallViewForRoom.pcss
View file

@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallViewForRoom {
.mx_LegacyCallViewForRoom {
overflow: hidden;
.mx_CallViewForRoom_ResizeWrapper {
.mx_LegacyCallViewForRoom_ResizeWrapper {
display: flex;
&:hover .mx_CallViewForRoom_ResizeHandle {
&:hover .mx_LegacyCallViewForRoom_ResizeHandle {
/* Need to use important to override element style attributes */
/* set by re-resizable */
width: 100% !important;

26
res/css/views/voip/_CallViewHeader.pcss → res/css/views/voip/_LegacyCallViewHeader.pcss
View file

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallViewHeader {
.mx_LegacyCallViewHeader {
height: 44px;
display: flex;
flex-direction: row;
@ -24,18 +24,18 @@ limitations under the License.
flex-shrink: 0;
width: 100%;
&.mx_CallViewHeader_pip {
&.mx_LegacyCallViewHeader_pip {
cursor: pointer;
}
}
.mx_CallViewHeader_text {
.mx_LegacyCallViewHeader_text {
font-size: 1.2rem;
font-weight: bold;
vertical-align: middle;
}
.mx_CallViewHeader_secondaryCallInfo {
.mx_LegacyCallViewHeader_secondaryCallInfo {
&::before {
content: '·';
margin-left: 6px;
@ -43,13 +43,13 @@ limitations under the License.
}
}
.mx_CallViewHeader_controls {
.mx_LegacyCallViewHeader_controls {
margin-left: auto;
display: flex;
gap: 5px;
}
.mx_CallViewHeader_button {
.mx_LegacyCallViewHeader_button {
display: inline-block;
vertical-align: middle;
cursor: pointer;
@ -66,32 +66,32 @@ limitations under the License.
mask-position: center;
}
&.mx_CallViewHeader_button_fullscreen {
&.mx_LegacyCallViewHeader_button_fullscreen {
&::before {
mask-image: url('$(res)/img/element-icons/call/fullscreen.svg');
}
}
&.mx_CallViewHeader_button_pin {
&.mx_LegacyCallViewHeader_button_pin {
&::before {
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
}
}
&.mx_CallViewHeader_button_expand {
&.mx_LegacyCallViewHeader_button_expand {
&::before {
mask-image: url('$(res)/img/element-icons/call/expand.svg');
}
}
}
.mx_CallViewHeader_callInfo {
.mx_LegacyCallViewHeader_callInfo {
margin-left: 12px;
margin-right: 16px;
overflow: hidden;
}
.mx_CallViewHeader_roomName {
.mx_LegacyCallViewHeader_roomName {
font-weight: bold;
font-size: 12px;
line-height: initial;
@ -102,11 +102,11 @@ limitations under the License.
white-space: nowrap;
}
.mx_CallView_secondaryCall_roomName {
.mx_LegacyCallView_secondaryCall_roomName {
margin-left: 4px;
}
.mx_CallViewHeader_icon {
.mx_LegacyCallViewHeader_icon {
display: inline-block;
margin-right: 6px;
height: 16px;

4
res/css/views/voip/_CallViewSidebar.pcss → res/css/views/voip/_LegacyCallViewSidebar.pcss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallViewSidebar {
.mx_LegacyCallViewSidebar {
position: absolute;
right: 10px;
@ -41,7 +41,7 @@ limitations under the License.
}
}
&.mx_CallViewSidebar_pipMode {
&.mx_LegacyCallViewSidebar_pipMode {
top: 16px;
bottom: unset;
justify-content: flex-end;