Implement name handling and YouTube search close button

Co-authored-by: ArnavSingh76533 <160649079+ArnavSingh76533@users.noreply.github.com>

components/Room.tsx

@@ -15,6 +15,7 @@ import InputUrl from "./input/InputUrl"
 import UserList from "./user/UserList"
 import ChatPanel from "./chat/ChatPanel"
 import YoutubeSearch from "./search/YoutubeSearch"
+import NameModal from "./modal/NameModal"
 
 interface Props {
   id: string
@@ -29,6 +30,7 @@ const Room: FC<Props> = ({ id }) => {
     ClientToServerEvents
   > | null>(null)
   const [url, setUrl] = useState("")
+  const [showNameModal, setShowNameModal] = useState(false)
 
   useEffect(() => {
     fetch("/api/socketio").finally(() => {
@@ -40,6 +42,12 @@ const Room: FC<Props> = ({ id }) => {
           ? localStorage.getItem("userName") || undefined
           : undefined
         
+        // Show modal if no userName
+        if (!userName || !userName.trim()) {
+          setShowNameModal(true)
+          return
+        }
+        
         // Get room metadata from sessionStorage (set during creation)
         const roomKey = `room_${id}_meta`
         const roomMeta = typeof window !== "undefined" && sessionStorage.getItem(roomKey)
@@ -72,6 +80,33 @@ const Room: FC<Props> = ({ id }) => {
     setTimeout(connectionCheck, 100)
   }
 
+  const handleNameSubmit = (name: string) => {
+    // Save to localStorage
+    if (typeof window !== "undefined") {
+      localStorage.setItem("userName", name)
+    }
+    setShowNameModal(false)
+    
+    // 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
+    
+    // Create socket connection with the name
+    const newSocket = createClientSocket(id, name, isPublic)
+    newSocket.on("connect", () => {
+      setConnected(true)
+    })
+    setSocket(newSocket)
+  }
+
+  if (showNameModal) {
+    return <NameModal show={true} onSubmit={handleNameSubmit} />
+  }
+
   if (!connected || socket === null) {
     if (!connecting) {
       connecting = true

components/modal/NameModal.tsx

@@ -0,0 +1,67 @@
+import { FC, useState } from "react"
+import Modal from "./Modal"
+import InputText from "../input/InputText"
+import Button from "../action/Button"
+
+interface Props {
+  show: boolean
+  onSubmit: (name: string) => void
+}
+
+const NameModal: FC<Props> = ({ show, onSubmit }) => {
+  const [name, setName] = useState("")
+  const [error, setError] = useState("")
+
+  const handleSubmit = () => {
+    const trimmedName = name.trim()
+    if (!trimmedName) {
+      setError("Please enter your name")
+      return
+    }
+    if (trimmedName.length < 2) {
+      setError("Name must be at least 2 characters")
+      return
+    }
+    if (trimmedName.length > 30) {
+      setError("Name must be less than 30 characters")
+      return
+    }
+    onSubmit(trimmedName)
+  }
+
+  return (
+    <Modal title="Enter Your Name" show={show} close={() => {}}>
+      <div className="space-y-4">
+        <p className="text-dark-300">
+          Please enter your name to join this room. This will be your display name visible to other participants.
+        </p>
+        <div>
+          <InputText
+            value={name}
+            placeholder="Your display name"
+            onChange={(value) => {
+              setName(value)
+              setError("")
+            }}
+            required
+          />
+          {error && (
+            <p className="text-red-500 text-sm mt-2">{error}</p>
+          )}
+        </div>
+        <div className="flex justify-end pt-2">
+          <Button
+            tooltip="Continue with this name"
+            className="px-6 py-2.5 font-medium"
+            actionClasses="bg-primary-600 hover:bg-primary-700 active:bg-primary-800"
+            onClick={handleSubmit}
+          >
+            Continue
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default NameModal

components/search/YoutubeSearch.tsx

@@ -104,6 +104,10 @@ const YoutubeSearch: FC<Props> = ({ socket }) => {
 
   const playNow = (url: string) => socket?.emit("playUrl", url)
   const addToPlaylist = (url: string) => socket?.emit("addToPlaylist", url)
+  const closeResults = () => {
+    setResults([])
+    setError(null)
+  }
 
   return (
     <div className="flex flex-col gap-3 bg-dark-900 border border-dark-700/50 rounded-xl p-4 shadow-lg">
@@ -130,46 +134,62 @@ const YoutubeSearch: FC<Props> = ({ socket }) => {
 
       {error && <div className="text-red-400 text-sm bg-red-900/20 border border-red-700/30 rounded-lg p-2">{error}</div>}
 
-      <div className="grid gap-2 max-h-96 overflow-y-auto">
-        {results.map((r) => (
-          <div
-            key={r.id}
-            className="grid grid-cols-[auto_1fr_auto_auto] items-center gap-3 p-3 rounded-lg border border-dark-700/50 bg-dark-800/50 hover:bg-dark-800 transition-all duration-200"
-          >
-            {/* Thumb */}
-            {r.thumbnails?.[0]?.url ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img src={r.thumbnails[0].url} alt="" className="w-20 h-12 object-cover rounded-md border border-dark-700/30" />
-            ) : (
-              <div className="w-20 h-12 bg-dark-700 rounded-md border border-dark-700/30" />
-            )}
-
-            {/* Info */}
-            <div className="min-w-0">
-              <div className="truncate font-medium text-dark-200">{r.title}</div>
-              <div className="text-dark-500 text-xs truncate">{r.url}</div>
-            </div>
-
-            {/* Add (small) */}
+      {results.length > 0 && (
+        <div className="space-y-2">
+          {/* Close button for results */}
+          <div className="flex justify-between items-center">
+            <span className="text-sm text-dark-400">{results.length} results</span>
             <button
-              className={`btn bg-accent-600 hover:bg-accent-700 active:bg-accent-800 px-3 py-1.5 rounded-lg text-xs justify-center font-medium transition-all duration-200 ${ADD_BTN_WIDTH}`}
-              onClick={() => addToPlaylist(r.url)}
-              title="Add to playlist"
+              onClick={closeResults}
+              className="text-sm text-dark-400 hover:text-dark-200 underline"
+              title="Close search results"
             >
-              Add
-            </button>
-
-            {/* Play (aligned under Search button) */}
-            <button
-              className={`btn bg-primary-600 hover:bg-primary-700 active:bg-primary-800 px-3 py-1.5 rounded-lg justify-center font-medium transition-all duration-200 shadow-md hover:shadow-glow ${ACTION_BTN_WIDTH}`}
-              onClick={() => playNow(r.url)}
-              title="Play now"
-            >
-              Play
+              Close
             </button>
           </div>
-        ))}
-      </div>
+          
+          <div className="grid gap-2 max-h-96 overflow-y-auto">
+            {results.map((r) => (
+              <div
+                key={r.id}
+                className="grid grid-cols-[auto_1fr_auto_auto] items-center gap-3 p-3 rounded-lg border border-dark-700/50 bg-dark-800/50 hover:bg-dark-800 transition-all duration-200"
+              >
+                {/* Thumb */}
+                {r.thumbnails?.[0]?.url ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img src={r.thumbnails[0].url} alt="" className="w-20 h-12 object-cover rounded-md border border-dark-700/30" />
+                ) : (
+                  <div className="w-20 h-12 bg-dark-700 rounded-md border border-dark-700/30" />
+                )}
+
+                {/* Info */}
+                <div className="min-w-0">
+                  <div className="truncate font-medium text-dark-200">{r.title}</div>
+                  <div className="text-dark-500 text-xs truncate">{r.url}</div>
+                </div>
+
+                {/* Add (small) */}
+                <button
+                  className={`btn bg-accent-600 hover:bg-accent-700 active:bg-accent-800 px-3 py-1.5 rounded-lg text-xs justify-center font-medium transition-all duration-200 ${ADD_BTN_WIDTH}`}
+                  onClick={() => addToPlaylist(r.url)}
+                  title="Add to playlist"
+                >
+                  Add
+                </button>
+
+                {/* Play (aligned under Search button) */}
+                <button
+                  className={`btn bg-primary-600 hover:bg-primary-700 active:bg-primary-800 px-3 py-1.5 rounded-lg justify-center font-medium transition-all duration-200 shadow-md hover:shadow-glow ${ACTION_BTN_WIDTH}`}
+                  onClick={() => playNow(r.url)}
+                  title="Play now"
+                >
+                  Play
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   )
 }

lib/room.ts

@@ -14,14 +14,16 @@ export const updateLastSync = (room: RoomState) => {
   return room
 }
 
-export const createNewUser = async (roomId: string, socketId: string) => {
+export const createNewUser = async (roomId: string, socketId: string, userName?: string) => {
   const room = await getRoom(roomId)
   if (room === null) {
     throw new Error("Creating user for non existing room:" + roomId)
   }
 
   const users = room.users
-  let name = getRandomName()
+  let name = userName && userName.trim() ? userName.trim() : getRandomName()
+  
+  // Ensure unique name
   while (users.some((user) => user.name === name)) {
     name = getRandomName()
   }
@@ -54,7 +56,7 @@ export const createNewUser = async (roomId: string, socketId: string) => {
 export const createNewRoom = async (
   roomId: string,
   socketId: string,
-  ownerName?: string,
+  userName?: string,
   isPublic?: boolean
 ) => {
   // Use default image if available, otherwise use default video
@@ -67,7 +69,7 @@ export const createNewRoom = async (
     commandHistory: [],
     id: roomId,
     ownerId: socketId,
-    ownerName: ownerName,
+    ownerName: userName,
     isPublic: isPublic ?? false, // Default to private
     targetState: {
       playlist: {

lib/socket.ts

@@ -66,13 +66,13 @@ export function playItemFromPlaylist(
 
 export function createClientSocket(
   roomId: string,
-  ownerName?: string,
+  userName?: string,
   isPublic?: boolean
 ): TypedSocket {
   console.log("Trying to join room", roomId)
   const query: any = { roomId }
-  if (ownerName) {
-    query.ownerName = ownerName
+  if (userName) {
+    query.userName = userName
   }
   if (isPublic !== undefined) {
     query.isPublic = isPublic.toString()

pages/api/socketio.ts

@@ -69,8 +69,8 @@ const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
         }
 
         const roomId = socket.handshake.query.roomId.toLowerCase()
-        const ownerName = typeof socket.handshake.query.ownerName === "string" 
-          ? socket.handshake.query.ownerName 
+        const userName = typeof socket.handshake.query.userName === "string" 
+          ? socket.handshake.query.userName 
           : undefined
         const isPublic = socket.handshake.query.isPublic === "true"
         
@@ -83,15 +83,15 @@ const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
         }
 
         if (!(await roomExists(roomId))) {
-          await createNewRoom(roomId, socket.id, ownerName, isPublic)
-          log("created room", { ownerName, isPublic })
+          await createNewRoom(roomId, socket.id, userName, isPublic)
+          log("created room", { userName, isPublic })
         }
 
         socket.join(roomId)
         await incUsers()
         log("joined")
 
-        await createNewUser(roomId, socket.id)
+        await createNewUser(roomId, socket.id, userName)
 
         // Send initial chat history to the newly joined socket
         {