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 { let sidebar; if ( - (!isOnHold && !transfereeCall && !this.props.pipMode) && - (sidebarShown || isScreensharing) + (!isOnHold && !transfereeCall) && + ((sidebarShown && this.props.call.type === CallType.Video) || isScreensharing) ) { sidebar = ( ); } 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; call: MatrixCall; hideLocalFeeds: boolean; + pipMode: boolean; } export default class CallViewSidebar extends React.Component { @@ -40,8 +42,12 @@ export default class CallViewSidebar extends React.Component { ); }); + const className = classNames("mx_CallViewSidebar", { + mx_CallViewSidebar_pipMode: this.props.pipMode, + }); + return ( -
+
{ feeds }
);