Redesign the picture-in-picture window

matrix-org · Dec 20, 2022 · ba0f262 · ba0f262
1 parent 0ebc21b
commit ba0f262
Show file tree

Hide file tree

Showing 22 changed files with 427 additions and 220 deletions.
diff --git a/res/css/_components.pcss b/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/_DeviceDetailHeading.pcss";
 @import "./components/views/settings/devices/_DeviceDetails.pcss";
 @import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";

diff --git a/res/css/components/views/pips/_WidgetPip.pcss b/res/css/components/views/pips/_WidgetPip.pcss
@@ -0,0 +1,71 @@
+/*
+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 {
+    position: fixed;
+    left: 0;
+    top: 0;
+    /* Display above the widget element */
+    z-index: 102;
+}
+
+.mx_WidgetPip_content {
+    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;
+}
+
+.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));
+}
diff --git a/res/css/views/messages/_LegacyCallEvent.pcss b/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");
                 }
             }
         }

diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/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;
 

diff --git a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss
@@ -159,7 +159,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 */
             }
         }

diff --git a/res/css/views/voip/_CallView.pcss b/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,8 +44,8 @@ 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;
         border-radius: 8px;
 
         display: flex;
@@ -59,7 +59,7 @@ limitations under the License.
             margin: $spacing-8 auto 0;
 
             .mx_FacePile_faces .mx_BaseAvatar_image {
-                border-color: $call-lobby-background;
+                border-color: $call-background;
             }
         }
 
@@ -68,7 +68,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;
@@ -106,7 +106,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;
@@ -122,7 +122,7 @@ limitations under the License.
                         width: $size;
                         height: $size;
 
-                        background-color: $call-lobby-system;
+                        background-color: $call-system;
                         border-radius: calc($size / 2);
 
                         &::before {
@@ -131,7 +131,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%;
                         }
@@ -154,7 +154,7 @@ limitations under the License.
                         width: $size;
                         height: $size;
 
-                        background-color: $call-lobby-system;
+                        background-color: $call-system;
                         border-radius: calc($size / 2);
 
                         &::before {
@@ -163,7 +163,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%;
                         }
@@ -172,10 +172,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;
                             }
                         }
 

diff --git a/res/css/views/voip/_LegacyCallPreview.pcss b/res/css/views/voip/_LegacyCallPreview.pcss
@@ -27,4 +27,4 @@ limitations under the License.
         border-radius: 8px;
         overflow: hidden;
     }
-}
+}
diff --git a/res/img/element-icons/call/hangup.svg b/res/img/element-icons/call/hangup.svg
diff --git a/res/img/voip/call-view/hangup.svg b/res/img/voip/call-view/hangup.svg
diff --git a/res/img/voip/declined-voice.svg b/res/img/voip/declined-voice.svg
diff --git a/res/themes/dark/css/_dark.pcss b/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 */

diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/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;

diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/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;

diff --git a/res/themes/light/css/_light.pcss b/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 */

diff --git a/src/components/structures/PictureInPictureDragger.tsx b/src/components/structures/PictureInPictureDragger.tsx
@@ -65,12 +65,20 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
     private desiredTranslationY = UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_HEIGHT;
     private translationX = this.desiredTranslationX;
     private translationY = this.desiredTranslationY;
-    private moving = false;
-    private scheduledUpdate = new MarkedExecution(
+    private mouseHeld = false;
+    private scheduledUpdate: MarkedExecution = new MarkedExecution(
         () => this.animationCallback(),
         () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
     );
 
+    private _moving = false;
+    public get moving(): boolean {
+        return this._moving;
+    }
+    private set moving(value: boolean) {
+        this._moving = value;
+    }
+
     public componentDidMount() {
         document.addEventListener("mousemove", this.onMoving);
         document.addEventListener("mouseup", this.onEndMoving);
@@ -179,26 +187,47 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
         event.preventDefault();
         event.stopPropagation();
 
-        this.moving = true;
-        this.initX = event.pageX - this.desiredTranslationX;
-        this.initY = event.pageY - this.desiredTranslationY;
-        this.scheduledUpdate.mark();
+        this.mouseHeld = true;
     };
 
-    private onMoving = (event: React.MouseEvent | MouseEvent) => {
-        if (!this.moving) return;
+    private onMoving = (event: MouseEvent) => {
+        if (!this.mouseHeld) return;
 
         event.preventDefault();
         event.stopPropagation();
 
+        if (!this.moving) {
+            this.moving = true;
+            this.initX = event.pageX - this.desiredTranslationX;
+            this.initY = event.pageY - this.desiredTranslationY;
+            this.scheduledUpdate.mark();
+        }
+
         this.setTranslation(event.pageX - this.initX, event.pageY - this.initY);
     };
 
-    private onEndMoving = () => {
-        this.moving = false;
+    private onEndMoving = (event: MouseEvent) => {
+        if (!this.mouseHeld) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.mouseHeld = false;
+        // Delaying this to the next event loop tick is necessary for click
+        // event cancellation to work
+        setImmediate(() => (this.moving = false));
         this.snap(true);
     };
 
+    private onClickCapture = (event: React.MouseEvent) => {
+        // To prevent mouse up events during dragging from being double-counted
+        // as clicks, we cancel clicks before they ever reach the target
+        if (this.moving) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+
     public render() {
         const style = {
             transform: `translateX(${this.translationX}px) translateY(${this.translationY}px)`,
@@ -209,6 +238,7 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
                 className={this.props.className}
                 style={style}
                 ref={this.callViewWrapper}
+                onClickCapture={this.onClickCapture}
                 onDoubleClick={this.props.onDoubleClick}
             >
                 {this.props.children({