Update client/src/Room.jsx

client/src/Room.jsx

@@ -1,8 +1,8 @@
 // client/src/Room.jsx
 import React, { useEffect, useMemo, useState } from 'react';
 import { io } from 'socket.io-client';
-import Chat from './Chat.jsx';
 import Player from './Player.jsx';
+import Chat from './Chat.jsx';
 import MemberList from './MemberList.jsx';
 import { detectMediaTypeFromUrl, getThumb, prettyError, safeTitle } from './utils.js';
 import { useToasts } from './Toasts.jsx';
@@ -10,43 +10,13 @@ import { log } from './logger.js';
 
 const socket = io('', { transports: ['websocket'] });
 
-// Helper: when the remote URL is a googlevideo/redirector URL (or other blocked host),
-// return a proxied same-origin URL so the browser won't hit CORS.
-function proxiedUrl(remoteUrl) {
-  if (!remoteUrl) return remoteUrl;
-  try {
-    // If it's already a relative proxy path, keep as-is
-    if (remoteUrl.startsWith('/api/yt/proxy')) return remoteUrl;
-    // If it's already an absolute URL that points to our origin proxy, keep as-is
-    try {
-      const maybeUrl = new URL(remoteUrl);
-      // If remoteUrl already points to our origin + /api/yt/proxy, keep it
-      if (maybeUrl.origin === window.location.origin && maybeUrl.pathname.startsWith('/api/yt/proxy')) {
-        return remoteUrl;
-      }
-    } catch (e) {
-      // not an absolute URL, continue
-    }
-
-    // If it's a googlevideo/redirector (common YouTube direct stream host), proxy it.
-    // Also proxy known hosts which commonly block cross-origin accesses.
-    const lower = String(remoteUrl).toLowerCase();
-    const shouldProxy = lower.includes('googlevideo.com') || lower.includes('redirector.googlevideo.com') || lower.includes('r3---sn');
-    if (shouldProxy) {
-      // Return a same-origin proxied route
-      return `/api/yt/proxy?url=${encodeURIComponent(remoteUrl)}`;
-    }
-    return remoteUrl;
-  } catch (err) {
-    // If anything goes wrong, return the remote URL unchanged
-    return remoteUrl;
-  }
-}
-
 function DirectLinkModal({ open, onClose, onPick }) {
   const [url, setUrl] = useState('');
   const [type, setType] = useState('auto');
-  useEffect(() => { if (!open) { setUrl(''); setType('auto'); } }, [open]);
+
+  useEffect(() => {
+    if (!open) { setUrl(''); setType('auto'); }
+  }, [open]);
 
   if (!open) return null;
   return (
@@ -54,9 +24,14 @@ 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), audio (MP3, M4A, WAV, FLAC, OGG, OPUS), and YouTube URLs/IDs.
+          Paste a direct media URL (MP4, WEBM, MP3, M4A, etc.) or a YouTube URL/ID.
         </div>
-        <input className="input" placeholder="https://example.com/media.mp4 or https://youtu.be/xxxx" value={url} onChange={e => setUrl(e.target.value)} />
+        <input
+          className="input"
+          placeholder="https://example.com/video.mp4 or https://youtu.be/xxxx or 11-char ID"
+          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>
@@ -72,141 +47,45 @@ function DirectLinkModal({ open, onClose, onPick }) {
   );
 }
 
-function JioSaavnModal({ open, onClose, onPick }) {
-  const [mode, setMode] = useState('result');
-  const [q, setQ] = useState('');
-  const [items, setItems] = useState([]);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => { if (!open) { setQ(''); setItems([]); setLoading(false); setMode('result'); } }, [open]);
+function YouTubeModal({ open, onClose, onPick, ytError, onTryFallback }) {
+  const [idOrUrl, setIdOrUrl] = useState('');
 
-  const search = async () => {
-    if (!q.trim()) return;
-    try {
-      setLoading(true);
-      const path = mode === 'result' ? '/api/result' : `/api/${mode}`;
-      const res = await fetch(`${path}?q=${encodeURIComponent(q.trim())}`);
-      const data = await res.json();
-      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);
-      log.error(e);
-      alert('Failed to fetch: ' + prettyError(e));
-    }
-  };
+  useEffect(() => {
+    if (!open) { setIdOrUrl(''); }
+  }, [open]);
 
   if (!open) return null;
   return (
     <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && onClose()}>
       <div className="modal">
-        <div className="section-title">JioSaavn search</div>
-        <div className="row" style={{ gap:8 }}>
-          <div className="col"><input className="input" placeholder="Search query (e.g., sanam re)" value={q} onChange={e => setQ(e.target.value)} /></div>
-          <div className="col">
-            <select className="select" value={mode} onChange={e => setMode(e.target.value)}>
-              <option value="result">Search (all)</option>
-              <option value="song">Song</option>
-              <option value="album">Album</option>
-              <option value="playlist">Playlist</option>
-              <option value="lyrics">Lyrics</option>
-            </select>
-          </div>
-          <div className="col" style={{ flex:'0 0 auto' }}>
-            <button className="btn primary" onClick={search}>{loading ? 'Searching...' : 'Search'}</button>
-          </div>
+        <div className="section-title">Play YouTube</div>
+        <div style={{ color:'var(--muted)', fontSize:13, marginBottom:8 }}>
+          Enter a YouTube URL or 11‑character ID. We’ll try Vidfly first and fall back to yt‑dlp if needed.
         </div>
-        <div style={{ marginTop:12, maxHeight:320, overflow:'auto', display:'grid', gap:8 }}>
-          {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 = getThumb(it);
-            return (
-              <div key={idx} 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: 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, thumb })}>Play</button>
-                  ) : <button className="btn" disabled>No URL</button>}
-                </div>
-              </div>
-            );
-          }) : (
-            <div style={{ color:'var(--muted)' }}>{loading ? 'Searching…' : 'No results yet.'}</div>
-          )}
+        <input
+          className="input"
+          placeholder="https://www.youtube.com/watch?v=XXXXXXXXXXX or XXXXXXXID"
+          value={idOrUrl}
+          onChange={e => setIdOrUrl(e.target.value)}
+        />
+        <div style={{ display:'flex', gap:8, marginTop:10 }}>
+          <button className="btn good" onClick={() => onPick(idOrUrl, 'vidfly')}>Play with Vidfly</button>
+          <button className="btn" onClick={() => onPick(idOrUrl, 'yt-dlp')}>Play with yt‑dlp</button>
+          <button className="btn" onClick={onClose}>Close</button>
         </div>
-      </div>
-    </div>
-  );
-}
 
-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 to enable search. You can still paste YouTube URLs/IDs via Direct link.
-          </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>
+        {ytError && (
+          <div className="room-card" style={{ marginTop:12 }}>
+            <div style={{ fontWeight:700, color:'var(--bad)' }}>YouTube failed</div>
+            <div className="meta" style={{ marginTop:6 }}>{ytError.message}</div>
+            {ytError.canFallback && (
+              <div style={{ marginTop:8 }}>
+                <button className="btn warn" onClick={() => onTryFallback(ytError.url, ytError.from === 'vidfly' ? 'yt-dlp' : 'vidfly')}>
+                  Try {ytError.from === 'vidfly' ? 'yt‑dlp' : 'Vidfly'} instead
+                </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(it)}>Play</button>
-                  </div>
-                </div>
-              )) : (
-                <div style={{ color:'var(--muted)' }}>{loading ? 'Searching…' : 'No results yet.'}</div>
-              )}
-            </div>
-          </>
+            )}
+          </div>
         )}
       </div>
     </div>
@@ -253,8 +132,8 @@ export default function Room({ roomId, name, asHost, roomName }) {
   const [partyName, setPartyName] = useState(roomName || roomId);
 
   const [showDirect, setShowDirect] = useState(false);
-  const [showJS, setShowJS] = useState(false);
   const [showYT, setShowYT] = useState(false);
+  const [ytError, setYtError] = useState(null);
 
   const [requests, setRequests] = useState([]);
 
@@ -263,19 +142,18 @@ export default function Room({ roomId, name, asHost, roomName }) {
       setIsHost(resp.isHost);
       if (resp.state) setState(s => ({ ...s, ...resp.state }));
       if (resp.roomName) setPartyName(resp.roomName);
-      // Avoid duplicate local join toasts; rely on system broadcast in chat
     });
 
-    socket.on('set_track', ({ track }) => { setState(s => ({ ...s, track })); });
+    socket.on('set_track', ({ track }) => setState(s => ({ ...s, track })));
     socket.on('play', ({ anchor, anchorAt }) => setState(s => ({ ...s, isPlaying: true, anchor, anchorAt })));
     socket.on('pause', ({ anchor, anchorAt }) => setState(s => ({ ...s, isPlaying: false, anchor, anchorAt })));
     socket.on('seek', ({ anchor, anchorAt, isPlaying }) => setState(s => ({ ...s, anchor, anchorAt, isPlaying })));
     socket.on('host_changed', ({ hostId }) => setIsHost(socket.id === hostId));
     socket.on('members', ({ members, roomName }) => { setMembers(members || []); if (roomName) setPartyName(roomName); });
     socket.on('system', ({ text }) => { if (text) console.log(text); });
-    socket.on('queue_update', ({ queue }) => { setState(s => ({ ...s, queue: queue || [] })); });
+    socket.on('queue_update', ({ queue }) => setState(s => ({ ...s, queue: queue || [] })));
 
-    // Host receives a request → attach a preview (first result)
+    // Host receives a request → attach a preview (best effort via /api/result)
     socket.on('song_request', async (req) => {
       if (!isHost) return;
       const enriched = { ...req, preview: null };
@@ -288,9 +166,7 @@ export default function Room({ roomId, name, asHost, roomName }) {
           const url = first.media_url || first.downloadUrl || first.url || first.perma_url || first.streamUrl;
           if (url) enriched.preview = { url, title: first.title || req.query, meta: first, kind: detectMediaTypeFromUrl(url) || 'audio', thumb: getThumb(first) };
         }
-      } catch (e) {
-        log.error('song_request preview failed', e);
-      }
+      } catch {}
       setRequests(prev => [enriched, ...prev].slice(0, 20));
     });
 
@@ -302,67 +178,70 @@ export default function Room({ roomId, name, asHost, roomName }) {
     };
   }, [roomId, name, asHost, roomName, isHost]);
 
-  // Use vidfly / yt source through our backend for YouTube links/IDs
+  // DIRECT LINKS AND YOUTUBE RESOLUTION
+
+  const setTrackAndClose = (track) => {
+    socket.emit('set_track', { roomId, track });
+    setShowDirect(false);
+    setShowYT(false);
+  };
+
   const pickDirectUrl = async ({ url, type }) => {
     if (!url) return;
-    const isYT = (type === 'youtube') || detectMediaTypeFromUrl(url) === 'youtube' || /^(?:https?:\/\/)?(?:www\.)?youtu/.test(url) || /^[A-Za-z0-9_-]{11}$/.test(url);
+    const isYT = (type === 'youtube') || detectMediaTypeFromUrl(url) === 'youtube' || /^[A-Za-z0-9_-]{11}$/.test(url);
     if (isYT) {
-      try {
-        const resp = await fetch(`/api/yt/source?url=${encodeURIComponent(url)}`);
-        const data = await resp.json();
-        if (!resp.ok) throw new Error(data.error || 'YT resolve failed');
-        // proxied URL for playback
-        const prox = proxiedUrl(data.url);
-        const track = { url: prox, title: data.title || url, meta: { thumb: data.thumbnail, source: 'youtube', originalUrl: data.url }, kind: 'video', thumb: data.thumbnail };
-        socket.emit('set_track', { roomId, track });
-      } catch (e) {
-        alert('YouTube resolve failed: ' + (e.message || e));
-      } finally {
-        setShowDirect(false);
-      }
+      setShowDirect(false);
+      setShowYT(true);
       return;
     }
-
-    let mediaType = type === 'auto' ? detectMediaTypeFromUrl(url) : type;
-    if (!mediaType || mediaType === 'unknown') {
-      setShowDirect(false);
+    const mediaType = (type === 'auto' || !type) ? (detectMediaTypeFromUrl(url) || 'audio') : type;
+    if (mediaType === 'unknown') {
       alert('Unknown media type. Choose Audio or Video.');
-      setTimeout(() => setShowDirect(true), 30);
       return;
     }
     const track = { url, title: url, meta: { source: 'direct' }, kind: mediaType };
-    socket.emit('set_track', { roomId, track });
-    setShowDirect(false);
+    setTrackAndClose(track);
   };
 
-  const playJioSaavnItem = (item) => {
-    const url = item?.url || item?.media_url || item?.downloadUrl || item?.perma_url || item?.streamUrl;
-    if (!url) return alert('Selected item has no stream URL');
-    const type = detectMediaTypeFromUrl(url) || 'audio';
-    const track = { url, title: item.title || item.name || url, meta: item, kind: type, thumb: getThumb(item) };
-    socket.emit('set_track', { roomId, track });
-    setShowJS(false);
+  const resolveYouTube = async (idOrUrl, api) => {
+    setYtError(null);
+    const q = new URLSearchParams({ url: idOrUrl, api }).toString();
+    const resp = await fetch(`/api/yt/source?${q}`);
+    const data = await resp.json();
+    if (!resp.ok) {
+      const message = data?.error || 'Failed to resolve YouTube';
+      throw new Error(message);
+    }
+    return data;
   };
 
-  const playYouTubeItem = async (yt) => {
+  const onPickYouTube = async (idOrUrl, api = 'vidfly') => {
     try {
-      const resp = await fetch(`/api/yt/source?url=${encodeURIComponent(yt.videoId)}`);
-      const data = await resp.json();
-      if (!resp.ok) throw new Error(data.error || 'YT resolve failed');
-      const prox = proxiedUrl(data.url);
-      const track = { url: prox, title: yt.title, meta: { thumb: data.thumbnail, source: 'youtube', originalUrl: data.url }, kind: 'video', thumb: data.thumbnail || yt.thumb };
-      socket.emit('set_track', { roomId, track });
-      setShowYT(false);
+      const data = await resolveYouTube(idOrUrl, api);
+      const track = {
+        url: data.url,
+        title: data.title || idOrUrl,
+        meta: { thumb: data.thumbnail, source: data.source || api, yt: true },
+        kind: data.kind || 'video',
+        thumb: data.thumbnail
+      };
+      setTrackAndClose(track);
     } catch (e) {
-      alert('YouTube resolve failed: ' + (e.message || e));
+      setYtError({
+        message: e.message,
+        canFallback: api === 'vidfly' || api === 'yt-dlp',
+        from: api,
+        url: idOrUrl
+      });
     }
   };
 
+  const onTryFallback = (idOrUrl, api) => onPickYouTube(idOrUrl, api);
+
   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>
@@ -381,9 +260,7 @@ export default function Room({ roomId, name, asHost, roomName }) {
       return;
     }
     if (!req.preview) return;
-    // Ensure preview.url is proxied if necessary (avoids CORS for youtube direct links)
-    const track = { ...req.preview };
-    if (track.url) track.url = proxiedUrl(track.url);
+    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));
   };
@@ -436,8 +313,7 @@ export default function Room({ roomId, name, asHost, roomName }) {
       </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} />
+      <YouTubeModal open={showYT} onClose={() => setShowYT(false)} onPick={onPickYouTube} ytError={ytError} onTryFallback={onTryFallback} />
     </div>
   );
-}
+}