feat: Full audio player with controls and scrubber
Player.tsx completely rewritten with professional controls: - Play/Pause: large circular button with play/pause icons - Stop: square icon, resets audio to 0 and pauses - Restart: circular arrow, jumps to beginning and plays - Time display: elapsed / total (M:SS format, tabular-nums) - Scrubber: clickable progress bar with drag support - Visual progress fill (lyria-accent) - White scrubber handle on hover - Mouse drag anywhere on page while holding - Volume: mute toggle + range slider (0-1, step 0.01) - Three volume icons: full, half, muted - Custom styled range input with white thumb - Track info: title or prompt (hidden on mobile) - Close button: X icon - All buttons have title tooltips - Uses useRef for audio element, useState for UI state - useCallback for seek handler, useEffect for drag events - Responsive: track info hidden on small screens
This commit is contained in:
1 parent
4fab947d6c
commit
8218234eb9
2 files changed
+235
-16
No files matched your search
@@ -186,6 +186,7 @@ function App() {
|
||||
clip={currentClip}
|
||||
isPlaying={isPlaying}
|
||||
onTogglePlay={() => setIsPlaying(!isPlaying)}
|
||||
onStop={() => setIsPlaying(false)}
|
||||
onClose={() => {
|
||||
setCurrentClip(null)
|
||||
setIsPlaying(false)
|
||||
|
||||
Reference in new issue
Block a user