Update client/src/Player.jsx

client/src/Player.jsx

@@ -1,123 +1,39 @@
-// client/src/Player.jsx
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { detectMediaTypeFromUrl, getThumb, safeTitle } from './utils.js';
+import React, { useEffect, useMemo, useState } from 'react';
+import ReactPlayer from 'react-player';
+import { getThumb, safeTitle } from './utils.js';
 import { useToasts } from './Toasts.jsx';
-import { log } from './logger.js';
 
 export default function Player({ socket, roomId, state, isHost }) {
   const { push } = useToasts();
-  const audioRef = useRef(null);
-  const videoRef = useRef(null);
-
-  const [err, setErr] = useState(null);
   const [useProxy, setUseProxy] = useState(false);
-  const busyRef = useRef(false);
-  const lastAppliedRef = useRef({ url: null });
-
-  const mediaType = useMemo(() => {
-    if (!state?.track?.url) return 'none';
-    if (state?.track?.kind) return state.track.kind;
-    return detectMediaTypeFromUrl(state.track.url) || 'audio';
-  }, [state?.track?.url, state?.track?.kind]);
-
-  const logicalTime = () => {
-    if (!state) return 0;
-    const { anchor = 0, anchorAt = 0, isPlaying = false } = state;
-    if (!isPlaying) return anchor;
-    const elapsed = (Date.now() - anchorAt) / 1000;
-    return Math.max(0, anchor + elapsed);
-  };
 
-  const currentSrc = useMemo(() => {
+  const mediaUrl = useMemo(() => {
     if (!state?.track?.url) return '';
-    return useProxy ? `/api/proxy?url=${encodeURIComponent(state.track.url)}` : state.track.url;
+    return useProxy
+      ? `/api/proxy?url=${encodeURIComponent(state.track.url)}`
+      : state.track.url;
   }, [state?.track?.url, useProxy]);
 
-  const applyMediaState = async (el) => {
-    if (!el || !state?.track?.url) return;
-    if (busyRef.current) return;
-    busyRef.current = true;
-    try {
-      const marker = `${state.track.url}|${useProxy ? 'px' : 'dir'}`;
-      if (lastAppliedRef.current.url !== marker) {
-        el.src = currentSrc;
-        el.load();
-        lastAppliedRef.current.url = marker;
-      }
-      const target = logicalTime();
-      if (Number.isFinite(target)) {
-        try { el.currentTime = Math.max(0, target); } catch {}
-      }
-      if (state.isPlaying) {
-        await el.play().catch(() => {});
-      } else {
-        el.pause();
-      }
-      setErr(null);
-    } catch (e) {
-      log.error('Playback error', e);
-      setErr(e?.message || 'Playback failed');
-      push(`Playback failed: ${e?.message || 'Unknown error'}`, 'bad', 4500);
-    } finally {
-      busyRef.current = false;
-    }
-  };
-
-  // When track or type changes, reset proxy and apply
-  useEffect(() => {
-    setUseProxy(false);
-    lastAppliedRef.current.url = null;
-    const el = mediaType === 'video' ? videoRef.current : audioRef.current;
-    if (el) applyMediaState(el);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state?.track?.url, mediaType]);
-
-  // Sync drift and play/pause
-  useEffect(() => {
-    const el = mediaType === 'video' ? videoRef.current : audioRef.current;
-    if (!el) return;
-    const target = logicalTime();
-    const delta = target - el.currentTime;
-    if (Math.abs(delta) > 0.35) {
-      try { el.currentTime = Math.max(0, target); } catch {}
-    }
-    if (state.isPlaying && el.paused) {
-      el.play().catch(() => {});
-    } else if (!state.isPlaying && !el.paused) {
-      el.pause();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.isPlaying, state.anchor, state.anchorAt]);
+  const title = state?.track ? safeTitle(state.track) : 'No track selected';
+  const thumb = state?.track?.thumb || getThumb(state?.track?.meta);
 
-  // Auto-advance
-  useEffect(() => {
-    const onEnded = () => { if (isHost) socket.emit('ended', { roomId }); };
-    const a = audioRef.current, v = videoRef.current;
-    a?.addEventListener('ended', onEnded);
-    v?.addEventListener('ended', onEnded);
-    return () => {
-      a?.removeEventListener('ended', onEnded);
-      v?.removeEventListener('ended', onEnded);
-    };
-  }, [socket, roomId, isHost]);
+  // Auto-advance when ended (host only)
+  const handleEnded = () => {
+    if (isHost) socket.emit('ended', { roomId });
+  };
 
-  // On media error, retry via proxy once
-  const onMediaError = () => {
+  const handleError = (e) => {
+    console.warn('ReactPlayer error', e);
     if (!useProxy) {
       setUseProxy(true);
-      lastAppliedRef.current.url = null;
-      const el = mediaType === 'video' ? videoRef.current : audioRef.current;
-      if (el) applyMediaState(el);
+      push('CORS blocked direct URL, retrying via proxy…', 'warn', 3000);
     } else {
-      setErr('Playback failed (even via proxy)');
+      push('Playback failed (even via proxy)', 'bad', 4000);
     }
   };
 
-  const title = state?.track ? safeTitle(state.track) : 'No track selected';
-  const thumb = state?.track?.thumb || getThumb(state?.track?.meta);
-
   return (
-    <div style={{ position:'relative' }}>
+    <div style={{ position: 'relative' }}>
       <div
         className="hero-thumb"
         style={{ backgroundImage: thumb ? `url("${thumb}")` : undefined }}
@@ -125,46 +41,72 @@ export default function Player({ socket, roomId, state, isHost }) {
       />
       <div className="ambient"></div>
 
-      <div className="now-playing" style={{ marginBottom: 10, position:'relative' }}>
-        <div className="thumb" style={{ width:72, height:72, backgroundImage: thumb ? `url("${thumb}")` : undefined }} />
-        <div style={{ minWidth:0, flex:1 }}>
-          <div style={{ fontWeight:700, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{title}</div>
-          <div style={{ fontSize:12, color:'var(--muted)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
-            {state?.track?.meta?.artists?.join?.(', ') || state?.track?.meta?.artist || state?.track?.meta?.album || state?.track?.kind?.toUpperCase()}
+      <div className="now-playing" style={{ marginBottom: 10 }}>
+        <div
+          className="thumb"
+          style={{
+            width: 72,
+            height: 72,
+            backgroundImage: thumb ? `url("${thumb}")` : undefined
+          }}
+        />
+        <div style={{ minWidth: 0, flex: 1 }}>
+          <div
+            style={{
+              fontWeight: 700,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            }}
+          >
+            {title}
+          </div>
+          <div
+            style={{
+              fontSize: 12,
+              color: 'var(--muted)',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            }}
+          >
+            {state?.track?.meta?.artists?.join?.(', ') ||
+              state?.track?.meta?.artist ||
+              state?.track?.meta?.album ||
+              state?.track?.kind?.toUpperCase()}
           </div>
         </div>
         {!isHost && <div className="tag">Listener</div>}
       </div>
 
-      {mediaType === 'video' ? (
-        <video
-          ref={videoRef}
-          src={currentSrc}
-          onError={onMediaError}
+      {state?.track?.url ? (
+        <ReactPlayer
+          url={mediaUrl}
+          playing={state.isPlaying}
           controls={isHost}
-          playsInline
-          style={{ width:'100%', maxHeight: '56vh', background:'#000' }}
-          crossOrigin="anonymous"
-        />
-      ) : mediaType === 'audio' ? (
-        <audio
-          ref={audioRef}
-          src={currentSrc}
-          onError={onMediaError}
-          controls={isHost}
-          style={{ width:'100%' }}
-          crossOrigin="anonymous"
+          onEnded={handleEnded}
+          onError={handleError}
+          width="100%"
+          height={state.track.kind === 'video' ? '56vh' : '50px'}
+          config={{
+            file: {
+              attributes: {
+                crossOrigin: 'anonymous'
+              }
+            }
+          }}
         />
       ) : (
-        <div style={{ color:'var(--muted)', padding:'12px 0' }}>No track selected</div>
+        <div style={{ color: 'var(--muted)', padding: '12px 0' }}>
+          No track selected
+        </div>
       )}
 
       {useProxy && (
-        <div style={{ marginTop:8, fontSize:12, color:'var(--muted)' }}>
+        <div style={{ marginTop: 8, fontSize: 12, color: 'var(--muted)' }}>
           Using proxy due to CORS on the original media URL.
         </div>
       )}
-      {err && <div style={{ marginTop:8, color:'var(--bad)' }}>{err}</div>}
     </div>
   );
 }