Fixing bugs

client/package.json

@@ -17,11 +17,11 @@
     "react-moveable": "^0.56.0",
     "react-router-dom": "^7.8.2",
     "react-scripts": "5.0.1",
+    "react-use-websocket": "^4.13.0",
     "socket.io-client": "^4.8.1",
     "web-vitals": "^5.1.0"
   },
   "devDependencies": {
-    "typescript": "^5.4.5",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.19",

client/src/App.tsx

@@ -1,157 +1,182 @@
-import React, { useState, useEffect, KeyboardEvent, useRef } from "react";
+import React, { useState, useEffect, KeyboardEvent } from "react";
 import { Input, Paper, Typography } from "@mui/material";
 
-import { GlobalContext, GlobalContextType } from "./GlobalContext";
+import { Session } from "./GlobalContext";
 import { UserList } from "./UserList";
 import "./App.css";
-import { base } from "./Common";
+import { ws_base, base } from "./Common";
 import { Box, Button } from "@mui/material";
 import { BrowserRouter as Router, Route, Routes, useParams } from "react-router-dom";
+import useWebSocket, { ReadyState } from "react-use-websocket";
 
 console.log(`AI Voice Chat Build: ${process.env.REACT_APP_AI_VOICECHAT_BUILD}`);
 
 type LobbyProps = {
-  lobbyId: string;
+  session: Session;
-  sessionId: string;
 };
-const Lobby: React.FC<LobbyProps> = (props: LobbyProps) => {
-  const { lobbyId, sessionId } = props;
-  const [editName, setEditName] = useState<string>("");
-  const [name, setName] = useState<string>("");
-  const [ws, setWs] = useState<WebSocket | undefined>(undefined);
-  const [error, setError] = useState<string | null>(null);
-  const [global, setGlobal] = useState<GlobalContextType>({
-    connected: false,
-    ws: undefined,
-    sessionId: sessionId,
-    name: "",
-    chat: [],
-  });
 
-  const onWsMessage = (event: MessageEvent) => {
+const Lobby: React.FC<LobbyProps> = (props: LobbyProps) => {
-    const data = JSON.parse(event.data);
+  const { session } = props;
+  const { lobbyName = "default" } = useParams<{ lobbyName: string }>();
+  const [lobbyId, setLobbyId] = useState<string | null>(null);
+  const [editName, setEditName] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+  const [socketUrl, setSocketUrl] = useState<string | null>(null);
+
+  const socket = useWebSocket(socketUrl, {
+    onOpen: () => console.log("WebSocket connection opened."),
+    onClose: () => console.log("WebSocket connection closed."),
+    onError: (event) => console.error("WebSocket error observed:", event),
+    onMessage: (event) => console.log("WebSocket message received:"),
+    shouldReconnect: (closeEvent) => true, // Will attempt to reconnect on all close events.
+    reconnectInterval: 3000,
+    share: true,
+  });
+  const { sendJsonMessage, lastJsonMessage, readyState } = socket;
+
+  useEffect(() => {
+    if (lobbyId && session) {
+      setSocketUrl(`${ws_base}/${lobbyId}/${session.id}`);
+    }
+  }, [lobbyId, session]);
+
+  useEffect(() => {
+    if (!lastJsonMessage) {
+      return;
+    }
+    const data: any = lastJsonMessage;
     switch (data.type) {
       case "update":
         if ("name" in data) {
-          setName(data.name);
+          console.log(`Lobby - name set to ${data.name}`);
+          session.name = data.name;
         }
         break;
       case "error":
+        console.error(`Lobby - Server error: ${data.error}`);
         setError(data.error);
         break;
       default:
         break;
     }
+  }, [lastJsonMessage]);
+
+  useEffect(() => {
+    console.log("WebSocket connection status: ", readyState);
+  }, [readyState]);
+
+  useEffect(() => {
+    if (!session || !lobbyName) {
+      return;
+    }
+    const getLobbyId = async (lobbyName: string, session: Session) => {
+      const res = await fetch(`${base}/api/lobby/${lobbyName}/${session.id}`, {
+        method: "GET",
+        cache: "no-cache",
+        credentials: "same-origin",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (res.status >= 400) {
+        const error = `Unable to connect to AI Voice Chat server! Try refreshing your browser in a few seconds.`;
+        console.error(error);
+        setError(error);
+      }
+
+      const data = await res.json();
+      if (data.error) {
+        console.error(`Lobby - Server error: ${data.error}`);
+        setError(data.error);
+        return;
+      }
+
+      setLobbyId(data.lobby);
+    };
+
+    getLobbyId(lobbyName, session);
+  }, [session, lobbyName, setLobbyId]);
+
+  const setName = (name: string) => {
+    sendJsonMessage({
+      type: "set_name",
+      name: name,
+    });
   };
-  const refWsMessage = useRef(onWsMessage);
-
-  useEffect(() => {
-    refWsMessage.current = onWsMessage;
-  });
-
-  useEffect(() => {
-    if (!ws) {
-      return;
-    }
-    const cbMessage = (e: MessageEvent) => refWsMessage.current(e);
-    ws.addEventListener("message", cbMessage);
-    return () => {
-      ws.removeEventListener("message", cbMessage);
-    };
-  }, [ws, refWsMessage]);
-
-  // Setup websocket connection on mount (only once)
-  useEffect(() => {
-    if (!lobbyId) {
-      console.log("No lobby ID");
-      return;
-    }
-    let loc = window.location,
-      new_uri;
-    if (loc.protocol === "https:") {
-      new_uri = "wss";
-    } else {
-      new_uri = "ws";
-    }
-    new_uri = `${new_uri}://${loc.host}${base}/ws/lobby/${lobbyId}`;
-    const socket = new WebSocket(new_uri);
-    socket.onopen = () => {
-      console.log("WebSocket connected");
-      setGlobal((g: GlobalContextType) => ({ ...g, connected: true }));
-      if (name) {
-        socket.send(JSON.stringify({ type: "set_name", name }));
-      }
-    };
-    setWs(socket);
-    setGlobal((g: GlobalContextType) => ({ ...g, ws: socket }));
-    return () => {
-      setGlobal((g: GlobalContextType) => ({ ...g, connected: false, ws: undefined }));
-      if (socket.readyState !== 0) {
-        socket.close();
-      }
-    };
-    // Only run once on mount
-    // eslint-disable-next-line
-  }, []);
-
-  // Update global context and send set_name when name changes
-  useEffect(() => {
-    if (!ws || !global.connected || global.name === name) {
-      return;
-    }
-    setGlobal((g: GlobalContextType) => ({ ...g, name }));
-    console.log("Sending set_name", name);
-    ws.send(JSON.stringify({ type: "set_name", name }));
-  }, [name, ws, global]);
 
   const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>): void => {
     if (event.key === "Enter") {
       event.preventDefault();
-      if (!editName.trim()) {
+      const newName = editName.trim();
+      if (!newName || session?.name === newName) {
         return;
       }
-      setName(editName.trim());
+      setName(newName);
       setEditName("");
     }
   };
 
   return (
     <Paper className="Lobby" sx={{ p: 2, m: 2, width: "fit-content" }}>
-      {!global.connected ? (
+      {readyState !== ReadyState.OPEN || !session ? (
         <h2>Connecting to server...</h2>
       ) : (
-        <GlobalContext.Provider value={global}>
+        <>
-          {global.name && <UserList />}
+          <Box sx={{ mb: 2, display: "flex", gap: 2, alignItems: "flex-start", flexDirection: "column" }}>
-
+            <Box>
-          {!global.name && (
+              <Typography variant="h5">AI Voice Chat Lobby: {lobbyName}</Typography>
-            <Box sx={{ gap: 1, display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
-              <Typography>Enter your name to join:</Typography>
-              <Box sx={{ display: "flex", gap: 1, width: "100%" }}>
-                <Input
-                  type="text"
-                  value={editName}
-                  onChange={(e): void => {
-                    setEditName(e.target.value);
-                  }}
-                  onKeyDown={handleKeyDown}
-                  placeholder="Your name"
-                />
-                <Button
-                  variant="contained"
-                  onClick={() => {
-                    if (ws && global.connected && editName) {
-                      setName(editName.trim());
-                      setEditName("");
-                    }
-                  }}
-                  disabled={!editName.trim()}
-                >
-                  Join
-                </Button>
-              </Box>
             </Box>
+            <Box>
+              {session.name && <Typography>You are logged in as: {session.name}</Typography>}
+              {!session.name && (
+                <Box sx={{ gap: 1, display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+                  <Typography>Enter your name to join:</Typography>
+                  <Box sx={{ display: "flex", gap: 1, width: "100%" }}>
+                    <Input
+                      type="text"
+                      value={editName}
+                      onChange={(e): void => {
+                        setEditName(e.target.value);
+                      }}
+                      onKeyDown={handleKeyDown}
+                      placeholder="Your name"
+                    />
+                    <Button
+                      variant="contained"
+                      onClick={() => {
+                        setName(editName);
+                        setEditName("");
+                      }}
+                      disabled={!editName.trim()}
+                    >
+                      Join
+                    </Button>
+                  </Box>
+                </Box>
+              )}
+            </Box>
+          </Box>
+
+          {session.name && (
+            <>
+              {session.lobbies.map((lobby: string) => (
+                <Box key={lobby}>
+                  <Button
+                    variant="contained"
+                    href={`${base}/${lobby}`}
+                    disabled={lobby === lobbyName}
+                    sx={{ mr: 1, mb: 1 }}
+                  >
+                    {lobby === lobbyName ? `In Lobby: ${lobby}` : `Join Lobby: ${lobby}`}
+                  </Button>
+                </Box>
+              ))}
+
+              {session && socketUrl && <UserList socketUrl={socketUrl} session={session} />}
+            </>
           )}
-        </GlobalContext.Provider>
+        </>
       )}
       {error && (
         <Paper className="Error" sx={{ p: 2, m: 2, width: "fit-content", backgroundColor: "#ffdddd" }}>
@@ -163,48 +188,56 @@ const Lobby: React.FC<LobbyProps> = (props: LobbyProps) => {
 };
 
 const App = () => {
-  const [sessionId, setSessionId] = useState(undefined);
+  const [session, setSession] = useState<Session | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const { lobbyId = "default" } = useParams<{ lobbyId: string }>();
 
   useEffect(() => {
-    console.log(`App - sessionId`, sessionId);
+    if (!session) {
-  }, [sessionId]);
-
-  useEffect(() => {
-    if (sessionId) {
       return;
     }
-    fetch(`${base}/api/lobby`, {
+    console.log(`App - sessionId`, session.id);
-      method: "GET",
+  }, [session]);
-      cache: "no-cache",
+
-      credentials: "same-origin",
+  useEffect(() => {
-      headers: {
+    if (session) {
-        "Content-Type": "application/json",
+      return;
-      },
+    }
-    })
+    const getSession = async () => {
-      .then((res) => {
+      const res = await fetch(`${base}/api/session`, {
-        if (res.status >= 400) {
+        method: "GET",
-          const error = `Unable to connect to AI Voice Chat server! Try refreshing your browser in a few seconds.`;
+        cache: "no-cache",
-          console.error(error);
+        credentials: "same-origin",
-          setError(error);
+        headers: {
-        }
+          "Content-Type": "application/json",
-        return res.json();
+        },
-      })
+      });
-      .then((data) => {
+
-        setSessionId(data.session);
+      if (res.status >= 400) {
-      })
+        const error = `Unable to connect to AI Voice Chat server! Try refreshing your browser in a few seconds.`;
-      .catch((error) => {});
+        console.error(error);
-  }, [sessionId, setSessionId]);
+        setError(error);
+        return;
+      }
+      const data = await res.json();
+      if (data.error) {
+        console.error(`App - Server error: ${data.error}`);
+        setError(data.error);
+        return;
+      }
+      setSession(data);
+    };
+
+    getSession();
+  }, [session, setSession]);
 
   return (
     <Box>
-      {!sessionId && <h2>Connecting to server...</h2>}
+      {!session && <h2>Connecting to server...</h2>}
-      {sessionId && (
+      {session && (
         <Router>
           <Routes>
-            <Route element={<Lobby sessionId={sessionId} lobbyId={lobbyId} />} path={`${base}/:lobbyId`} />
+            <Route element={<Lobby session={session} />} path={`${base}/:lobbyName`} />
-            <Route element={<Lobby sessionId={sessionId} lobbyId={lobbyId} />} path={`${base}`} />
+            <Route element={<Lobby session={session} />} path={`${base}`} />
           </Routes>
         </Router>
       )}

client/src/Common.ts

@@ -1,18 +1,5 @@
-function debounce<T extends (...args: any[]) => void>(fn: T, ms: number) {
-  let timer: ReturnType<typeof setTimeout>;
-  return function(this: any, ...args: Parameters<T>) {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      timer = null as any;
-      fn.apply(this, args);
-    }, ms);
-  };
-}
-
 const base = process.env.PUBLIC_URL || "";
-   
+const ws_base: string = `${window.location.protocol === "https:" ? "wss" : "ws"}://${
-const assetsPath = `${base}/assets`;
+  window.location.host
-const gamesPath = `${base}`;
+}${base}/ws/lobby`;
-
+export { base, ws_base };
-export { base, debounce, assetsPath, gamesPath };
-export {};

client/src/GlobalContext.tsx

@@ -1,21 +1,6 @@
-import { createContext } from "react";
+type Session = {
-
+  id: string;
-interface GlobalContextType {
+  name: string | null;
-  connected: boolean;
+  lobbies: string[];
-  ws?: WebSocket;
+};
-  name?: string;
+export type { Session };
-  sessionId?: string;
-  chat?: any[];
-  [key: string]: any;
-}
-
-const GlobalContext = createContext<GlobalContextType>({
-  connected: false,
-  ws: undefined,
-  name: "",
-  sessionId: undefined,
-  chat: []
-});
-
-export { GlobalContext };
-export type { GlobalContextType };

client/src/UserList.css

@@ -1,4 +1,4 @@
-.PlayerList {
+.UserList {
   display: flex;
   position: relative;
   padding: 0.5em;
@@ -7,14 +7,14 @@
   margin: 0.25rem 0.25rem 0.25rem 0;
 }
 
-.PlayerList .Name {
+.UserList .Name {
   flex-grow: 1;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
-.PlayerList .NoNetwork {
+.UserList .NoNetwork {
   display: flex;
   justify-self: flex-end;
   width: 1em;
@@ -25,29 +25,29 @@
   background-repeat: no-repeat;
 }
 
-.PlayerList .Unselected {
+.UserList .Unselected {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
 }
 
-/* Player name in the Unselected list... */
+/* User name in the Unselected list... */
-.PlayerList .Unselected > div:nth-child(2) > div > div:first-child {
+.UserList .Unselected > div:nth-child(2) > div > div:first-child {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   max-width: 100%;
 }
 
-.PlayerList .Unselected > div:nth-child(2) {
+.UserList .Unselected > div:nth-child(2) {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
 }
 
-.PlayerList .Unselected > div:nth-child(2) > div {
+.UserList .Unselected > div:nth-child(2) > div {
   justify-content: flex-end;
   display: flex;
   flex-direction: column;
@@ -59,36 +59,40 @@
   border-radius: 0.25rem;
 }
 
-.PlayerList .Unselected .Self {
+.UserList .Unselected .Self {
   border: 1px solid black;
 }
 
-.PlayerList .PlayerSelector .PlayerColor {
+.UserList .UserSelector .UserColor {
   width: 1em;
   height: 1em;
 }
 
-.PlayerList .PlayerSelector {
+.UserList .UserSelector {
   display: inline-flex;
   flex-wrap: wrap;
   flex-direction: row;
 }
 
-.PlayerList .PlayerSelector.MuiList-padding {
+.UserList .UserSelector.MuiList-padding {
   padding: 0;
 }
 
-.PlayerList .PlayerSelector .MuiTypography-body1 {
+.UserList .UserSelector .MuiTypography-body1 {
   font-size: 0.8rem;
 /*  white-space: nowrap;*/
 }
 
-.PlayerList .PlayerSelector .MuiTypography-body2 {
+.UserList .UserSelector .MuiTypography-body2 {
   font-size: 0.7rem;
   white-space: nowrap;
 }
 
-.PlayerList .PlayerSelector .PlayerEntry {
+.UserList .UserSelf {
+  border: 2px solid purple !important;
+}
+
+.UserList .UserSelector .UserEntry {
   display: flex;
   flex-direction: column;
   text-overflow: ellipsis;
@@ -103,7 +107,7 @@
   justify-content: flex-end;
 }
 
-.PlayerList .PlayerSelector .PlayerEntry > div:first-child {
+.UserList .UserSelector .UserEntry > div:first-child {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -111,27 +115,27 @@
   margin-bottom: 0.25em;
 }
 
-.PlayerList .PlayerEntry[data-selectable=true]:hover {
+.UserList .UserEntry[data-selectable=true]:hover {
   border-color: rgba(0,0,0,0.5);
   cursor: pointer;
 }
 
-.PlayerList .Players .PlayerToggle {
+.UserList .Users .UserToggle {
   min-width: 5em;
   display: inline-flex;
   align-items: flex-end;
   flex-direction: column;
 }
 
-.PlayerList .PlayerName {
+.UserList .UserName {
   padding: 0.5em;
 }
 
-.PlayerList .Players > * {
+.UserList .Users > * {
   width: 100%;
 }
 
-.PlayerList .Players .nameInput {
+.UserList .Users .nameInput {
   flex-grow: 1;
 }
 

client/src/UserList.tsx

@@ -1,122 +1,121 @@
-import React, { useState, useEffect, useContext, useRef } from "react";
+import React, { useState, useEffect, useCallback } from "react";
-import Paper from '@mui/material/Paper';
+import Paper from "@mui/material/Paper";
-import List from '@mui/material/List';
+import List from "@mui/material/List";
 import "./UserList.css";
-import { GlobalContext } from "./GlobalContext";
+import { MediaControl, MediaAgent, Peer } from "./MediaControl";
-import { MediaControl, MediaAgent } from "./MediaControl";
 import Box from "@mui/material/Box";
+import { Session } from "./GlobalContext";
+import useWebSocket from "react-use-websocket";
 
 type User = {
   name: string;
-  sessionId: string;
+  session_id: string;
   live: boolean;
+  is_self: boolean /* Client side variable */;
 };
 
-const UserList: React.FC = () => {
+type UserListProps = {
-  const { ws, name, sessionId } = useContext(GlobalContext);
+  socketUrl: string;
-  const [users, setUsers] = useState<Record<string, User>>({});
+  session: Session;
-  const [peers, setPeers] = useState<Record<string, any>>({});
+};
+
+const UserList: React.FC<UserListProps> = (props: UserListProps) => {
+  const { socketUrl, session } = props;
+  const [users, setUsers] = useState<User[] | null>(null);
+  const [peers, setPeers] = useState<Record<string, Peer>>({});
+  const [videoClass, setVideoClass] = useState<string>("Large");
+
+  const sortUsers = useCallback(
+    (A: any, B: any) => {
+      if (!session) {
+        return 0;
+      }
+      /* active user first */
+      if (A.name === session.name) {
+        return -1;
+      }
+      if (B.name === session.name) {
+        return +1;
+      }
+      /* Sort active users first */
+      if (A.name && !B.name) {
+        return -1;
+      }
+      if (B.name && !A.name) {
+        return +1;
+      }
+      /* Otherwise, sort by color */
+      if (A.color && B.color) {
+        return A.color.localeCompare(B.color);
+      }
+      return 0;
+    },
+    [session]
+  );
+
+  // Use the WebSocket hook for lobby events (rely on ws from context, but can use hook for message handling)
+  const { sendJsonMessage } = useWebSocket(socketUrl, {
+    share: true,
+    onMessage: (event) => {
+      if (!session) {
+        return;
+      }
+      const data = JSON.parse(event.data);
+      switch (data.type) {
+        case "users":
+          console.log(`users - lobby update`, data.users);
+          const u: User[] = data.users;
+          u.forEach((user) => {
+            user.is_self = user.session_id === session.id;
+          });
+          u.sort(sortUsers);
+          setVideoClass(u.length <= 2 ? "Medium" : "Small");
+          setUsers(u);
+          break;
+        default:
+          break;
+      }
+    },
+  });
 
   useEffect(() => {
-    console.log("Peers: ", peers);
+    if (users !== null) {
-  }, [peers]);
-  
-  const onWsMessage = (event: MessageEvent) => {
-    const data = JSON.parse(event.data);
-    switch (data.type) {
-    case 'users':
-      console.log(`users - lobby update`, data.users);     
-      setUsers(data.users);
-      break;
-    default:
-      break;
-    }
-  };
-  const refWsMessage = useRef(onWsMessage);
-
-  useEffect(() => { refWsMessage.current = onWsMessage; });
-
-  useEffect(() => {
-    if (!ws) {
       return;
     }
-    const cbMessage = (e: MessageEvent) => refWsMessage.current(e);
+    sendJsonMessage({
-    ws.addEventListener('message', cbMessage);
+      type: "list_users",
-    return () => {
+    });
-      ws.removeEventListener('message', cbMessage);
+  }, [users, sendJsonMessage]);
-    };
-  }, [ws, refWsMessage]);
-
-  useEffect(() => {
-    if (!ws) {
-      return;
-    }
-    ws.send(JSON.stringify({ 
-      type: 'list_users', 
-    }));
-  }, [ws]);
 
   const userElements: JSX.Element[] = [];
 
-  const sortedUsers: any[] = [];
+  users?.forEach((user: User) => {
-
+    console.log(`User: ${user.name}, Is Self: ${user.is_self}, hasPeer: ${peers[user.session_id] ? "Yes" : "No"}`);
-  for (let key in users) {
-    if (users[key]) {
-      sortedUsers.push(users[key]);
-    }
-  }
-
-  const sortUsers = (A: any, B: any) => {
-    /* active user first */
-    if (A.name === name) {
-      return -1;
-    }
-    if (B.name === name) {
-      return +1;
-    }
-    /* Sort active users first */
-    if (A.name && !B.name) {
-      return -1;
-    }
-    if (B.name && !A.name) {
-      return +1;
-    }
-    /* Otherwise, sort by color */
-    if (A.color && B.color) {
-      return A.color.localeCompare(B.color);
-    }
-    return 0;
-  };
-
-  sortedUsers.sort(sortUsers);
-
-  const videoClass = sortedUsers.length <= 2 ? 'Medium' : 'Small';
-  
-  sortedUsers.forEach((user : User) => {
-    const userName = user.name;
-    const isSelf = user.sessionId === sessionId;
-    console.log(`User: ${userName}, Is Self: ${isSelf}, hasPeer: ${peers[user.sessionId] ? 'Yes' : 'No'}`);
     userElements.push(
-      <Box key={userName} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', border: "3px solid magenta" }}
+      <Box
-        className="UserEntry"
+        key={user.name}
-        >
+        sx={{ display: "flex", flexDirection: "column", alignItems: "center", border: "3px solid magenta" }}
+        className={`UserEntry ${user.is_self ? "UserSelf" : ""}`}
+      >
         <div>
-          <div className="Name">{userName ? userName : 'Available' }</div>
+          <div className="Name">{user.name ? user.name : user.session_id}</div>
-          { userName && !user.live && <div className="NoNetwork"></div> }
+          {user.name && !user.live && <div className="NoNetwork"></div>}
         </div>
-        { userName && user.live && peers[user.sessionId] && <MediaControl className={videoClass} peer={peers[user.sessionId]} isSelf={isSelf}/> }
+        {user.name && user.live && peers[user.session_id] ? (
+          <MediaControl className={videoClass} peer={peers[user.session_id]} isSelf={user.is_self} />
+        ) : (
+          <video className="Video"></video>
+        )}
       </Box>
     );
   });
 
   return (
     <Paper className={`UserList ${videoClass}`}>
-      <MediaAgent setPeers={setPeers}/>
+      <MediaAgent {...{ session, socketUrl, peers, setPeers }} />
-      <List className="UserSelector">
+      <List className="UserSelector">{userElements}</List>
-        { userElements }
-      </List>
     </Paper>
   );
-}
+};
 
-export { UserList };
+export { UserList };

server/main.py

@@ -34,19 +34,19 @@ class Session:
         self.has_video = False
 
 
-def getName(session: Session | None) -> str:
+def getName(session: Session | None) -> str | None:
-    if not session:
+    if session and session.name:
-        return "Admin"
-    if session.name:
         return session.name
-    return session.id
+    return None
 
 
 class Lobby:
-    def __init__(self, id):
+    def __init__(self, name: str):
-        self.id = id
+        self.id = secrets.token_hex(16)
-        self.short = id[:8]
+        self.short = self.id[:8]
-        self.sessions: dict[str, Session] = {}
+        self.name = name
+        self.sessions: dict[str, Session] = {}  # All lobby members
+        self.peers: dict[str, Session] = {}  # RTC joined peers only
 
     def addSession(self, session: Session):
         if session.id not in self.sessions:
@@ -72,6 +72,13 @@ def getLobby(lobby_id) -> Lobby | None:
     return lobbies.get(lobby_id, None)
 
 
+def getLobbyByName(lobby_name) -> Lobby | None:
+    for lobby in lobbies.values():
+        if lobby.name == lobby_name:
+            return lobby
+    return None
+
+
 # API endpoints
 @app.get(f"{public_url}api/health")
 def health():
@@ -83,31 +90,74 @@ def health():
 # A user can be in multiple lobbies, but a session is unique to a single user.
 # A user can change their name, but the session ID remains the same and the name
 # updates for all lobbies.
-@app.get(f"{public_url}api/lobby")
+@app.get(f"{public_url}api/session")
-async def lobby(
+async def session(
     request: Request, response: Response, session_id: str = Cookie(default=None)
 ):
     if session_id is None:
         session_id = secrets.token_hex(16)
         response.set_cookie(key="session_id", value=session_id)
+    # Validate that session_id is a hex string of length 32
+    elif (
+        not isinstance(session_id, str)
+        or len(session_id) != 32
+        or not all(c in "0123456789abcdef" for c in session_id)
+    ):
+        return {"error": "Invalid session_id"}
 
     print(f"[{session_id[:8]}]: Browser hand-shake achieved.")
 
-    if session_id not in sessions:
+    session = getSession(session_id)
-        sessions[session_id] = Session(session_id)
+    if not session:
-        logger.info(f"{session_id[:8]}: New session created.")
+        session = Session(session_id)
+        sessions[session_id] = session
+        logger.info(f"{getSessionName(session)}: New session created.")
     else:
-        name = sessions[session_id].name if sessions[session_id].name else "UNSET"
+        logger.info(f"{getSessionName(session)}: Existing session resumed.")
-        logger.info(f"{session_id[:8]}: Existing session resumed for {name}.")
 
-    return {"session": session_id}
+    return {
+        "id": session_id,
+        "name": session.name if session.name else None,
+        "lobbies": [lobby.name for lobby in sessions[session_id].lobbies.values()],
+    }
 
 
-all = "[   all  ]"
+@app.get(public_url + "api/lobby/{lobby_name}/{session_id}")
-info = "[  info  ]"
+async def lobby(
-todo = "[  todo  ]"
+    request: Request,
+    response: Response,
+    lobby_name: str | None = Path(...),
+    session_id: str | None = Path(...),
+):
+    if lobby_name is None:
+        return {"error": "Missing lobby_name"}
+    if session_id is None:
+        return {"error": "Missing session_id"}
+    session = getSession(session_id)
+    if not session:
+        return {"error": f"Session not found ({session_id})"}
+
+    lobby = getLobbyByName(lobby_name)
+    if not lobby:
+        lobby = Lobby(lobby_name)
+        lobbies[lobby.id] = lobby
+        logger.info(
+            f"{getSessionName(session)} <- lobby_create({lobby.short}:{lobby.name})"
+        )
+
+    lobby.addSession(sessions[session_id])
+    sessions[session_id].lobbies[lobby.id] = lobby
+
+    return {"lobby": lobby.id}
 
 
+all_label = "[   all  ]"
+info_label = "[  info  ]"
+todo_label = "[  todo  ]"
+unset_label = "[  ----  ]"
+
+
+# Join the media session in a lobby
 async def join(
     lobby: Lobby,
     session: Session,
@@ -116,33 +166,34 @@ async def join(
 ):
     if not session.name:
         logger.error(
-            f"{session.short}:[UNSET] <- join - No name set yet. Audio not available."
+            f"{session.short}:[UNSET] <- join - No name set yet. Media not available."
         )
         return
 
     if not session.ws:
         logger.error(
-            f"{session.short}:{session.name} - No WebSocket connection. Audio not available."
+            f"{session.short}:{session.name} - No WebSocket connection. Media not available."
         )
         return
 
-    logger.info(f"{lobby.short}: <- join - {session.short}:{session.name}")
+    logger.info(f"{getSessionName(session)} <- join({getLobbyName(lobby)})")
 
-    if session.id in lobby.sessions:
+    if session.id in lobby.peers:
-        logger.info(f"{session.short}:{session.name} - Already joined to Audio.")
+        logger.info(f"{getSessionName(session)} - Already joined to Media.")
         return
 
-    for peer in lobby.sessions.values():
+    # Notify all existing RTC peers
-        if not peer.ws:
+    for peer_session in lobby.peers.values():
+        if not peer_session.ws:
             logger.warning(
-                f"{peer.short}:{peer.name} - No WebSocket connection. Skipping."
+                f"{getSessionName(peer_session)} - No WebSocket connection. Skipping."
             )
             continue
+
         logger.info(
-            f"{lobby.short}:{peer.name} -> addPeer - {session.short}:{session.name}"
+            f"{getSessionName(peer_session)} -> addPeer({getSessionName(session), getLobbyName(lobby)})"
         )
-        # Add this caller to all peers
+        await peer_session.ws.send_json(
-        await peer.ws.send_json(
             {
                 "type": "addPeer",
                 "data": {
@@ -156,100 +207,154 @@ async def join(
         )
 
         # Add each other peer to the caller
-        await session.ws.send_json(
+        if session.ws:
-            {
+            logger.info(
-                "type": "addPeer",
+                f"{getSessionName(session)} -> addPeer({getSessionName(peer_session), getLobbyName(lobby)})"
-                "data": {
+            )
-                    "peer_id": peer.id,
+            await session.ws.send_json(
-                    "peer_name": peer.name,
+                {
-                    "should_create_offer": True,
+                    "type": "addPeer",
-                    "has_audio": peer.has_audio,
+                    "data": {
-                    "has_video": peer.has_video,
+                        "peer_id": peer_session.id,
-                },
+                        "peer_name": peer_session.name,
-            }
+                        "should_create_offer": True,
-        )
+                        "has_audio": peer_session.has_audio,
+                        "has_video": peer_session.has_video,
+                    },
+                }
+            )
 
-    # Add this user as a peer connected to this WebSocket
+    # Add this user as an RTC peer
-    lobby.sessions[session.id] = session
+    lobby.peers[session.id] = session
+    await update_users(lobby)
 
 
 async def part(
     lobby: Lobby,
     session: Session,
 ):
-    if not session.ws:
+    if session.id not in lobby.peers:
-        logger.error(
+        logger.info(
-            f"{session.id}:{session.name} - No WebSocket connection. Audio not available."
+            f"{getSessionName(session)}: <- part({getLobbyName(lobby)}) - Does not exist in RTC peers."
         )
         return
 
-    if session.id not in lobby.sessions:
+    logger.info(
-        logger.info(f"{session.id}: <- {session.name} - Does not exist in lobby audio.")
+        f"{getSessionName(session)}: <- part({getLobbyName(lobby)}) - Media part."
-        return
+    )
 
-    logger.info(f"{session.id}: <- {session.name} - Audio part.")
+    del lobby.peers[session.id]
-    logger.info(f"{lobby.short}: -> remove_peer - {session.short}:{session.name}")
 
-    del lobby.sessions[session.id]
+    # Remove this peer from all other RTC peers, and remove each peer from this peer
-
+    for peer_session in lobby.peers.values():
-    # Remove this peer from all other peers, and remove each peer from this peer
+        if not peer_session.ws:
-    for peer in lobby.sessions.values():
-        if not peer.ws:
             logger.warning(
-                f"{peer.short}:{peer.name} - No WebSocket connection. Skipping."
+                f"{getSessionName(peer_session)} <- part({getLobbyName(lobby)}) - No WebSocket connection. Skipping."
             )
             continue
-        await peer.ws.send_json(
+        logger.info(
+            f"{getSessionName(peer_session)} <- remove_peer({getSessionName(session)})"
+        )
+        await peer_session.ws.send_json(
             {"type": "remove_peer", "data": {"peer_id": session.id}}
         )
 
         if session.ws:
+            logger.info(
+                f"{getSessionName(session)} <- remove_peer({getSessionName(peer_session)})"
+            )
             await session.ws.send_json(
-                {"type": "remove_peer", "data": {"peer_id": peer.id}}
+                {"type": "remove_peer", "data": {"peer_id": peer_session.id}}
             )
         else:
-            logger.warning(f"{session.short}:{session.name} - No WebSocket connection.")
+            logger.error(
+                f"{getSessionName(session)} <- part({getLobbyName(lobby)}) - No WebSocket connection."
+            )
+
+
+async def update_users(lobby: Lobby, requesting_session: Session | None = None):
+    users = [
+        {"name": s.name, "live": True if s.ws else False, "session_id": s.id}
+        for s in lobby.sessions.values()
+        if s.name
+    ]
+    if requesting_session:
+        logger.info(
+            f"{requesting_session.short}:{requesting_session.name} -> list_users({lobby.name})"
+        )
+        if requesting_session.ws:
+            await requesting_session.ws.send_json({"type": "users", "users": users})
+        else:
+            logger.warning(
+                f"{requesting_session.short}:{requesting_session.name} - No WebSocket connection."
+            )
+    else:
+        for s in lobby.sessions.values():
+            logger.info(
+                f"{s.short}:{s.name if s.name else unset_label} -> list_users({lobby.name})"
+            )
+            if s.ws:
+                await s.ws.send_json({"type": "users", "users": users})
+
+
+def getSessionName(session: Session) -> str:
+    return f"{session.short}:{session.name if session.name else unset_label}"
+
+
+def getLobbyName(lobby: Lobby) -> str:
+    return f"{lobby.short}:{lobby.name}"
 
 
 # Register websocket endpoint directly on app with full public_url path
-@app.websocket(f"{public_url}" + "ws/lobby/{lobby_id}")
+@app.websocket(f"{public_url}" + "ws/lobby/{lobby_id}/{session_id}")
 async def websocket_lobby(
     websocket: WebSocket,
     lobby_id: str | None = Path(...),
-    session_id: str = Cookie(default=None),
+    session_id: str | None = Path(...),
 ):
     await websocket.accept()
-    if session_id is None:
+    if lobby_id is None:
         await websocket.send_json(
-            {"type": "error", "error": "Invalid or missing user session"}
+            {"type": "error", "error": "Invalid or missing lobby"}
+        )
+        await websocket.close()
+        return
+    if session_id is None:
+        await websocket.send_json(
+            {"type": "error", "error": "Invalid or missing session"}
         )
         await websocket.close()
         return
-    short = session_id[:8]
-    logger.info(f"Session ID from cookie: {session_id}")
-
     session = getSession(session_id)
     if not session:
-        logger.error(f"{short}: Invalid session ID {session_id}")
+        logger.error(f"Invalid session ID {session_id}")
         await websocket.send_json(
             {"type": "error", "error": f"Invalid session ID {session_id}"}
         )
         await websocket.close()
         return
-    session.ws = websocket
-
-    if lobby_id is None:
-        lobby_id = "default"
-
     lobby = getLobby(lobby_id)
     if not lobby:
-        lobby = Lobby(lobby_id)
+        logger.error(f"Invalid lobby ID {lobby_id}")
-        lobbies[lobby_id] = lobby
+        await websocket.send_json(
-        logger.info(f"{short}: Lobby {lobby_id} - New Lobby")
+            {"type": "error", "error": f"Invalid lobby ID {lobby_id}"}
+        )
+        await websocket.close()
+        return
+
+    logger.info(
+        f"{getSessionName(session)} <- lobby_connect({lobby.short}:{lobby.name})"
+    )
+
+    session.ws = websocket
+
+    # This user session just went from Dead to Live, so update everyone's user list
+    await update_users(lobby)
 
     try:
         while True:
             data = await websocket.receive_json()
+            # logger.info(f"{getSessionName(session)} <- RAW Rx: {data}")
             match data.get("type"):
                 case "set_name":
                     name = data.get("name")
@@ -266,20 +371,20 @@ async def websocket_lobby(
                         continue
 
                     session.name = name
-                    logger.info(f"{session.short}: Name set to {session.name}")
+                    logger.info(
+                        f"{getSessionName(session)} <- set_name({session.name})"
+                    )
                     await websocket.send_json({"type": "update", "name": name})
+                    await update_users(lobby)
+
                 case "list_users":
-                    users = [
+                    await update_users(lobby, session)
-                        {"name": s.name, "live": True, "sessionId": s.id}
-                        for s in sessions.values()
-                    ]
-                    await websocket.send_json({"type": "users", "users": users})
 
                 case "media_status":
                     has_audio = data.get("audio", False)
                     has_video = data.get("video", False)
                     logger.info(
-                        f"{session.short}: <- media-status - audio: {has_audio}, video: {has_video}"
+                        f"{getSessionName(session)}: <- media-status(audio: {has_audio}, video: {has_video})"
                     )
                     session.has_audio = has_audio
                     session.has_video = has_video
@@ -293,10 +398,10 @@ async def websocket_lobby(
                     await part(lobby, session)
 
                 case "relayICECandidate":
-                    logger.info(data)
+                    logger.info(f"{getSessionName(session)} <- relayICECandidate")
-                    if session.id not in lobby.sessions:
+                    if session.id not in lobby.peers:
                         logger.error(
-                            f"{session.short}:{session.name} <- relayICECandidate - Does not have Audio"
+                            f"{session.short}:{session.name} <- relayICECandidate - Not an RTC peer"
                         )
                         return
 
@@ -308,21 +413,22 @@ async def websocket_lobby(
                         "data": {"peer_id": session.id, "candidate": candidate},
                     }
 
-                    if peer_id in lobby.sessions:
+                    if peer_id in lobby.peers:
-                        ws = lobby.sessions[peer_id].ws
+                        ws = lobby.peers[peer_id].ws
                         if not ws:
                             logger.warning(
-                                f"{lobby.sessions[peer_id].short}:{lobby.sessions[peer_id].name} - No WebSocket connection. Skipping."
+                                f"{lobby.peers[peer_id].short}:{lobby.peers[peer_id].name} - No WebSocket connection. Skipping."
                             )
-                            continue
+                            return
                         await ws.send_json(message)
 
                 case "relaySessionDescription":
-                    # todo: if audio doesn't work, figure out if its because of peer_id/session_description missing
+                    logger.info(f"{getSessionName(session)} <- relaySessionDescription")
-                    if session.id not in lobby.sessions:
+                    if session.id not in lobby.peers:
                         logger.error(
-                            f"{session.short}:{session.name} - relaySessionDescription - Does not have Audio"
+                            f"{session.short}:{session.name} - relaySessionDescription - Not an RTC peer"
                         )
+                        return
                     peer_id = data.get("config", {}).get("peer_id")
                     session_description = data.get("config", {}).get(
                         "session_description"
@@ -334,13 +440,13 @@ async def websocket_lobby(
                             "session_description": session_description,
                         },
                     }
-                    if peer_id in lobby.sessions:
+                    if peer_id in lobby.peers:
-                        ws = lobby.sessions[peer_id].ws
+                        ws = lobby.peers[peer_id].ws
                         if not ws:
                             logger.warning(
-                                f"{lobby.sessions[peer_id].short}:{lobby.sessions[peer_id].name} - No WebSocket connection. Skipping."
+                                f"{lobby.peers[peer_id].short}:{lobby.peers[peer_id].name} - No WebSocket connection. Skipping."
                             )
-                            continue
+                            return
                         await ws.send_json(message)
 
                 case _:
@@ -352,11 +458,12 @@ async def websocket_lobby(
                     )
 
     except WebSocketDisconnect:
-        logger.info(f"WebSocket disconnected for user {session_id}")
+        logger.info(f"{getSessionName(session)} <- WebSocket disconnected for user.")
         # Cleanup: remove session from lobby and sessions dict
         session.ws = None
         if lobby and session:
             await part(lobby, session)
+        await update_users(lobby)
         # if session_id in sessions:
         #     del sessions[session_id]
 
@@ -421,7 +528,7 @@ else:
 
     @app.websocket("/ws")
     async def websocket_proxy(websocket: StarletteWebSocket):
-        logger.info("WebSocket proxy connection established.")
+        logger.info("REACT: WebSocket proxy connection established.")
         # Get scheme from websocket.url (should be 'ws' or 'wss')
         scheme = websocket.url.scheme if hasattr(websocket, "url") else "ws"
         target_url = f"{scheme}://static-frontend:3000/ws"
@@ -449,7 +556,7 @@ else:
                 try:
                     await asyncio.gather(client_to_server(), server_to_client())
                 except (WebSocketDisconnect, websockets.ConnectionClosed):
-                    logger.info("WebSocket proxy connection closed.")
+                    logger.info("REACT: WebSocket proxy connection closed.")
         except Exception as e:
-            logger.error(f"WebSocket proxy error: {e}")
+            logger.error(f"REACT: WebSocket proxy error: {e}")
             await websocket.close()