debugging stream stuff

packages/desktop/src/providers/StreamProvider.tsx

@@ -141,6 +141,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
         });
 
         localPeerConnection.on('signal', (signal) => {
+          console.log('going to call someone');
           $ws.emit(
             ServerRequestChannels.RTC_CALL_REQUEST,
             new RtcCallRequest(userIdToCall, signal),
@@ -150,7 +151,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
         draft[userIdToCall] = localPeerConnection;
       });
     });
-  }, [user, roomsMap, $ws, updatePeerMap]); //TODO: make this not run on EVERY update to roomsMap? only tuned in lists? so the separate map for that?
+  }, [user, roomsMap, $ws, updatePeerMap, userLocalStream]); //TODO: make this not run on EVERY update to roomsMap? only tuned in lists? so the separate map for that?
 
   const prevStream = usePrevious<MediaStream>(userLocalStream);
 
@@ -165,12 +166,16 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
   }, [localStreamRef]);
 
   useEffect(() => {
-    if (prevStream) {
-      Object.values(peerMap).forEach((currentPeer) => {
-        currentPeer.removeStream(prevStream);
-        currentPeer.addStream(userLocalStream);
-      });
-    }
+    // if (userLocalStream) {
+    //   Object.values(peerMap).forEach((currentPeer) => {
+    //     try {
+    //       currentPeer.addStream(userLocalStream);
+    //     } catch (error) {
+    //       toast.error('problem adding stream');
+    //       console.error(error);
+    //     }
+    //   });
+    // }
   }, [userLocalStream, peerMap, prevStream]);
 
   console.log(peerMap);

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

@@ -298,19 +298,21 @@ function LineDetails() {
 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 <Stream key={`streamDisplay-${userId}`} peer={currentPeer} />;
+        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<HTMLAudioElement>(null);
+  const streamRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
     peer.on('stream', (remotePeerStream: MediaStream) => {
@@ -318,13 +320,18 @@ function Stream({ peer }: { peer: Peer }) {
         'stream coming in from remote peer...BUT, only going to show once they broadcast',
       );
 
-      const audio = new Audio();
-      audio.autoplay = true;
-      audio.srcObject = remotePeerStream;
+      // 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</>;
+  return (
+    <>
+      this is a stream component of one remote peer
+      <video height={400} width={400} autoPlay muted ref={streamRef} />
+    </>
+  );
 }