imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
107 changed files with 2573 additions and 2157 deletions
Download patch file Download diff file Expand all files Collapse all files

44
res/css/views/voip/CallView/_CallViewButtons.pcss → res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss
View file

@ -18,13 +18,13 @@ limitations under the License.
/* data-whatintent makes more sense here semantically but then the tooltip would stay visible without the button */
/* which looks broken, so we match the behaviour of tooltips which is fine too. */
[data-whatinput="mouse"] .mx_CallViewButtons.mx_CallViewButtons_hidden {
[data-whatinput="mouse"] .mx_LegacyCallViewButtons.mx_LegacyCallViewButtons_hidden {
opacity: 0.001; /* opacity 0 can cause a re-layout */
pointer-events: none;
}
.mx_CallViewButtons {
--CallViewButtons_dropdownButton-size: 16px;
.mx_LegacyCallViewButtons {
--LegacyCallViewButtons_dropdownButton-size: 16px;
position: absolute;
display: flex;
@ -35,7 +35,7 @@ limitations under the License.
z-index: 200; /* To be above _all_ feeds */
gap: 18px;
.mx_CallViewButtons_button {
.mx_LegacyCallViewButtons_button {
cursor: pointer;
background-color: $call-view-button-on-background;
@ -66,9 +66,9 @@ limitations under the License.
width: 24px;
}
&.mx_CallViewButtons_dropdownButton {
width: var(--CallViewButtons_dropdownButton-size);
height: var(--CallViewButtons_dropdownButton-size);
&.mx_LegacyCallViewButtons_dropdownButton {
width: var(--LegacyCallViewButtons_dropdownButton-size);
height: var(--LegacyCallViewButtons_dropdownButton-size);
position: absolute;
right: 0;
@ -80,28 +80,28 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/message/chevron-up.svg');
}
&.mx_CallViewButtons_dropdownButton_collapsed::before {
&.mx_LegacyCallViewButtons_dropdownButton_collapsed::before {
transform: rotate(180deg);
}
}
/* State buttons */
&.mx_CallViewButtons_button_on {
&.mx_LegacyCallViewButtons_button_on {
background-color: $call-view-button-on-background;
&::before {
background-color: $call-view-button-on-foreground;
}
&.mx_CallViewButtons_button_mic::before {
&.mx_LegacyCallViewButtons_button_mic::before {
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
}
&.mx_CallViewButtons_button_vid::before {
&.mx_LegacyCallViewButtons_button_vid::before {
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
}
&.mx_CallViewButtons_button_screensharing {
&.mx_LegacyCallViewButtons_button_screensharing {
background-color: $accent;
&::before {
@ -110,27 +110,27 @@ limitations under the License.
}
}
&.mx_CallViewButtons_button_sidebar::before {
&.mx_LegacyCallViewButtons_button_sidebar::before {
mask-image: url('$(res)/img/voip/call-view/sidebar-on.svg');
}
}
&.mx_CallViewButtons_button_off {
&.mx_LegacyCallViewButtons_button_off {
background-color: $call-view-button-off-background;
&::before {
background-color: $call-view-button-off-foreground;
}
&.mx_CallViewButtons_button_mic::before {
&.mx_LegacyCallViewButtons_button_mic::before {
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
}
&.mx_CallViewButtons_button_vid::before {
&.mx_LegacyCallViewButtons_button_vid::before {
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
}
&.mx_CallViewButtons_button_screensharing {
&.mx_LegacyCallViewButtons_button_screensharing {
background-color: $call-view-button-on-background;
&::before {
@ -139,7 +139,7 @@ limitations under the License.
}
}
&.mx_CallViewButtons_button_sidebar {
&.mx_LegacyCallViewButtons_button_sidebar {
background-color: $call-view-button-on-background;
&::before {
@ -151,11 +151,11 @@ limitations under the License.
/* State buttons */
/* Stateless buttons */
&.mx_CallViewButtons_dialpad::before {
&.mx_LegacyCallViewButtons_dialpad::before {
mask-image: url('$(res)/img/voip/call-view/dialpad.svg');
}
&.mx_CallViewButtons_button_hangup {
&.mx_LegacyCallViewButtons_button_hangup {
background-color: $alert;
&::before {
@ -164,13 +164,13 @@ limitations under the License.
}
}
&.mx_CallViewButtons_button_more::before {
&.mx_LegacyCallViewButtons_button_more::before {
mask-image: url('$(res)/img/voip/call-view/more.svg');
}
/* Stateless buttons */
/* Invisible state */
&.mx_CallViewButtons_button_invisible {
&.mx_LegacyCallViewButtons_button_invisible {
visibility: hidden;
pointer-events: none;
position: absolute;

60
res/css/views/voip/_VideoLobby.pcss → res/css/views/voip/_CallLobby.pcss
View file

@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_VideoLobby {
.mx_CallLobby {
min-height: 0;
flex-grow: 1;
padding: $spacing-12;
color: $video-lobby-primary-content;
background-color: $video-lobby-background;
color: $call-lobby-primary-content;
background-color: $call-lobby-background;
border-radius: 8px;
display: flex;
@ -33,16 +33,16 @@ limitations under the License.
margin: $spacing-8 auto 0;
.mx_FacePile_faces .mx_BaseAvatar_image {
border-color: $video-lobby-background;
border-color: $call-lobby-background;
}
}
.mx_VideoLobby_preview {
.mx_CallLobby_preview {
position: relative;
width: 100%;
max-width: 800px;
aspect-ratio: 1.5;
background-color: $video-lobby-system;
background-color: $call-lobby-system;
border-radius: 20px;
overflow: hidden;
@ -74,29 +74,29 @@ limitations under the License.
background-color: black;
}
.mx_VideoLobby_controls {
.mx_CallLobby_controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba($video-lobby-background, 0.9);
background-color: rgba($call-lobby-background, 0.9);
display: flex;
justify-content: center;
gap: $spacing-24;
.mx_VideoLobby_deviceButtonWrapper {
.mx_CallLobby_deviceButtonWrapper {
position: relative;
margin: 6px 0 10px;
.mx_VideoLobby_deviceButton {
.mx_CallLobby_deviceButton {
$size: 50px;
width: $size;
height: $size;
background-color: $video-lobby-primary-content;
background-color: $call-lobby-system;
border-radius: calc($size / 2);
&::before {
@ -105,21 +105,21 @@ limitations under the License.
mask-repeat: no-repeat;
mask-size: 20px;
mask-position: center;
background-color: $video-lobby-system;
background-color: $call-lobby-primary-content;
height: 100%;
width: 100%;
}
&.mx_VideoLobby_deviceButton_audio::before {
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
&.mx_CallLobby_deviceButton_audio::before {
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
}
&.mx_VideoLobby_deviceButton_video::before {
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
&.mx_CallLobby_deviceButton_video::before {
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
}
}
.mx_VideoLobby_deviceListButton {
.mx_CallLobby_deviceListButton {
$size: 15px;
position: absolute;
@ -128,7 +128,7 @@ limitations under the License.
width: $size;
height: $size;
background-color: $video-lobby-primary-content;
background-color: $call-lobby-system;
border-radius: calc($size / 2);
&::before {
@ -137,29 +137,29 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
mask-size: $size;
mask-position: center;
background-color: $video-lobby-system;
background-color: $call-lobby-primary-content;
height: 100%;
width: 100%;
}
}
&.mx_VideoLobby_deviceButtonWrapper_active {
.mx_VideoLobby_deviceButton,
.mx_VideoLobby_deviceListButton {
background-color: $video-lobby-system;
&.mx_CallLobby_deviceButtonWrapper_muted {
.mx_CallLobby_deviceButton,
.mx_CallLobby_deviceListButton {
background-color: $call-lobby-primary-content;
&::before {
background-color: $video-lobby-primary-content;
background-color: $call-lobby-system;
}
}
.mx_VideoLobby_deviceButton {
&.mx_VideoLobby_deviceButton_audio::before {
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
.mx_CallLobby_deviceButton {
&.mx_CallLobby_deviceButton_audio::before {
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
}
&.mx_VideoLobby_deviceButton_video::before {
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
&.mx_CallLobby_deviceButton_video::before {
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
}
}
}
@ -167,7 +167,7 @@ limitations under the License.
}
}
.mx_VideoLobby_joinButton {
.mx_CallLobby_connectButton {
padding-left: 50px;
padding-right: 50px;
}

2
res/css/views/voip/_CallPreview.pcss → res/css/views/voip/_LegacyCallPreview.pcss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallPreview {
.mx_LegacyCallPreview {
position: fixed;
left: 0;
top: 0;

38
res/css/views/voip/_CallView.pcss → res/css/views/voip/_LegacyCallView.pcss
View file

@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallView {
.mx_LegacyCallView {
border-radius: 8px;
background-color: $dark-panel-bg-color;
padding-left: 8px;
@ -24,7 +24,7 @@ limitations under the License.
/* XXX: PiPContainer sets pointer-events: none - should probably be set back in a better place */
pointer-events: initial;
.mx_CallView_toast {
.mx_LegacyCallView_toast {
position: absolute;
top: 74px;
@ -38,7 +38,7 @@ limitations under the License.
background-color: #17191c;
}
.mx_CallView_content_wrapper {
.mx_LegacyCallView_content_wrapper {
display: flex;
justify-content: center;
@ -47,7 +47,7 @@ limitations under the License.
overflow: hidden;
.mx_CallView_content {
.mx_LegacyCallView_content {
position: relative;
display: flex;
@ -65,12 +65,12 @@ limitations under the License.
background-color: $call-view-content-background;
.mx_CallView_status {
.mx_LegacyCallView_status {
z-index: 50;
color: $accent-fg-color;
}
.mx_CallView_avatarsContainer {
.mx_LegacyCallView_avatarsContainer {
display: flex;
flex-direction: row;
align-items: center;
@ -82,7 +82,7 @@ limitations under the License.
}
}
.mx_CallView_holdBackground {
.mx_LegacyCallView_holdBackground {
position: absolute;
left: 0;
right: 0;
@ -107,7 +107,7 @@ limitations under the License.
}
}
&.mx_CallView_content_hold .mx_CallView_status {
&.mx_LegacyCallView_content_hold .mx_LegacyCallView_status {
font-weight: bold;
text-align: center;
@ -123,7 +123,7 @@ limitations under the License.
background-size: cover;
}
.mx_CallView_pip &::before {
.mx_LegacyCallView_pip &::before {
width: 30px;
height: 30px;
}
@ -131,7 +131,7 @@ limitations under the License.
}
}
&:not(.mx_CallView_sidebar) .mx_CallView_content {
&:not(.mx_LegacyCallView_sidebar) .mx_LegacyCallView_content {
padding: 0;
width: 100%;
height: 100%;
@ -145,7 +145,7 @@ limitations under the License.
}
}
&.mx_CallView_pip {
&.mx_LegacyCallView_pip {
width: 320px;
padding-bottom: 8px;
@ -154,16 +154,16 @@ limitations under the License.
background-color: $system;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
.mx_CallViewButtons {
.mx_LegacyCallViewButtons {
bottom: 13px;
.mx_CallViewButtons_button {
.mx_LegacyCallViewButtons_button {
width: 34px;
height: 34px;
&.mx_CallViewButtons_dropdownButton {
width: var(--CallViewButtons_dropdownButton-size);
height: var(--CallViewButtons_dropdownButton-size);
&.mx_LegacyCallViewButtons_dropdownButton {
width: var(--LegacyCallViewButtons_dropdownButton-size);
height: var(--LegacyCallViewButtons_dropdownButton-size);
}
&::before {
@ -173,12 +173,12 @@ limitations under the License.
}
}
.mx_CallView_content {
.mx_LegacyCallView_content {
min-height: 180px;
}
}
&.mx_CallView_large {
&.mx_LegacyCallView_large {
display: flex;
flex-direction: column;
align-items: center;
@ -193,7 +193,7 @@ limitations under the License.
margin-bottom: 10px;
}
&.mx_CallView_belowWidget {
&.mx_LegacyCallView_belowWidget {
margin-top: 0;
}
}

6
res/css/views/voip/_CallViewForRoom.pcss → res/css/views/voip/_LegacyCallViewForRoom.pcss
View file

@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallViewForRoom {
.mx_LegacyCallViewForRoom {
overflow: hidden;
.mx_CallViewForRoom_ResizeWrapper {
.mx_LegacyCallViewForRoom_ResizeWrapper {
display: flex;
&:hover .mx_CallViewForRoom_ResizeHandle {
&:hover .mx_LegacyCallViewForRoom_ResizeHandle {
/* Need to use important to override element style attributes */
/* set by re-resizable */
width: 100% !important;

26
res/css/views/voip/_CallViewHeader.pcss → res/css/views/voip/_LegacyCallViewHeader.pcss
View file

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallViewHeader {
.mx_LegacyCallViewHeader {
height: 44px;
display: flex;
flex-direction: row;
@ -24,18 +24,18 @@ limitations under the License.
flex-shrink: 0;
width: 100%;
&.mx_CallViewHeader_pip {
&.mx_LegacyCallViewHeader_pip {
cursor: pointer;
}
}
.mx_CallViewHeader_text {
.mx_LegacyCallViewHeader_text {
font-size: 1.2rem;
font-weight: bold;
vertical-align: middle;
}
.mx_CallViewHeader_secondaryCallInfo {
.mx_LegacyCallViewHeader_secondaryCallInfo {
&::before {
content: '·';
margin-left: 6px;
@ -43,13 +43,13 @@ limitations under the License.
}
}
.mx_CallViewHeader_controls {
.mx_LegacyCallViewHeader_controls {
margin-left: auto;
display: flex;
gap: 5px;
}
.mx_CallViewHeader_button {
.mx_LegacyCallViewHeader_button {
display: inline-block;
vertical-align: middle;
cursor: pointer;
@ -66,32 +66,32 @@ limitations under the License.
mask-position: center;
}
&.mx_CallViewHeader_button_fullscreen {
&.mx_LegacyCallViewHeader_button_fullscreen {
&::before {
mask-image: url('$(res)/img/element-icons/call/fullscreen.svg');
}
}
&.mx_CallViewHeader_button_pin {
&.mx_LegacyCallViewHeader_button_pin {
&::before {
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
}
}
&.mx_CallViewHeader_button_expand {
&.mx_LegacyCallViewHeader_button_expand {
&::before {
mask-image: url('$(res)/img/element-icons/call/expand.svg');
}
}
}
.mx_CallViewHeader_callInfo {
.mx_LegacyCallViewHeader_callInfo {
margin-left: 12px;
margin-right: 16px;
overflow: hidden;
}
.mx_CallViewHeader_roomName {
.mx_LegacyCallViewHeader_roomName {
font-weight: bold;
font-size: 12px;
line-height: initial;
@ -102,11 +102,11 @@ limitations under the License.
white-space: nowrap;
}
.mx_CallView_secondaryCall_roomName {
.mx_LegacyCallView_secondaryCall_roomName {
margin-left: 4px;
}
.mx_CallViewHeader_icon {
.mx_LegacyCallViewHeader_icon {
display: inline-block;
margin-right: 6px;
height: 16px;

4
res/css/views/voip/_CallViewSidebar.pcss → res/css/views/voip/_LegacyCallViewSidebar.pcss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_CallViewSidebar {
.mx_LegacyCallViewSidebar {
position: absolute;
right: 10px;
@ -41,7 +41,7 @@ limitations under the License.
}
}
&.mx_CallViewSidebar_pipMode {
&.mx_LegacyCallViewSidebar_pipMode {
top: 16px;
bottom: unset;
justify-content: flex-end;