diff --git a/apps/web/src/core/managers/playback-manager.ts b/apps/web/src/core/managers/playback-manager.ts index ca6f4e43..dacd76c0 100644 --- a/apps/web/src/core/managers/playback-manager.ts +++ b/apps/web/src/core/managers/playback-manager.ts @@ -6,6 +6,7 @@ export class PlaybackManager { private volume = 1; private muted = false; private previousVolume = 1; + private isScrubbing = false; private listeners = new Set<() => void>(); private playbackTimer: number | null = null; private lastUpdate = 0; @@ -101,6 +102,15 @@ export class PlaybackManager { return this.muted; } + setScrubbing({ isScrubbing }: { isScrubbing: boolean }): void { + this.isScrubbing = isScrubbing; + this.notify(); + } + + getIsScrubbing(): boolean { + return this.isScrubbing; + } + subscribe(listener: () => void): () => void { this.listeners.add(listener); return () => this.listeners.delete(listener); diff --git a/apps/web/src/hooks/timeline/use-timeline-playhead.ts b/apps/web/src/hooks/timeline/use-timeline-playhead.ts index 34a14793..addef433 100644 --- a/apps/web/src/hooks/timeline/use-timeline-playhead.ts +++ b/apps/web/src/hooks/timeline/use-timeline-playhead.ts @@ -24,13 +24,13 @@ export function useTimelinePlayhead({ const currentTime = editor.playback.getCurrentTime(); const duration = editor.timeline.getTotalDuration(); const isPlaying = editor.playback.getIsPlaying(); + const isScrubbing = editor.playback.getIsScrubbing(); const seek = useCallback( ({ time }: { time: number }) => editor.playback.seek({ time }), [editor.playback], ); - const [isScrubbing, setIsScrubbing] = useState(false); const [scrubTime, setScrubTime] = useState(null); const [isDraggingRuler, setIsDraggingRuler] = useState(false); @@ -81,10 +81,10 @@ export function useTimelinePlayhead({ ({ event }: { event: React.MouseEvent }) => { event.preventDefault(); event.stopPropagation(); - setIsScrubbing(true); + editor.playback.setScrubbing({ isScrubbing: true }); handleScrub({ event }); }, - [handleScrub], + [handleScrub, editor.playback], ); const handleRulerMouseDown = useCallback( @@ -97,10 +97,10 @@ export function useTimelinePlayhead({ setIsDraggingRuler(true); setHasDraggedRuler(false); - setIsScrubbing(true); + editor.playback.setScrubbing({ isScrubbing: true }); handleScrub({ event }); }, - [handleScrub, playheadRef], + [handleScrub, playheadRef, editor.playback], ); const handlePlayheadMouseDownEvent = useCallback( @@ -132,7 +132,7 @@ export function useTimelinePlayhead({ }; const handleMouseUp = ({ event }: { event: MouseEvent }) => { - setIsScrubbing(false); + editor.playback.setScrubbing({ isScrubbing: false }); if (scrubTime !== null) { seek({ time: scrubTime }); editor.project.setTimelineViewState({