Merge pull request #1 from ArnavSingh76533/copilot/add-room-creation-ui-features

components/Room.tsx

@@ -35,7 +35,20 @@ const Room: FC<Props> = ({ id }) => {
       if (socket !== null) {
         setConnected(socket.connected)
       } else {
-        const newSocket = createClientSocket(id)
+        // Get user name from localStorage
+        const userName = typeof window !== "undefined" 
+          ? localStorage.getItem("userName") || undefined
+          : undefined
+        
+        // Get room metadata from sessionStorage (set during creation)
+        const roomKey = `room_${id}_meta`
+        const roomMeta = typeof window !== "undefined" && sessionStorage.getItem(roomKey)
+          ? JSON.parse(sessionStorage.getItem(roomKey) || "{}")
+          : {}
+        
+        const isPublic = roomMeta.isPublic
+        
+        const newSocket = createClientSocket(id, userName, isPublic)
         newSocket.on("connect", () => {
           setConnected(true)
         })

lib/cache.ts

@@ -1,8 +1,26 @@
 import { RoomState } from "./types"
 
-// In-memory stores
-const rooms = new Map<string, RoomState>()
-let userCount = 0
+// Use global object to ensure cache is shared across all API routes in development
+// In Next.js dev mode, modules can be loaded multiple times, so we need to use global
+const globalForCache = global as typeof globalThis & {
+  roomsCache?: Map<string, RoomState>
+  userCount?: number
+}
+
+// In-memory stores - use global to persist across hot reloads
+const rooms = globalForCache.roomsCache || new Map<string, RoomState>()
+if (!globalForCache.roomsCache) {
+  globalForCache.roomsCache = rooms
+}
+
+if (!globalForCache.userCount) {
+  globalForCache.userCount = 0
+}
+
+const getUserCount = () => globalForCache.userCount || 0
+const setUserCount = (count: number) => {
+  globalForCache.userCount = count
+}
 
 export const getRoom = async (roomId: string): Promise<RoomState | null> => {
   return rooms.get(roomId) ?? null
@@ -31,21 +49,33 @@ export const countRooms = async (): Promise<number> => {
 }
 
 export const countUsers = async (): Promise<number> => {
-  return userCount
+  return getUserCount()
 }
 
 export const incUsers = async (): Promise<number> => {
-  userCount += 1
-  return userCount
+  const newCount = getUserCount() + 1
+  setUserCount(newCount)
+  return newCount
 }
 
 export const decUsers = async (): Promise<number> => {
-  userCount = Math.max(0, userCount - 1)
-  return userCount
+  const newCount = Math.max(0, getUserCount() - 1)
+  setUserCount(newCount)
+  return newCount
 }
 
 export const wipeCache = async (): Promise<"OK"> => {
   rooms.clear()
-  userCount = 0
+  setUserCount(0)
   return "OK"
+}
+
+export const getPublicRooms = async (): Promise<RoomState[]> => {
+  const publicRooms: RoomState[] = []
+  for (const [_, room] of rooms) {
+    if (room.isPublic) {
+      publicRooms.push(room)
+    }
+  }
+  return publicRooms
 }

lib/room.ts

@@ -51,7 +51,12 @@ export const createNewUser = async (roomId: string, socketId: string) => {
   await setRoom(roomId, room)
 }
 
-export const createNewRoom = async (roomId: string, socketId: string) => {
+export const createNewRoom = async (
+  roomId: string,
+  socketId: string,
+  ownerName?: string,
+  isPublic?: boolean
+) => {
   // Use default image if available, otherwise use default video
   const defaultImg = getDefaultImg()
   const defaultMedia = defaultImg || getDefaultSrc()
@@ -62,6 +67,8 @@ export const createNewRoom = async (roomId: string, socketId: string) => {
     commandHistory: [],
     id: roomId,
     ownerId: socketId,
+    ownerName: ownerName,
+    isPublic: isPublic ?? false, // Default to private
     targetState: {
       playlist: {
         items: [

lib/socket.ts

@@ -64,10 +64,22 @@ export function playItemFromPlaylist(
   socket.emit("playItemFromPlaylist", index)
 }
 
-export function createClientSocket(roomId: string): TypedSocket {
+export function createClientSocket(
+  roomId: string,
+  ownerName?: string,
+  isPublic?: boolean
+): TypedSocket {
   console.log("Trying to join room", roomId)
+  const query: any = { roomId }
+  if (ownerName) {
+    query.ownerName = ownerName
+  }
+  if (isPublic !== undefined) {
+    query.isPublic = isPublic.toString()
+  }
+  
   const socket: TypedSocket = io({
-    query: { roomId },
+    query,
     transports: ["websocket"],
     path: "/api/socketio",
   })

lib/types.ts

@@ -77,6 +77,8 @@ export interface RoomState {
   serverTime: number
   id: string
   ownerId: string
+  ownerName?: string // display name of the room owner
+  isPublic?: boolean // whether the room is public (shown in lobby) or private
   users: UserState[]
   targetState: TargetState
   commandHistory: CommandLog[]

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "streamer3",
+  "name": "Stream4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

pages/api/rooms.ts

@@ -0,0 +1,15 @@
+import { getPublicRooms } from "../../lib/cache"
+import { NextApiRequest, NextApiResponse } from "next"
+
+export default async function rooms(_: NextApiRequest, res: NextApiResponse) {
+  const publicRooms = await getPublicRooms()
+  
+  // Return simplified room info for the lobby
+  const roomList = publicRooms.map(room => ({
+    id: room.id,
+    ownerName: room.ownerName || "Unknown",
+    memberCount: room.users.length,
+  }))
+  
+  res.json({ rooms: roomList })
+}

pages/api/socketio.ts

@@ -69,6 +69,11 @@ const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
         }
 
         const roomId = socket.handshake.query.roomId.toLowerCase()
+        const ownerName = typeof socket.handshake.query.ownerName === "string" 
+          ? socket.handshake.query.ownerName 
+          : undefined
+        const isPublic = socket.handshake.query.isPublic === "true"
+        
         const log = (...props: any[]) => {
           console.log(
             "[" + new Date().toUTCString() + "][room " + roomId + "]",
@@ -78,8 +83,8 @@ const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
         }
 
         if (!(await roomExists(roomId))) {
-          await createNewRoom(roomId, socket.id)
-          log("created room")
+          await createNewRoom(roomId, socket.id, ownerName, isPublic)
+          log("created room", { ownerName, isPublic })
         }
 
         socket.join(roomId)

pages/index.tsx

@@ -1,17 +1,42 @@
 import Layout from "../components/Layout"
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import InputText from "../components/input/InputText"
 import Button from "../components/action/Button"
 import { useRouter } from "next/router"
 import { Tooltip } from "react-tooltip"
 import useSWR from "swr"
 
+interface PublicRoom {
+  id: string
+  ownerName: string
+  memberCount: number
+}
+
 export default function Index() {
   const router = useRouter()
   const { data } = useSWR("/api/stats", (url) =>
     fetch(url).then((r) => r.json())
   )
+  const { data: roomsData } = useSWR<{ rooms: PublicRoom[] }>(
+    "/api/rooms",
+    (url) => fetch(url).then((r) => r.json()),
+    { refreshInterval: 5000 } // Auto-refresh every 5 seconds
+  )
+  
   const [room, setRoom] = useState("")
+  const [userName, setUserName] = useState("")
+  const [isPublic, setIsPublic] = useState(false)
+  const [nameError, setNameError] = useState("")
+
+  // Load saved user name from localStorage on mount
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const savedName = localStorage.getItem("userName")
+      if (savedName) {
+        setUserName(savedName)
+      }
+    }
+  }, [])
 
   return (
     <Layout meta={{ robots: "index, archive, follow" }} showNavbar={false}>
@@ -24,6 +49,10 @@ export default function Index() {
             e.preventDefault()
 
             if (room.length >= 4) {
+              // Save user name to localStorage
+              if (userName.trim() && typeof window !== "undefined") {
+                localStorage.setItem("userName", userName.trim())
+              }
               await router.push("/room/" + room)
             }
           }}
@@ -34,14 +63,39 @@ export default function Index() {
             </h1>
             <p className="text-dark-400 text-sm">Join or create a room to watch together</p>
           </div>
+
+          {/* User Name Input */}
+          <div>
+            <label className="block text-sm font-medium text-dark-300 mb-1.5">
+              Your Name {" "}
+              <span className="text-xs text-dark-500">(optional for joining, required for creating)</span>
+            </label>
+            <InputText
+              value={userName}
+              placeholder={"Enter your display name"}
+              onChange={(value) => {
+                setUserName(value)
+                setNameError("")
+              }}
+            />
+            {nameError && (
+              <p className="text-red-500 text-xs mt-1">{nameError}</p>
+            )}
+          </div>
           
-          <InputText
-            value={room}
-            placeholder={"Enter a room ID"}
-            onChange={(value) =>
-              setRoom(value.toLowerCase().replace(/[^a-z]/g, ""))
-            }
-          />
+          {/* Room ID Input */}
+          <div>
+            <label className="block text-sm font-medium text-dark-300 mb-1.5">
+              Room ID
+            </label>
+            <InputText
+              value={room}
+              placeholder={"Enter a room ID"}
+              onChange={(value) =>
+                setRoom(value.toLowerCase().replace(/[^a-z]/g, ""))
+              }
+            />
+          </div>
           
           <div className={"flex gap-3 justify-end"}>
             <Button
@@ -51,6 +105,17 @@ export default function Index() {
                 "bg-accent-600 hover:bg-accent-700 active:bg-accent-800 shadow-lg hover:shadow-xl"
               }
               onClick={() => {
+                // Validate name
+                if (!userName.trim()) {
+                  setNameError("Please enter your name before creating a room")
+                  return
+                }
+                
+                // Save user name to localStorage
+                if (typeof window !== "undefined") {
+                  localStorage.setItem("userName", userName.trim())
+                }
+                
                 fetch("/api/generate")
                   .then((r) => r.json())
                   .then(async ({ roomId }) => {
@@ -60,6 +125,13 @@ export default function Index() {
                       roomId.match(/^[a-z]{4,}$/)
                     ) {
                       console.log("Generated new roomId:", roomId)
+                      // Store room metadata in sessionStorage
+                      if (typeof window !== "undefined") {
+                        sessionStorage.setItem(
+                          `room_${roomId}_meta`,
+                          JSON.stringify({ isPublic })
+                        )
+                      }
                       await router.push("/room/" + roomId)
                     } else {
                       throw Error("Invalid roomId generated: " + roomId)
@@ -86,6 +158,21 @@ export default function Index() {
               Join room
             </Button>
           </div>
+
+          {/* Public/Private Toggle */}
+          <div className="flex items-center gap-3 p-3 bg-dark-800/50 rounded-lg border border-dark-700/30">
+            <label className="flex items-center gap-2 cursor-pointer flex-1">
+              <input
+                type="checkbox"
+                checked={isPublic}
+                onChange={(e) => setIsPublic(e.target.checked)}
+                className="w-4 h-4 rounded border-dark-600 text-primary-600 focus:ring-primary-500 focus:ring-offset-dark-900"
+              />
+              <span className="text-sm text-dark-300">
+                Make room public (visible in lobby)
+              </span>
+            </label>
+          </div>
           
           <div className={"mt-2 pt-4 border-t border-dark-700/50"}>
             <small className={"text-dark-400"}>
@@ -105,6 +192,49 @@ export default function Index() {
         </form>
       </div>
 
+      {/* Public Rooms List */}
+      {roomsData && roomsData.rooms && roomsData.rooms.length > 0 && (
+        <div className="max-w-4xl mx-auto px-4 pb-8">
+          <div className="bg-gradient-to-br from-dark-800 to-dark-900 rounded-xl shadow-2xl p-6 border border-dark-700/50">
+            <h2 className="text-xl font-bold text-dark-200 mb-4 flex items-center gap-2">
+              <span className="inline-block w-2 h-2 bg-primary-500 rounded-full"></span>
+              Public Rooms
+            </h2>
+            <div className="space-y-2">
+              {roomsData.rooms.map((room) => (
+                <div
+                  key={room.id}
+                  className="flex items-center justify-between p-4 bg-dark-800/50 rounded-lg border border-dark-700/30 hover:border-primary-500/50 transition-colors"
+                >
+                  <div className="flex-1">
+                    <div className="font-medium text-dark-200">
+                      Room: <span className="text-primary-400">{room.id}</span>
+                    </div>
+                    <div className="text-sm text-dark-400 mt-1">
+                      Owner: {room.ownerName} • {room.memberCount} {room.memberCount === 1 ? "member" : "members"}
+                    </div>
+                  </div>
+                  <Button
+                    tooltip="Join this room"
+                    className="px-4 py-2 text-sm font-medium"
+                    actionClasses="bg-primary-600 hover:bg-primary-700 active:bg-primary-800"
+                    onClick={async () => {
+                      // Save user name if provided
+                      if (userName.trim() && typeof window !== "undefined") {
+                        localStorage.setItem("userName", userName.trim())
+                      }
+                      await router.push("/room/" + room.id)
+                    }}
+                  >
+                    Join
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
       <Tooltip
         style={{
           backgroundColor: "var(--dark-700)",