From 60ab7aaed58aca649bb3a63820fb4b582609afb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 12 Jun 2021 17:20:13 +0200
Subject: [PATCH] Support hiding sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/voip/_CallView.scss      | 12 +++++++++
 src/components/views/voip/CallView.tsx | 34 ++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index d49891ca6b..d8f78fa210 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -386,6 +386,18 @@ limitations under the License.
     }
 }
 
+.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');
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 925141883d..11e1bb1dfb 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -67,6 +67,7 @@ interface IState {
     showDialpad: boolean,
     primaryFeed: CallFeed,
     secondaryFeeds: Array<CallFeed>,
+    sidebarShown: boolean,
 }
 
 function getFullScreenElement() {
@@ -127,6 +128,7 @@ export default class CallView extends React.Component<IProps, IState> {
             showDialpad: false,
             primaryFeed: primary,
             secondaryFeeds: secondary,
+            sidebarShown: true,
         }
 
         this.updateCallListeners(null, this.props.call);
@@ -428,6 +430,10 @@ export default class CallView extends React.Component<IProps, IState> {
         });
     }
 
+    private onToggleSidebar = () => {
+        this.setState({ sidebarShown: !this.state.sidebarShown });
+    }
+
     private renderCallControls(): JSX.Element {
         const micClasses = classNames({
             mx_CallView_callControls_button: true,
@@ -447,6 +453,12 @@ export default class CallView extends React.Component<IProps, IState> {
             mx_CallView_callControls_button_screensharingOff: !this.state.screensharing,
         });
 
+        const sidebarButtonClasses = classNames({
+            mx_CallView_callControls_button: true,
+            mx_CallView_callControls_button_sidebarOn: this.state.sidebarShown,
+            mx_CallView_callControls_button_sidebarOff: !this.state.sidebarShown,
+        });
+
         // Put the other states of the mic/video icons in the document to make sure they're cached
         // (otherwise the icon disappears briefly when toggled)
         const micCacheClasses = classNames({
@@ -496,6 +508,23 @@ export default class CallView extends React.Component<IProps, IState> {
             );
         }
 
+        // To show the sidebar we need secondary feeds, if we don't have them,
+        // we can hide this button. If we are in PiP, sidebar is also hidden, so
+        // we can hide the button too
+        let sidebarButton;
+        if (
+            (this.props.call.type === CallType.Video ||
+            this.state.primaryFeed?.purpose === SDPStreamMetadataPurpose.Screenshare) &&
+            !this.props.pipMode
+        ) {
+            sidebarButton = (
+                <AccessibleButton
+                    className={sidebarButtonClasses}
+                    onClick={this.onToggleSidebar}
+                />
+            );
+        }
+
         // The dial pad & 'more' button actions are only relevant in a connected call
         // When not connected, we have to put something there to make the flexbox alignment correct
         const dialpadButton = this.state.callState === CallState.Connected ? <ContextMenuButton
@@ -519,12 +548,13 @@ export default class CallView extends React.Component<IProps, IState> {
                     className={micClasses}
                     onClick={this.onMicMuteClick}
                 />
+                { vidMuteButton }
                 <AccessibleButton
                     className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
                     onClick={this.onHangupClick}
                 />
-                { vidMuteButton }
                 { screensharingButton }
+                { sidebarButton }
                 <div className={micCacheClasses} />
                 <div className={vidCacheClasses} />
                 { contextMenuButton }
@@ -589,7 +619,7 @@ export default class CallView extends React.Component<IProps, IState> {
         }
 
         let sidebar;
-        if (!isOnHold && !transfereeCall && !this.props.pipMode) {
+        if (!isOnHold && !transfereeCall && !this.props.pipMode && this.state.sidebarShown) {
             sidebar = (
                 <CallViewSidebar
                     feeds={this.state.secondaryFeeds}