Improve VoIP UI/UX (#7048)

* Remove speaking indicator

Signed-off-by: Šimon Brandner <[email protected]>

* Remove mic icon for primary feed

Signed-off-by: Šimon Brandner <[email protected]>

* Remove caching as it doesn't seem to be neccessary

Signed-off-by: Šimon Brandner <[email protected]>

* Add call view buttons colors

Signed-off-by: Šimon Brandner <[email protected]>

* Refactor button code

Signed-off-by: Šimon Brandner <[email protected]>

* Update call view button icons

Signed-off-by: Šimon Brandner <[email protected]>

* i18n

Signed-off-by: Šimon Brandner <[email protected]>

* Add dialpad icon

Signed-off-by: Šimon Brandner <[email protected]>

* Fix button sizing in PiP

Signed-off-by: Šimon Brandner <[email protected]>

* Fix secondary voice video feed color

Signed-off-by: Šimon Brandner <[email protected]>

Author: SimonBrandner

res/css/views/voip/CallView/_CallViewButtons.scss

@@ -20,10 +20,11 @@ limitations under the License.
     position: absolute;
     display: flex;
     justify-content: center;
-    bottom: 5px;
+    bottom: 24px;
     opacity: 1;
     transition: opacity 0.5s;
     z-index: 200; // To be above _all_ feeds
+    gap: 18px;
 
     &.mx_CallViewButtons_hidden {
         opacity: 0.001; // opacity 0 can cause a re-layout
@@ -32,69 +33,121 @@ limitations under the License.
 
     .mx_CallViewButtons_button {
         cursor: pointer;
-        margin-left: 2px;
-        margin-right: 2px;
+
+        background-color: $call-view-button-on-background;
+
+        border-radius: 100%;
+        height: 40px;
+        width: 40px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
         &::before {
             content: '';
             display: inline-block;
 
-            height: 48px;
-            width: 48px;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-position: center;
 
-            background-repeat: no-repeat;
-            background-size: contain;
-            background-position: center;
-        }
+            background-color: $call-view-button-on-foreground;
 
-        &.mx_CallViewButtons_dialpad::before {
-            background-image: url('$(res)/img/voip/dialpad.svg');
+            height: 24px;
+            width: 24px;
         }
 
-        &.mx_CallViewButtons_button_micOn::before {
-            background-image: url('$(res)/img/voip/mic-on.svg');
-        }
+        // State buttons
+        &.mx_CallViewButtons_button_on {
+            background-color: $call-view-button-on-background;
 
-        &.mx_CallViewButtons_button_micOff::before {
-            background-image: url('$(res)/img/voip/mic-off.svg');
-        }
+            &::before {
+                background-color: $call-view-button-on-foreground;
+            }
 
-        &.mx_CallViewButtons_button_vidOn::before {
-            background-image: url('$(res)/img/voip/vid-on.svg');
-        }
+            &.mx_CallViewButtons_button_mic::before {
+                mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
+            }
 
-        &.mx_CallViewButtons_button_vidOff::before {
-            background-image: url('$(res)/img/voip/vid-off.svg');
-        }
+            &.mx_CallViewButtons_button_vid::before {
+                mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
+            }
 
-        &.mx_CallViewButtons_button_screensharingOn::before {
-            background-image: url('$(res)/img/voip/screensharing-on.svg');
-        }
+            &.mx_CallViewButtons_button_screensharing {
+                background-color: $accent;
 
-        &.mx_CallViewButtons_button_screensharingOff::before {
-            background-image: url('$(res)/img/voip/screensharing-off.svg');
+                &::before {
+                    mask-image: url('$(res)/img/voip/call-view/screensharing.svg');
+                    background-color: white; // Same on both themes
+                }
+            }
+
+            &.mx_CallViewButtons_button_sidebar::before {
+                mask-image: url('$(res)/img/voip/call-view/sidebar-on.svg');
+            }
         }
 
-        &.mx_CallViewButtons_button_sidebarOn::before {
-            background-image: url('$(res)/img/voip/sidebar-on.svg');
+        &.mx_CallViewButtons_button_off {
+            background-color: $call-view-button-off-background;
+
+            &::before {
+                background-color: $call-view-button-off-foreground;
+            }
+
+            &.mx_CallViewButtons_button_mic::before {
+                mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
+            }
+
+            &.mx_CallViewButtons_button_vid::before {
+                mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
+            }
+
+            &.mx_CallViewButtons_button_screensharing {
+                background-color: $call-view-button-on-background;
+
+                &::before {
+                    mask-image: url('$(res)/img/voip/call-view/screensharing.svg');
+                    background-color: $call-view-button-on-foreground;
+                }
+            }
+
+            &.mx_CallViewButtons_button_sidebar {
+                background-color: $call-view-button-on-background;
+
+                &::before {
+                    mask-image: url('$(res)/img/voip/call-view/sidebar-off.svg');
+                    background-color: $call-view-button-on-foreground;
+                }
+            }
         }
+        // State buttons
 
-        &.mx_CallViewButtons_button_sidebarOff::before {
-            background-image: url('$(res)/img/voip/sidebar-off.svg');
+        // Stateless buttons
+        &.mx_CallViewButtons_dialpad::before {
+            mask-image: url('$(res)/img/voip/call-view/dialpad.svg');
         }
 
-        &.mx_CallViewButtons_button_hangup::before {
-            background-image: url('$(res)/img/voip/hangup.svg');
+        &.mx_CallViewButtons_button_hangup {
+            background-color: $alert;
+
+            &::before {
+                mask-image: url('$(res)/img/voip/call-view/hangup.svg');
+                background-color: white; // Same on both themes
+            }
         }
 
         &.mx_CallViewButtons_button_more::before {
-            background-image: url('$(res)/img/voip/more.svg');
+            mask-image: url('$(res)/img/voip/call-view/more.svg');
         }
+        // Stateless buttons
 
+        // Invisible state
         &.mx_CallViewButtons_button_invisible {
             visibility: hidden;
             pointer-events: none;
             position: absolute;
         }
+        // Invisible state
     }
 }

res/css/views/voip/_CallView.scss

@@ -49,13 +49,16 @@ limitations under the License.
     }
 
     .mx_CallViewButtons {
-        bottom: 0px;
+        bottom: 13px;
     }
 
     .mx_CallViewButtons_button {
+        width: 34px;
+        height: 34px;
+
         &::before {
-            width: 36px;
-            height: 36px;
+            width: 22px;
+            height: 22px;
         }
     }
 
@@ -74,7 +77,6 @@ limitations under the License.
     > .mx_VideoFeed {
         width: 100%;
         height: 100%;
-        border-width: 0 !important; // Override mx_VideoFeed_speaking
 
         &.mx_VideoFeed_voice {
             display: flex;

res/css/views/voip/_CallViewSidebar.scss

@@ -39,6 +39,8 @@ limitations under the License.
             display: flex;
             align-items: center;
             justify-content: center;
+
+            background-color: $video-feed-secondary-background;
         }
 
         .mx_VideoFeed_video {

res/css/views/voip/_VideoFeed.scss

@@ -26,14 +26,6 @@ limitations under the License.
         aspect-ratio: 16 / 9;
     }
 
-    &.mx_VideoFeed_speaking {
-        border: $accent 2px solid;
-
-        .mx_VideoFeed_video {
-            border-radius: 0;
-        }
-    }
-
     .mx_VideoFeed_video {
         width: 100%;
         background-color: transparent;