Update client/src/Room.jsx

client/src/Room.jsx

@@ -4,34 +4,25 @@ import { io } from 'socket.io-client';
 import Player from './Player.jsx';
 import Chat from './Chat.jsx';
 import MemberList from './MemberList.jsx';
-import { detectMediaTypeFromUrl, getThumb, prettyError, safeTitle } from './utils.js';
+import { detectMediaTypeFromUrl, getThumb } from './utils.js';
 import { useToasts } from './Toasts.jsx';
-import { log } from './logger.js';
 
 const socket = io('', { transports: ['websocket'] });
 
 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 (
     <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && onClose()}>
       <div className="modal">
         <div className="section-title">Play a direct link</div>
         <div style={{ color:'var(--muted)', fontSize:13, marginBottom:8 }}>
-          Paste a direct media URL (MP4, WEBM, MP3, M4A, etc.) or a YouTube URL/ID.
+          Paste a direct media URL (MP4, WEBM, MP3, M4A) or a YouTube URL/ID.
         </div>
-        <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)}
-        />
+        <input className="input" value={url} onChange={e => setUrl(e.target.value)}
+          placeholder="https://example.com/video.mp4 or https://youtu.be/xxxx or 11-char ID" />
         <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>
@@ -47,44 +38,27 @@ function DirectLinkModal({ open, onClose, onPick }) {
   );
 }
 
-function YouTubeModal({ open, onClose, onPick, ytError, onTryFallback }) {
+function YouTubeModal({ open, onClose, onPick, ytError }) {
   const [idOrUrl, setIdOrUrl] = useState('');
-
-  useEffect(() => {
-    if (!open) { setIdOrUrl(''); }
-  }, [open]);
-
+  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">Play YouTube</div>
+        <div className="section-title">Play YouTube (Vidfly)</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.
+          Enter a YouTube URL or 11‑character ID. Playback auto-switches to proxy if CORS blocks it.
         </div>
-        <input
-          className="input"
-          placeholder="https://www.youtube.com/watch?v=XXXXXXXXXXX or XXXXXXXID"
-          value={idOrUrl}
-          onChange={e => setIdOrUrl(e.target.value)}
-        />
+        <input className="input" value={idOrUrl} onChange={e => setIdOrUrl(e.target.value)}
+          placeholder="https://www.youtube.com/watch?v=XXXXXXXXXXX or XXXXXXXID" />
         <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 good" onClick={() => onPick(idOrUrl)}>Play</button>
           <button className="btn" onClick={onClose}>Close</button>
         </div>
-
         {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>
@@ -153,7 +127,7 @@ export default function Room({ roomId, name, asHost, roomName }) {
     socket.on('system', ({ text }) => { if (text) console.log(text); });
     socket.on('queue_update', ({ queue }) => setState(s => ({ ...s, queue: queue || [] })));
 
-    // Host receives a request → attach a preview (best effort via /api/result)
+    // Host receives a request → attach a preview via JioSaavn search (best effort)
     socket.on('song_request', async (req) => {
       if (!isHost) return;
       const enriched = { ...req, preview: null };
@@ -178,8 +152,7 @@ export default function Room({ roomId, name, asHost, roomName }) {
     };
   }, [roomId, name, asHost, roomName, isHost]);
 
-  // DIRECT LINKS AND YOUTUBE RESOLUTION
-
+  // Direct links
   const setTrackAndClose = (track) => {
     socket.emit('set_track', { roomId, track });
     setShowDirect(false);
@@ -203,10 +176,10 @@ export default function Room({ roomId, name, asHost, roomName }) {
     setTrackAndClose(track);
   };
 
-  const resolveYouTube = async (idOrUrl, api) => {
+  // YouTube via Vidfly only
+  const resolveYouTube = async (idOrUrl) => {
     setYtError(null);
-    const q = new URLSearchParams({ url: idOrUrl, api }).toString();
-    const resp = await fetch(`/api/yt/source?${q}`);
+    const resp = await fetch(`/api/yt/source?url=${encodeURIComponent(idOrUrl)}`);
     const data = await resp.json();
     if (!resp.ok) {
       const message = data?.error || 'Failed to resolve YouTube';
@@ -215,29 +188,22 @@ export default function Room({ roomId, name, asHost, roomName }) {
     return data;
   };
 
-  const onPickYouTube = async (idOrUrl, api = 'vidfly') => {
+  const onPickYouTube = async (idOrUrl) => {
     try {
-      const data = await resolveYouTube(idOrUrl, api);
+      const data = await resolveYouTube(idOrUrl);
       const track = {
         url: data.url,
         title: data.title || idOrUrl,
-        meta: { thumb: data.thumbnail, source: data.source || api, yt: true },
+        meta: { thumb: data.thumbnail, source: data.source || 'vidfly', yt: true },
         kind: data.kind || 'video',
         thumb: data.thumbnail
       };
       setTrackAndClose(track);
     } catch (e) {
-      setYtError({
-        message: e.message,
-        canFallback: api === 'vidfly' || api === 'yt-dlp',
-        from: api,
-        url: idOrUrl
-      });
+      setYtError({ message: e.message });
     }
   };
 
-  const onTryFallback = (idOrUrl, api) => onPickYouTube(idOrUrl, api);
-
   const Controls = useMemo(() => (
     isHost ? (
       <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
@@ -313,7 +279,7 @@ export default function Room({ roomId, name, asHost, roomName }) {
       </div>
 
       <DirectLinkModal open={showDirect} onClose={() => setShowDirect(false)} onPick={pickDirectUrl} />
-      <YouTubeModal open={showYT} onClose={() => setShowYT(false)} onPick={onPickYouTube} ytError={ytError} onTryFallback={onTryFallback} />
+      <YouTubeModal open={showYT} onClose={() => setShowYT(false)} onPick={onPickYouTube} ytError={ytError} />
     </div>
   );
 }