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

Commit cfabcdd

Browse files
robintownrobintown
authored
Voice rooms prototype (#8084)
* Add voice room labs flag Signed-off-by: Robin Townsend <[email protected]> * Add more widget actions for interacting with Jitsi Signed-off-by: Robin Townsend <[email protected]> * Factor out a more generic Jitsi creation utility Signed-off-by: Robin Townsend <[email protected]> * Add utilities for managing voice channels Signed-off-by: Robin Townsend <[email protected]> * Enable creation of voice rooms Signed-off-by: Robin Townsend <[email protected]> * Force a maximized view of voice channel widgets Signed-off-by: Robin Townsend <[email protected]> * Add voice channel store Signed-off-by: Robin Townsend <[email protected]> * Factor out a more generic FacePile Signed-off-by: Robin Townsend <[email protected]> * Implement room tile changes for voice rooms Signed-off-by: Robin Townsend <[email protected]> * Add interactive radio component to the left panel Signed-off-by: Robin Townsend <[email protected]> * Test voice rooms Signed-off-by: Robin Townsend <[email protected]> * Update name of call room type Signed-off-by: Robin Townsend <[email protected]> * Clarify that voice rooms are under development Signed-off-by: Robin Townsend <[email protected]> * Use readonly Signed-off-by: Robin Townsend <[email protected]> * Move acks to the end of handlers Signed-off-by: Robin Townsend <[email protected]> * Add comment about avatar URLs coming from Jitsi Signed-off-by: Robin Townsend <[email protected]> * Don't use unicode ellipses for translation reasons? Signed-off-by: Robin Townsend <[email protected]> * Fix tests Signed-off-by: Robin Townsend <[email protected]> * Fix tests, again Signed-off-by: Robin Townsend <[email protected]> * Remove unnecessary export Signed-off-by: Robin Townsend <[email protected]> * Ack Jitsi events when we wait for them Signed-off-by: Robin Townsend <[email protected]>
1 parent f416a97 commit cfabcdd

File tree

32 files changed

+1295
-231
lines changed

32 files changed

+1295
-231
lines changed

‎res/css/_components.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -329,3 +329,4 @@
329329
@import "./views/voip/_DialPadModal.scss";
330330
@import "./views/voip/_PiPContainer.scss";
331331
@import "./views/voip/_VideoFeed.scss";
332+
@import "./views/voip/_VoiceChannelRadio.scss";

‎res/css/structures/_RoomView.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,17 @@ hr.mx_RoomView_myReadMarker {
212212
opacity: 1;
213213
}
214214

215+
// Immersive widgets
216+
.mx_RoomView_body > .mx_AppTile {
217+
margin: $container-gap-width;
218+
margin-right: calc($container-gap-width / 2);
219+
width: auto;
220+
height: 100%;
221+
222+
background: none;
223+
border: none;
224+
}
225+
215226
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
216227
background-color: $background;
217228
}

‎res/css/views/elements/_FacePile.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ limitations under the License.
2020
flex-direction: row-reverse;
2121
vertical-align: middle;
2222

23-
> .mx_FacePile_face + .mx_FacePile_face {
23+
> * + * {
2424
margin-right: -8px;
2525
}
2626

‎res/css/views/right_panel/_UserInfo.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,15 @@ limitations under the License.
6464
margin-bottom: 8px;
6565
}
6666

67-
.mx_RoomTile_nameContainer {
67+
.mx_RoomTile_titleContainer {
6868
width: 154px;
6969
}
7070

7171
.mx_RoomTile_badge {
7272
display: none;
7373
}
7474

75-
.mx_RoomTile_name {
75+
.mx_RoomTile_title {
7676
width: 160px;
7777
}
7878

‎res/css/views/rooms/_MemberInfo.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,15 @@ limitations under the License.
5858
margin: 0 16px 16px 16px;
5959
}
6060

61-
.mx_MemberInfo .mx_RoomTile_nameContainer {
61+
.mx_MemberInfo .mx_RoomTile_titleContainer {
6262
width: 154px;
6363
}
6464

6565
.mx_MemberInfo .mx_RoomTile_badge {
6666
display: none;
6767
}
6868

69-
.mx_MemberInfo .mx_RoomTile_name {
69+
.mx_MemberInfo .mx_RoomTile_title {
7070
width: 160px;
7171
}
7272

‎res/css/views/rooms/_RoomTile.scss‎

Lines changed: 147 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ limitations under the License.
2020
padding: 4px;
2121

2222
contain: content; // Not strict as it will break when resizing a sublist vertically
23-
height: 40px;
2423
box-sizing: border-box;
2524

2625
// The tile is also a flexbox row itself
@@ -35,106 +34,166 @@ limitations under the License.
3534
}
3635

3736
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
38-
margin-right: 8px;
37+
margin-right: 10px;
3938
}
4039

41-
.mx_RoomTile_nameContainer {
40+
.mx_RoomTile_details {
4241
flex-grow: 1;
4342
min-width: 0; // allow flex to shrink it
44-
margin-right: 8px; // spacing to buttons/badges
45-
46-
// Create a new column layout flexbox for the name parts
4743
display: flex;
4844
flex-direction: column;
49-
justify-content: center;
50-
51-
.mx_RoomTile_name,
52-
.mx_RoomTile_messagePreview {
53-
margin: 0 2px;
54-
width: 100%;
55-
56-
// Ellipsize any text overflow
57-
text-overflow: ellipsis;
58-
overflow: hidden;
59-
white-space: nowrap;
60-
}
61-
62-
.mx_RoomTile_name {
63-
font-size: $font-14px;
64-
line-height: $font-18px;
65-
}
66-
67-
.mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
68-
font-weight: 600;
69-
}
7045

71-
.mx_RoomTile_messagePreview {
72-
font-size: $font-13px;
73-
line-height: $font-18px;
74-
color: $secondary-content;
75-
}
46+
.mx_RoomTile_primaryDetails {
47+
height: 32px;
48+
display: flex;
49+
flex-wrap: wrap;
50+
51+
.mx_RoomTile_titleContainer {
52+
min-width: 0;
53+
flex-basis: 0;
54+
flex-grow: 1;
55+
margin-right: 8px; // spacing to buttons/badges
56+
57+
// Create a new column layout flexbox for the title parts
58+
display: flex;
59+
flex-direction: column;
60+
justify-content: center;
61+
62+
.mx_RoomTile_title, .mx_RoomTile_subtitle {
63+
width: 100%;
64+
65+
// Ellipsize any text overflow
66+
text-overflow: ellipsis;
67+
overflow: hidden;
68+
white-space: nowrap;
69+
}
70+
71+
.mx_RoomTile_title {
72+
font-size: $font-14px;
73+
line-height: $font-18px;
74+
}
75+
76+
.mx_RoomTile_title.mx_RoomTile_titleHasUnreadEvents {
77+
font-weight: 600;
78+
}
79+
80+
.mx_RoomTile_subtitle {
81+
font-size: $font-13px;
82+
line-height: $font-18px;
83+
color: $secondary-content;
84+
}
85+
86+
.mx_RoomTile_subtitle.mx_RoomTile_voiceIndicator {
87+
&::before {
88+
display: inline-block;
89+
vertical-align: text-bottom;
90+
content: '';
91+
background-color: $secondary-content;
92+
mask-image: url('$(res)/img/voip/voice-room.svg');
93+
mask-size: 16px;
94+
width: 16px;
95+
height: 16px;
96+
margin-right: 4px;
97+
}
98+
99+
&.mx_RoomTile_voiceIndicator_active {
100+
color: $accent;
101+
102+
&::before {
103+
background-color: $accent;
104+
}
105+
}
106+
}
107+
108+
.mx_RoomTile_titleWithSubtitle {
109+
margin-top: -3px; // shift the title up a bit more
110+
}
111+
}
76112

77-
.mx_RoomTile_nameWithPreview {
78-
margin-top: -4px; // shift the name up a bit more
79-
}
80-
}
113+
.mx_RoomTile_notificationsButton {
114+
margin-left: 4px; // spacing between buttons
115+
}
81116

82-
.mx_RoomTile_notificationsButton {
83-
margin-left: 4px; // spacing between buttons
84-
}
117+
.mx_RoomTile_badgeContainer {
118+
height: 16px;
119+
// don't set width so that it takes no space when there is no badge to show
120+
margin: auto 0; // vertically align
121+
122+
// Create a flexbox to make aligning dot badges easier
123+
display: flex;
124+
align-items: center;
125+
126+
.mx_NotificationBadge {
127+
margin-right: 2px; // centering
128+
}
129+
130+
.mx_NotificationBadge_dot {
131+
// make the smaller dot occupy the same width for centering
132+
margin-left: 5px;
133+
margin-right: 7px;
134+
}
135+
}
85136

86-
.mx_RoomTile_badgeContainer {
87-
height: 16px;
88-
// don't set width so that it takes no space when there is no badge to show
89-
margin: auto 0; // vertically align
137+
// The context menu buttons are hidden by default
138+
.mx_RoomTile_menuButton,
139+
.mx_RoomTile_notificationsButton {
140+
width: 20px;
141+
min-width: 20px; // yay flex
142+
height: 20px;
143+
margin-top: auto;
144+
margin-bottom: auto;
145+
position: relative;
146+
display: none;
90147

91-
// Create a flexbox to make aligning dot badges easier
92-
display: flex;
93-
align-items: center;
148+
&::before {
149+
top: 2px;
150+
left: 2px;
151+
content: '';
152+
width: 16px;
153+
height: 16px;
154+
position: absolute;
155+
mask-position: center;
156+
mask-size: contain;
157+
mask-repeat: no-repeat;
158+
background: $primary-content;
159+
}
160+
}
94161

95-
.mx_NotificationBadge {
96-
margin-right: 2px; // centering
97-
}
162+
// If the room has an overriden notification setting then we always show the notifications menu button
163+
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
164+
display: block;
165+
}
98166

99-
.mx_NotificationBadge_dot {
100-
// make the smaller dot occupy the same width for centering
101-
margin-left: 5px;
102-
margin-right: 7px;
167+
.mx_RoomTile_menuButton::before {
168+
mask-image: url('$(res)/img/element-icons/context-menu.svg');
169+
}
103170
}
104-
}
105171

106-
// The context menu buttons are hidden by default
107-
.mx_RoomTile_menuButton,
108-
.mx_RoomTile_notificationsButton {
109-
width: 20px;
110-
min-width: 20px; // yay flex
111-
height: 20px;
112-
margin-top: auto;
113-
margin-bottom: auto;
114-
position: relative;
115-
display: none;
116-
117-
&::before {
118-
top: 2px;
119-
left: 2px;
120-
content: '';
121-
width: 16px;
122-
height: 16px;
123-
position: absolute;
124-
mask-position: center;
125-
mask-size: contain;
126-
mask-repeat: no-repeat;
127-
background: $primary-content;
128-
}
129-
}
172+
.mx_RoomTile_voiceChannel {
173+
width: 100%;
174+
display: flex;
175+
align-items: center;
130176

131-
// If the room has an overriden notification setting then we always show the notifications menu button
132-
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
133-
display: block;
134-
}
177+
.mx_FacePile {
178+
margin: 6px 0 4px;
179+
}
135180

136-
.mx_RoomTile_menuButton::before {
137-
mask-image: url('$(res)/img/element-icons/context-menu.svg');
181+
.mx_RoomTile_connectVoiceButton {
182+
font-weight: 600;
183+
padding-left: 10px;
184+
padding-right: 10px;
185+
186+
&::before {
187+
content: '';
188+
background-color: $accent;
189+
mask-image: url('$(res)/img/voip/voice-room.svg');
190+
mask-size: 16px;
191+
width: 16px;
192+
height: 16px;
193+
margin-right: 4px;
194+
}
195+
}
196+
}
138197
}
139198

140199
&:not(.mx_RoomTile_minimized) {
@@ -163,6 +222,10 @@ limitations under the License.
163222
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
164223
margin-right: 0;
165224
}
225+
226+
.mx_RoomTile_details {
227+
display: none;
228+
}
166229
}
167230
}
168231

0 commit comments

Comments
 (0)