From ae647658706a87c352b7e120423ebc87f33d8dba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 29 Jul 2021 08:45:32 +0200
Subject: [PATCH] playMedia only if necessary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/voip/VideoFeed.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx
index 9975f70d62..af2fd92016 100644
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@@ -22,6 +22,7 @@ import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
 import { logger } from 'matrix-js-sdk/src/logger';
 import MemberAvatar from "../avatars/MemberAvatar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { objectHasDiff } from '../../../utils/objects';
 
 interface IProps {
     call: MatrixCall;
@@ -46,7 +47,6 @@ interface IState {
     videoMuted: boolean;
 }
 
-// TODO: We shouldn't be calling playMedia() all the time
 @replaceableComponent("views.voip.VideoFeed")
 export default class VideoFeed extends React.PureComponent<IProps, IState> {
     private element: HTMLVideoElement;
@@ -69,8 +69,10 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
         this.updateFeed(this.props.feed, null);
     }
 
-    componentDidUpdate(prevProps: IProps) {
+    componentDidUpdate(prevProps: IProps, prevState: IState) {
         this.updateFeed(prevProps.feed, this.props.feed);
+        // If the mutes state has changed, we try to playMedia()
+        if (prevState.videoMuted !== this.state.videoMuted) this.playMedia();
     }
 
     static getDerivedStateFromProps(props: IProps) {
@@ -142,7 +144,7 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
     }
 
     private onNewStream = async () => {
-        await this.setState({
+        this.setState({
             audioMuted: this.props.feed.isAudioMuted(),
             videoMuted: this.props.feed.isVideoMuted(),
         });
@@ -150,11 +152,10 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
     };
 
     private onMuteStateChanged = async () => {
-        await this.setState({
+        this.setState({
             audioMuted: this.props.feed.isAudioMuted(),
             videoMuted: this.props.feed.isVideoMuted(),
         });
-        this.playMedia();
     };
 
     private onResize = (e) => {