Create Player.jsx

client/src/Player.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef } from 'react';
+
+export default function Player({ socket, roomId, state, isHost }) {
+  const audioRef = useRef(null);
+
+  // Compute desired current time from {anchor, anchorAt, isPlaying}
+  const logicalTime = () => {
+    if (!state) return 0;
+    const { anchor, anchorAt, isPlaying } = state;
+    if (!isPlaying) return anchor || 0;
+    const elapsed = (Date.now() - (anchorAt || 0)) / 1000;
+    return Math.max(0, (anchor || 0) + elapsed);
+  };
+
+  useEffect(() => {
+    const el = audioRef.current;
+    if (!el || !state?.track?.url) return;
+
+    // On track change load new source
+    el.src = state.track.url;
+    el.load();
+    // Apply initial position
+    const target = logicalTime();
+    el.currentTime = isFinite(target) ? target : 0;
+    if (state.isPlaying) el.play().catch(() => {});
+    else el.pause();
+  }, [state?.track?.url]); // run when track changes
+
+  // Respond to play/pause/seek from server
+  useEffect(() => {
+    const el = audioRef.current;
+    if (!el) return;
+    const target = logicalTime();
+    // Small drift correction
+    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(() => {});
+    if (!state.isPlaying && !el.paused) el.pause();
+  }, [state.isPlaying, state.anchor, state.anchorAt]);
+
+  // Optionally, report local ended event to host
+  useEffect(() => {
+    const el = audioRef.current;
+    if (!el) return;
+    const onEnded = () => {
+      // For future: queue/next
+    };
+    el.addEventListener('ended', onEnded);
+    return () => el.removeEventListener('ended', onEnded);
+  }, []);
+
+  return (
+    <div style={{ marginTop: 16 }}>
+      <div style={{ marginBottom: 8 }}>{state?.track?.title || 'No track selected'}</div>
+      <audio ref={audioRef} controls style={{ width: '100%' }} crossorigin="anonymous" />
+    </div>
+  );
+}