Track state at global peers for mute/videoOn

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/MediaControl.js

@@ -95,6 +95,8 @@ const MediaAgent = ({setPeers}) => {
   
       peers[peer_id] = {
         name: peer_id,
+        muted: false,
+        videoOn: true,
         connection,
         initialized: false,
         attributes: {}
@@ -312,6 +314,8 @@ const MediaAgent = ({setPeers}) => {
         peers[name] = {
           name: name,
           local: true,
+          muted: true,
+          videoOn: false,
           initialized: false,
           attributes: {
             local: true,
@@ -407,30 +411,30 @@ const MediaControl = ({isSelf, peer}) => {
   const [muted, setMuted] = useState(undefined);
   const [videoOn, setVideoOn] = useState(undefined);
   
+  /* local state is used to trigger re-renders, and the global
+   * state is kept up to date in the peers object so re-assignment
+   * of sessions doesn't kill the peer or change the mute/video states */
   useEffect(() => {
     if (!peer) {
       setMedia(undefined);
       return;
     }
-    if (peer.local) {
-      setMuted(true);
-      setVideoOn(false);
-    } else {
-      setMuted(false);
-      setVideoOn(true);
-    }
+    setMuted(peer.muted);
+    setVideoOn(peer.videoOn);
     setMedia(peer);
   }, [peer, setMedia, setMuted, setVideoOn]);
 
   const toggleMute = (event) => {
     if (debug) console.log(`MediaControl - toggleMute - ${peer.name}`, !muted);
-    setMuted(!muted);
+    peer.muted = !muted;
+    setMuted(peer.muted);
     event.stopPropagation();
   }
   
   const toggleVideo = (event) => {
     if (debug) console.log(`MediaControl - toggleVideo - ${peer.name}`, !videoOn);
-    setVideoOn(!videoOn);
+    peer.videoOn = !videoOn;
+    setVideoOn(peer.videoOn);
     event.stopPropagation();
   }