fix: proper seeking behavior with optional auto-play
Complete rewrite of seeking logic to support both scrubbing and click-to-play functionality with proper state management. Changes: 1. Added autoPlay parameter to seek() methods across the stack 2. Waveform behavior: - Click and drag → scrubs WITHOUT auto-play during drag - Mouse up after drag → auto-plays from release position - This allows smooth scrubbing while dragging 3. Timeline slider behavior: - onChange → seeks WITHOUT auto-play (smooth dragging) - onMouseUp/onTouchEnd → auto-plays from final position 4. Transport button state now correctly syncs with playback state Technical implementation: - player.seek(time, autoPlay) - autoPlay defaults to false - If autoPlay=true OR was already playing → continues playback - If autoPlay=false AND wasn't playing → just seeks (isPaused=true) - useAudioPlayer.seek() now reads actual player state after seeking User experience: ✓ Click on waveform → music plays from that position ✓ Drag on waveform → scrubs smoothly, plays on release ✓ Drag timeline slider → scrubs smoothly, plays on release ✓ Transport buttons show correct state (Play/Pause) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -15,7 +15,7 @@ export interface PlaybackControlsProps {
|
||||
onPlay: () => void;
|
||||
onPause: () => void;
|
||||
onStop: () => void;
|
||||
onSeek: (time: number) => void;
|
||||
onSeek: (time: number, autoPlay?: boolean) => void;
|
||||
onVolumeChange: (volume: number) => void;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
@@ -82,7 +82,9 @@ export function PlaybackControls({
|
||||
max={duration || 100}
|
||||
step={0.01}
|
||||
value={currentTime}
|
||||
onChange={(e) => onSeek(parseFloat(e.target.value))}
|
||||
onChange={(e) => onSeek(parseFloat(e.target.value), false)}
|
||||
onMouseUp={(e) => onSeek(parseFloat((e.target as HTMLInputElement).value), true)}
|
||||
onTouchEnd={(e) => onSeek(parseFloat((e.target as HTMLInputElement).value), true)}
|
||||
disabled={disabled || duration === 0}
|
||||
className={cn(
|
||||
'w-full h-2 bg-secondary rounded-lg appearance-none cursor-pointer',
|
||||
|
||||
Reference in New Issue
Block a user