feat(player): add beat preview player with 30-second clip enforcement (#2)

[Simultech369]

Summary of Changes

This pull request resolves #2 by implementing an audio preview player and global floating dock that strictly enforces a 30-second preview clip ceiling, seamlessly coordinating with <AudioWaveform /> and SampleCard.

🎯 Key Implementations

1. useAudioPreview Audio Engine Hook (src/hooks/useAudioPreview.ts)

   • Strictly limits beat previews to a 30-second ceiling (MAX_PREVIEW_DURATION = 30).
   • Supports automated loop restart or stop behavior when reaching 30s.
   • Comprehensive playback controls: Play, Pause, Toggle, Seek (ratio & time), 5s Skip Jumps (skip(5) / skip(-5)), Volume slider (0.0 to 1.0), and Mute toggle.
   • Global keyboard shortcuts: Space for play/pause, M for mute, ArrowLeft / ArrowRight for 5s jumps with input focus detection.

2. Global Floating Audio Dock (src/components/AudioPreviewPlayer.tsx)

   • Fixed floating dock pinned to the bottom of the viewport when audio is active.
   • Displays beat artwork, title, producer, price, 30s Clip badge, waveform, play/pause, 5s skip buttons, loop toggle, volume slider, quick buy button, and dismiss button.

3. SampleCard & Application Integration (src/components/SampleCard.tsx, src/App.tsx)

   • Integrated sample cards with the global audio preview player.
   • Wrapped application in AudioPreviewProvider with persistent floating dock support.

4. Comprehensive Unit Tests (src/__tests__/audioPreview.test.tsx)

   • Verified 30-second clip cap enforcement, loop/stop behavior, playback controls, volume/mute states, keyboard shortcuts, and floating dock synchronization.

---

🧪 Verification & Testing

• vitest run: