From dc7f6d8286d0ec678512c96c82a14ed9cbc5bd46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 21 Jul 2021 17:45:21 +0200
Subject: [PATCH] Show sidebar in PiP mode
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/_CallViewSidebar.scss      | 5 +++++
 src/components/views/voip/CallView.tsx        | 5 +++--
 src/components/views/voip/CallViewSidebar.tsx | 8 +++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/res/css/views/voip/_CallViewSidebar.scss b/res/css/views/voip/_CallViewSidebar.scss
index e56f527892..beb8c3e41a 100644
--- a/res/css/views/voip/_CallViewSidebar.scss
+++ b/res/css/views/voip/_CallViewSidebar.scss
@@ -23,4 +23,9 @@ limitations under the License.
     min-width: 160px; // To match .mx_VideoFeed_voice
     display: flex;
     flex-direction: column-reverse;
+
+    &.mx_CallViewSidebar_pipMode {
+        top: 16px;
+        bottom: unset;
+    }
 }
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index f20341f4a2..0e5266ad85 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -641,14 +641,15 @@ export default class CallView extends React.Component<IProps, IState> {
 
         let sidebar;
         if (
-            (!isOnHold && !transfereeCall && !this.props.pipMode) &&
-            (sidebarShown || isScreensharing)
+            (!isOnHold && !transfereeCall) &&
+            ((sidebarShown && this.props.call.type === CallType.Video) || isScreensharing)
         ) {
             sidebar = (
                 <CallViewSidebar
                     feeds={this.state.secondaryFeeds}
                     call={this.props.call}
                     hideLocalFeeds={isScreensharing && !sidebarShown}
+                    pipMode={this.props.pipMode}
                 />
             );
         }
diff --git a/src/components/views/voip/CallViewSidebar.tsx b/src/components/views/voip/CallViewSidebar.tsx
index 6769cf0f89..73075b1493 100644
--- a/src/components/views/voip/CallViewSidebar.tsx
+++ b/src/components/views/voip/CallViewSidebar.tsx
@@ -18,11 +18,13 @@ import React from "react";
 import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
 import VideoFeed from "./VideoFeed";
+import classNames from "classnames";
 
 interface IProps {
     feeds: Array<CallFeed>;
     call: MatrixCall;
     hideLocalFeeds: boolean;
+    pipMode: boolean;
 }
 
 export default class CallViewSidebar extends React.Component<IProps> {
@@ -40,8 +42,12 @@ export default class CallViewSidebar extends React.Component<IProps> {
             );
         });
 
+        const className = classNames("mx_CallViewSidebar", {
+            mx_CallViewSidebar_pipMode: this.props.pipMode,
+        });
+
         return (
-            <div className="mx_CallViewSidebar">
+            <div className={className}>
                 { feeds }
             </div>
         );