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

Commit 0d6a550

Browse files
authored
Prepare for Element Call integration (#9224)
* 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
1 parent 50f6986 commit 0d6a550

File tree

107 files changed

+2580
-2164
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

107 files changed

+2580
-2164
lines changed

.eslintrc.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,10 @@ module.exports = {
117117
"@typescript-eslint/ban-ts-comment": "off",
118118
// We're okay with assertion errors when we ask for them
119119
"@typescript-eslint/no-non-null-assertion": "off",
120+
121+
// The non-TypeScript rule produces false positives
122+
"func-call-spacing": "off",
123+
"@typescript-eslint/func-call-spacing": ["error"],
120124
},
121125
},
122126
// temporary override for offending icon require files

res/css/_common.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -752,7 +752,7 @@ legend {
752752
cursor: pointer;
753753
}
754754

755-
@define-mixin CallButton {
755+
@define-mixin LegacyCallButton {
756756
box-sizing: border-box;
757757
font-weight: 600;
758758
height: $font-24px;

res/css/_components.pcss

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,9 @@
9797
@import "./views/avatars/_DecoratedRoomAvatar.pcss";
9898
@import "./views/avatars/_WidgetAvatar.pcss";
9999
@import "./views/beta/_BetaCard.pcss";
100-
@import "./views/context_menus/_CallContextMenu.pcss";
101100
@import "./views/context_menus/_DeviceContextMenu.pcss";
102101
@import "./views/context_menus/_IconizedContextMenu.pcss";
102+
@import "./views/context_menus/_LegacyCallContextMenu.pcss";
103103
@import "./views/context_menus/_MessageContextMenu.pcss";
104104
@import "./views/context_menus/_RoomGeneralContextMenu.pcss";
105105
@import "./views/context_menus/_RoomNotificationContextMenu.pcss";
@@ -207,13 +207,13 @@
207207
@import "./views/elements/_Validation.pcss";
208208
@import "./views/emojipicker/_EmojiPicker.pcss";
209209
@import "./views/location/_LocationPicker.pcss";
210-
@import "./views/messages/_CallEvent.pcss";
211210
@import "./views/messages/_CreateEvent.pcss";
212211
@import "./views/messages/_DateSeparator.pcss";
213212
@import "./views/messages/_DisambiguatedProfile.pcss";
214213
@import "./views/messages/_EventTileBubble.pcss";
215214
@import "./views/messages/_HiddenBody.pcss";
216215
@import "./views/messages/_JumpToDatePicker.pcss";
216+
@import "./views/messages/_LegacyCallEvent.pcss";
217217
@import "./views/messages/_MEmoteBody.pcss";
218218
@import "./views/messages/_MFileBody.pcss";
219219
@import "./views/messages/_MImageBody.pcss";
@@ -282,13 +282,13 @@
282282
@import "./views/rooms/_RoomPreviewCard.pcss";
283283
@import "./views/rooms/_RoomSublist.pcss";
284284
@import "./views/rooms/_RoomTile.pcss";
285+
@import "./views/rooms/_RoomTileCallSummary.pcss";
285286
@import "./views/rooms/_RoomUpgradeWarningBar.pcss";
286287
@import "./views/rooms/_SearchBar.pcss";
287288
@import "./views/rooms/_SendMessageComposer.pcss";
288289
@import "./views/rooms/_Stickers.pcss";
289290
@import "./views/rooms/_ThreadSummary.pcss";
290291
@import "./views/rooms/_TopUnreadMessagesBar.pcss";
291-
@import "./views/rooms/_VideoRoomSummary.pcss";
292292
@import "./views/rooms/_VoiceRecordComposerTile.pcss";
293293
@import "./views/rooms/_WhoIsTypingTile.pcss";
294294
@import "./views/settings/_AvatarSetting.pcss";
@@ -333,7 +333,7 @@
333333
@import "./views/spaces/_SpacePublicShare.pcss";
334334
@import "./views/terms/_InlineTermsAgreement.pcss";
335335
@import "./views/toasts/_AnalyticsToast.pcss";
336-
@import "./views/toasts/_IncomingCallToast.pcss";
336+
@import "./views/toasts/_IncomingLegacyCallToast.pcss";
337337
@import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
338338
@import "./views/typography/_Heading.pcss";
339339
@import "./views/user-onboarding/_UserOnboardingButton.pcss";
@@ -343,15 +343,15 @@
343343
@import "./views/user-onboarding/_UserOnboardingPage.pcss";
344344
@import "./views/user-onboarding/_UserOnboardingTask.pcss";
345345
@import "./views/verification/_VerificationShowSas.pcss";
346-
@import "./views/voip/CallView/_CallViewButtons.pcss";
347-
@import "./views/voip/_CallPreview.pcss";
348-
@import "./views/voip/_CallView.pcss";
349-
@import "./views/voip/_CallViewForRoom.pcss";
350-
@import "./views/voip/_CallViewHeader.pcss";
351-
@import "./views/voip/_CallViewSidebar.pcss";
346+
@import "./views/voip/LegacyCallView/_LegacyCallViewButtons.pcss";
347+
@import "./views/voip/_CallLobby.pcss";
352348
@import "./views/voip/_DialPad.pcss";
353349
@import "./views/voip/_DialPadContextMenu.pcss";
354350
@import "./views/voip/_DialPadModal.pcss";
351+
@import "./views/voip/_LegacyCallPreview.pcss";
352+
@import "./views/voip/_LegacyCallView.pcss";
353+
@import "./views/voip/_LegacyCallViewForRoom.pcss";
354+
@import "./views/voip/_LegacyCallViewHeader.pcss";
355+
@import "./views/voip/_LegacyCallViewSidebar.pcss";
355356
@import "./views/voip/_PiPContainer.pcss";
356357
@import "./views/voip/_VideoFeed.pcss";
357-
@import "./views/voip/_VideoLobby.pcss";

res/css/structures/_VideoRoomView.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ limitations under the License.
3434
}
3535

3636
/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
37-
.mx_VideoLobby ~ .mx_AppTile {
37+
.mx_CallLobby ~ .mx_AppTile {
3838
display: none;
3939
}
4040
}

res/css/views/context_menus/_CallContextMenu.pcss renamed to res/css/views/context_menus/_LegacyCallContextMenu.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_CallContextMenu_item {
17+
.mx_LegacyCallContextMenu_item {
1818
width: 205px;
1919
height: 40px;
2020
padding-left: 16px;

res/css/views/messages/_CallEvent.pcss renamed to res/css/views/messages/_LegacyCallEvent.pcss

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_CallEvent_wrapper {
17+
.mx_LegacyCallEvent_wrapper {
1818
display: flex;
1919
width: 100%;
2020

21-
.mx_CallEvent {
21+
.mx_LegacyCallEvent {
2222
display: flex;
2323
flex-direction: row;
2424
flex-wrap: wrap;
@@ -35,7 +35,7 @@ limitations under the License.
3535
width: 65%;
3636
height: fit-content;
3737

38-
.mx_CallEvent_iconButton {
38+
.mx_LegacyCallEvent_iconButton {
3939
display: inline-flex;
4040

4141
&::before {
@@ -50,74 +50,74 @@ limitations under the License.
5050
}
5151
}
5252

53-
.mx_CallEvent_silence::before {
53+
.mx_LegacyCallEvent_silence::before {
5454
mask-image: url('$(res)/img/voip/silence.svg');
5555
}
5656

57-
.mx_CallEvent_unSilence::before {
57+
.mx_LegacyCallEvent_unSilence::before {
5858
mask-image: url('$(res)/img/voip/un-silence.svg');
5959
}
6060

61-
&.mx_CallEvent_voice {
62-
.mx_CallEvent_type_icon::before,
63-
.mx_CallEvent_content_button_callBack span::before,
64-
.mx_CallEvent_content_button_answer span::before {
61+
&.mx_LegacyCallEvent_voice {
62+
.mx_LegacyCallEvent_type_icon::before,
63+
.mx_LegacyCallEvent_content_button_callBack span::before,
64+
.mx_LegacyCallEvent_content_button_answer span::before {
6565
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
6666
}
6767

68-
&.mx_CallEvent_rejected,
69-
&.mx_CallEvent_noAnswer {
70-
.mx_CallEvent_type_icon::before {
68+
&.mx_LegacyCallEvent_rejected,
69+
&.mx_LegacyCallEvent_noAnswer {
70+
.mx_LegacyCallEvent_type_icon::before {
7171
mask-image: url('$(res)/img/voip/declined-voice.svg');
7272
}
7373
}
7474
}
7575

76-
&.mx_CallEvent_video {
77-
.mx_CallEvent_type_icon::before,
78-
.mx_CallEvent_content_button_callBack span::before,
79-
.mx_CallEvent_content_button_answer span::before {
76+
&.mx_LegacyCallEvent_video {
77+
.mx_LegacyCallEvent_type_icon::before,
78+
.mx_LegacyCallEvent_content_button_callBack span::before,
79+
.mx_LegacyCallEvent_content_button_answer span::before {
8080
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
8181
}
8282

83-
&.mx_CallEvent_rejected,
84-
&.mx_CallEvent_noAnswer {
85-
.mx_CallEvent_type_icon::before {
83+
&.mx_LegacyCallEvent_rejected,
84+
&.mx_LegacyCallEvent_noAnswer {
85+
.mx_LegacyCallEvent_type_icon::before {
8686
mask-image: url('$(res)/img/voip/declined-video.svg');
8787
}
8888
}
8989
}
9090

91-
&.mx_CallEvent_missed {
92-
&.mx_CallEvent_voice {
93-
.mx_CallEvent_type_icon::before {
91+
&.mx_LegacyCallEvent_missed {
92+
&.mx_LegacyCallEvent_voice {
93+
.mx_LegacyCallEvent_type_icon::before {
9494
mask-image: url('$(res)/img/voip/missed-voice.svg');
9595
}
9696
}
9797

98-
&.mx_CallEvent_video {
99-
.mx_CallEvent_type_icon::before {
98+
&.mx_LegacyCallEvent_video {
99+
.mx_LegacyCallEvent_type_icon::before {
100100
mask-image: url('$(res)/img/voip/missed-video.svg');
101101
}
102102
}
103103
}
104104

105-
.mx_CallEvent_info {
105+
.mx_LegacyCallEvent_info {
106106
display: flex;
107107
flex-direction: row;
108108
align-items: center;
109109
width: fit-content;
110110
max-width: 100%;
111111

112-
.mx_CallEvent_info_basic {
112+
.mx_LegacyCallEvent_info_basic {
113113
display: flex;
114114
flex-direction: column;
115115
gap: $spacing-4;
116-
margin-left: 10px; /* To match mx_CallEvent */
116+
margin-left: 10px; /* To match mx_LegacyCallEvent */
117117
margin-right: 10px;
118118
min-width: 0;
119119

120-
.mx_CallEvent_sender {
120+
.mx_LegacyCallEvent_sender {
121121
font-weight: 600;
122122
font-size: 1.5rem;
123123
line-height: 1.8rem;
@@ -128,15 +128,15 @@ limitations under the License.
128128
text-overflow: ellipsis;
129129
}
130130

131-
.mx_CallEvent_type {
131+
.mx_LegacyCallEvent_type {
132132
display: flex;
133133
align-items: center;
134134
font-weight: 400;
135135
color: $secondary-content;
136136
font-size: 1.2rem;
137137
line-height: $font-13px;
138138

139-
.mx_CallEvent_type_icon {
139+
.mx_LegacyCallEvent_type_icon {
140140
height: 13px;
141141
width: 13px;
142142
margin-right: 5px;
@@ -155,18 +155,18 @@ limitations under the License.
155155
}
156156
}
157157

158-
.mx_CallEvent_content {
158+
.mx_LegacyCallEvent_content {
159159
display: flex;
160160
flex-wrap: wrap;
161161
align-items: center;
162162
color: $secondary-content;
163-
gap: $spacing-12; /* See mx_IncomingCallToast_buttons */
164-
margin-inline-start: 42px; /* avatar (32px) + mx_CallEvent_info_basic margin (10px) */
163+
gap: $spacing-12; /* See mx_IncomingLegacyCallToast_buttons */
164+
margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */
165165
word-break: break-word;
166166
max-width: fit-content;
167167

168-
.mx_CallEvent_content_button {
169-
@mixin CallButton;
168+
.mx_LegacyCallEvent_content_button {
169+
@mixin LegacyCallButton;
170170
padding: 0 $spacing-12;
171171

172172
span::before {
@@ -177,25 +177,25 @@ limitations under the License.
177177
}
178178
}
179179

180-
.mx_CallEvent_content_button_reject {
180+
.mx_LegacyCallEvent_content_button_reject {
181181
span::before {
182182
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
183183
}
184184
}
185185

186-
.mx_CallEvent_content_tooltip {
186+
.mx_LegacyCallEvent_content_tooltip {
187187
margin-right: 5px;
188188
}
189189
}
190190

191-
&.mx_CallEvent_narrow {
191+
&.mx_LegacyCallEvent_narrow {
192192
flex-direction: column;
193193
align-items: unset;
194194
gap: $spacing-4 $spacing-16;
195195
height: unset;
196196
min-width: 290px;
197197

198-
.mx_CallEvent_iconButton {
198+
.mx_LegacyCallEvent_iconButton {
199199
position: absolute;
200200
margin-right: 0;
201201
top: 12px;
@@ -205,16 +205,16 @@ limitations under the License.
205205
display: flex;
206206
}
207207

208-
.mx_CallEvent_info {
208+
.mx_LegacyCallEvent_info {
209209
align-items: unset;
210210
}
211211
}
212212
}
213213
}
214214

215215
.mx_EventTile[data-layout="bubble"] {
216-
.mx_EventTile_e2eIcon + .mx_CallEvent_wrapper {
217-
.mx_CallEvent {
216+
.mx_EventTile_e2eIcon + .mx_LegacyCallEvent_wrapper {
217+
.mx_LegacyCallEvent {
218218
position: relative;
219219

220220
/* 5px (gap) + 14px (e2e icon size * mask-size) + 9px (margin-left of e2e icon) */
@@ -224,18 +224,18 @@ limitations under the License.
224224
}
225225

226226
.mx_EventTile_leftAlignedBubble {
227-
.mx_CallEvent_wrapper {
228-
.mx_CallEvent {
229-
&.mx_CallEvent_narrow {
227+
.mx_LegacyCallEvent_wrapper {
228+
.mx_LegacyCallEvent {
229+
&.mx_LegacyCallEvent_narrow {
230230
gap: $spacing-8 $spacing-4;
231231
}
232232
}
233233
}
234234
}
235235

236236
.mx_IRCLayout {
237-
.mx_CallEvent_wrapper {
238-
.mx_CallEvent {
237+
.mx_LegacyCallEvent_wrapper {
238+
.mx_LegacyCallEvent {
239239
margin-inline-start: $spacing-4; /* display green line */
240240
}
241241
}

res/css/views/rooms/_VideoRoomSummary.pcss renamed to res/css/views/rooms/_RoomTileCallSummary.pcss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_VideoRoomSummary {
18-
.mx_VideoRoomSummary_indicator {
17+
.mx_RoomTileCallSummary {
18+
.mx_RoomTileCallSummary_text {
1919
&::before {
2020
display: inline-block;
2121
vertical-align: text-bottom;
@@ -28,7 +28,7 @@ limitations under the License.
2828
margin-right: 4px;
2929
}
3030

31-
&.mx_VideoRoomSummary_indicator_active {
31+
&.mx_RoomTileCallSummary_text_active {
3232
color: $accent;
3333

3434
&::before {
@@ -37,7 +37,7 @@ limitations under the License.
3737
}
3838
}
3939

40-
.mx_VideoRoomSummary_participants::before {
40+
.mx_RoomTileCallSummary_participants::before {
4141
display: inline-block;
4242
vertical-align: text-bottom;
4343
content: '';

0 commit comments

Comments
 (0)