Redesign the picture-in-picture window (#9800)

* Remove unnecessary PipContainer component

* Redesign the picture-in-picture window

* Add a hover effect to the controls

* Clarify that WidgetPip has call-specific behavior

cypress/e2e/widgets/widget-pip-close.spec.ts

@@ -145,7 +145,7 @@ describe("Widget PIP", () => {
                     win.mxActiveWidgetStore.setWidgetPersistence(DEMO_WIDGET_ID, roomId, true);
 
                     // checks that pip window is opened
-                    cy.get(".mx_LegacyCallView_pip").should("exist");
+                    cy.get(".mx_WidgetPip").should("exist");
 
                     // checks that widget is opened in pip
                     cy.accessIframe(`iframe[title="${DEMO_WIDGET_NAME}"]`).within({}, () => {
@@ -164,7 +164,7 @@ describe("Widget PIP", () => {
                                 }
 
                                 // checks that pip window is closed
-                                cy.get(".mx_LegacyCallView_pip").should("not.exist");
+                                cy.get(".mx_WidgetPip").should("not.exist");
                             });
                     });
                 });

res/css/_components.pcss

@@ -30,6 +30,7 @@
 @import "./components/views/location/_ZoomButtons.pcss";
 @import "./components/views/messages/_MBeaconBody.pcss";
 @import "./components/views/messages/shared/_MediaProcessingError.pcss";
+@import "./components/views/pips/_WidgetPip.pcss";
 @import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
 @import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
 @import "./components/views/settings/devices/_DeviceDetails.pcss";
@@ -373,7 +374,6 @@
 @import "./views/voip/_LegacyCallViewForRoom.pcss";
 @import "./views/voip/_LegacyCallViewHeader.pcss";
 @import "./views/voip/_LegacyCallViewSidebar.pcss";
-@import "./views/voip/_PiPContainer.pcss";
 @import "./views/voip/_VideoFeed.pcss";
 @import "./voice-broadcast/atoms/_LiveBadge.pcss";
 @import "./voice-broadcast/atoms/_PlaybackControlButton.pcss";

res/css/components/views/pips/_WidgetPip.pcss

@@ -0,0 +1,68 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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_WidgetPip {
+    width: 320px;
+    height: 220px;
+    border-radius: 8px;
+    contain: paint;
+    color: $call-primary-content;
+    cursor: pointer;
+}
+
+.mx_WidgetPip_header,
+.mx_WidgetPip_footer {
+    position: absolute;
+    left: 0;
+    height: 60px;
+    width: 100%;
+    box-sizing: border-box;
+    transition: opacity ease 0.15s;
+
+    .mx_WidgetPip:not(:hover) > & {
+        opacity: 0;
+    }
+}
+
+.mx_WidgetPip_header {
+    top: 0;
+    padding: $spacing-12;
+    display: flex;
+    font-size: $font-12px;
+    font-weight: $font-semi-bold;
+    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
+}
+
+.mx_WidgetPip_backButton {
+    height: $spacing-24;
+    display: flex;
+    align-items: center;
+    gap: $spacing-12;
+
+    > .mx_Icon {
+        color: $call-light-quaternary-content;
+        padding: 0;
+    }
+}
+
+.mx_WidgetPip_footer {
+    bottom: 0;
+    padding: $spacing-12 $spacing-8;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+}

res/css/views/messages/_LegacyCallEvent.pcss

@@ -68,7 +68,7 @@ limitations under the License.
             &.mx_LegacyCallEvent_rejected,
             &.mx_LegacyCallEvent_noAnswer {
                 .mx_LegacyCallEvent_type_icon::before {
-                    mask-image: url("$(res)/img/voip/declined-voice.svg");
+                    mask-image: url("$(res)/img/element-icons/call/hangup.svg");
                 }
             }
         }

res/css/views/rooms/_AppsDrawer.pcss

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$MiniAppTileHeight: 200px;
+$MiniAppTileHeight: 220px;
 /* TODO this should be 300px but that's too large */
 $MinWidth: 240px;
 

res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss

@@ -163,7 +163,7 @@ limitations under the License.
             background-color: $alert;
 
             &::before {
-                mask-image: url("$(res)/img/voip/call-view/hangup.svg");
+                mask-image: url("$(res)/img/element-icons/call/hangup.svg");
                 background-color: white; /* Same on both themes */
             }
         }

res/css/views/voip/_CallView.pcss

@@ -32,7 +32,7 @@ limitations under the License.
         height: 100%;
         border: none;
         border-radius: inherit;
-        background-color: $call-lobby-background;
+        background-color: $call-background;
     }
 
     /* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
@@ -44,10 +44,10 @@ limitations under the License.
         min-height: 0;
         flex-grow: 1;
         padding: $spacing-12;
-        color: $call-lobby-primary-content;
-        background-color: $call-lobby-background;
+        color: $call-primary-content;
+        background-color: $call-background;
 
-        --facepile-background: $call-lobby-background;
+        --facepile-background: $call-background;
         border-radius: 8px;
 
         display: flex;
@@ -66,7 +66,7 @@ limitations under the License.
             width: 100%;
             max-width: 800px;
             aspect-ratio: 1.5;
-            background-color: $call-lobby-system;
+            background-color: $call-system;
 
             border-radius: 20px;
             overflow: hidden;
@@ -104,7 +104,7 @@ limitations under the License.
                 left: 0;
                 right: 0;
 
-                background-color: rgba($call-lobby-background, 0.9);
+                background-color: rgba($call-background, 0.9);
 
                 display: flex;
                 justify-content: center;
@@ -120,7 +120,7 @@ limitations under the License.
                         width: $size;
                         height: $size;
 
-                        background-color: $call-lobby-system;
+                        background-color: $call-system;
                         border-radius: calc($size / 2);
 
                         &::before {
@@ -129,7 +129,7 @@ limitations under the License.
                             mask-repeat: no-repeat;
                             mask-size: 20px;
                             mask-position: center;
-                            background-color: $call-lobby-primary-content;
+                            background-color: $call-primary-content;
                             height: 100%;
                             width: 100%;
                         }
@@ -153,7 +153,7 @@ limitations under the License.
                         width: $size;
                         height: $size;
 
-                        background-color: $call-lobby-system;
+                        background-color: $call-system;
                         border-radius: calc($size / 2);
 
                         &::before {
@@ -162,7 +162,7 @@ limitations under the License.
                             mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
                             mask-size: $size;
                             mask-position: center;
-                            background-color: $call-lobby-primary-content;
+                            background-color: $call-primary-content;
                             height: 100%;
                             width: 100%;
                         }
@@ -171,10 +171,10 @@ limitations under the License.
                     &.mx_CallView_deviceButtonWrapper_muted {
                         .mx_CallView_deviceButton,
                         .mx_CallView_deviceListButton {
-                            background-color: $call-lobby-primary-content;
+                            background-color: $call-primary-content;
 
                             &::before {
-                                background-color: $call-lobby-system;
+                                background-color: $call-system;
                             }
                         }
 

res/css/views/voip/_LegacyCallPreview.pcss

@@ -22,8 +22,8 @@ limitations under the License.
     left: 0;
     position: fixed;
     top: 0;
-
-    pointer-events: initial; /* restore pointer events so the user can leave/interact */
+    /* Display above any widget elements */
+    z-index: 102;
 
     .mx_VideoFeed_remote.mx_VideoFeed_voice {
         min-height: 150px;

res/themes/dark/css/_dark.pcss

@@ -188,9 +188,10 @@ $call-view-content-background: $quinary-content;
 
 $video-feed-secondary-background: $system;
 
-$call-lobby-system: $system;
-$call-lobby-background: $background;
-$call-lobby-primary-content: $primary-content;
+$call-system: $system;
+$call-background: $background;
+$call-primary-content: $primary-content;
+$call-light-quaternary-content: #c1c6cd;
 /* ******************** */
 
 /* Location sharing */

res/themes/legacy-dark/css/_legacy-dark.pcss

@@ -119,9 +119,10 @@ $call-view-content-background: $quinary-content;
 
 $video-feed-secondary-background: $system;
 
-$call-lobby-system: $system;
-$call-lobby-background: $background;
-$call-lobby-primary-content: $primary-content;
+$call-system: $system;
+$call-background: $background;
+$call-primary-content: $primary-content;
+$call-light-quaternary-content: #c1c6cd;
 
 $roomlist-filter-active-bg-color: $panel-actions;
 $roomlist-bg-color: $header-panel-bg-color;

res/themes/legacy-light/css/_legacy-light.pcss

@@ -182,9 +182,10 @@ $call-view-content-background: #21262c;
 $video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
 
 /* All of these are from dark theme */
-$call-lobby-system: #21262c;
-$call-lobby-background: #15191e;
-$call-lobby-primary-content: #ffffff;
+$call-system: #21262c;
+$call-background: #15191e;
+$call-primary-content: #ffffff;
+$call-light-quaternary-content: #c1c6cd;
 
 $username-variant1-color: #368bd6;
 $username-variant2-color: #ac3ba8;

res/themes/light/css/_light.pcss

@@ -273,9 +273,11 @@ $video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
 $voipcall-plinth-color: $system;
 
 /* All of these are from dark theme */
-$call-lobby-system: #21262c;
-$call-lobby-background: #15191e;
-$call-lobby-primary-content: #ffffff;
+$call-system: #21262c;
+$call-background: #15191e;
+$call-primary-content: #ffffff;
+/* This one is from light theme */
+$call-light-quaternary-content: #c1c6cd;
 /* ******************** */
 
 /* One-off colors */

src/components/structures/LoggedInView.tsx

@@ -41,7 +41,6 @@ import { DefaultTagID } from "../../stores/room-list/models";
 import { hideToast as hideServerLimitToast, showToast as showServerLimitToast } from "../../toasts/ServerLimitToast";
 import { Action } from "../../dispatcher/actions";
 import LeftPanel from "./LeftPanel";
-import PipContainer from "../views/voip/PipContainer";
 import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload";
 import RoomListStore from "../../stores/room-list/RoomListStore";
 import NonUrgentToastContainer from "./NonUrgentToastContainer";
@@ -71,6 +70,7 @@ import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload
 import { IConfigOptions } from "../../IConfigOptions";
 import LeftPanelLiveShareWarning from "../views/beacon/LeftPanelLiveShareWarning";
 import { UserOnboardingPage } from "../views/user-onboarding/UserOnboardingPage";
+import { PipContainer } from "./PipContainer";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.