Files
kithara-studio/frontend
rin.kagamine 8218234eb9 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
2026-05-29 20:28:20 -04:00
..