import React, { useEffect, useState } from 'react'; interface TurntableProps { isPlaying: boolean; coverUrl: string; } const Turntable: React.FC = ({ isPlaying, coverUrl }) => { const [rotation, setRotation] = useState(0); // Use requestAnimationFrame for smoother rotation than CSS only when we want to control pause state precisely useEffect(() => { let animationFrameId: number; let lastTime = performance.now(); const animate = (time: number) => { if (isPlaying) { const delta = time - lastTime; // 33 1/3 RPM = ~0.55 rotations per second = ~200 degrees per second // Removed modulo 360 to prevent jumping when value wraps around setRotation((prev) => (prev + (delta * 0.15))); } lastTime = time; animationFrameId = requestAnimationFrame(animate); }; animationFrameId = requestAnimationFrame(animate); return () => cancelAnimationFrame(animationFrameId); }, [isPlaying]); return (

{/* Plinth / Base */}

{/* Texture grain */}

{/* Turntable Platter (The metal part under the record) */}

{/* The Vinyl Record */}

{/* Vinyl Grooves Texture */}

{/* Shiny reflection on vinyl */}

{/* Label / Cover Art */}

{/* Spindle Hole */}

{/* Tonearm Structure */}

{/* Pivot Base */}

{/* The Arm itself */}

{/* Main rod */}

{/* Headstock */}

{/* Needle */}

{/* Start/Stop Button Visual on Turntable */}

); }; export default Turntable;