Show sidebar in PiP mode

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

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;
+    }
 }

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}
                 />
             );
         }

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>
         );