diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index d40674e4a6..3793036a22 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -65,7 +65,8 @@ interface IState { controlsVisible: boolean, showMoreMenu: boolean, showDialpad: boolean, - feeds: CallFeed[], + primaryFeed: CallFeed, + secondaryFeeds: Array, } function getFullScreenElement() { @@ -112,6 +113,8 @@ export default class CallView extends React.Component { constructor(props: IProps) { super(props); + const { primary, secondary } = this.getOrderedFeeds(this.props.call.getFeeds()); + this.state = { isLocalOnHold: this.props.call.isLocalOnHold(), isRemoteOnHold: this.props.call.isRemoteOnHold(), @@ -122,7 +125,8 @@ export default class CallView extends React.Component { controlsVisible: true, showMoreMenu: false, showDialpad: false, - feeds: this.sortFeeds(this.props.call.getFeeds()), + primaryFeed: primary, + secondaryFeeds: secondary, } this.updateCallListeners(null, this.props.call); @@ -197,7 +201,11 @@ export default class CallView extends React.Component { }; private onFeedsChanged = (newFeeds: Array) => { - this.setState({feeds: this.sortFeeds(newFeeds)}); + const { primary, secondary } = this.getOrderedFeeds(newFeeds); + this.setState({ + primaryFeed: primary, + secondaryFeeds: secondary, + }); }; private onCallLocalHoldUnhold = () => { @@ -240,13 +248,28 @@ export default class CallView extends React.Component { this.showControls(); } - private sortFeeds(feeds: Array) { - // Sort the feeds so that screensharing and remote feeds have priority - return [...feeds].sort((a, b) => { - if (b.purpose === SDPStreamMetadataPurpose.Screenshare && !b.isLocal()) return 1; - if (a.isLocal() && !b.isLocal()) return 1; - return -1; + private getOrderedFeeds(feeds: Array): { primary: CallFeed, secondary: Array } { + let primary; + + // First try to find remote screen-sharing stream + primary = feeds.find((feed) => { + return feed.purpose === SDPStreamMetadataPurpose.Screenshare && !feed.isLocal(); }); + // If we didn't find remote screen-sharing stream, try to find any remote stream + if (!primary) { + primary = feeds.find((feed) => !feed.isLocal()); + } + + const secondary = [...feeds]; + // Remove the primary feed from the array + if (primary) secondary.splice(secondary.indexOf(primary), 1); + secondary.sort((a, b) => { + if (a.isLocal() && !b.isLocal()) return -1; + if (!a.isLocal() && b.isLocal()) return 1; + return 0; + }); + + return { primary, secondary }; } private showControls() { @@ -653,7 +676,7 @@ export default class CallView extends React.Component { onMouseMove={this.onMouseMove} >
@@ -678,10 +701,6 @@ export default class CallView extends React.Component { mx_CallView_video: true, }); - // Don't show the primary feed in the sidebar - const feedsForSidebar = [...this.state.feeds]; - feedsForSidebar.shift(); - contentView = (
{ onMouseMove={this.onMouseMove} >