talksik/nirvana-v3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

organizing the initiator to another component

Browse Source
This commit is contained in:
talksik
2022-05-14 16:11:57 -05:00
parent b26ba3bda7
commit 3509dd5de6
3 changed files with 123 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/src/providers/RealTimeRoomProvider.tsx
-2
View File
@@ -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
+122 -102
View File
@@ -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
+1 -1
View File
@@ -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} />;