From 49bd66c377ec7d1b1ad2a32220cc352328ab69bf Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Nov 2020 16:36:23 +0000
Subject: [PATCH] Change fullscreen button to expand button in PIP view

and fix call controls which didn't appear in video call
---
 res/css/views/voip/_CallView.scss      | 13 ++++++++++++-
 res/img/element-icons/call/expand.svg  |  3 +++
 src/components/views/voip/CallView.tsx | 21 ++++++++++++++++++---
 3 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 res/img/element-icons/call/expand.svg

diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index 6c41d62548..eeef7bd621 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -75,7 +75,7 @@ limitations under the License.
     margin-left: auto;
 }
 
-.mx_CallView_header_control_fullscreen {
+.mx_CallView_header_button {
     display: inline-block;
     vertical-align: middle;
     cursor: pointer;
@@ -90,10 +90,21 @@ limitations under the License.
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;
+    }
+}
+
+.mx_CallView_header_button_fullscreen {
+    &::before {
         mask-image: url('$(res)/img/element-icons/call/fullscreen.svg');
     }
 }
 
+.mx_CallView_header_button_expand {
+    &::before {
+        mask-image: url('$(res)/img/element-icons/call/expand.svg');
+    }
+}
+
 .mx_CallView_header_roomName {
     font-weight: bold;
     font-size: 12px;
diff --git a/res/img/element-icons/call/expand.svg b/res/img/element-icons/call/expand.svg
new file mode 100644
index 0000000000..91ef4d8a76
--- /dev/null
+++ b/res/img/element-icons/call/expand.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 19H18C18.55 19 19 18.55 19 18V6C19 5.45 18.55 5 18 5H13C12.45 5 12 4.55 12 4C12 3.45 12.45 3 13 3H19C20.11 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V13C3 12.45 3.45 12 4 12C4.55 12 5 12.45 5 13V18C5 18.55 5.45 19 6 19ZM10 4C10 4.55 9.55 5 9 5H6.41L15.54 14.13C15.93 14.52 15.93 15.15 15.54 15.54C15.15 15.93 14.52 15.93 14.13 15.54L5 6.41V9C5 9.55 4.55 10 4 10C3.45 10 3 9.55 3 9V4C3 3.44772 3.44772 3 4 3H9C9.55 3 10 3.45 10 4Z" fill="#737D8C"/>
+</svg>
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 9eacf0415d..c534a87d47 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -201,6 +201,13 @@ export default class CallView extends React.Component<IProps, IState> {
         });
     };
 
+    private onExpandClick = () => {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: this.state.call.roomId,
+        });
+    };
+
     private onControlsHideTimer = () => {
         this.controlsHideTimer = null;
         this.setState({
@@ -355,7 +362,7 @@ export default class CallView extends React.Component<IProps, IState> {
         if (this.state.call.type === CallType.Video) {
             // if we're fullscreen, we don't want to set a maxHeight on the video element.
             const maxVideoHeight = getFullScreenElement() ? null : this.props.maxVideoHeight;
-            contentView = <div className="mx_CallView_video" ref={this.contentRef}>
+            contentView = <div className="mx_CallView_video" ref={this.contentRef} onMouseMove={this.onMouseMove}>
                 <VideoFeed type={VideoFeedType.Remote} call={this.state.call} onResize={this.props.onResize}
                     maxHeight={maxVideoHeight}
                 />
@@ -378,14 +385,22 @@ export default class CallView extends React.Component<IProps, IState> {
         let myClassName;
 
         let fullScreenButton;
-        if (this.state.call.type === CallType.Video) {
-            fullScreenButton = <div className="mx_CallView_header_control_fullscreen"
+        if (this.state.call.type === CallType.Video && this.props.room) {
+            fullScreenButton = <div className="mx_CallView_header_button mx_CallView_header_button_fullscreen"
                 onClick={this.onFullscreenClick} title={_t("Fill screen")}
             />;
         }
 
+        let expandButton;
+        if (!this.props.room) {
+            expandButton = <div className="mx_CallView_header_button mx_CallView_header_button_expand"
+                onClick={this.onExpandClick} title={_t("Return to call")}
+            />;
+        }
+
         const headerControls = <div className="mx_CallView_header_controls">
             {fullScreenButton}
+            {expandButton}
         </div>;
 
         let header: React.ReactNode;