From 1f27354439a1572040bcf7c863b1a7298edf4d59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 7 May 2021 21:34:56 +0200 Subject: [PATCH] Add support for up to 4 feeds MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/voip/_VideoFeed.scss | 32 +++++++++++- src/components/views/voip/CallView.tsx | 69 ++++++++++++++----------- src/components/views/voip/VideoFeed.tsx | 5 +- 3 files changed, 71 insertions(+), 35 deletions(-) diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss index 7d85ac264e..170bd89652 100644 --- a/res/css/views/voip/_VideoFeed.scss +++ b/res/css/views/voip/_VideoFeed.scss @@ -21,7 +21,7 @@ limitations under the License. } -.mx_VideoFeed_remote { +.mx_VideoFeed_primary { width: 100%; height: 100%; display: flex; @@ -33,7 +33,7 @@ limitations under the License. } } -.mx_VideoFeed_local { +.mx_VideoFeed_secondary { max-width: 25%; max-height: 25%; position: absolute; @@ -47,6 +47,34 @@ limitations under the License. } } +.mx_VideoFeed_tertiary { + max-width: 25%; + max-height: 25%; + position: absolute; + right: 10px; + bottom: 10px; + z-index: 100; + border-radius: 4px; + + &.mx_VideoFeed_video { + background-color: transparent; + } +} + +.mx_VideoFeed_quaternary { + max-width: 25%; + max-height: 25%; + position: absolute; + left: 10px; + top: 10px; + z-index: 100; + border-radius: 4px; + + &.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 c084dacaa8..2027e997e1 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -33,6 +33,13 @@ import DialpadContextMenu from '../context_menus/DialpadContextMenu'; import { CallFeed } from 'matrix-js-sdk/src/webrtc/callFeed'; import {replaceableComponent} from "../../../utils/replaceableComponent"; +const FEED_CLASS_NAMES = [ + "mx_VideoFeed_primary", + "mx_VideoFeed_secondary", + "mx_VideoFeed_tertiary", + "mx_VideoFeed_quaternary", +]; + interface IProps { // The call for us to display call: MatrixCall, @@ -371,6 +378,34 @@ export default class CallView extends React.Component { this.props.call.transferToCall(transfereeCall); } + private renderFeeds(feeds: Array, offset = 0) { + const sortedFeeds = [...feeds].sort((a, b) => { + if (b.purpose === SDPStreamMetadataPurpose.Screenshare && !b.isLocal()) return 1; + if (a.isLocal() && !b.isLocal()) return 1; + return 0; + }); + + return sortedFeeds.map((feed, i) => { + i += offset; + // TODO: Later the CallView should probably be reworked to support + // any number of feeds but now we can't render more than 4 feeds + if (i >= 4) return; + // Here we check to hide local audio feeds to achieve the same UI/UX + // as before. But once again this might be subject to change + if (feed.isVideoMuted() && feed.isLocal()) return; + return ( + + ); + }); + } + public render() { const client = MatrixClientPeg.get(); const callRoomId = CallHandler.sharedInstance().roomIdForCall(this.props.call); @@ -594,20 +629,8 @@ export default class CallView extends React.Component { mx_CallView_voice: true, }); - const feeds = this.props.call.getLocalFeeds().map((feed, i) => { - // Here we check to hide local audio feeds to achieve the same UI/UX - // as before. But once again this might be subject to change - if (feed.isVideoMuted()) return; - return ( - - ); - }); + // We pass offset of one to avoid a feed being rendered as primary + const feeds = this.renderFeeds(this.props.call.getLocalFeeds(), 1); // Saying "Connecting" here isn't really true, but the best thing // I can come up with, but this might be subject to change as well @@ -631,23 +654,7 @@ export default class CallView extends React.Component { mx_CallView_video: true, }); - // TODO: Later the CallView should probably be reworked to support - // any number of feeds but now we can always expect there to be two - // feeds. This is because the js-sdk ignores any new incoming streams - const feeds = this.state.feeds.map((feed, i) => { - // Here we check to hide local audio feeds to achieve the same UI/UX - // as before. But once again this might be subject to change - if (feed.isVideoMuted() && feed.isLocal()) return; - return ( - - ); - }); + const feeds = this.renderFeeds(this.state.feeds); contentView =
{feeds} diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index d22fa055ce..3a7d49cfd4 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -37,6 +37,8 @@ interface IProps { // a callback which is called when the video element is resized // due to a change in video metadata onResize?: (e: Event) => void, + + className: string, } interface IState { @@ -121,8 +123,7 @@ export default class VideoFeed extends React.Component { render() { const videoClasses = { mx_VideoFeed: true, - mx_VideoFeed_local: this.props.feed.isLocal(), - mx_VideoFeed_remote: !this.props.feed.isLocal(), + [this.props.className]: true, mx_VideoFeed_voice: this.state.videoMuted, mx_VideoFeed_video: !this.state.videoMuted, mx_VideoFeed_mirror: (