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

@@ -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) => {

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 {

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,
+      ServerResponseChannels.SOMEONE_STOPPED_BROADCASTING,
-      (res: UserStartedBroadcastingResponse) => {
+      (res: UserStoppedBroadcastingResponse) => {
-        toast.success(`someone or myself buzz on or off in line ${res.lineId}`);
-
         setLinesMap((prevLinesMap) => {
           const newMap = { ...prevLinesMap };
 
-          // todo: check if it's the user or someone else broadcasting
+          if (newMap[res.lineId]?.currentBroadcastersUserIds) {
-
+            newMap[res.lineId].currentBroadcastersUserIds = newMap[
-          if (newMap[res.lineId])
+              res.lineId
-            newMap[res.lineId].currentBroadcastersUserIds = [
+            ].currentBroadcastersUserIds.filter(
-              ...(newMap[res.lineId].currentBroadcastersUserIds ?? []),
+              (broadcasterUserId) => broadcasterUserId !== res.userId
-              res.userId,
+            );
-            ];
+          }
 
           return newMap;
         });

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<boolean>(false);
+  useEffect(() => {
+    setInterval(() => {
+      setListRenderTest(true);
+    }, 2000);
+  }, [setListRenderTest]);
+
   return (
     <>
       <GlobalHotKeys handlers={handlers} keyMap={keyMap} allowChanges />
@@ -182,7 +189,17 @@ export default function NirvanaTerminal() {
         {desktopMode === "terminalDetails" && selectedLine && (
           <LineDetailsTerminal selectedLine={selectedLine} />
         )}
+
+        {listRenderTest && <RenderTest />}
       </div>
     </>
   );
 }
+
+function RenderTest() {
+  useEffect(() => {
+    console.error("YOOOO FROM THE RENDER TEST COMPONENT");
+  }, []);
+
+  return <>this is the render test</>;
+}