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

Commit

Permalink
Voice rooms prototype (#8084)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@robintown
robintown authored Mar 22, 2022
1 parent f416a97 commit cfabcdd
Show file tree
Hide file tree
Showing 32 changed files with 1,295 additions and 231 deletions.
1 change: 1 addition & 0 deletions res/css/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,3 +329,4 @@
@import "./views/voip/_DialPadModal.scss";
@import "./views/voip/_PiPContainer.scss";
@import "./views/voip/_VideoFeed.scss";
@import "./views/voip/_VoiceChannelRadio.scss";
11 changes: 11 additions & 0 deletions res/css/structures/_RoomView.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/elements/_FacePile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ limitations under the License.
flex-direction: row-reverse;
vertical-align: middle;

> .mx_FacePile_face + .mx_FacePile_face {
> * + * {
margin-right: -8px;
}

Expand Down
4 changes: 2 additions & 2 deletions res/css/views/right_panel/_UserInfo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,15 @@ limitations under the License.
margin-bottom: 8px;
}

.mx_RoomTile_nameContainer {
.mx_RoomTile_titleContainer {
width: 154px;
}

.mx_RoomTile_badge {
display: none;
}

.mx_RoomTile_name {
.mx_RoomTile_title {
width: 160px;
}

Expand Down
4 changes: 2 additions & 2 deletions res/css/views/rooms/_MemberInfo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,15 +58,15 @@ limitations under the License.
margin: 0 16px 16px 16px;
}

.mx_MemberInfo .mx_RoomTile_nameContainer {
.mx_MemberInfo .mx_RoomTile_titleContainer {
width: 154px;
}

.mx_MemberInfo .mx_RoomTile_badge {
display: none;
}

.mx_MemberInfo .mx_RoomTile_name {
.mx_MemberInfo .mx_RoomTile_title {
width: 160px;
}

Expand Down
231 changes: 147 additions & 84 deletions res/css/views/rooms/_RoomTile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
width: 100%;

// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.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_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_nameWithPreview {
margin-top: -4px; // shift the name up a bit more
}
}
.mx_RoomTile_notificationsButton {
margin-left: 4px; // spacing between buttons
}

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

.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
// 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;

// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
&::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;
}
}

.mx_NotificationBadge {
margin-right: 2px; // centering
}
// 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_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
.mx_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
}
}

// 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;
}
}
.mx_RoomTile_voiceChannel {
width: 100%;
display: flex;
align-items: center;

// 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_FacePile {
margin: 6px 0 4px;
}

.mx_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
.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;
}
}
}
}

&:not(.mx_RoomTile_minimized) {
Expand Down Expand Up @@ -163,6 +222,10 @@ limitations under the License.
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 0;
}

.mx_RoomTile_details {
display: none;
}
}
}

Expand Down
Loading

0 comments on commit cfabcdd

Please sign in to comment.