diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index e56c34520c..1dfd9083e5 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -129,7 +129,7 @@ export default class CallView extends React.Component { constructor(props: IProps) { super(props); - const { primary, secondary } = this.getOrderedFeeds(this.props.call.getFeeds()); + const { primary, secondary } = CallView.getOrderedFeeds(this.props.call.getFeeds()); this.state = { isLocalOnHold: this.props.call.isLocalOnHold(), @@ -166,7 +166,16 @@ export default class CallView extends React.Component { dis.unregister(this.dispatcherRef); } - public componentDidUpdate(prevProps) { + static getDerivedStateFromProps(props: IProps): Partial { + const { primary, secondary } = CallView.getOrderedFeeds(props.call.getFeeds()); + + return { + primaryFeed: primary, + secondaryFeeds: secondary, + }; + } + + public componentDidUpdate(prevProps: IProps): void { if (this.props.call === prevProps.call) return; this.setState({ @@ -220,7 +229,7 @@ export default class CallView extends React.Component { }; private onFeedsChanged = (newFeeds: Array) => { - const { primary, secondary } = this.getOrderedFeeds(newFeeds); + const { primary, secondary } = CallView.getOrderedFeeds(newFeeds); this.setState({ primaryFeed: primary, secondaryFeeds: secondary, @@ -253,7 +262,7 @@ export default class CallView extends React.Component { this.showControls(); }; - private getOrderedFeeds(feeds: Array): { primary: CallFeed, secondary: Array } { + static getOrderedFeeds(feeds: Array): { primary: CallFeed, secondary: Array } { let primary; // Try to use a screensharing as primary, a remote one if possible