sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Voice rooms prototype (#8084)

Browse Source 
* Add voice room labs flag

Signed-off-by: Robin Townsend <robin@robin.town>

* Add more widget actions for interacting with Jitsi

Signed-off-by: Robin Townsend <robin@robin.town>

* Factor out a more generic Jitsi creation utility

Signed-off-by: Robin Townsend <robin@robin.town>

* Add utilities for managing voice channels

Signed-off-by: Robin Townsend <robin@robin.town>

* Enable creation of voice rooms

Signed-off-by: Robin Townsend <robin@robin.town>

* Force a maximized view of voice channel widgets

Signed-off-by: Robin Townsend <robin@robin.town>

* Add voice channel store

Signed-off-by: Robin Townsend <robin@robin.town>

* Factor out a more generic FacePile

Signed-off-by: Robin Townsend <robin@robin.town>

* Implement room tile changes for voice rooms

Signed-off-by: Robin Townsend <robin@robin.town>

* Add interactive radio component to the left panel

Signed-off-by: Robin Townsend <robin@robin.town>

* Test voice rooms

Signed-off-by: Robin Townsend <robin@robin.town>

* Update name of call room type

Signed-off-by: Robin Townsend <robin@robin.town>

* Clarify that voice rooms are under development

Signed-off-by: Robin Townsend <robin@robin.town>

* Use readonly

Signed-off-by: Robin Townsend <robin@robin.town>

* Move acks to the end of handlers

Signed-off-by: Robin Townsend <robin@robin.town>

* Add comment about avatar URLs coming from Jitsi

Signed-off-by: Robin Townsend <robin@robin.town>

* Don't use unicode ellipses

for translation reasons?

Signed-off-by: Robin Townsend <robin@robin.town>

* Fix tests

Signed-off-by: Robin Townsend <robin@robin.town>

* Fix tests, again

Signed-off-by: Robin Townsend <robin@robin.town>

* Remove unnecessary export

Signed-off-by: Robin Townsend <robin@robin.town>

* Ack Jitsi events when we wait for them

Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
Robin
2022-03-22 16:14:11 -06:00
committed by GitHub
parent f416a970ca
commit cfabcdda35
32 changed files with 1302 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/_components.scss
+1
View File
@@ -329,3 +329,4 @@
@import "./views/voip/_DialPadModal.scss";
@import "./views/voip/_PiPContainer.scss";
@import "./views/voip/_VideoFeed.scss";
@import "./views/voip/_VoiceChannelRadio.scss";
res/css/structures/_RoomView.scss
+11
View File
@@ -212,6 +212,17 @@ hr.mx_RoomView_myReadMarker {
opacity: 1;
}
// Immersive widgets
.mx_RoomView_body > .mx_AppTile {
margin: $container-gap-width;
margin-right: calc($container-gap-width / 2);
width: auto;
height: 100%;
background: none;
border: none;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
background-color: $background;
}
res/css/views/elements/_FacePile.scss
+1 -1
View File
@@ -20,7 +20,7 @@ limitations under the License.
flex-direction: row-reverse;
vertical-align: middle;
> .mx_FacePile_face + .mx_FacePile_face {
> * + * {
margin-right: -8px;
}
res/css/views/right_panel/_UserInfo.scss
+2 -2
View File
@@ -64,7 +64,7 @@ limitations under the License.
margin-bottom: 8px;
}
.mx_RoomTile_nameContainer {
.mx_RoomTile_titleContainer {
width: 154px;
}
@@ -72,7 +72,7 @@ limitations under the License.
display: none;
}
.mx_RoomTile_name {
.mx_RoomTile_title {
width: 160px;
}
res/css/views/rooms/_MemberInfo.scss
+2 -2
View File
@@ -58,7 +58,7 @@ limitations under the License.
margin: 0 16px 16px 16px;
}
.mx_MemberInfo .mx_RoomTile_nameContainer {
.mx_MemberInfo .mx_RoomTile_titleContainer {
width: 154px;
}
@@ -66,7 +66,7 @@ limitations under the License.
display: none;
}
.mx_MemberInfo .mx_RoomTile_name {
.mx_MemberInfo .mx_RoomTile_title {
width: 160px;
}
res/css/views/rooms/_RoomTile.scss
+154 -91
View File
@@ -20,7 +20,6 @@ limitations under the License.
padding: 4px;
contain: content; // Not strict as it will break when resizing a sublist vertically
height: 40px;
box-sizing: border-box;
// The tile is also a flexbox row itself
@@ -35,106 +34,166 @@ limitations under the License.
}
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 8px;
margin-right: 10px;
}
.mx_RoomTile_nameContainer {
.mx_RoomTile_details {
flex-grow: 1;
min-width: 0; // allow flex to shrink it
margin-right: 8px; // spacing to buttons/badges
// Create a new column layout flexbox for the name parts
display: flex;
flex-direction: column;
justify-content: center;
.mx_RoomTile_name,
.mx_RoomTile_messagePreview {
margin: 0 2px;
.mx_RoomTile_primaryDetails {
height: 32px;
display: flex;
flex-wrap: wrap;
.mx_RoomTile_titleContainer {
min-width: 0;
flex-basis: 0;
flex-grow: 1;
margin-right: 8px; // spacing to buttons/badges
// Create a new column layout flexbox for the title parts
display: flex;
flex-direction: column;
justify-content: center;
.mx_RoomTile_title, .mx_RoomTile_subtitle {
width: 100%;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_RoomTile_title {
font-size: $font-14px;
line-height: $font-18px;
}
.mx_RoomTile_title.mx_RoomTile_titleHasUnreadEvents {
font-weight: 600;
}
.mx_RoomTile_subtitle {
font-size: $font-13px;
line-height: $font-18px;
color: $secondary-content;
}
.mx_RoomTile_subtitle.mx_RoomTile_voiceIndicator {
&::before {
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $secondary-content;
mask-image: url('$(res)/img/voip/voice-room.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}
&.mx_RoomTile_voiceIndicator_active {
color: $accent;
&::before {
background-color: $accent;
}
}
}
.mx_RoomTile_titleWithSubtitle {
margin-top: -3px; // shift the title up a bit more
}
}
.mx_RoomTile_notificationsButton {
margin-left: 4px; // spacing between buttons
}
.mx_RoomTile_badgeContainer {
height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
.mx_NotificationBadge {
margin-right: 2px; // centering
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
}
}
// The context menu buttons are hidden by default
.mx_RoomTile_menuButton,
.mx_RoomTile_notificationsButton {
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-content;
}
}
// If the room has an overriden notification setting then we always show the notifications menu button
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
.mx_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
}
.mx_RoomTile_voiceChannel {
width: 100%;
display: flex;
align-items: center;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.mx_FacePile {
margin: 6px 0 4px;
}
.mx_RoomTile_connectVoiceButton {
font-weight: 600;
padding-left: 10px;
padding-right: 10px;
&::before {
content: '';
background-color: $accent;
mask-image: url('$(res)/img/voip/voice-room.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}
}
}
.mx_RoomTile_name {
font-size: $font-14px;
line-height: $font-18px;
}
.mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
font-weight: 600;
}
.mx_RoomTile_messagePreview {
font-size: $font-13px;
line-height: $font-18px;
color: $secondary-content;
}
.mx_RoomTile_nameWithPreview {
margin-top: -4px; // shift the name up a bit more
}
}
.mx_RoomTile_notificationsButton {
margin-left: 4px; // spacing between buttons
}
.mx_RoomTile_badgeContainer {
height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
.mx_NotificationBadge {
margin-right: 2px; // centering
}
.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
}
}
// The context menu buttons are hidden by default
.mx_RoomTile_menuButton,
.mx_RoomTile_notificationsButton {
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-content;
}
}
// If the room has an overriden notification setting then we always show the notifications menu button
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
.mx_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
&:not(.mx_RoomTile_minimized) {
@@ -163,6 +222,10 @@ limitations under the License.
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 0;
}
.mx_RoomTile_details {
display: none;
}
}
}
res/css/views/voip/_VoiceChannelRadio.scss
+121
View File
@@ -0,0 +1,121 @@
/*
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_VoiceChannelRadio {
background-color: $system;
> .mx_VoiceChannelRadio_statusBar {
display: flex;
padding: 12px 16px;
align-items: center;
gap: 12px;
> .mx_VoiceChannelRadio_titleContainer {
flex-grow: 1;
> .mx_VoiceChannelRadio_status {
font-size: $font-15px;
color: $accent;
&::before {
content: '';
display: inline-block;
margin-right: 4px;
width: 11px;
height: 11px;
background-color: $accent;
mask-image: url('$(res)/img/voip/signal-bars.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
}
> .mx_VoiceChannelRadio_name {
font-size: $font-13px;
color: $secondary-content;
}
}
> .mx_VoiceChannelRadio_disconnectButton::before {
content: '';
display: block;
width: 36px;
height: 36px;
background-color: $tertiary-content;
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
mask-position: center;
mask-size: 24px;
mask-repeat: no-repeat;
}
}
> .mx_VoiceChannelRadio_controlBar {
display: flex;
border-top: 1px solid $quinary-content;
padding: 12px 16px;
align-items: center;
justify-content: space-between;
> .mx_AccessibleButton {
font-size: $font-15px;
padding: 6px 0;
&.mx_VoiceChannelRadio_button_active {
padding: 6px 12px;
background-color: $quinary-content;
border-radius: 8px;
font-weight: 600;
}
}
> .mx_VoiceChannelRadio_videoButton::before {
content: '';
display: inline-block;
margin-right: 8px;
width: 16px;
height: 16px;
background-color: $primary-content;
vertical-align: sub;
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
> .mx_VoiceChannelRadio_videoButton.mx_VoiceChannelRadio_button_active::before {
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
}
> .mx_VoiceChannelRadio_audioButton::before {
content: '';
display: inline-block;
margin-right: 4px;
width: 16px;
height: 16px;
background-color: $primary-content;
vertical-align: sub;
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
> .mx_VoiceChannelRadio_audioButton.mx_VoiceChannelRadio_button_active::before {
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
}
}
}
res/img/voip/signal-bars.svg
+5
View File
@@ -0,0 +1,5 @@
<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="0.5" width="2.2" height="11" fill="#0DBD8B"/>
<rect x="4.40015" y="2.70001" width="2.2" height="8.8" fill="#0DBD8B"/>
<rect x="8.79993" y="7.10004" width="2.2" height="4.4" fill="#0DBD8B"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 302 B

res/img/voip/voice-room.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5203 22.4387C18.4279 22.4387 23.217 17.6492 23.217 11.7411C23.217 5.83295 18.4279 1.04346 12.5203 1.04346C6.61261 1.04346 1.82353 5.83295 1.82353 11.7411C1.82353 13.3962 2.19936 14.9635 2.87032 16.3623L0.795333 23.1065C0.727424 23.3273 0.934782 23.5337 1.1552 23.4648L7.85572 21.3707C9.26544 22.055 10.848 22.4387 12.5203 22.4387ZM5.68079 11.6412C5.68079 11.3264 5.93601 11.0712 6.25083 11.0712C6.56566 11.0712 6.82088 11.3264 6.82088 11.6412V12.5533C6.82088 12.8681 6.56566 13.1233 6.25083 13.1233C5.93601 13.1233 5.68079 12.8681 5.68079 12.5533V11.6412ZM18.7919 11.0712C18.477 11.0712 18.2218 11.3264 18.2218 11.6412V12.5533C18.2218 12.8681 18.477 13.1233 18.7919 13.1233C19.1067 13.1233 19.3619 12.8681 19.3619 12.5533V11.6412C19.3619 11.3264 19.1067 11.0712 18.7919 11.0712ZM8.189 10.045C8.189 9.73017 8.44422 9.47495 8.75905 9.47495C9.07388 9.47495 9.3291 9.73017 9.3291 10.045V14.3774C9.3291 14.6922 9.07388 14.9474 8.75905 14.9474C8.44422 14.9474 8.189 14.6922 8.189 14.3774V10.045ZM16.2836 9.47495C15.9688 9.47495 15.7136 9.73017 15.7136 10.045V14.3774C15.7136 14.6922 15.9688 14.9474 16.2836 14.9474C16.5985 14.9474 16.8537 14.6922 16.8537 14.3774V10.045C16.8537 9.73017 16.5985 9.47495 16.2836 9.47495ZM10.6972 7.30882C10.6972 6.99399 10.9524 6.73877 11.2672 6.73877C11.582 6.73877 11.8373 6.99399 11.8373 7.30882V16.4296C11.8373 16.7444 11.582 16.9996 11.2672 16.9996C10.9524 16.9996 10.6972 16.7444 10.6972 16.4296V7.30882ZM13.7754 6.73877C13.4606 6.73877 13.2054 6.99399 13.2054 7.30882V16.4296C13.2054 16.7444 13.4606 16.9996 13.7754 16.9996C14.0903 16.9996 14.3455 16.7444 14.3455 16.4296V7.30882C14.3455 6.99399 14.0903 6.73877 13.7754 6.73877Z" fill="#737D8C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB