From ea341902c25684b6f441c0e7edb4ff1fa6029770 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Thu, 10 Mar 2022 23:21:03 -0800
Subject: [PATCH] Audio working for mute / unmute

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/MediaControl.js | 46 +++++++++++++++++++++-----------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/client/src/MediaControl.js b/client/src/MediaControl.js
index 287cc68..f383c41 100644
--- a/client/src/MediaControl.js
+++ b/client/src/MediaControl.js
@@ -9,7 +9,7 @@ import Mic from '@mui/icons-material/Mic';
 import { GlobalContext } from "./GlobalContext.js";
 
 /* Proxy object so we can pass in srcObject to <audio> */
-const Audio = ({ srcObject, paused, muted, ...props }) => {
+const Audio = ({ srcObject, ...props }) => {
   const refAudio = useRef(null);
   useEffect(() => {
     if (!refAudio.current) {
@@ -23,7 +23,7 @@ const Audio = ({ srcObject, paused, muted, ...props }) => {
         refAudio.current.srcObject = undefined;
       }
     }; 
-  }, [srcObject, paused, muted]);
+  }, [srcObject]);
   return <audio ref={refAudio} {...props} />;
 }
 
@@ -87,8 +87,6 @@ const MediaAgent = () => {
       peers[peer_id] = {
         connection,
         attributes: {
-          local: false,
-          muted: false
         }
       };
       console.log(`MediaAgent - addPeer - remote`, peers);
@@ -285,8 +283,6 @@ const MediaAgent = () => {
       peers[name] = {
         local: true,
         attributes: {
-          local: true,
-          muted: false
         }
       };
     }
@@ -356,7 +352,7 @@ const MediaAgent = () => {
       peer.attributes.srcObject = stream;
       if (peer.attributes.srcObject) {
         peer.attributes.srcObject.getAudioTracks().forEach((track) => {
-          track.enabled = !peer.attributes.muted;
+          track.enabled = !peer.muted;
         });
       }
       audioPeers.push(
@@ -365,18 +361,30 @@ const MediaAgent = () => {
           key={`Peer-${id}`}
           autoPlay='autoplay'
           controls
+          muted
           {...peer.attributes}/>
       );
     } else {
-      audioPeers.push(
-        <Audio 
-          className={peer.local ? 'Local' : 'Remote'}
-          key={`Peer-${id}`}
-          autoPlay='autoplay'
-          controls
-          muted={peer.attributes.muted}
-          {...peer.attributes}/>
-      );
+      if (peer.muted) {
+        audioPeers.push(
+          <Audio 
+            className={peer.local ? 'Local' : 'Remote'}
+            key={`Peer-${id}`}
+            autoPlay='autoplay'
+            controls
+            muted
+            {...peer.attributes}/>
+        );
+      } else {
+        audioPeers.push(
+          <Audio 
+            className={peer.local ? 'Local' : 'Remote'}
+            key={`Peer-${id}`}
+            autoPlay='autoplay'
+            controls
+            {...peer.attributes}/>
+        );
+      }
     }
    }
 
@@ -399,11 +407,7 @@ const MediaControl = ({isSelf, peer}) => {
       control.muted = !control.muted;
     }
     const update = Object.assign({}, peers);
-    if (isSelf) {
-      update[peer].attributes.muted = control.muted;
-    } else {
-      update[peer].attributes.muted = control.muted;
-    }
+    update[peer].muted = control.muted;
     console.log(`MediaControl - toggleMute`, update);
     setPeers(update);
     event.stopPropagation();