Initial commit: Hördle Web App

components/AudioPlayer.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface AudioPlayerProps {
+    src: string;
+    unlockedSeconds: number; // 2, 4, 7, 11, 16, 30 (or full length)
+    onPlay?: () => void;
+}
+
+export default function AudioPlayer({ src, unlockedSeconds, onPlay }: AudioPlayerProps) {
+    const audioRef = useRef<HTMLAudioElement>(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [progress, setProgress] = useState(0);
+
+    useEffect(() => {
+        if (audioRef.current) {
+            audioRef.current.pause();
+            audioRef.current.currentTime = 0;
+            setIsPlaying(false);
+            setProgress(0);
+        }
+    }, [src, unlockedSeconds]);
+
+    const togglePlay = () => {
+        if (!audioRef.current) return;
+
+        if (isPlaying) {
+            audioRef.current.pause();
+        } else {
+            audioRef.current.play();
+            onPlay?.();
+        }
+        setIsPlaying(!isPlaying);
+    };
+
+    const handleTimeUpdate = () => {
+        if (!audioRef.current) return;
+
+        const current = audioRef.current.currentTime;
+        const percent = (current / unlockedSeconds) * 100;
+        setProgress(Math.min(percent, 100));
+
+        if (current >= unlockedSeconds) {
+            audioRef.current.pause();
+            audioRef.current.currentTime = 0;
+            setIsPlaying(false);
+            setProgress(0);
+        }
+    };
+
+    return (
+        <div className="audio-player">
+            <audio
+                ref={audioRef}
+                src={src}
+                onTimeUpdate={handleTimeUpdate}
+                onEnded={() => setIsPlaying(false)}
+            />
+
+            <div className="player-controls">
+                <button onClick={togglePlay} className="play-button">
+                    {isPlaying ? (
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" width="24" height="24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
+                        </svg>
+                    ) : (
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" width="24" height="24" style={{ marginLeft: '4px' }}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
+                        </svg>
+                    )}
+                </button>
+
+                <div className="progress-bar-container">
+                    <div
+                        className="progress-bar"
+                        style={{ width: `${progress}%` }}
+                    />
+                </div>
+
+                <div style={{ fontFamily: 'monospace', fontSize: '0.875rem', color: '#4b5563' }}>
+                    {unlockedSeconds}s
+                </div>
+            </div>
+        </div>
+    );
+}