Update client/src/Player.jsx

client/src/Player.jsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { detectMediaTypeFromUrl, safeTitle } from './utils.js';
+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 }) {
+export default function Player({ socket, roomId, state, isHost }) {
   const { push } = useToasts();
   const audioRef = useRef(null);
   const videoRef = useRef(null);
@@ -12,10 +13,10 @@ export default function Player({ socket, roomId, state }) {
   const mediaType = useMemo(() => {
     if (!state?.track?.url) return 'none';
     if (state?.track?.kind) return state.track.kind;
-    return detectMediaTypeFromUrl(state.track.url) || 'audio';
+    const detected = detectMediaTypeFromUrl(state.track.url);
+    return detected || 'audio';
   }, [state?.track?.url, state?.track?.kind]);
 
-  // Computee desired current time
   const logicalTime = () => {
     if (!state) return 0;
     const { anchor, anchorAt, isPlaying } = state;
@@ -24,7 +25,6 @@ export default function Player({ socket, roomId, state }) {
     return Math.max(0, (anchor || 0) + elapsed);
   };
 
-  // Common load for media element
   const loadInto = async (el) => {
     if (!el || !state?.track?.url) return;
     el.src = state.track.url;
@@ -32,11 +32,7 @@ export default function Player({ socket, roomId, state }) {
       el.load();
       const target = logicalTime();
       el.currentTime = Number.isFinite(target) ? target : 0;
-      if (state.isPlaying) {
-        await el.play();
-      } else {
-        el.pause();
-      }
+      if (state.isPlaying) await el.play(); else el.pause();
       setErr(null);
     } catch (e) {
       log.error('Playback error for', state.track.url, e);
@@ -45,27 +41,25 @@ export default function Player({ socket, roomId, state }) {
     }
   };
 
-  // Track/url change
   useEffect(() => {
-    const el = mediaType === 'video' ? videoRef.current : audioRef.current;
-    if (el) loadInto(el);
+    if (mediaType === 'audio') {
+      const el = audioRef.current;
+      if (el) loadInto(el);
+    } else if (mediaType === 'video') {
+      const el = videoRef.current;
+      if (el) loadInto(el);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state?.track?.url, mediaType]);
 
-  // Respond to play/pause/seek from server
   useEffect(() => {
+    if (mediaType === 'youtube') return;
     const el = mediaType === 'video' ? videoRef.current : audioRef.current;
     if (!el) return;
     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 (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();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.isPlaying, state.anchor, state.anchorAt, mediaType]);
@@ -73,27 +67,39 @@ export default function Player({ socket, roomId, state }) {
   useEffect(() => {
     const a = audioRef.current;
     const v = videoRef.current;
-    const onEnded = () => {};
+    const onEnded = () => { if (isHost) socket.emit('ended', { roomId }); };
     a?.addEventListener('ended', onEnded);
     v?.addEventListener('ended', onEnded);
     return () => {
       a?.removeEventListener('ended', onEnded);
       v?.removeEventListener('ended', onEnded);
     };
-  }, []);
+  }, [socket, roomId, isHost]);
+
+  const title = state?.track ? safeTitle(state.track) : 'No track selected';
+  const thumb = state?.track?.thumb || getThumb(state?.track?.meta);
 
   return (
-    <div>
-      <div style={{ marginBottom: 8, display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
-        <div style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
-          {state?.track ? safeTitle(state.track) : 'No track selected'}
+    <div style={{ position:'relative' }}>
+      <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 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>
-        <div className="tag">{mediaType === 'video' ? 'Video' : mediaType === 'audio' ? 'Audio' : 'Unknown'}</div>
+        {!isHost && <div className="tag">Listener</div>}
       </div>
-      {mediaType === 'video' ? (
-        <video ref={videoRef} controls playsInline style={{ width:'100%', maxHeight: '56vh', background:'#000' }} crossOrigin="anonymous" />
+
+      {mediaType === 'youtube' ? (
+        <YouTubePlayer socket={socket} roomId={roomId} state={state} isHost={isHost} />
+      ) : mediaType === 'video' ? (
+        <video ref={videoRef} controls={isHost} playsInline style={{ width:'100%', maxHeight: '56vh', background:'#000' }} crossOrigin="anonymous" />
       ) : (
-        <audio ref={audioRef} controls style={{ width: '100%' }} crossOrigin="anonymous" />
+        <audio ref={audioRef} controls={isHost} style={{ width: '100%' }} crossOrigin="anonymous" />
       )}
       {err && <div style={{ marginTop:8, color:'var(--bad)' }}>{err}</div>}
     </div>