Update client/src/Room.jsx

client/src/Room.jsx

@@ -23,14 +23,15 @@ function DirectLinkModal({ open, onClose, onPick }) {
       <div className="modal">
         <div className="section-title">Play a direct link</div>
         <div style={{ color:'var(--muted)', fontSize:13, marginBottom:8 }}>
-          Supports video (MP4, MKV, WEBM, MOV) and audio (MP3, M4A, WAV, FLAC, OGG, OPUS). The server must allow CORS and range requests.
+          Supports video (MP4, MKV, WEBM, MOV), audio (MP3, M4A, WAV, FLAC, OGG, OPUS), and YouTube URLs.
         </div>
-        <input className="input" placeholder="https://example.com/media.mp4" value={url} onChange={e => setUrl(e.target.value)} />
+        <input className="input" placeholder="https://example.com/media.mp4 or https://youtu.be/xxxx" value={url} onChange={e => setUrl(e.target.value)} />
         <div style={{ display:'flex', gap:10, marginTop:10 }}>
           <select className="select" value={type} onChange={e => setType(e.target.value)}>
             <option value="auto">Auto-detect type</option>
             <option value="video">Force Video</option>
             <option value="audio">Force Audio</option>
+            <option value="youtube">YouTube</option>
           </select>
           <button className="btn primary" onClick={() => onPick({ url, type })}>Set</button>
           <button className="btn" onClick={onClose}>Cancel</button>
@@ -55,11 +56,13 @@ function JioSaavnModal({ open, onClose, onPick }) {
       const path = mode === 'result' ? '/api/result' : `/api/${mode}`;
       const res = await fetch(`${path}?q=${encodeURIComponent(q.trim())}`);
       const data = await res.json();
-      setItems(Array.isArray(data?.data) ? data.data : (data?.results || data?.songs || data?.list || data || []));
+      const arr = Array.isArray(data?.data) ? data.data
+        : (data?.results || data?.songs || data?.list || data?.items || data || []);
+      setItems(arr);
       setLoading(false);
     } catch (e) {
       setLoading(false);
-      console.error(e);
+      log.error(e);
       alert('Failed to fetch: ' + prettyError(e));
     }
   };
@@ -90,15 +93,19 @@ function JioSaavnModal({ open, onClose, onPick }) {
           {items?.length ? items.map((it, idx) => {
             const title = it.title || it.name || it.song || it?.data?.title || `Item ${idx+1}`;
             const mediaUrl = it.media_url || it.downloadUrl || it.url || it.perma_url || it.streamUrl;
+            const thumb = it.image || it.thumbnail || it.song_image || it.album_image || it.images?.[0] || it.images?.cover || it.image_url;
             return (
               <div key={idx} className="room-card" style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:10 }}>
-                <div style={{ minWidth:0 }}>
-                  <div style={{ fontWeight:700, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{title}</div>
-                  <div className="meta" style={{ marginTop:4, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{mediaUrl || 'No stream URL in item'}</div>
+                <div style={{ display:'flex', alignItems:'center', gap:10, minWidth:0 }}>
+                  <div className="thumb" style={{ width:48, height:48, backgroundImage: thumb ? `url("${thumb}")` : undefined }} />
+                  <div style={{ minWidth:0 }}>
+                    <div style={{ fontWeight:700, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{title}</div>
+                    <div className="meta" style={{ marginTop:4, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{mediaUrl || 'No stream URL in item'}</div>
+                  </div>
                 </div>
                 <div style={{ display:'flex', gap:8 }}>
                   {mediaUrl ? (
-                    <button className="btn good" onClick={() => onPick({ url: mediaUrl, title, meta: it })}>Play</button>
+                    <button className="btn good" onClick={() => onPick({ url: mediaUrl, title, meta: it, thumb })}>Play</button>
                   ) : (
                     <button className="btn" disabled>No URL</button>
                   )}
@@ -114,22 +121,130 @@ function JioSaavnModal({ open, onClose, onPick }) {
   );
 }
 
+function YouTubeModal({ open, onClose, onPick }) {
+  const [q, setQ] = useState('');
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [unavailable, setUnavailable] = useState(false);
+
+  useEffect(() => {
+    if (!open) { setQ(''); setItems([]); setLoading(false); setUnavailable(false); }
+  }, [open]);
+
+  const search = async () => {
+    if (!q.trim()) return;
+    try {
+      setLoading(true);
+      const res = await fetch(`/api/ytsearch?q=${encodeURIComponent(q.trim())}`);
+      if (res.status === 501) {
+        setUnavailable(true);
+        setLoading(false);
+        return;
+      }
+      const data = await res.json();
+      setItems(data.items || []);
+      setLoading(false);
+    } catch (e) {
+      setLoading(false);
+      alert('YouTube search failed: ' + e.message);
+    }
+  };
+
+  if (!open) return null;
+  return (
+    <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && onClose()}>
+      <div className="modal">
+        <div className="section-title">YouTube search</div>
+        {unavailable ? (
+          <div style={{ color:'var(--warn)' }}>
+            YouTube search is disabled. Set YT_API_KEY in server environment to enable search.
+          </div>
+        ) : (
+          <>
+            <div className="row" style={{ gap:8 }}>
+              <div className="col">
+                <input className="input" placeholder="Search YouTube" value={q} onChange={e => setQ(e.target.value)} />
+              </div>
+              <div className="col" style={{ flex:'0 0 auto' }}>
+                <button className="btn primary" onClick={search}>{loading ? 'Searching...' : 'Search'}</button>
+              </div>
+            </div>
+            <div style={{ marginTop:12, maxHeight:320, overflow:'auto', display:'grid', gap:8 }}>
+              {items.length ? items.map((it) => (
+                <div key={it.videoId} className="room-card" style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:10 }}>
+                  <div style={{ display:'flex', alignItems:'center', gap:10, minWidth:0 }}>
+                    <div className="thumb" style={{ width:64, height:36, backgroundImage: it.thumb ? `url("${it.thumb}")` : undefined }} />
+                    <div style={{ minWidth:0 }}>
+                      <div style={{ fontWeight:700, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{it.title}</div>
+                      <div className="meta" style={{ marginTop:4, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{it.channelTitle}</div>
+                    </div>
+                  </div>
+                  <div>
+                    <button className="btn good" onClick={() => onPick({ url: it.videoId, title: it.title, meta: it, kind: 'youtube', thumb: it.thumb })}>Play</button>
+                  </div>
+                </div>
+              )) : (
+                <div style={{ color:'var(--muted)' }}>{loading ? 'Searching…' : 'No results yet.'}</div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function RequestsPanel({ isHost, requests, onAct }) {
+  if (!isHost) return null;
+  if (!requests.length) return null;
+  return (
+    <div className="panel" style={{ marginTop:12 }}>
+      <div className="section-title">Song requests</div>
+      <div style={{ display:'grid', gap:8 }}>
+        {requests.map((r) => (
+          <div key={r.requestId} className="room-card" style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:10 }}>
+            <div style={{ display:'flex', alignItems:'center', gap:10, minWidth:0 }}>
+              <div className="thumb" style={{ width:48, height:48, backgroundImage: r.preview?.thumb ? `url("${r.preview.thumb}")` : undefined }} />
+              <div style={{ minWidth:0 }}>
+                <div style={{ fontWeight:700, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
+                  {r.requester} → {r.query}
+                </div>
+                <div className="meta" style={{ marginTop:4, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
+                  {r.preview?.title || (r.preview ? 'Result found' : 'Searching…')}
+                </div>
+              </div>
+            </div>
+            <div style={{ display:'flex', gap:8 }}>
+              <button className="btn good" onClick={() => onAct('accept', r)} disabled={!r.preview}>Accept</button>
+              <button className="btn" onClick={() => onAct('queue', r)} disabled={!r.preview}>Add to queue</button>
+              <button className="btn warn" onClick={() => onAct('reject', r)}>Reject</button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export default function Room({ roomId, name, asHost, roomName }) {
   const { push } = useToasts();
 
   const [isHost, setIsHost] = useState(false);
-  const [state, setState] = useState({ track: null, isPlaying: false, anchor: 0, anchorAt: 0 });
+  const [state, setState] = useState({ track: null, isPlaying: false, anchor: 0, anchorAt: 0, queue: [] });
   const [members, setMembers] = useState([]);
   const [partyName, setPartyName] = useState(roomName || roomId);
 
   const [showDirect, setShowDirect] = useState(false);
   const [showJS, setShowJS] = useState(false);
+  const [showYT, setShowYT] = useState(false);
 
-  // Join and wire events
+  const [requests, setRequests] = useState([]);
+
+  // Join / events
   useEffect(() => {
     socket.emit('join_room', { roomId, name, asHost, roomName }, (resp) => {
       setIsHost(resp.isHost);
-      if (resp.state) setState(resp.state);
+      if (resp.state) setState(s => ({ ...s, ...resp.state }));
       if (resp.roomName) setPartyName(resp.roomName);
       push(`Joined ${resp.roomName || roomId} as ${resp.isHost ? 'Host' : 'Guest'}`, 'good');
     });
@@ -147,25 +262,58 @@ export default function Room({ roomId, name, asHost, roomName }) {
       setMembers(members || []);
       if (roomName) setPartyName(roomName);
     });
+    socket.on('system', ({ text }) => {
+      if (text) push(text, 'good');
+    });
+    socket.on('queue_update', ({ queue }) => {
+      setState(s => ({ ...s, queue: queue || [] }));
+    });
+
+    // Request arrives -> host side auto-search to attach preview with thumb
+    socket.on('song_request', async (req) => {
+      const enriched = { ...req, preview: null };
+      try {
+        const res = await fetch(`/api/result?q=${encodeURIComponent(req.query)}`);
+        const data = await res.json();
+        const list = Array.isArray(data?.data) ? data.data : (data?.results || data?.songs || data?.list || data?.items || data || []);
+        const first = list?.[0];
+        if (first) {
+          const url = first.media_url || first.downloadUrl || first.url || first.perma_url || first.streamUrl;
+          const thumb = first.image || first.thumbnail || first.song_image || first.album_image || first.images?.[0] || first.images?.cover || first.image_url;
+          if (url) {
+            enriched.preview = {
+              url,
+              title: first.title || req.query,
+              meta: first,
+              kind: detectMediaTypeFromUrl(url) || 'audio',
+              thumb
+            };
+          }
+        }
+      } catch (e) {
+        // ignore, just show request without preview
+      }
+      setRequests(prev => [enriched, ...prev].slice(0, 20));
+      push(`Song request: ${req.requester} → ${req.query}`, 'warn');
+    });
 
-    // Initial rename sync
     socket.emit('rename', { roomId, newName: name });
 
     return () => {
       socket.off('set_track'); socket.off('play'); socket.off('pause'); socket.off('seek');
-      socket.off('host_changed'); socket.off('members');
+      socket.off('host_changed'); socket.off('members'); socket.off('system'); socket.off('queue_update'); socket.off('song_request');
     };
   }, [roomId, name, asHost, roomName, push]);
 
-  // Host actions
+  // Host actions: set track from direct link
   const pickDirectUrl = ({ url, type }) => {
     if (!url) return;
     let mediaType = type === 'auto' ? detectMediaTypeFromUrl(url) : type;
-    if (mediaType === 'unknown') {
+    if (type === 'youtube') mediaType = 'youtube';
+    if (!mediaType || mediaType === 'unknown') {
       setShowDirect(false);
-      push('Unknown media type. Please choose Audio or Video.', 'warn');
-      // Re-open with hint
-      setTimeout(() => setShowDirect(true), 50);
+      push('Unknown media type. Please choose Audio, Video or YouTube.', 'warn');
+      setTimeout(() => setShowDirect(true), 30);
       return;
     }
     const track = { url, title: url, meta: { source: 'direct' }, kind: mediaType };
@@ -173,21 +321,32 @@ export default function Room({ roomId, name, asHost, roomName }) {
     setShowDirect(false);
   };
 
+  // Host actions: set track from JioSaavn
   const playJioSaavnItem = (item) => {
     if (!item?.url) {
       push('Selected item has no stream URL', 'warn');
       return;
     }
-    const type = detectMediaTypeFromUrl(item.url) === 'unknown' ? 'audio' : detectMediaTypeFromUrl(item.url);
-    socket.emit('set_track', { roomId, track: { url: item.url, title: item.title, meta: item, kind: type } });
+    const type = detectMediaTypeFromUrl(item.url) || 'audio';
+    const track = { url: item.url, title: item.title, meta: item, kind: type, thumb: item.thumb || item.image };
+    socket.emit('set_track', { roomId, track });
     setShowJS(false);
   };
 
+  // Host actions: set track from YouTube search
+  const playYouTubeItem = (item) => {
+    if (!item?.videoId) return;
+    const track = { url: item.videoId, title: item.title, meta: item, kind: 'youtube', thumb: item.thumb };
+    socket.emit('set_track', { roomId, track });
+    setShowYT(false);
+  };
+
   const Controls = useMemo(() => (
     isHost ? (
       <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
         <button className="btn" onClick={() => setShowDirect(true)}>Direct link</button>
         <button className="btn" onClick={() => setShowJS(true)}>JioSaavn</button>
+        <button className="btn" onClick={() => setShowYT(true)}>YouTube</button>
         <button className="btn good" onClick={() => socket.emit('play', { roomId })}>Play</button>
         <button className="btn" onClick={() => socket.emit('pause', { roomId })}>Pause</button>
         <button className="btn" onClick={() => {
@@ -199,10 +358,22 @@ export default function Room({ roomId, name, asHost, roomName }) {
     ) : <div className="badge">Waiting for host controls…</div>
   ), [isHost, roomId]);
 
+  // Handle request action (host)
+  const handleRequestAction = (action, req) => {
+    if (action === 'reject') {
+      setRequests(prev => prev.filter(r => r.requestId !== req.requestId));
+      return;
+    }
+    if (!req.preview) return;
+    const track = req.preview;
+    socket.emit('song_request_action', { roomId, action: action === 'accept' ? 'accept' : 'queue', track });
+    setRequests(prev => prev.filter(r => r.requestId !== req.requestId));
+  };
+
   return (
     <div className="container">
       <div className="row">
-        <div className="col" style={{ minWidth: 420 }}>
+        <div className="col" style={{ minWidth: 320 }}>
           <div className="player">
             <div className="player-header">
               <div style={{ display:'flex', alignItems:'center', gap:10 }}>
@@ -218,8 +389,10 @@ export default function Room({ roomId, name, asHost, roomName }) {
 
           <div className="panel" style={{ marginTop: 12 }}>
             <div className="section-title">Chat</div>
-            <Chat socket={socket} roomId={roomId} name={name} />
+            <Chat socket={socket} roomId={roomId} name={name} isHost={isHost} members={members} />
           </div>
+
+          <RequestsPanel isHost={isHost} requests={requests} onAct={handleRequestAction} />
         </div>
 
         <div className="col" style={{ flex:'0 0 340px' }}>
@@ -227,18 +400,26 @@ export default function Room({ roomId, name, asHost, roomName }) {
             <div className="section-title">Members</div>
             <MemberList members={members} />
           </div>
+
           <div className="panel" style={{ marginTop: 12 }}>
-            <div className="section-title">Now playing</div>
-            <div style={{ color:'var(--muted)' }}>{state?.track ? safeTitle(state.track) : 'No track selected'}</div>
-            <div style={{ marginTop: 8 }}>
-              <div className="bar"><span style={{ width: state.isPlaying ? '100%' : '8%', transition:'width 1.8s ease' }}></span></div>
-            </div>
+            <div className="section-title">Queue</div>
+            {state.queue?.length ? (
+              <div style={{ display:'grid', gap:8 }}>
+                {state.queue.map((t, i) => (
+                  <div key={i} className="room-card" style={{ display:'flex', alignItems:'center', gap:10 }}>
+                    <div className="thumb" style={{ width:40, height:40, backgroundImage: t.thumb ? `url("${t.thumb}")` : undefined }} />
+                    <div style={{ fontWeight:700, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{t.title || t.url}</div>
+                  </div>
+                ))}
+              </div>
+            ) : <div style={{ color:'var(--muted)' }}>No songs in queue</div>}
           </div>
         </div>
       </div>
 
       <DirectLinkModal open={showDirect} onClose={() => setShowDirect(false)} onPick={pickDirectUrl} />
       <JioSaavnModal open={showJS} onClose={() => setShowJS(false)} onPick={playJioSaavnItem} />
+      <YouTubeModal open={showYT} onClose={() => setShowYT(false)} onPick={playYouTubeItem} />
     </div>
   );
 }