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,7 +58,108 @@ 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 })
+      .then((localMediaStream: MediaStream) => {
+        setUserLocalStream(localMediaStream);
+
+        if (localStreamRef.current) localStreamRef.current.srcObject = localMediaStream;
+      });
+  }, [localStreamRef]);
+
+  useEffect(() => {
+    if (userLocalStream) {
+      Object.values(peerMap).forEach((currentPeer) => {
+        try {
+          currentPeer.addStream(userLocalStream);
+        } catch (error) {
+          toast.error('problem adding stream');
+          console.error(error);
+        }
+      });
+    }
+  }, [userLocalStream, 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 }}>
+      <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) => {
@@ -83,7 +184,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
 
           const peerForMeAndNewbie = new Peer({
             initiator: false,
-        stream: userLocalStream ?? null,
+            stream: localMediaStream,
             trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
           });
 
@@ -103,95 +204,14 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
             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]);
+  // on change of the local user stream, take all of the peers and return them
-
+  return <></>;
-  // 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 })
-      .then((localMediaStream: MediaStream) => {
-        setUserLocalStream(localMediaStream);
-
-        if (localStreamRef.current) localStreamRef.current.srcObject = localMediaStream;
-      });
-  }, [localStreamRef]);
-
-  useEffect(() => {
-    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);
-
-  return (
-    <StreamProviderContext.Provider value={{ peerMap }}>
-      <video height={400} width={400} autoPlay muted ref={localStreamRef} />
-
-      {children}
-    </StreamProviderContext.Provider>
-  );
-}
-
-export default function useStreams() {
-  return useContext(StreamProviderContext);
 }

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} />;