From 3fac4adfc73eb28d7d3c4c81be30246fcd1b6776 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 21 Jul 2021 18:14:21 +0200 Subject: [PATCH] Fix feed sizing issues MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_CallView.scss | 18 +++++++++++ res/css/views/voip/_CallViewSidebar.scss | 31 +++++++++++++++++-- res/css/views/voip/_VideoFeed.scss | 39 ------------------------ src/components/views/voip/CallView.tsx | 7 +++-- src/components/views/voip/VideoFeed.tsx | 4 +-- 5 files changed, 53 insertions(+), 46 deletions(-) diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 749b5b1dcf..a66d9a32c6 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -69,6 +69,24 @@ limitations under the License. display: flex; justify-content: center; border-radius: 8px; + + > .mx_VideoFeed { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + &.mx_VideoFeed_voice { + // We don't want to collide with the call controls that have 52px of height + padding-bottom: 52px; + background-color: $inverted-bg-color; + } + + &.mx_VideoFeed_video { + background-color: #000; + } + } } .mx_CallView_voice { diff --git a/res/css/views/voip/_CallViewSidebar.scss b/res/css/views/voip/_CallViewSidebar.scss index beb8c3e41a..8adfd2540f 100644 --- a/res/css/views/voip/_CallViewSidebar.scss +++ b/res/css/views/voip/_CallViewSidebar.scss @@ -19,13 +19,40 @@ limitations under the License. right: 16px; bottom: 16px; z-index: 100; // To be above the primary feed - max-width: 20%; - min-width: 160px; // To match .mx_VideoFeed_voice + width: 20%; + min-width: 160px; display: flex; flex-direction: column-reverse; + .mx_VideoFeed { + border-radius: 4px; + width: 100%; + margin-bottom: 12px; + + &.mx_VideoFeed_voice { + background-color: $inverted-bg-color; + + display: flex; + align-items: center; + justify-content: center; + + min-width: 160px; + min-height: 90px; + } + + &.mx_VideoFeed_video { + background-color: transparent; + } + } + &.mx_CallViewSidebar_pipMode { top: 16px; bottom: unset; + min-width: unset; + + .mx_VideoFeed_voice { + min-width: 64px; + min-height: 36px; + } } } diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss index 40d21ffcc2..3d048a6423 100644 --- a/res/css/views/voip/_VideoFeed.scss +++ b/res/css/views/voip/_VideoFeed.scss @@ -14,45 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_VideoFeed_primary { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - - &.mx_VideoFeed_voice { - // We don't want to collide with the call controls that have 52px of height - padding-bottom: 52px; - background-color: $inverted-bg-color; - } - - &.mx_VideoFeed_video { - background-color: #000; - } -} - -.mx_VideoFeed_secondary { - border-radius: 4px; - width: 100%; - margin-bottom: 12px; - - &.mx_VideoFeed_voice { - background-color: $inverted-bg-color; - - display: flex; - align-items: center; - justify-content: center; - - min-width: 160px; - min-height: 90px; - } - - &.mx_VideoFeed_video { - background-color: transparent; - } -} - .mx_VideoFeed_mirror { transform: scale(-1, 1); } diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 0e5266ad85..033b3511e9 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -590,6 +590,9 @@ export default class CallView extends React.Component { const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold; const isScreensharing = this.props.call.isScreensharing(); const sidebarShown = this.state.sidebarShown; + const someoneIsScreensharing = this.props.call.getFeeds().some((feed) => { + return feed.purpose === SDPStreamMetadataPurpose.Screenshare; + }); let contentView: React.ReactNode; let holdTransferContent; @@ -642,7 +645,7 @@ export default class CallView extends React.Component { let sidebar; if ( (!isOnHold && !transfereeCall) && - ((sidebarShown && this.props.call.type === CallType.Video) || isScreensharing) + ((sidebarShown && this.props.call.type === CallType.Video) || someoneIsScreensharing) ) { sidebar = ( { }); let presenting; - if (this.props.call.getFeeds().some((feed) => feed.purpose === SDPStreamMetadataPurpose.Screenshare)) { + if (someoneIsScreensharing) { const presentingClasses = classNames({ mx_CallView_presenting: true, mx_CallView_presenting_hidden: !this.state.controlsVisible, diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index 272107e6de..3e50cd211b 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -146,8 +146,6 @@ export default class VideoFeed extends React.Component { render() { const videoClasses = { mx_VideoFeed: true, - mx_VideoFeed_primary: this.props.primary, - mx_VideoFeed_secondary: !this.props.primary, mx_VideoFeed_voice: this.state.videoMuted, mx_VideoFeed_video: !this.state.videoMuted, mx_VideoFeed_mirror: ( @@ -160,7 +158,7 @@ export default class VideoFeed extends React.Component { const member = this.props.feed.getMember(); let avatarSize; if (this.props.pipMode) avatarSize = 76; - else if (!this.props.primary) avatarSize = 34; + else if (!this.props.primary) avatarSize = 16; else avatarSize = 160; return (