From 1924f969bc6e5e222092ecc74fa572b6560eb302 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Wed, 16 Mar 2022 09:17:33 -0700
Subject: [PATCH] Video reconnect is now solid

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

diff --git a/client/src/MediaControl.js b/client/src/MediaControl.js
index 4e5d74f..6946bf5 100644
--- a/client/src/MediaControl.js
+++ b/client/src/MediaControl.js
@@ -20,13 +20,13 @@ const Video = ({ srcObject, local, ...props }) => {
       return;
     }
     const ref = refVideo.current;
-    if (debug) console.log('media-controls <video> bind');
+    if (debug) console.log('media-control - video <video> bind');
     ref.srcObject = srcObject;
     if (local) {
       ref.muted = true;
     }
     return () => {
-      if (debug) console.log('media-controls <video> unbind');
+      if (debug) console.log('media-control - <video> unbind');
       if (ref) {
         ref.srcObject = undefined;
       }
@@ -49,6 +49,8 @@ const MediaAgent = ({setPeers}) => {
         Object.assign(peers[peer].attributes, {
           srcObject: event.streams[0]
         });
+        /* Trigger update of MediaControl now that a stream is available */
+        setPeers(Object.assign({}, peers));
       }
     }
   }, [peers]);
@@ -69,9 +71,12 @@ const MediaAgent = ({setPeers}) => {
   
       const peer_id = config.peer_id;
       if (peer_id in peers) {
-        /* This is normal */
-        console.log(`media-agent - addPeer - ${peer_id} already in peers`);
-        return;
+        if (!peers[peer_id].dead) {
+          /* This is normal when peers are added by other connecting 
+           * peers through the signaling server */
+          console.log(`media-agent - addPeer - ${peer_id} already in peers`);
+          return;
+        }
       }
       const connection = new RTCPeerConnection({
         configuration: {
@@ -92,15 +97,25 @@ const MediaAgent = ({setPeers}) => {
         */
         ]
       });
-  
-      peers[peer_id] = {
+
+      /* Even if reviving, allocate a new Object so <MediaControl> will
+       * have its peer state change and trigger an update from 
+       * <PlayerList> */
+      const peer = {
         name: peer_id,
-        muted: false,
-        videoOn: true,
         connection,
-        initialized: false,
-        attributes: {}
+        attributes: {},
       };
+      if (peer_id in peers) {
+        peer.muted = peers[peer_id].muted;
+        peer.videoOn = peers[peer_id].videoOn;
+        console.log(`media-agent - addPeer - reviving dead peer ${peer_id}`, peer);
+      } else {
+        peer.muted = false;
+        peer.videoOn = true;
+      }
+      peers[peer_id] = peer;
+   
       console.log(`media-agent - addPeer - remote`, peers);
       setPeers(Object.assign({}, peers));
       
@@ -222,10 +237,13 @@ const MediaAgent = ({setPeers}) => {
       if (peer_id in peers) {
         if (peers[peer_id].connection) {
           peers[peer_id].connection.close();
+          peers[peer_id].connection = undefined;
         }
       }
     
-      delete peers[peer_id];
+      /* To maintain mute/videoOn states, we don't remove the peer but 
+       * instead mark it as dead */
+      peers[peer_id].dead = true;
       if (debug) console.log(`media-agent - removePeer`, peers);
       setPeers(Object.assign({}, peers));
     };
@@ -273,10 +291,12 @@ const MediaAgent = ({setPeers}) => {
         continue;
       }
       peers[peer_id].connection.close();
+      peers[peer_id].connection = undefined;
     }
 
     for (let id in peers) {
-      delete peers[id];
+      peers[id].dead = true;
+      peers[id].connection = undefined;
     }
     if (debug) console.log(`media-agent - close`, peers);
     setPeers(Object.assign({}, peers));
@@ -316,7 +336,6 @@ const MediaAgent = ({setPeers}) => {
           local: true,
           muted: true,
           videoOn: false,
-          initialized: false,
           attributes: {
             local: true,
             srcObject: stream
@@ -325,6 +344,8 @@ const MediaAgent = ({setPeers}) => {
       }
     }
 
+    /* Renaming the local connection requires the peer to be deleted
+     * and re-established with the signaling server */
     for (let key in peers) {
       if (peers[key].local && key !== name) {
         delete peers[key];
@@ -399,7 +420,9 @@ const MediaAgent = ({setPeers}) => {
 
     return () => {
       abort = true;
-      console.log(`media-agent - abort media setup!`);
+      if (!stream) {
+        console.log(`media-agent - abort media setup!`);
+      }
     };
   }, [ws, setStream, stream, name, sendMessage]);
  
@@ -424,72 +447,71 @@ const MediaControl = ({isSelf, peer}) => {
     setMedia(peer);
   }, [peer, setMedia, setMuted, setVideoOn]);
 
+  console.log(`media-control - render`);
+
   const toggleMute = (event) => {
-    if (debug) console.log(`MediaControl - toggleMute - ${peer.name}`, !muted);
+    if (debug) console.log(`media-control - toggleMute - ${peer.name}`, !muted);
     peer.muted = !muted;
     setMuted(peer.muted);
     event.stopPropagation();
   }
   
   const toggleVideo = (event) => {
-    if (debug) console.log(`MediaControl - toggleVideo - ${peer.name}`, !videoOn);
+    if (debug) console.log(`media-control - toggleVideo - ${peer.name}`, !videoOn);
     peer.videoOn = !videoOn;
     setVideoOn(peer.videoOn);
     event.stopPropagation();
   }
 
   useEffect(() => {
-    if (!media) {
+    if (!media || media.dead) {
       return;
     }
     if (media.attributes.srcObject) {
+      console.log(`media-control - audio enable - ${peer.name}:${!muted}`);
       media.attributes.srcObject.getAudioTracks().forEach((track) => {
         track.enabled = !muted;
       });
     }
-  }, [media, muted]);
+  }); /* run after every render to hit when ontrack has received and set
+       * the stream //,  [media, muted]); */
 
   useEffect(() => {
-    if (!media) {
+    if (!media || media.dead) {
       return;
     }
     if (media.attributes.srcObject) {
+      console.log(`media-control - video enable - ${peer.name}:${videoOn}`);
       media.attributes.srcObject.getVideoTracks().forEach((track) => {
         track.enabled = videoOn;
       });
     }
-  }, [media, videoOn]);
+  }); /* run after every render  to hit when ontrack has received and set
+       * the stream //, [media, videoOn]); */
+
+  const isValid = media && !media.dead,
+    color = isValid ? 'primary' : 'disabled';
 
-  if (!media) {
-    return <div className="MediaControl">
-      <div>
-        { isSelf && <MicOff color={'disabled'}/> }
-        { !isSelf && <VolumeOff color={'disabled'}/> }
-        <VideocamOff color={'disabled'}/>
-      </div>
-      <video className="Video"></video>
-    </div>;
-  }
-  
   return <div className="MediaControl">
     <div>
      { isSelf && <div onClick={toggleMute}>
-        { muted && <MicOff color={'primary'}/> }
-        { !muted && <Mic color={'primary'}/> }
+        { muted && <MicOff color={color}/> }
+        { !muted && <Mic color={color}/> }
       </div> }
       { !isSelf && <div onClick={toggleMute}>
-        { muted && <VolumeOff color={'primary'}/> }
-        { !muted && <VolumeUp color={'primary'}/> }
+        { muted && <VolumeOff color={color}/> }
+        { !muted && <VolumeUp color={color}/> }
       </div> }
       <div onClick={toggleVideo}>
-        { !videoOn && <VideocamOff color={'primary'}/> }
-        { videoOn && <Videocam color={'primary'}/> }
+        { !videoOn && <VideocamOff color={color}/> }
+        { videoOn && <Videocam color={color}/> }
       </div>
     </div>
-    { media && <Video className="Video"
+    { isValid && <Video className="Video"
       autoPlay='autoplay'
       {...media.attributes}/>
     }
+    { !isValid && <video className="Video"></video> }
   </div>;
 };