Merge branch 'attempting-trickle-for-faster-connection'

packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx

@@ -109,10 +109,10 @@ export default function LineDetails() {
           </span>
         </div>
 
-        <Avatar.Group className={'animate-pulse'} key={`lineHistoryMessage-yesterday-afternoon}`}>
+        <Avatar.Group className={'animate-pulse'}>
           {tunedProfiles.map((otherUser) => (
             <Avatar
-              key={`tunedUser-${otherUser.name}`}
+              key={`lineTunedInUserAvatar-${otherUser.name}`}
               src={otherUser.pictureSrc}
               shape="square"
               size={'large'}
@@ -123,10 +123,10 @@ export default function LineDetails() {
 
         <span className="px-10 text-gray-200"> | </span>
 
-        <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
+        <Avatar.Group>
           {selectedLine.otherUserObjects.map((otherUser) => (
             <Avatar
-              key={`linehistory-${1}`}
+              key={`lineOfflineUserAvatar-${1}`}
               src={otherUser.picture}
               shape="square"
               size={'default'}
@@ -147,9 +147,15 @@ export default function LineDetails() {
           {Object.keys(peerMap).map((lineId, index) => {
             if (lineId !== selectedLine.lineDetails._id.toString()) return <></>;
 
-            return peerMap[lineId].map((linePeer) => (
-              <StreamPlayer key={`streamPlayer-${index}`} peer={linePeer.peer} />
-            ));
+            return peerMap[lineId].map(
+              (linePeer) =>
+                linePeer.peerMediaStream && (
+                  <StreamPlayer
+                    key={`streamPlayer-${index}`}
+                    peerStream={linePeer.peerMediaStream}
+                  />
+                ),
+            );
           })}
         </div>
 
@@ -194,19 +200,12 @@ export default function LineDetails() {
   );
 }
 
-function StreamPlayer({ peer }: { peer: Peer }) {
+function StreamPlayer({ peerStream }: { peerStream: MediaStream }) {
   const streamRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
-    peer.on('stream', (remotePeerStream: MediaStream) => {
-      console.log('stream coming in from remote peer');
-      console.log(remotePeerStream);
-
-      if (streamRef?.current) streamRef.current.srcObject = remotePeerStream;
-    });
-
-    return () => peer.destroy();
-  }, [peer]);
+    if (streamRef?.current) streamRef.current.srcObject = peerStream;
+  }, [peerStream]);
 
   return (
     <>

packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx

@@ -45,45 +45,3 @@ export default function MainPanel() {
     </div>
   );
 }
-
-function LineStreams({ broadcasters }: { broadcasters: string[] }) {
-  const { peerMap } = useStreams();
-
-  console.log(peerMap);
-  return (
-    <div className="flex flex-col">
-      {broadcasters?.map((userId) => {
-        const currentPeer = peerMap[userId];
-
-        return currentPeer && <Stream key={`streamDisplay-${userId}`} peer={currentPeer} />;
-      })}
-      this is the list of current streams we are going to show
-    </div>
-  );
-}
-
-function Stream({ peer }: { peer: Peer }) {
-  const streamRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    peer.on('stream', (remotePeerStream: MediaStream) => {
-      console.log(
-        'stream coming in from remote peer...BUT, only going to show once they broadcast',
-      );
-      console.log(peer);
-
-      // const audio = new Audio();
-      // audio.autoplay = true;
-      // audio.srcObject = remotePeerStream;
-
-      if (streamRef?.current) streamRef.current.srcObject = remotePeerStream;
-    });
-  }, []);
-
-  return (
-    <>
-      this is a stream component of one remote peer
-      <video height={400} width={400} autoPlay muted ref={streamRef} />
-    </>
-  );
-}