Update video rooms to new design specs (#8207)

* Remove radio component

* "Voice room" → "video room"

* Remove interactivity from video room tiles

* Update connection state when joining via widget

* Simplify room header buttons for video rooms

* Split out video room creation into a separate menu option

* Simplify room options for video rooms

* Update video room tile layout

* Tell the Jitsi widget whether it's a video channel

* Update tests

* "Voice" → "video" in more places

* Fix tests

* Re-add frame to immersive Jitsi widgets

* Comment ack

* Make updateDevices more readable

* Type FacePile

Author: robintown

res/css/_components.scss

@@ -314,4 +314,3 @@
 @import "./views/voip/_DialPadModal.scss";
 @import "./views/voip/_PiPContainer.scss";
 @import "./views/voip/_VideoFeed.scss";
-@import "./views/voip/_VoiceChannelRadio.scss";

res/css/structures/_RoomView.scss

@@ -218,9 +218,9 @@ hr.mx_RoomView_myReadMarker {
     margin-right: calc($container-gap-width / 2);
     width: auto;
     height: 100%;
+    padding-top: 33px; // to match the right panel chat heading
 
-    background: none;
-    border: none;
+    border-radius: 8px;
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {

res/css/views/elements/_FacePile.scss

@@ -20,7 +20,7 @@ limitations under the License.
         flex-direction: row-reverse;
         vertical-align: middle;
 
-        > * + * {
+        > .mx_FacePile_face + .mx_FacePile_face {
             margin-right: -8px;
         }
 

res/css/views/rooms/_RoomList.scss

@@ -21,9 +21,12 @@ limitations under the License.
 .mx_RoomList_iconPlus::before {
     mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
 }
-.mx_RoomList_iconCreateNewRoom::before {
+.mx_RoomList_iconNewRoom::before {
     mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
 }
+.mx_RoomList_iconNewVideoRoom::before {
+    mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+}
 .mx_RoomList_iconAddExistingRoom::before {
     mask-image: url('$(res)/img/element-icons/roomlist/hash.svg');
 }

res/css/views/rooms/_RoomListHeader.scss

@@ -103,9 +103,12 @@ limitations under the License.
 .mx_RoomListHeader_iconStartChat::before {
     mask-image: url('$(res)/img/element-icons/roomlist/member-plus.svg');
 }
-.mx_RoomListHeader_iconCreateRoom::before {
+.mx_RoomListHeader_iconNewRoom::before {
     mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
 }
+.mx_RoomListHeader_iconNewVideoRoom::before {
+    mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+}
 .mx_RoomListHeader_iconExplore::before {
     mask-image: url('$(res)/img/element-icons/roomlist/hash-search.svg');
 }

res/css/views/rooms/_RoomTile.scss

@@ -19,11 +19,12 @@ limitations under the License.
     margin-bottom: 4px;
     padding: 4px;
 
+    // The tile is also a flexbox row itself
+    display: flex;
     contain: content; // Not strict as it will break when resizing a sublist vertically
     box-sizing: border-box;
 
-    // The tile is also a flexbox row itself
-    display: flex;
+    font-size: $font-13px;
 
     &.mx_RoomTile_selected,
     &:hover,
@@ -37,165 +38,138 @@ limitations under the License.
         margin-right: 10px;
     }
 
-    .mx_RoomTile_details {
+    .mx_RoomTile_titleContainer {
+        height: 32px;
+        min-width: 0;
+        flex-basis: 0;
         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 title parts
         display: flex;
         flex-direction: column;
+        justify-content: center;
 
-        .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_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
+        .mx_RoomTile_title, .mx_RoomTile_subtitle {
+            width: 100%;
 
-                // Create a flexbox to make aligning dot badges easier
-                display: flex;
-                align-items: center;
+            // Ellipsize any text overflow
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
 
-                .mx_NotificationBadge {
-                    margin-right: 2px; // centering
-                }
+        .mx_RoomTile_title {
+            font-size: $font-14px;
+            line-height: $font-18px;
 
-                .mx_NotificationBadge_dot {
-                    // make the smaller dot occupy the same width for centering
-                    margin-left: 5px;
-                    margin-right: 7px;
-                }
+            &.mx_RoomTile_titleHasUnreadEvents {
+                font-weight: 600;
             }
+        }
 
-            // 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;
+        .mx_RoomTile_subtitle {
+            line-height: $font-18px;
+            color: $secondary-content;
 
+            .mx_RoomTile_videoIndicator {
                 &::before {
-                    top: 2px;
-                    left: 2px;
+                    display: inline-block;
+                    vertical-align: text-bottom;
                     content: '';
+                    background-color: $secondary-content;
+                    mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+                    mask-size: 16px;
                     width: 16px;
                     height: 16px;
-                    position: absolute;
-                    mask-position: center;
-                    mask-size: contain;
-                    mask-repeat: no-repeat;
-                    background: $primary-content;
+                    margin-right: 4px;
                 }
-            }
 
-            // 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_RoomTile_videoIndicator_active {
+                    color: $accent;
+
+                    &::before {
+                        background-color: $accent;
+                    }
+                }
             }
 
-            .mx_RoomTile_menuButton::before {
-                mask-image: url('$(res)/img/element-icons/context-menu.svg');
+            .mx_RoomTile_videoParticipants::before {
+                display: inline-block;
+                vertical-align: text-bottom;
+                content: '';
+                background-color: $secondary-content;
+                mask-image: url('$(res)/img/element-icons/group-members.svg');
+                mask-size: 16px;
+                width: 16px;
+                height: 16px;
+                margin-right: 2px;
             }
         }
 
-        .mx_RoomTile_voiceChannel {
-            width: 100%;
-            display: flex;
-            align-items: center;
+        .mx_RoomTile_titleWithSubtitle {
+            margin-top: -3px; // shift the title up a bit more
+        }
+    }
 
-            .mx_FacePile {
-                margin: 6px 0 4px;
-            }
+    .mx_RoomTile_notificationsButton {
+        margin-left: 4px; // spacing between buttons
+    }
 
-            .mx_RoomTile_connectVoiceButton {
-                font-weight: 600;
-                padding-left: 10px;
-                padding-right: 10px;
+    .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
 
-                &::before {
-                    content: '';
-                    background-color: $accent;
-                    mask-image: url('$(res)/img/voip/voice-room.svg');
-                    mask-size: 16px;
-                    width: 16px;
-                    height: 16px;
-                    margin-right: 4px;
-                }
-            }
+        // 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;
+        }
+    }
+
+    // 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;
         }
     }
 
+    // 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_RoomTile_menuButton::before {
+        mask-image: url('$(res)/img/element-icons/context-menu.svg');
+    }
+
     &:not(.mx_RoomTile_minimized) {
         &:hover,
         &:focus-within,
@@ -222,10 +196,6 @@ limitations under the License.
         .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
             margin-right: 0;
         }
-
-        .mx_RoomTile_details {
-            display: none;
-        }
     }
 }