refactor: move isScrubbing state to playback manager

Author: mazeincoding

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);

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<number | null>(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({