more cleanup trying to test and debug

packages/desktop/src/providers/StreamProvider.tsx

@@ -58,8 +58,6 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
   const [userLocalStream, setUserLocalStream] = useState<MediaStream>();
   const localStreamRef = useRef<HTMLVideoElement>(null);
 
-  const numberRooms = useMemo(() => Object.keys(roomsMap).length, [roomsMap]);
-
   useEffect(() => {
     navigator.mediaDevices
       .getUserMedia({ video: true, audio: true })
@@ -95,6 +93,8 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
         line.tunedInMemberIds.forEach((tunedUserId) => {
           if (tunedUserId === user._id.toString()) return;
 
+          if (draft.includes(tunedUserId)) return;
+
           draft.push(tunedUserId);
         });
       });
@@ -103,63 +103,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
 
   console.log(`peer map: `, peerMap);
 
-  return (
-    <StreamProviderContext.Provider value={{ peerMap }}>
-      <div className="flex flex-row">
-        <video height={400} width={400} autoPlay muted ref={localStreamRef} />
-
-        <MemoListStreams updatePeerMap={updatePeerMap} membersToCall={distinctPeerUserIds} />
-      </div>
-
-      {children}
-    </StreamProviderContext.Provider>
-  );
-}
-
-export default function useStreams() {
-  return useContext(StreamProviderContext);
-}
-
-const MemoListStreams = React.memo(ListStreams);
-
-function ListStreams({
-  membersToCall,
-  updatePeerMap,
-}: {
-  membersToCall: string[];
-  updatePeerMap: Updater<PeerMap>;
-}) {
-  const { $ws } = useSockets();
-
-  console.log('rendering this piece of shit');
-  console.log(membersToCall);
-
-  // call all of the people on the initial load of this
   useEffect(() => {
-    console.log('calling all of the initials until this component unmounts');
-
-    navigator.mediaDevices
-      .getUserMedia({ video: true, audio: true })
-      .then((localMediaStream: MediaStream) => {
-        membersToCall.forEach((userIdToCall) => {
-          const localPeerConnection = new Peer({
-            initiator: true,
-            stream: localMediaStream,
-            trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
-          });
-
-          localPeerConnection.on('signal', (signal) => {
-            console.log('going to call someone');
-            $ws.emit(
-              ServerRequestChannels.RTC_CALL_REQUEST,
-              new RtcCallRequest(userIdToCall, signal),
-            );
-          });
-
-          // need to send this back up the parent to send to people
-          // draft[userIdToCall] = localPeerConnection;
-        });
-
     $ws.on(
       ServerResponseChannels.RTC_RECEIVING_ANSWER_RESPONSE,
       (res: RtcReceiveAnswerResponse) => {
@@ -184,7 +128,6 @@ function ListStreams({
 
       const peerForMeAndNewbie = new Peer({
         initiator: false,
-            stream: localMediaStream,
         trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
       });
 
@@ -204,14 +147,90 @@ function ListStreams({
         draft[res.newUserId] = peerForMeAndNewbie;
       });
     });
-      });
 
     return () => {
       $ws.removeListener(ServerResponseChannels.RTC_RECEIVING_ANSWER_RESPONSE);
       $ws.removeListener(ServerResponseChannels.RTC_NEW_USER_JOINED_RESPONSE);
     };
+  }, [$ws]);
+
+  console.log(`peer map: `, peerMap);
+
+  return (
+    <StreamProviderContext.Provider value={{ peerMap }}>
+      <div className="flex flex-row">
+        <video height={400} width={400} autoPlay muted ref={localStreamRef} />
+
+        <MemoStreamsConnector updatePeerMap={updatePeerMap} membersToCall={distinctPeerUserIds} />
+      </div>
+
+      {children}
+    </StreamProviderContext.Provider>
+  );
+}
+
+export default function useStreams() {
+  return useContext(StreamProviderContext);
+}
+
+const MemoStreamsConnector = React.memo(StreamsConnector);
+
+function StreamsConnector({
+  membersToCall,
+  updatePeerMap,
+}: {
+  membersToCall: string[];
+  updatePeerMap: Updater<PeerMap>;
+}) {
+  console.log('rendering this piece of shit');
+  console.log(membersToCall);
+
+  return (
+    <>
+      {membersToCall.map((userId) => (
+        <StreamConnector key={userId} peerUserId={userId} updatePeerMap={updatePeerMap} />
+      ))}
+    </>
+  );
+}
+
+function StreamConnector({
+  peerUserId,
+  updatePeerMap,
+}: {
+  peerUserId: string;
+  updatePeerMap: Updater<PeerMap>;
+}) {
+  const { $ws } = useSockets();
+
+  // call all of the people on the initial load of this
+  useEffect(() => {
+    console.log('calling all of the initials until this component unmounts');
+
+    navigator.mediaDevices
+      .getUserMedia({ video: true, audio: true })
+      .then((localMediaStream: MediaStream) => {
+        const localPeerConnection = new Peer({
+          initiator: true,
+          stream: localMediaStream,
+          trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
+        });
+
+        localPeerConnection.on('signal', (signal) => {
+          console.log('going to call someone');
+          $ws.emit(ServerRequestChannels.RTC_CALL_REQUEST, new RtcCallRequest(peerUserId, signal));
+        });
+
+        // sending back the connection to the parent for everyone
+        updatePeerMap((draft) => {
+          draft[peerUserId] = localPeerConnection;
+        });
+      });
+
+    () => {
+      // destroy this peer and remove from the parent controller? or happens when someone else leaves the tuned list?
+    };
   }, []);
 
-  // on change of the local user stream, take all of the peers and return them
   return <></>;
 }