organizing the initiator to another component

packages/desktop/src/providers/RealTimeRoomProvider.tsx

@@ -309,8 +309,6 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
     [setSelectedLineId, handleUntuneFromLine, roomMap, user, handleTuneIntoLine],
   );
 
-  console.warn(roomMap);
-
   return (
     <RealTimeRoomContext.Provider
       value={{ roomsMap: roomMap, handleSelectLine, selectedLineId, handleUpdateLineMemberState }}

packages/desktop/src/providers/StreamProvider.tsx

@@ -23,7 +23,7 @@ import React, { useEffect, useContext, useState, useRef, useMemo } from 'react';
 import Peer from 'simple-peer';
 import useRealTimeRooms from './RealTimeRoomProvider';
 import useAuth from './AuthProvider';
-import { useImmer } from 'use-immer';
+import { Updater, useImmer } from 'use-immer';
 import useSockets from './SocketProvider';
 import {
   RtcAnswerRequest,
@@ -58,106 +58,8 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
   const [userLocalStream, setUserLocalStream] = useState<MediaStream>();
   const localStreamRef = useRef<HTMLVideoElement>(null);
 
-  useEffect(() => {
-    $ws.on(
-      ServerResponseChannels.RTC_RECEIVING_ANSWER_RESPONSE,
-      (res: RtcReceiveAnswerResponse) => {
-        console.log(`oooo some master received my call and accepted it ${JSON.stringify(res)}`);
-
-        // find the peer we created earlier for this master
-        // ?is this okay? using the setter to get the current state?
-        updatePeerMap((draft) => {
-          const peerForAnswerer = draft[res.answererUserId];
-
-          if (peerForAnswerer) {
-            peerForAnswerer.signal(res.simplePeerSignal);
-          } else {
-            toast.error('could not find the peer we created before for this master');
-          }
-        });
-      },
-    );
-
-    $ws.on(ServerResponseChannels.RTC_NEW_USER_JOINED_RESPONSE, (res: RtcNewUserResponse) => {
-      console.log('ooo newbie joined room, I guess I will accept it and send him my signal');
-
-      const peerForMeAndNewbie = new Peer({
-        initiator: false,
-        stream: userLocalStream ?? null,
-        trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
-      });
-
-      peerForMeAndNewbie.on('signal', (signal) => {
-        console.log(
-          'as the answerer, I am going to send back my signal so that the newbie can update his local peer for me',
-        );
-        $ws.emit(
-          ServerRequestChannels.RTC_ANSWER_REQUEST,
-          new RtcAnswerRequest(res.newUserId, signal),
-        );
-      });
-
-      peerForMeAndNewbie.signal(res.simplePeerSignal);
-
-      updatePeerMap((draft) => {
-        draft[res.newUserId] = peerForMeAndNewbie;
-      });
-    });
-
-    return () => {
-      $ws.removeListener(ServerResponseChannels.RTC_RECEIVING_ANSWER_RESPONSE);
-      $ws.removeListener(ServerResponseChannels.RTC_NEW_USER_JOINED_RESPONSE);
-    };
-  }, [$ws, updatePeerMap, peerMap]);
-
   const numberRooms = useMemo(() => Object.keys(roomsMap).length, [roomsMap]);
 
-  // run with initial list of tunedinUsers
-  useEffect(() => {
-    // get distinct peers that we need to build a connection with
-    const userIdsSet = new Set<string>();
-
-    Object.values(roomsMap).forEach((line) => {
-      if (!line.tunedInMemberIds?.includes(user._id.toString())) {
-        return;
-      }
-
-      line.tunedInMemberIds.forEach((tunedUserId) => {
-        if (tunedUserId === user._id.toString()) return;
-
-        userIdsSet.add(tunedUserId);
-      });
-    });
-
-    console.log(`new distinct list of tuned in users`, userIdsSet);
-
-    updatePeerMap((draft) => {
-      // go call all of them, if I'm not already connected
-      userIdsSet.forEach((userIdToCall) => {
-        // ?don't call if we already have a connection?
-        if (draft[userIdToCall]) return;
-
-        const localPeerConnection = new Peer({
-          initiator: true,
-          stream: userLocalStream ?? null,
-          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),
-          );
-        });
-
-        draft[userIdToCall] = localPeerConnection;
-      });
-    });
-  }, [user, numberRooms, $ws, updatePeerMap]); //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);
-
   useEffect(() => {
     navigator.mediaDevices
       .getUserMedia({ video: true, audio: true })
@@ -179,13 +81,35 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
         }
       });
     }
-  }, [userLocalStream, peerMap, prevStream]);
+  }, [userLocalStream, peerMap]);
 
-  console.log(peerMap);
+  const [distinctPeerUserIds, setDistinctPeerUserIds] = useImmer<string[]>([]);
+
+  useEffect(() => {
+    setDistinctPeerUserIds((draft) => {
+      Object.values(roomsMap).forEach((line) => {
+        if (!line.tunedInMemberIds?.includes(user._id.toString())) {
+          return;
+        }
+
+        line.tunedInMemberIds.forEach((tunedUserId) => {
+          if (tunedUserId === user._id.toString()) return;
+
+          draft.push(tunedUserId);
+        });
+      });
+    });
+  }, [roomsMap, setDistinctPeerUserIds, user?._id]);
+
+  console.log(`peer map: `, peerMap);
 
   return (
     <StreamProviderContext.Provider value={{ peerMap }}>
-      <video height={400} width={400} autoPlay muted ref={localStreamRef} />
+      <div className="flex flex-row">
+        <video height={400} width={400} autoPlay muted ref={localStreamRef} />
+
+        <MemoListStreams updatePeerMap={updatePeerMap} membersToCall={distinctPeerUserIds} />
+      </div>
 
       {children}
     </StreamProviderContext.Provider>
@@ -195,3 +119,99 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
 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) => {
+            console.log(`oooo some master received my call and accepted it ${JSON.stringify(res)}`);
+
+            // find the peer we created earlier for this master
+            // ?is this okay? using the setter to get the current state?
+            updatePeerMap((draft) => {
+              const peerForAnswerer = draft[res.answererUserId];
+
+              if (peerForAnswerer) {
+                peerForAnswerer.signal(res.simplePeerSignal);
+              } else {
+                toast.error('could not find the peer we created before for this master');
+              }
+            });
+          },
+        );
+
+        $ws.on(ServerResponseChannels.RTC_NEW_USER_JOINED_RESPONSE, (res: RtcNewUserResponse) => {
+          console.log('ooo newbie joined room, I guess I will accept it and send him my signal');
+
+          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
+          });
+
+          peerForMeAndNewbie.on('signal', (signal) => {
+            console.log(
+              'as the answerer, I am going to send back my signal so that the newbie can update his local peer for me',
+            );
+            $ws.emit(
+              ServerRequestChannels.RTC_ANSWER_REQUEST,
+              new RtcAnswerRequest(res.newUserId, signal),
+            );
+          });
+
+          peerForMeAndNewbie.signal(res.simplePeerSignal);
+
+          updatePeerMap((draft) => {
+            draft[res.newUserId] = peerForMeAndNewbie;
+          });
+        });
+      });
+
+    return () => {
+      $ws.removeListener(ServerResponseChannels.RTC_RECEIVING_ANSWER_RESPONSE);
+      $ws.removeListener(ServerResponseChannels.RTC_NEW_USER_JOINED_RESPONSE);
+    };
+  }, []);
+
+  // on change of the local user stream, take all of the peers and return them
+  return <></>;
+}

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

@@ -301,7 +301,7 @@ function LineStreams({ broadcasters }: { broadcasters: string[] }) {
   console.log(peerMap);
   return (
     <div className="flex flex-col">
-      {broadcasters.map((userId) => {
+      {broadcasters?.map((userId) => {
         const currentPeer = peerMap[userId];
 
         return currentPeer && <Stream key={`streamDisplay-${userId}`} peer={currentPeer} />;