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

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
107 changed files with 2573 additions and 2157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/messages/_CallEvent.pcss → res/css/views/messages/_LegacyCallEvent.pcss
+47 -47
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 */
}
}