Merge pull request #5446 from matrix-org/dbkr/hold_ui

Add UI for hold functionality

res/css/_components.scss

@@ -51,6 +51,7 @@
 @import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/avatars/_PulsedAvatar.scss";
 @import "./views/avatars/_WidgetAvatar.scss";
+@import "./views/context_menus/_CallContextMenu.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_StatusMessageContextMenu.scss";

res/css/views/context_menus/_CallContextMenu.scss

@@ -0,0 +1,23 @@
+/*
+Copyright 2020 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CallContextMenu_item {
+    width: 205px;
+    height: 40px;
+    padding-left: 16px;
+    line-height: 40px;
+    vertical-align: center;
+}

res/css/views/voip/_CallView.scss

@@ -16,10 +16,11 @@ limitations under the License.
 */
 
 .mx_CallView {
-    border-radius: 10px;
+    border-radius: 8px;
     background-color: $voipcall-plinth-color;
     padding-left: 8px;
     padding-right: 8px;
+    margin: 5px 5px 5px 18px;
     // XXX: CallContainer sets pointer-events: none - should probably be set back in a better place
     pointer-events: initial;
 }
@@ -43,15 +44,120 @@ limitations under the License.
 .mx_CallView_voice {
     position: relative;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: $inverted-bg-color;
+    border-radius: 8px;
+}
+
+.mx_CallView_voice_hold {
+    // This masks the avatar image so when it's blurred, the edge is still crisp
+    .mx_CallView_voice_avatarContainer {
+        border-radius: 2000px;
+        overflow: hidden;
+        position: relative;
+        &::after {
+            position: absolute;
+            content: '';
+            width: 100%;
+            height: 100%;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(0, 0, 0, 0.6);
+            background-image: url('$(res)/img/voip/paused.svg');
+            background-position: center;
+            background-size: 40px;
+            background-repeat: no-repeat;
+        }
+        .mx_CallView_pip &::after {
+            background-size: 30px;
+        }
+    }
+    .mx_BaseAvatar {
+        filter: blur(20px);
+        overflow: hidden;
+    }
+}
+
+.mx_CallView_voice_holdText {
+    height: 20px;
+    padding-top: 20px;
+    color: $accent-fg-color;
+    .mx_AccessibleButton_hasKind {
+        padding: 0px;
+        font-weight: bold;
+    }
 }
 
 .mx_CallView_video {
     width: 100%;
     position: relative;
     z-index: 30;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.mx_CallView_video_hold {
+    overflow: hidden;
+
+    // we keep these around in the DOM: it saved wiring them up again when the call
+    // is resumed and keeps the container the right size
+    .mx_VideoFeed {
+        visibility: hidden;
+    }
+}
+
+.mx_CallView_video_holdBackground {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    right: 0;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    filter: blur(20px);
+    &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        right: 0;
+        background-color: rgba(0, 0, 0, 0.6);
+    }
+}
+
+.mx_CallView_video_holdContent {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+    color: $accent-fg-color;
+    text-align: center;
+
+    &::before {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        content: '';
+        width: 40px;
+        height: 40px;
+        background-image: url('$(res)/img/voip/paused.svg');
+        background-position: center;
+        background-size: cover;
+    }
+    .mx_CallView_pip &::before {
+        width: 30px;
+        height: 30px;
+    }
+    .mx_AccessibleButton_hasKind {
+        padding: 0px;
+    }
 }
 
 .mx_CallView_header {
@@ -67,6 +173,7 @@ limitations under the License.
 }
 
 .mx_CallView_header_callType {
+    font-size: 1.2rem;
     font-weight: bold;
     vertical-align: middle;
 }
@@ -173,6 +280,12 @@ limitations under the License.
     }
 }
 
+// Makes the alignment correct
+.mx_CallView_callControls_nothing {
+    margin-right: auto;
+    cursor: initial;
+}
+
 .mx_CallView_callControls_button_micOn {
     &::before {
         background-image: url('$(res)/img/voip/mic-on.svg');
@@ -203,6 +316,18 @@ limitations under the License.
     }
 }
 
+.mx_CallView_callControls_button_more {
+    margin-left: auto;
+    &::before {
+        background-image: url('$(res)/img/voip/more.svg');
+    }
+}
+
+.mx_CallView_callControls_button_more_hidden {
+    margin-left: auto;
+    cursor: initial;
+}
+
 .mx_CallView_callControls_button_invisible {
     visibility: hidden;
     pointer-events: none;