diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx index aa5b7315..4be4d9cc 100644 --- a/apps/web/src/app/editor/[project_id]/page.tsx +++ b/apps/web/src/app/editor/[project_id]/page.tsx @@ -16,6 +16,7 @@ import { usePanelStore } from "@/stores/panel-store"; import { useProjectStore } from "@/stores/project-store"; import { EditorProvider } from "@/components/editor-provider"; import { usePlaybackControls } from "@/hooks/use-playback-controls"; +import { useDisableBrowserZoom } from "@/hooks/use-disable-browser-zoom"; import { Onboarding } from "@/components/onboarding"; export default function Editor() { @@ -39,6 +40,7 @@ export default function Editor() { const handledProjectIds = useRef>(new Set()); const [isOnboardingOpen, setIsOnboardingOpen] = useState(true); + useDisableBrowserZoom(); usePlaybackControls(); useEffect(() => { diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx index 9e28850f..dc0dd4b2 100644 --- a/apps/web/src/components/editor/properties-panel/index.tsx +++ b/apps/web/src/components/editor/properties-panel/index.tsx @@ -83,7 +83,11 @@ export function PropertiesPanel() { ); if (mediaItem?.type === "audio") { - return ; + return ( +
+ +
+ ); } return ( diff --git a/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx new file mode 100644 index 00000000..c0efc19e --- /dev/null +++ b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx @@ -0,0 +1,24 @@ +import { TimelineCanvasRulerWrapperProps } from "@/types/timeline"; +import React, { forwardRef } from "react"; + +/** + * Wrapper div around the canvas-based timeline ruler. + * Captures mouse events for scrubbing and ensures pointer events are properly enabled. + */ +const TimelineCanvasRulerWrapper = forwardRef< + HTMLDivElement, + TimelineCanvasRulerWrapperProps +>(({ children, onMouseDown, className = "" }, ref) => { + return ( +
+ {children} +
+ ); +}); + +export default TimelineCanvasRulerWrapper; diff --git a/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx new file mode 100644 index 00000000..c40cdbda --- /dev/null +++ b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx @@ -0,0 +1,78 @@ +import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; +import { TimelineCanvasRulerProps } from "@/types/timeline"; +import React, { useRef, useEffect } from "react"; + +/** + * TimelineCanvasRuler renders the timeline ticks and labels using Canvas. + * Should be wrapped by TimelineCanvasRulerWrapper for interaction handling. + */ +export default function TimelineCanvasRuler({ + zoomLevel, + duration, + width, + height = 20, +}: TimelineCanvasRulerProps) { + const canvasRef = useRef(null); + + useEffect(() => { + const ctx = canvasRef.current?.getContext("2d"); + if (!ctx) return; + + ctx.clearRect(0, 0, width, height); + + const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel; + + const getTimeInterval = () => { + if (pixelsPerSecond >= 200) return 0.1; + if (pixelsPerSecond >= 100) return 0.5; + if (pixelsPerSecond >= 50) return 1; + if (pixelsPerSecond >= 25) return 2; + if (pixelsPerSecond >= 12) return 5; + if (pixelsPerSecond >= 6) return 10; + return 30; + }; + + const mainInterval = getTimeInterval(); + const tickPerMain = 5; + const subInterval = mainInterval / tickPerMain; + + const totalTicks = Math.ceil(duration / subInterval) + 1; + + for (let i = 0; i < totalTicks; i++) { + const time = i * subInterval; + const x = time * pixelsPerSecond; + + const isMain = i % tickPerMain === 0; + + ctx.beginPath(); + ctx.moveTo(x, 0); + ctx.lineTo(x, isMain ? height * 0.3 : height * 0.1); + ctx.strokeStyle = isMain ? "#999" : "#ccc"; + ctx.lineWidth = isMain ? 1 : 0.5; + ctx.stroke(); + + // Label + if (isMain) { + ctx.fillStyle = "#666"; + ctx.font = "10px sans-serif"; + const mins = Math.floor(time / 60); + const secs = Math.floor(time % 60); + let label = ""; + let xTranslate = 10; + if (mainInterval < 1) { + label = `${time.toFixed(1)}s`; + } else if (mins > 0) { + label = `${mins}:${secs.toString().padStart(2, "0")}`; + } else { + label = `${secs}s`; + xTranslate = 5; + } + ctx.fillText(label, x - xTranslate, height - 4); + } + } + }, [zoomLevel, duration, width, height]); + + return ( + + ); +} diff --git a/apps/web/src/components/editor/timeline-playhead.tsx b/apps/web/src/components/editor/timeline-playhead.tsx index 78aed3a8..390abc3d 100644 --- a/apps/web/src/components/editor/timeline-playhead.tsx +++ b/apps/web/src/components/editor/timeline-playhead.tsx @@ -2,10 +2,7 @@ import { useRef } from "react"; import { TimelineTrack } from "@/types/timeline"; -import { - TIMELINE_CONSTANTS, - getTotalTracksHeight, -} from "@/constants/timeline-constants"; +import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead"; interface TimelinePlayheadProps { @@ -16,7 +13,6 @@ interface TimelinePlayheadProps { seek: (time: number) => void; rulerRef: React.RefObject; rulerScrollRef: React.RefObject; - tracksScrollRef: React.RefObject; trackLabelsRef?: React.RefObject; timelineRef: React.RefObject; playheadRef?: React.RefObject; @@ -31,7 +27,6 @@ export function TimelinePlayhead({ seek, rulerRef, rulerScrollRef, - tracksScrollRef, trackLabelsRef, timelineRef, playheadRef: externalPlayheadRef, @@ -39,15 +34,13 @@ export function TimelinePlayhead({ }: TimelinePlayheadProps) { const internalPlayheadRef = useRef(null); const playheadRef = externalPlayheadRef || internalPlayheadRef; - const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({ + const { playheadPosition, handleRulerMouseDown } = useTimelinePlayhead({ currentTime, duration, zoomLevel, seek, rulerRef, rulerScrollRef, - tracksScrollRef, - playheadRef, }); // Use timeline container height minus a few pixels for breathing room @@ -66,14 +59,14 @@ export function TimelinePlayhead({ return (
{/* The playhead line spanning full height */}
) { - const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({ +}: Omit< + TimelinePlayheadProps, + | "tracks" + | "trackLabelsRef" + | "timelineRef" + | "tracksScrollRef" + | "playheadRef" +>) { + const { handleRulerMouseDown } = useTimelinePlayhead({ currentTime, duration, zoomLevel, seek, rulerRef, rulerScrollRef, - tracksScrollRef, - playheadRef, }); - return { handleRulerMouseDown, isDraggingRuler }; + return { handleRulerMouseDown }; } export { TimelinePlayhead as default }; diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index 539846b3..bfb663c6 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -16,6 +16,8 @@ import { Music, TypeIcon, Lock, + ZoomIn, + ZoomOut, LockOpen, } from "lucide-react"; import { @@ -55,6 +57,9 @@ import { TIMELINE_CONSTANTS, snapTimeToFrame, } from "@/constants/timeline-constants"; +import { Slider } from "../ui/slider"; +import TimelineCanvasRuler from "./timeline-canvas/timeline-canvas-ruler"; +import TimelineCanvasRulerWrapper from "./timeline-canvas/timeline-canvas-ruler-wrapper"; export function Timeline() { // Timeline shows all tracks (video, audio, effects) and their elements. @@ -94,10 +99,13 @@ export function Timeline() { const [isInTimeline, setIsInTimeline] = useState(false); // Timeline zoom functionality - const { zoomLevel, setZoomLevel, handleWheel } = useTimelineZoom({ - containerRef: timelineRef, - isInTimeline, - }); + const { + zoomLevel, + zoomStep, + handleChangeZoomLevel, + handleChangeZoomStep, + handleWheel, + } = useTimelineZoom(); // Old marquee selection removed - using new SelectionBox component instead @@ -110,7 +118,6 @@ export function Timeline() { // Scroll synchronization and auto-scroll to playhead const rulerScrollRef = useRef(null); - const tracksScrollRef = useRef(null); const trackLabelsRef = useRef(null); const playheadRef = useRef(null); const trackLabelsScrollRef = useRef(null); @@ -127,8 +134,6 @@ export function Timeline() { seek, rulerRef, rulerScrollRef, - tracksScrollRef, - playheadRef, }); // Selection box functionality @@ -198,14 +203,14 @@ export function Timeline() { clearSelectedElements(); // Determine if we're clicking in ruler or tracks area - const isRulerClick = (e.target as HTMLElement).closest( - "[data-ruler-area]" + const isTracksAreaClick = (e.target as HTMLElement).closest( + "[data-tracks-area]" ); let mouseX: number; let scrollLeft = 0; - if (isRulerClick) { + if (isTracksAreaClick) { // Calculate based on ruler position const rulerContent = rulerScrollRef.current?.querySelector( "[data-radix-scroll-area-viewport]" @@ -215,14 +220,7 @@ export function Timeline() { mouseX = e.clientX - rect.left; scrollLeft = rulerContent.scrollLeft; } else { - // Calculate based on tracks content position - const tracksContent = tracksScrollRef.current?.querySelector( - "[data-radix-scroll-area-viewport]" - ) as HTMLElement; - if (!tracksContent) return; - const rect = tracksContent.getBoundingClientRect(); - mouseX = e.clientX - rect.left; - scrollLeft = tracksContent.scrollLeft; + return; } const rawTime = Math.max( @@ -245,7 +243,6 @@ export function Timeline() { zoomLevel, seek, rulerScrollRef, - tracksScrollRef, clearSelectedElements, isSelecting, justFinishedSelecting, @@ -509,14 +506,11 @@ export function Timeline() { const rulerViewport = rulerScrollRef.current?.querySelector( "[data-radix-scroll-area-viewport]" ) as HTMLElement; - const tracksViewport = tracksScrollRef.current?.querySelector( - "[data-radix-scroll-area-viewport]" - ) as HTMLElement; const trackLabelsViewport = trackLabelsScrollRef.current?.querySelector( "[data-radix-scroll-area-viewport]" ) as HTMLElement; - if (!rulerViewport || !tracksViewport) return; + if (!rulerViewport) return; // Horizontal scroll synchronization between ruler and tracks const handleRulerScroll = () => { @@ -524,7 +518,6 @@ export function Timeline() { if (isUpdatingRef.current || now - lastRulerSync.current < 16) return; lastRulerSync.current = now; isUpdatingRef.current = true; - tracksViewport.scrollLeft = rulerViewport.scrollLeft; isUpdatingRef.current = false; }; const handleTracksScroll = () => { @@ -532,12 +525,10 @@ export function Timeline() { if (isUpdatingRef.current || now - lastTracksSync.current < 16) return; lastTracksSync.current = now; isUpdatingRef.current = true; - rulerViewport.scrollLeft = tracksViewport.scrollLeft; isUpdatingRef.current = false; }; rulerViewport.addEventListener("scroll", handleRulerScroll); - tracksViewport.addEventListener("scroll", handleTracksScroll); // Vertical scroll synchronization between track labels and tracks content if (trackLabelsViewport) { @@ -547,7 +538,6 @@ export function Timeline() { return; lastVerticalSync.current = now; isUpdatingRef.current = true; - tracksViewport.scrollTop = trackLabelsViewport.scrollTop; isUpdatingRef.current = false; }; const handleTracksVerticalScroll = () => { @@ -556,30 +546,22 @@ export function Timeline() { return; lastVerticalSync.current = now; isUpdatingRef.current = true; - trackLabelsViewport.scrollTop = tracksViewport.scrollTop; isUpdatingRef.current = false; }; trackLabelsViewport.addEventListener("scroll", handleTrackLabelsScroll); - tracksViewport.addEventListener("scroll", handleTracksVerticalScroll); return () => { rulerViewport.removeEventListener("scroll", handleRulerScroll); - tracksViewport.removeEventListener("scroll", handleTracksScroll); trackLabelsViewport.removeEventListener( "scroll", handleTrackLabelsScroll ); - tracksViewport.removeEventListener( - "scroll", - handleTracksVerticalScroll - ); }; } return () => { rulerViewport.removeEventListener("scroll", handleRulerScroll); - tracksViewport.removeEventListener("scroll", handleTracksScroll); }; }, []); @@ -739,6 +721,39 @@ export function Timeline() { Delete element (Delete) + + + + + Zoom Out + + handleChangeZoomStep(value[0])} + /> + + + + + Zoom In +
@@ -772,7 +787,6 @@ export function Timeline() { seek={seek} rulerRef={rulerRef} rulerScrollRef={rulerScrollRef} - tracksScrollRef={tracksScrollRef} trackLabelsRef={trackLabelsRef} timelineRef={timelineRef} playheadRef={playheadRef} @@ -790,114 +804,38 @@ export function Timeline() { /> {/* Timeline Header with Ruler */}
- {/* Track Labels Header */} -
- {/* Empty space */} - - . - -
+
- {/* Timeline Ruler */} -
+
-
- {/* Time markers */} - {(() => { - // Calculate appropriate time interval based on zoom level - const getTimeInterval = (zoom: number) => { - const pixelsPerSecond = - TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoom; - if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in - if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in - if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom - if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out - if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out - if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out - return 30; // Every 30s when extremely zoomed out - }; - - const interval = getTimeInterval(zoomLevel); - const markerCount = Math.ceil(duration / interval) + 1; - - return Array.from({ length: markerCount }, (_, i) => { - const time = i * interval; - if (time > duration) return null; - - const isMainMarker = - time % (interval >= 1 ? Math.max(1, interval) : 1) === 0; - - return ( -
- - {(() => { - const formatTime = (seconds: number) => { - const hours = Math.floor(seconds / 3600); - const minutes = Math.floor((seconds % 3600) / 60); - const secs = seconds % 60; - - if (hours > 0) { - return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`; - } else if (minutes > 0) { - return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`; - } else if (interval >= 1) { - return `${Math.floor(secs)}s`; - } else { - return `${secs.toFixed(1)}s`; - } - }; - return formatTime(time); - })()} - -
- ); - }).filter(Boolean); - })()} -
+ +
{/* Tracks Area */} -
- {/* Track Labels */} - {tracks.length > 0 && ( -
- -
+ +
+ {/* Track Labels */} + {tracks.length > 0 && ( +
+
{tracks.map((track) => (
))}
- -
- )} +
+ )} - {/* Timeline Tracks Content */} -
- - + {/* Timeline Tracks Content */} +
+
)}
- +
-
+
); diff --git a/apps/web/src/constants/timeline-constants.ts b/apps/web/src/constants/timeline-constants.ts index 8c76a2e8..05e44e2f 100644 --- a/apps/web/src/constants/timeline-constants.ts +++ b/apps/web/src/constants/timeline-constants.ts @@ -76,6 +76,11 @@ export const TIMELINE_CONSTANTS = { DEFAULT_TEXT_DURATION: 5, DEFAULT_IMAGE_DURATION: 5, ZOOM_LEVELS: [0.25, 0.5, 1, 1.5, 2, 3, 4], + ZOOM_LEVEL_MIN: 0.1, + ZOOM_LEVEL_MAX: 10, + ZOOM_STEP_BASE: 0.15, + MAX_ZOOM_STEP: 66, + ZOOM_STEP: 1, } as const; // FPS presets for project settings diff --git a/apps/web/src/hooks/use-disable-browser-zoom.ts b/apps/web/src/hooks/use-disable-browser-zoom.ts new file mode 100644 index 00000000..9467cb71 --- /dev/null +++ b/apps/web/src/hooks/use-disable-browser-zoom.ts @@ -0,0 +1,63 @@ +import { useEffect } from "react"; + +/** + * useDisableBrowserZoom + * + * This React hook prevents users from zooming in/out the browser window using keyboard shortcuts, + * mouse wheel, or gesture events (such as pinch-to-zoom on trackpads or touch devices). + * + * Typical use case: apps with fixed-size UIs, custom editors, or when zooming would break layout. + * + * NOTE: Disabling browser zoom may negatively affect accessibility and user experience. + * Use with caution, especially for public-facing applications. + */ +export const useDisableBrowserZoom = () => { + useEffect(() => { + /** + * Prevents browser zoom when user holds Ctrl (or Cmd on Mac) and scrolls the mouse wheel. + */ + const handleWheel = (e: WheelEvent) => { + if (e.ctrlKey) { + e.preventDefault(); + } + }; + + /** + * Prevents browser zoom via keyboard shortcuts: + * Ctrl/Cmd + '+', '-', '=', or '0' (reset zoom) + * Some keyboards emit '=' for '+' (without Shift). + */ + const handleKeyDown = (e: KeyboardEvent) => { + if (e.ctrlKey) { + const key = e.key; + if (key === "+" || key === "-" || key === "0" || key === "=") { + e.preventDefault(); + } + } + }; + + /** + * Prevents pinch-zoom gestures on supported browsers (mainly Safari/macOS/iOS). + * gesturestart, gesturechange, and gestureend are non-standard and not supported everywhere. + */ + const handleGesture = (e: Event) => { + e.preventDefault(); + }; + + // Attach event listeners (passive: false is required for preventDefault to work) + window.addEventListener("wheel", handleWheel, { passive: false }); + window.addEventListener("keydown", handleKeyDown, { passive: false }); + window.addEventListener("gesturestart", handleGesture, { passive: false }); + window.addEventListener("gesturechange", handleGesture, { passive: false }); + window.addEventListener("gestureend", handleGesture, { passive: false }); + + // Cleanup listeners on unmount to avoid memory leaks + return () => { + window.removeEventListener("wheel", handleWheel); + window.removeEventListener("keydown", handleKeyDown); + window.removeEventListener("gesturestart", handleGesture); + window.removeEventListener("gesturechange", handleGesture); + window.removeEventListener("gestureend", handleGesture); + }; + }, []); +}; diff --git a/apps/web/src/hooks/use-timeline-playhead.ts b/apps/web/src/hooks/use-timeline-playhead.ts index 9a82c23f..9eb06485 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,10 +9,15 @@ interface UseTimelinePlayheadProps { seek: (time: number) => void; rulerRef: React.RefObject; rulerScrollRef: React.RefObject; - tracksScrollRef: React.RefObject; - playheadRef?: React.RefObject; } +/** + * useTimelinePlayhead + * + * Custom hook to manage playhead (scrubbing) logic for a timeline editor. + * Handles mouse interaction for timeline ruler, calculates time from mouse, + * and enables smooth scrubbing without unnecessary re-renders. + */ export function useTimelinePlayhead({ currentTime, duration, @@ -20,138 +25,101 @@ export function useTimelinePlayhead({ seek, rulerRef, rulerScrollRef, - tracksScrollRef, - playheadRef, }: UseTimelinePlayheadProps) { - // Playhead scrubbing state - const [isScrubbing, setIsScrubbing] = useState(false); - const [scrubTime, setScrubTime] = useState(null); + // Get current project info (especially FPS) from global store + const { activeProject } = useProjectStore(); - // Ruler drag detection state - const [isDraggingRuler, setIsDraggingRuler] = useState(false); - const [hasDraggedRuler, setHasDraggedRuler] = useState(false); + // Ref to track if currently scrubbing + const isScrubbingRef = useRef(false); + // Ref to hold the playhead time while scrubbing (does not trigger re-render) + const scrubTimeRef = useRef(null); + + // State to force re-render when scrubbing ends + const [_, forceRerender] = useState(0); + + /** + * Determines the actual playhead position: + * - If scrubbing, use the value in scrubTimeRef + * - Otherwise, use the currentTime (controlled by external state) + */ 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); - }, - [duration, zoomLevel] - ); - - // Ruler mouse down handler - const handleRulerMouseDown = useCallback( - (e: React.MouseEvent) => { - // Only handle left mouse button - if (e.button !== 0) return; - - // Don't interfere if clicking on the playhead itself - if (playheadRef?.current?.contains(e.target as Node)) return; - - e.preventDefault(); - setIsDraggingRuler(true); - setHasDraggedRuler(false); - - // Start scrubbing immediately - setIsScrubbing(true); - handleScrub(e); - }, - [duration, zoomLevel] - ); - - const handleScrub = useCallback( + /** + * Calculate timeline time (in seconds) based on mouse X position. + * - Gets bounding rect of the ruler + * - Adjusts for scroll position if ruler is scrollable + * - Converts X pixel offset to seconds using current zoom level + * - Snaps to nearest frame using FPS + */ + const getTimeFromMouse = useCallback( (e: MouseEvent | React.MouseEvent) => { const ruler = rulerRef.current; - if (!ruler) return; + const scrollArea = rulerScrollRef.current?.querySelector( + "[data-radix-scroll-area-viewport]" + ) as HTMLElement; + + if (!ruler || !scrollArea) return 0; + 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 + const scrollLeft = scrollArea.scrollLeft; + const x = e.clientX - rect.left + scrollLeft; + + // Calculate how many pixels represent one second, depending on zoom + 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, seek, rulerRef] + [rulerRef, rulerScrollRef, duration, zoomLevel, activeProject?.fps] ); - // 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 mouse down event on the ruler: + * - Starts scrubbing and updates playhead immediately + * - Registers mousemove/mouseup events to allow scrubbing + * - Updates time as mouse moves and seeks to new time + * - Cleans up listeners and triggers re-render when scrubbing ends + */ + const handleRulerMouseDown = useCallback( + (e: React.MouseEvent) => { + if (e.button !== 0) return; + e.preventDefault(); + const time = getTimeFromMouse(e); - // 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); + isScrubbingRef.current = true; + scrubTimeRef.current = time; + seek(time); + + // Mouse move handler: update playhead and seek to new time + const onMouseMove = (e: MouseEvent) => { + const t = getTimeFromMouse(e); + if (t !== scrubTimeRef.current) { + scrubTimeRef.current = t; + seek(t); } - 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]); + // Mouse up handler: stop scrubbing, cleanup, and force re-render + const onMouseUp = () => { + isScrubbingRef.current = false; + window.removeEventListener("mousemove", onMouseMove); + window.removeEventListener("mouseup", onMouseUp); + forceRerender((v) => v + 1); + }; + + // Attach listeners to window for drag outside the ruler area + window.addEventListener("mousemove", onMouseMove); + window.addEventListener("mouseup", onMouseUp); + }, + [getTimeFromMouse, seek] + ); return { - playheadPosition, - handlePlayheadMouseDown, - handleRulerMouseDown, - isDraggingRuler, + playheadPosition, // Current playhead position (real-time while scrubbing) + handleRulerMouseDown, // Attach to the ruler's onMouseDown }; } diff --git a/apps/web/src/hooks/use-timeline-zoom.ts b/apps/web/src/hooks/use-timeline-zoom.ts index ce32c9f0..c8780f9a 100644 --- a/apps/web/src/hooks/use-timeline-zoom.ts +++ b/apps/web/src/hooks/use-timeline-zoom.ts @@ -1,4 +1,5 @@ -import { useState, useCallback, useEffect, RefObject } from "react"; +import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; +import { useState, useCallback, RefObject, useMemo } from "react"; interface UseTimelineZoomProps { containerRef: RefObject; @@ -7,48 +8,86 @@ interface UseTimelineZoomProps { interface UseTimelineZoomReturn { zoomLevel: number; + zoomStep: number; setZoomLevel: (zoomLevel: number | ((prev: number) => number)) => void; + handleChangeZoomStep: (zoomStep: number) => void; + handleChangeZoomLevel: (zoomStep: number) => void; handleWheel: (e: React.WheelEvent) => void; } -export function useTimelineZoom({ - containerRef, - isInTimeline = false, -}: UseTimelineZoomProps): UseTimelineZoomReturn { +/** + * useTimelineZoom + * + * Custom hook to manage zoom logic for a timeline component. + * Handles zoom state, step calculation, level changes, and mouse wheel zooming (with ctrl/meta). + */ +export function useTimelineZoom(): UseTimelineZoomReturn { + // Current zoom level (1 = default) const [zoomLevel, setZoomLevel] = useState(1); - const handleWheel = useCallback((e: React.WheelEvent) => { - // Only zoom if user is using pinch gesture (ctrlKey or metaKey is true) - if (e.ctrlKey || e.metaKey) { - e.preventDefault(); - const delta = e.deltaY > 0 ? -0.15 : 0.15; - setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta))); - } - // Otherwise, allow normal scrolling + /** + * Calculate the current zoom step based on the zoom level and a base step constant. + * Ensures minimum step is 1 (prevents zero or negative step). + */ + const zoomStep = useMemo( + () => + Math.max(1, Math.round(zoomLevel / TIMELINE_CONSTANTS.ZOOM_STEP_BASE)), + [zoomLevel] + ); + + /** + * Update the zoom level using a given step. + * The zoom level is clamped to a minimum value defined in constants. + */ + const handleChangeZoomStep = useCallback((newStep: number) => { + setZoomLevel( + Math.max( + TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN, + newStep * TIMELINE_CONSTANTS.ZOOM_STEP_BASE + ) + ); }, []); - // Prevent browser zooming in/out when in timeline - useEffect(() => { - const preventZoom = (e: WheelEvent) => { - if ( - isInTimeline && - (e.ctrlKey || e.metaKey) && - containerRef.current?.contains(e.target as Node) - ) { - e.preventDefault(); - } - }; + /** + * Update the zoom level directly. + * The new value is clamped between the defined minimum and maximum levels. + */ + const handleChangeZoomLevel = useCallback((newLevel: number) => { + setZoomLevel( + Math.max( + TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN, + Math.min(TIMELINE_CONSTANTS.ZOOM_LEVEL_MAX, newLevel) + ) + ); + }, []); - document.addEventListener("wheel", preventZoom, { passive: false }); - - return () => { - document.removeEventListener("wheel", preventZoom); - }; - }, [isInTimeline, containerRef]); + /** + * Handle zooming using mouse wheel + ctrl/meta key (like browser zoom). + * Prevents default browser behavior and updates zoom level accordingly. + */ + const handleWheel = useCallback((e: React.WheelEvent) => { + if (e.ctrlKey || e.metaKey) { + e.preventDefault?.(); + const delta = + e.deltaY > 0 + ? -TIMELINE_CONSTANTS.ZOOM_STEP_BASE + : TIMELINE_CONSTANTS.ZOOM_STEP_BASE; + setZoomLevel((prev) => + Math.max( + TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN, + Math.min(TIMELINE_CONSTANTS.ZOOM_LEVEL_MAX, prev + delta) + ) + ); + } + }, []); + // Return all handlers and state values for use in timeline components return { - zoomLevel, - setZoomLevel, - handleWheel, + zoomLevel, // Current zoom level + zoomStep, // Current zoom step (calculated from zoomLevel) + setZoomLevel, // Directly set the zoom level (accepts value or updater function) + handleChangeZoomStep, // Change zoom by step value + handleChangeZoomLevel, // Change zoom by level value + handleWheel, // Handler for mouse wheel zooming }; } diff --git a/apps/web/src/types/timeline.ts b/apps/web/src/types/timeline.ts index 17dbb5d1..146205c4 100644 --- a/apps/web/src/types/timeline.ts +++ b/apps/web/src/types/timeline.ts @@ -1,5 +1,6 @@ import { MediaType } from "@/stores/media-store"; import { generateUUID } from "@/lib/utils"; +import { ReactNode } from "react"; export type TrackType = "media" | "text" | "audio"; @@ -155,3 +156,22 @@ export function validateElementTrackCompatibility( return { isValid: true }; } + +export interface TimelineTick { + left: number; + label?: string; + isMajor?: boolean; +} + +export interface TimelineCanvasRulerWrapperProps { + children: ReactNode; + onMouseDown?: (e: React.MouseEvent) => void; + className?: string; +} + +export interface TimelineCanvasRulerProps { + zoomLevel: number; + duration: number; + width: number; + height?: number; +}