Update client/src/Player.jsx

client/src/Player.jsx

@@ -2,19 +2,19 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { detectMediaTypeFromUrl, getThumb, safeTitle } from './utils.js';
 import { log } from './logger.js';
 import { useToasts } from './Toasts.jsx';
-import YouTubePlayer from './YouTubePlayer.jsx';
 
 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 busyRef = useRef(false); // gate play/pause race
+  const lastAppliedRef = useRef({ url: null });
 
   const mediaType = useMemo(() => {
     if (!state?.track?.url) return 'none';
     if (state?.track?.kind) return state.track.kind;
-    const detected = detectMediaTypeFromUrl(state.track.url);
-    return detected || 'audio';
+    return detectMediaTypeFromUrl(state.track.url) || 'audio';
   }, [state?.track?.url, state?.track?.kind]);
 
   const logicalTime = () => {
@@ -25,44 +25,62 @@ export default function Player({ socket, roomId, state, isHost }) {
     return Math.max(0, (anchor || 0) + elapsed);
   };
 
-  const loadInto = async (el) => {
+  const applyMediaState = async (el) => {
     if (!el || !state?.track?.url) return;
-    el.src = state.track.url;
+    if (busyRef.current) return;
+    busyRef.current = true;
     try {
-      el.load();
+      // set src only when url changes
+      if (lastAppliedRef.current.url !== state.track.url) {
+        el.src = state.track.url;
+        el.load();
+        lastAppliedRef.current.url = state.track.url;
+      }
       const target = logicalTime();
-      el.currentTime = Number.isFinite(target) ? target : 0;
-      if (state.isPlaying) await el.play(); else el.pause();
+      if (Number.isFinite(target)) {
+        try { el.currentTime = Math.max(0, target); } catch {}
+      }
+      if (state.isPlaying) {
+        await el.play().catch(() => {}); // ignore gesture errors
+      } else {
+        el.pause();
+      }
       setErr(null);
     } catch (e) {
-      log.error('Playback error for', state.track.url, e);
+      log.error('Playback error', e);
       setErr(e?.message || 'Playback failed');
       push(`Playback failed: ${e?.message || 'Unknown error'}`, 'bad', 4500);
+    } finally {
+      busyRef.current = false;
     }
   };
 
+  // On track/url or media type change
   useEffect(() => {
-    if (mediaType === 'audio') {
-      const el = audioRef.current;
-      if (el) loadInto(el);
-    } else if (mediaType === 'video') {
-      const el = videoRef.current;
-      if (el) loadInto(el);
-    }
+    lastAppliedRef.current.url = null; // force src reload
+    const el = mediaType === 'video' ? videoRef.current : audioRef.current;
+    if (el) applyMediaState(el);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state?.track?.url, mediaType]);
 
+  // On play/pause/seek drift
   useEffect(() => {
-    if (mediaType === 'youtube') return;
     const el = mediaType === 'video' ? videoRef.current : audioRef.current;
     if (!el) return;
+    // drift correction without causing play/pause races
     const target = logicalTime();
-    const drift = target - el.currentTime;
-    if (Math.abs(drift) > 0.3) el.currentTime = Math.max(0, target);
-    if (state.isPlaying && el.paused) el.play().catch(e => log.warn('Autoplay blocked or error', e));
-    if (!state.isPlaying && !el.paused) el.pause();
+    const delta = target - el.currentTime;
+    if (Math.abs(delta) > 0.35) {
+      try { el.currentTime = Math.max(0, target); } catch {}
+    }
+    // only adjust if needed
+    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, mediaType]);
+  }, [state.isPlaying, state.anchor, state.anchorAt]);
 
   useEffect(() => {
     const a = audioRef.current;
@@ -81,10 +99,16 @@ export default function Player({ socket, roomId, state, isHost }) {
 
   return (
     <div style={{ position:'relative' }}>
+      {/* DJ ambient + hero artwork */}
+      <div
+        className="hero-thumb"
+        style={{ backgroundImage: thumb ? `url("${thumb}")` : undefined }}
+        aria-hidden
+      />
       <div className="ambient"></div>
 
-      <div className="now-playing" style={{ marginBottom: 10 }}>
-        <div className="thumb" style={{ width:64, height:64, backgroundImage: thumb ? `url("${thumb}")` : undefined }} />
+      <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' }}>
@@ -94,9 +118,7 @@ export default function Player({ socket, roomId, state, isHost }) {
         {!isHost && <div className="tag">Listener</div>}
       </div>
 
-      {mediaType === 'youtube' ? (
-        <YouTubePlayer socket={socket} roomId={roomId} state={state} isHost={isHost} />
-      ) : mediaType === 'video' ? (
+      {mediaType === 'video' ? (
         <video ref={videoRef} controls={isHost} playsInline style={{ width:'100%', maxHeight: '56vh', background:'#000' }} crossOrigin="anonymous" />
       ) : (
         <audio ref={audioRef} controls={isHost} style={{ width: '100%' }} crossOrigin="anonymous" />