From b266678fe4bb8c4053688fd037693fa2f930ac14 Mon Sep 17 00:00:00 2001 From: gantiro Date: Tue, 15 Jul 2025 22:51:38 +0700 Subject: Optimize timeline performance --- apps/web/src/hooks/use-timeline-playhead.ts | 164 ++++++++-------------------- 1 file changed, 48 insertions(+), 116 deletions(-) (limited to 'apps/web/src/hooks/use-timeline-playhead.ts') diff --git a/apps/web/src/hooks/use-timeline-playhead.ts b/apps/web/src/hooks/use-timeline-playhead.ts index 9a82c23f..8aee5b1f 100644 --- a/apps/web/src/hooks/use-timeline-playhead.ts +++ b/apps/web/src/hooks/use-timeline-playhead.ts @@ -1,6 +1,6 @@ import { snapTimeToFrame } from "@/constants/timeline-constants"; import { useProjectStore } from "@/stores/project-store"; -import { useState, useEffect, useCallback } from "react"; +import { useRef, useState, useCallback } from "react"; interface UseTimelinePlayheadProps { currentTime: number; @@ -9,8 +9,6 @@ interface UseTimelinePlayheadProps { seek: (time: number) => void; rulerRef: React.RefObject; rulerScrollRef: React.RefObject; - tracksScrollRef: React.RefObject; - playheadRef?: React.RefObject; } export function useTimelinePlayhead({ @@ -20,138 +18,72 @@ export function useTimelinePlayhead({ seek, rulerRef, rulerScrollRef, - tracksScrollRef, - playheadRef, }: UseTimelinePlayheadProps) { - // Playhead scrubbing state - const [isScrubbing, setIsScrubbing] = useState(false); - const [scrubTime, setScrubTime] = useState(null); + const { activeProject } = useProjectStore(); - // Ruler drag detection state - const [isDraggingRuler, setIsDraggingRuler] = useState(false); - const [hasDraggedRuler, setHasDraggedRuler] = useState(false); + const isScrubbingRef = useRef(false); + const scrubTimeRef = useRef(null); + const [_, forceRerender] = useState(0); const playheadPosition = - isScrubbing && scrubTime !== null ? scrubTime : currentTime; + isScrubbingRef.current && scrubTimeRef.current !== null + ? scrubTimeRef.current + : currentTime; - // --- Playhead Scrubbing Handlers --- - const handlePlayheadMouseDown = useCallback( - (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); // Prevent ruler drag from triggering - setIsScrubbing(true); - handleScrub(e); + const getTimeFromMouse = useCallback( + (e: MouseEvent | React.MouseEvent) => { + const ruler = rulerRef.current; + const scrollArea = rulerScrollRef.current?.querySelector( + "[data-radix-scroll-area-viewport]" + ) as HTMLElement; + + if (!ruler || !scrollArea) return 0; + + const rect = ruler.getBoundingClientRect(); + const scrollLeft = scrollArea.scrollLeft; + const x = e.clientX - rect.left + scrollLeft; + + const pixelsPerSecond = 50 * zoomLevel; + const rawTime = Math.max(0, Math.min(duration, x / pixelsPerSecond)); + const time = snapTimeToFrame(rawTime, activeProject?.fps || 30); + return time; }, - [duration, zoomLevel] + [rulerRef, rulerScrollRef, duration, zoomLevel, activeProject?.fps] ); - // Ruler mouse down handler const handleRulerMouseDown = useCallback( (e: React.MouseEvent) => { - // Only handle left mouse button - if (e.button !== 0) return; + e.preventDefault(); + const time = getTimeFromMouse(e); + if (time === undefined) return; - // Don't interfere if clicking on the playhead itself - if (playheadRef?.current?.contains(e.target as Node)) return; + isScrubbingRef.current = true; + scrubTimeRef.current = time; + seek(time); - e.preventDefault(); - setIsDraggingRuler(true); - setHasDraggedRuler(false); + const onMouseMove = (e: MouseEvent) => { + const t = getTimeFromMouse(e); + if (t !== scrubTimeRef.current) { + scrubTimeRef.current = t; + seek(t); + } + }; - // Start scrubbing immediately - setIsScrubbing(true); - handleScrub(e); - }, - [duration, zoomLevel] - ); + const onMouseUp = () => { + isScrubbingRef.current = false; + window.removeEventListener("mousemove", onMouseMove); + window.removeEventListener("mouseup", onMouseUp); + forceRerender((v) => v + 1); + }; - const handleScrub = useCallback( - (e: MouseEvent | React.MouseEvent) => { - const ruler = rulerRef.current; - if (!ruler) return; - const rect = ruler.getBoundingClientRect(); - const x = e.clientX - rect.left; - const rawTime = Math.max(0, Math.min(duration, x / (50 * zoomLevel))); - // Use frame snapping for playhead scrubbing - const projectStore = useProjectStore.getState(); - const projectFps = projectStore.activeProject?.fps || 30; - const time = snapTimeToFrame(rawTime, projectFps); - setScrubTime(time); - seek(time); // update video preview in real time + window.addEventListener("mousemove", onMouseMove); + window.addEventListener("mouseup", onMouseUp); }, - [duration, zoomLevel, seek, rulerRef] + [getTimeFromMouse, seek] ); - // Mouse move/up event handlers - useEffect(() => { - if (!isScrubbing) return; - const onMouseMove = (e: MouseEvent) => { - handleScrub(e); - // Mark that we've dragged if ruler drag is active - if (isDraggingRuler) { - setHasDraggedRuler(true); - } - }; - const onMouseUp = (e: MouseEvent) => { - setIsScrubbing(false); - if (scrubTime !== null) seek(scrubTime); // finalize seek - setScrubTime(null); - - // Handle ruler click vs drag - if (isDraggingRuler) { - setIsDraggingRuler(false); - // If we didn't drag, treat it as a click-to-seek - if (!hasDraggedRuler) { - handleScrub(e); - } - setHasDraggedRuler(false); - } - }; - window.addEventListener("mousemove", onMouseMove); - window.addEventListener("mouseup", onMouseUp); - return () => { - window.removeEventListener("mousemove", onMouseMove); - window.removeEventListener("mouseup", onMouseUp); - }; - }, [ - isScrubbing, - scrubTime, - seek, - handleScrub, - isDraggingRuler, - hasDraggedRuler, - ]); - - // --- Playhead auto-scroll effect --- - useEffect(() => { - const rulerViewport = rulerScrollRef.current?.querySelector( - "[data-radix-scroll-area-viewport]" - ) as HTMLElement; - const tracksViewport = tracksScrollRef.current?.querySelector( - "[data-radix-scroll-area-viewport]" - ) as HTMLElement; - if (!rulerViewport || !tracksViewport) return; - const playheadPx = playheadPosition * 50 * zoomLevel; // TIMELINE_CONSTANTS.PIXELS_PER_SECOND = 50 - const viewportWidth = rulerViewport.clientWidth; - const scrollMin = 0; - const scrollMax = rulerViewport.scrollWidth - viewportWidth; - // Center the playhead if it's not visible (100px buffer) - const desiredScroll = Math.max( - scrollMin, - Math.min(scrollMax, playheadPx - viewportWidth / 2) - ); - if ( - playheadPx < rulerViewport.scrollLeft + 100 || - playheadPx > rulerViewport.scrollLeft + viewportWidth - 100 - ) { - rulerViewport.scrollLeft = tracksViewport.scrollLeft = desiredScroll; - } - }, [playheadPosition, duration, zoomLevel, rulerScrollRef, tracksScrollRef]); - return { playheadPosition, - handlePlayheadMouseDown, handleRulerMouseDown, - isDraggingRuler, }; } -- cgit v1.3.1