Merge pull request #5992 from SimonBrandner/fix/12652/screen-share

Add support for screen sharing in 1:1 calls

Author: dbkr

res/css/_components.scss

@@ -269,6 +269,7 @@
 @import "./views/voip/_CallPreview.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_CallViewForRoom.scss";
+@import "./views/voip/_CallViewSidebar.scss";
 @import "./views/voip/_DialPad.scss";
 @import "./views/voip/_DialPadContextMenu.scss";
 @import "./views/voip/_DialPadModal.scss";

res/css/views/elements/_DesktopCapturerSourcePicker.scss

@@ -16,57 +16,43 @@ limitations under the License.
 
 .mx_desktopCapturerSourcePicker {
     overflow: hidden;
-}
-
-.mx_desktopCapturerSourcePicker_tabLabels {
-    display: flex;
-    padding: 0 0 8px 0;
-}
-
-.mx_desktopCapturerSourcePicker_tabLabel,
-.mx_desktopCapturerSourcePicker_tabLabel_selected {
-    width: 100%;
-    text-align: center;
-    border-radius: 8px;
-    padding: 8px 0;
-    font-size: $font-13px;
-}
-
-.mx_desktopCapturerSourcePicker_tabLabel_selected {
-    background-color: $tab-label-active-bg-color;
-    color: $tab-label-active-fg-color;
-}
-
-.mx_desktopCapturerSourcePicker_panel {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: flex-start;
-    height: 500px;
-    overflow: overlay;
-}
-
-.mx_desktopCapturerSourcePicker_stream_button {
-    display: flex;
-    flex-direction: column;
-    margin: 8px;
-    border-radius: 4px;
-}
-
-.mx_desktopCapturerSourcePicker_stream_button:hover,
-.mx_desktopCapturerSourcePicker_stream_button:focus {
-    background: $roomtile-selected-bg-color;
-}
-
-.mx_desktopCapturerSourcePicker_stream_thumbnail {
-    margin: 4px;
-    width: 312px;
-}
 
-.mx_desktopCapturerSourcePicker_stream_name {
-    margin: 0 4px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    width: 312px;
+    .mx_desktopCapturerSourcePicker_tab {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: flex-start;
+        height: 500px;
+        overflow: overlay;
+    }
+
+    .mx_desktopCapturerSourcePicker_source {
+        display: flex;
+        flex-direction: column;
+        margin: 8px;
+    }
+
+    .mx_desktopCapturerSourcePicker_source_thumbnail {
+        margin: 4px;
+        padding: 4px;
+        width: 312px;
+        border-width: 2px;
+        border-radius: 8px;
+        border-style: solid;
+        border-color: transparent;
+
+        &.mx_desktopCapturerSourcePicker_source_thumbnail_selected,
+        &:hover,
+        &:focus {
+            border-color: $accent-color;
+        }
+    }
+
+    .mx_desktopCapturerSourcePicker_source_name {
+        margin: 0 4px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 312px;
+    }
 }

res/css/views/voip/_CallView.scss

@@ -67,7 +67,26 @@ limitations under the License.
 .mx_CallView_content {
     position: relative;
     display: flex;
+    justify-content: center;
     border-radius: 8px;
+
+    > .mx_VideoFeed {
+        width: 100%;
+        height: 100%;
+
+        &.mx_VideoFeed_voice {
+            // We don't want to collide with the call controls that have 52px of height
+            padding-bottom: 52px;
+            background-color: $inverted-bg-color;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        &.mx_VideoFeed_video {
+            background-color: #000;
+        }
+    }
 }
 
 .mx_CallView_voice {
@@ -290,17 +309,37 @@ limitations under the License.
     width: 100%;
     opacity: 1;
     transition: opacity 0.5s;
+    z-index: 200; // To be above _all_ feeds
 }
 
 .mx_CallView_callControls_hidden {
     opacity: 0.001; // opacity 0 can cause a re-layout
     pointer-events: none;
 }
 
+.mx_CallView_presenting {
+    opacity: 1;
+    transition: opacity 0.5s;
+
+    position: absolute;
+    margin-top: 18px;
+    padding: 4px 8px;
+    border-radius: 4px;
+
+    // Same on both themes
+    color: white;
+    background-color: #17191c;
+}
+
+.mx_CallView_presenting_hidden {
+    opacity: 0.001; // opacity 0 can cause a re-layout
+    pointer-events: none;
+}
+
 .mx_CallView_callControls_button {
     cursor: pointer;
-    margin-left: 8px;
-    margin-right: 8px;
+    margin-left: 2px;
+    margin-right: 2px;
 
 
     &::before {
@@ -317,17 +356,11 @@ limitations under the License.
 }
 
 .mx_CallView_callControls_dialpad {
-    margin-right: auto;
     &::before {
         background-image: url('$(res)/img/voip/dialpad.svg');
     }
 }
 
-.mx_CallView_callControls_button_dialpad_hidden {
-    margin-right: auto;
-    cursor: initial;
-}
-
 .mx_CallView_callControls_button_micOn {
     &::before {
         background-image: url('$(res)/img/voip/mic-on.svg');
@@ -352,24 +385,42 @@ limitations under the License.
     }
 }
 
+.mx_CallView_callControls_button_screensharingOn {
+    &::before {
+        background-image: url('$(res)/img/voip/screensharing-on.svg');
+    }
+}
+
+.mx_CallView_callControls_button_screensharingOff {
+    &::before {
+        background-image: url('$(res)/img/voip/screensharing-off.svg');
+    }
+}
+
+.mx_CallView_callControls_button_sidebarOn {
+    &::before {
+        background-image: url('$(res)/img/voip/sidebar-on.svg');
+    }
+}
+
+.mx_CallView_callControls_button_sidebarOff {
+    &::before {
+        background-image: url('$(res)/img/voip/sidebar-off.svg');
+    }
+}
+
 .mx_CallView_callControls_button_hangup {
     &::before {
         background-image: url('$(res)/img/voip/hangup.svg');
     }
 }
 
 .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;

res/css/views/voip/_CallViewSidebar.scss

@@ -0,0 +1,52 @@
+/*
+Copyright 2021 Šimon Brandner <[email protected]>
+
+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_CallViewSidebar {
+    position: absolute;
+    right: 16px;
+    bottom: 16px;
+    z-index: 100; // To be above the primary feed
+
+    overflow: auto;
+
+    height: calc(100% - 32px); // Subtract the top and bottom padding
+    width: 20%;
+
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+    align-items: flex-end;
+    gap: 12px;
+
+    > .mx_VideoFeed {
+        width: 100%;
+
+        &.mx_VideoFeed_voice {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            aspect-ratio: 16 / 9;
+        }
+    }
+
+    &.mx_CallViewSidebar_pipMode {
+        top: 16px;
+        bottom: unset;
+        justify-content: flex-end;
+        gap: 4px;
+    }
+}

res/css/views/voip/_VideoFeed.scss

@@ -14,31 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_VideoFeed_voice {
-    background-color: $inverted-bg-color;
-}
-
+.mx_VideoFeed {
+    border-radius: 4px;
 
-.mx_VideoFeed_remote {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 
-    &.mx_VideoFeed_video {
-        background-color: #000;
+    &.mx_VideoFeed_voice {
+        background-color: $inverted-bg-color;
     }
-}
-
-.mx_VideoFeed_local {
-    max-width: 25%;
-    max-height: 25%;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 100;
-    border-radius: 4px;
 
     &.mx_VideoFeed_video {
         background-color: transparent;