From 3509dd5de624b9ac599e01e3b247c092820fc2af Mon Sep 17 00:00:00 2001 From: talksik Date: Sat, 14 May 2022 16:11:57 -0500 Subject: [PATCH] organizing the initiator to another component --- .../src/providers/RealTimeRoomProvider.tsx | 2 - .../desktop/src/providers/StreamProvider.tsx | 224 ++++++++++-------- .../protected/terminal/panels/MainPanel.tsx | 2 +- 3 files changed, 123 insertions(+), 105 deletions(-) diff --git a/packages/desktop/src/providers/RealTimeRoomProvider.tsx b/packages/desktop/src/providers/RealTimeRoomProvider.tsx index 5efc237..711dda4 100644 --- a/packages/desktop/src/providers/RealTimeRoomProvider.tsx +++ b/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 ( (); const localStreamRef = useRef(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(); - - 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(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([]); + + 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 ( - @@ -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; +}) { + 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 <>; +} diff --git a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx index 6a3c226..96868fe 100644 --- a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx +++ b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx @@ -301,7 +301,7 @@ function LineStreams({ broadcasters }: { broadcasters: string[] }) { console.log(peerMap); return (
- {broadcasters.map((userId) => { + {broadcasters?.map((userId) => { const currentPeer = peerMap[userId]; return currentPeer && ;