From f0120b19cf6cee736a603052cce59d15e510192b Mon Sep 17 00:00:00 2001 From: talksik Date: Sat, 7 May 2022 10:26:58 -0500 Subject: [PATCH] more changes with listeners and having a render test to maek sure that once we have peer connections we don't change it --- packages/api/sockets/index.ts | 26 ++++++-- packages/core/sockets/channels.ts | 7 +- .../src/controller/lineDataProvider.tsx | 65 +++++++++++++++---- packages/desktop/src/pages/terminal/index.tsx | 19 +++++- 4 files changed, 96 insertions(+), 21 deletions(-) diff --git a/packages/api/sockets/index.ts b/packages/api/sockets/index.ts index 47613ad..af2371f 100644 --- a/packages/api/sockets/index.ts +++ b/packages/api/sockets/index.ts @@ -137,9 +137,9 @@ export default function InitializeWs(io: any) { ); // we want to notify everyone connected to the line even if they are not tuned in - const connectedLine = `connectedLine:${req.lineId}`; + const connectedLineRoomName = `connectedLine:${req.lineId}`; - io.in(connectedLine).emit( + io.in(connectedLineRoomName).emit( ServerResponseChannels.SOMEONE_TUNED_INTO_LINE, new SomeoneTunedResponse( req.lineId, @@ -158,7 +158,7 @@ export default function InitializeWs(io: any) { ); /** - * Notify all users when someone UNTUNES from a room + * Notify all connected users when someone UNTUNES from a room * ?might not be needed, all users' memory of tuned in users is irrelevant? don't need real time? but UI will show # of users tuned in? */ socket.on( @@ -169,14 +169,28 @@ export default function InitializeWs(io: any) { console.log("someone left room"); - io.in(roomName).emit( + const clientUserIdsInRoom = [ + ...io.sockets.adapter.rooms.get(roomName), + ].map( + (otherUserSocketId: string) => socketIdsToUserIds[otherUserSocketId] + ); + + // we want to notify everyone connected to the line even if they are not tuned in + const connectedLineRoomName = `connectedLine:${req.lineId}`; + + io.in(connectedLineRoomName).emit( ServerResponseChannels.SOMEONE_UNTUNED_FROM_LINE, - new SomeoneUntunedFromLineResponse(req.lineId, userInfo.userId) + new SomeoneUntunedFromLineResponse( + req.lineId, + userInfo.userId, + clientUserIdsInRoom + ) ); } ); - /** BROADCAST UPDATE | tell all who are connected to line, not just tuned into, that there is an update to someone broadcasting */ + // TODO: use same pattern as tuning and untuning and send updated fresh list of current broadcasters but using another namespace/room for broadcasters in a line + /** BROADCAST UPDATE | tell all connected, not just tuned into, that there is an update to someone broadcasting */ socket.on( ServerRequestChannels.BROADCAST_TO_LINE, (req: StartBroadcastingRequest) => { diff --git a/packages/core/sockets/channels.ts b/packages/core/sockets/channels.ts index af51bf4..2164ed2 100644 --- a/packages/core/sockets/channels.ts +++ b/packages/core/sockets/channels.ts @@ -1,3 +1,4 @@ +// ! NOTE: these are legacy and too much thinking in the developers head to understand the flow enum SocketChannels { SEND_AUDIO_CLIP = "SEND_AUDIO_CLIP", SEND_USER_STATUS_UPDATE = "SEND_USER_STATUS_UPDATE", @@ -80,7 +81,11 @@ export class UntuneFromLineRequest { constructor(public lineId: string) {} } export class SomeoneUntunedFromLineResponse { - constructor(public lineId: string, public userId: string) {} + constructor( + public lineId: string, + public userId: string, + public allTunedIntoUserIds: string[] + ) {} } export class StartBroadcastingRequest { diff --git a/packages/desktop/src/controller/lineDataProvider.tsx b/packages/desktop/src/controller/lineDataProvider.tsx index 8d29f2f..bd74874 100644 --- a/packages/desktop/src/controller/lineDataProvider.tsx +++ b/packages/desktop/src/controller/lineDataProvider.tsx @@ -5,10 +5,12 @@ import { ServerResponseChannels, SomeoneConnectedResponse, SomeoneTunedResponse, + SomeoneUntunedFromLineResponse, StartBroadcastingRequest, StopBroadcastingRequest, TuneToLineRequest, UserStartedBroadcastingResponse, + UserStoppedBroadcastingResponse, } from "@nirvana/core/sockets/channels"; import React, { useContext, useState } from "react"; import { Socket, io } from "socket.io-client"; @@ -97,9 +99,49 @@ function useSocketHandler(linesData: MasterLineData[]) { // TODO: update the relevant lineMember (based on which userId is given): state and last visit date if current user is joining + if (newMap[res.lineId]) + newMap[res.lineId].tunedInMemberIds = res.allTunedIntoUserIds; + + return newMap; + }); + } + ); + + $ws.on( + ServerResponseChannels.SOMEONE_UNTUNED_FROM_LINE, + (res: SomeoneUntunedFromLineResponse) => { + console.log( + `here are all of updated users in the tuned in room`, + res.allTunedIntoUserIds + ); + + // TODO: if toggled in, make sure to update the current line member in the lines map so that + // we can know to untune if user selects another line + + setLinesMap((prevLinesMap) => { + const newMap = { ...prevLinesMap }; + + // TODO: update the relevant lineMember (based on which userId is given): state and last visit date if current user is joining + + if (newMap[res.lineId]) + newMap[res.lineId].tunedInMemberIds = res.allTunedIntoUserIds; + + return newMap; + }); + } + ); + + $ws.on( + ServerResponseChannels.SOMEONE_STARTED_BROADCASTING, + (res: UserStartedBroadcastingResponse) => { + console.log("someone is starting to broadcast"); + + setLinesMap((prevLinesMap) => { + const newMap = { ...prevLinesMap }; + if (newMap[res.lineId]) newMap[res.lineId].currentBroadcastersUserIds = [ - ...(newMap[res.lineId].tunedInMemberIds ?? []), + ...(newMap[res.lineId].currentBroadcastersUserIds ?? []), res.userId, ]; @@ -108,22 +150,19 @@ function useSocketHandler(linesData: MasterLineData[]) { } ); - // could $ws.on( - ServerResponseChannels.SOMEONE_STARTED_BROADCASTING, - (res: UserStartedBroadcastingResponse) => { - toast.success(`someone or myself buzz on or off in line ${res.lineId}`); - + ServerResponseChannels.SOMEONE_STOPPED_BROADCASTING, + (res: UserStoppedBroadcastingResponse) => { setLinesMap((prevLinesMap) => { const newMap = { ...prevLinesMap }; - // todo: check if it's the user or someone else broadcasting - - if (newMap[res.lineId]) - newMap[res.lineId].currentBroadcastersUserIds = [ - ...(newMap[res.lineId].currentBroadcastersUserIds ?? []), - res.userId, - ]; + if (newMap[res.lineId]?.currentBroadcastersUserIds) { + newMap[res.lineId].currentBroadcastersUserIds = newMap[ + res.lineId + ].currentBroadcastersUserIds.filter( + (broadcasterUserId) => broadcasterUserId !== res.userId + ); + } return newMap; }); diff --git a/packages/desktop/src/pages/terminal/index.tsx b/packages/desktop/src/pages/terminal/index.tsx index 520f895..979afb1 100644 --- a/packages/desktop/src/pages/terminal/index.tsx +++ b/packages/desktop/src/pages/terminal/index.tsx @@ -1,7 +1,7 @@ import { $desktopMode, $selectedLineId } from "../../controller/recoil"; import { GlobalHotKeys, KeyMap } from "react-hotkeys"; import { Skeleton, Tooltip } from "antd"; -import { useCallback, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useState } from "react"; import { useRecoilState, useSetRecoilState } from "recoil"; import { FaPlus } from "react-icons/fa"; @@ -109,6 +109,13 @@ export default function NirvanaTerminal() { return undefined; }, [selectedLineId, linesMap]); + const [listRenderTest, setListRenderTest] = useState(false); + useEffect(() => { + setInterval(() => { + setListRenderTest(true); + }, 2000); + }, [setListRenderTest]); + return ( <> @@ -182,7 +189,17 @@ export default function NirvanaTerminal() { {desktopMode === "terminalDetails" && selectedLine && ( )} + + {listRenderTest && } ); } + +function RenderTest() { + useEffect(() => { + console.error("YOOOO FROM THE RENDER TEST COMPONENT"); + }, []); + + return <>this is the render test; +}