summaryrefslogtreecommitdiff
path: root/apps
diff options
context:
space:
mode:
Diffstat (limited to 'apps')
-rw-r--r--apps/web/src/app/editor/[project_id]/page.tsx2
-rw-r--r--apps/web/src/components/editor/properties-panel/index.tsx4
-rw-r--r--apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx24
-rw-r--r--apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx77
-rw-r--r--apps/web/src/components/editor/timeline-playhead.tsx32
-rw-r--r--apps/web/src/components/editor/timeline.tsx245
-rw-r--r--apps/web/src/constants/timeline-constants.ts5
-rw-r--r--apps/web/src/hooks/use-disable-browser-zoom.ts45
-rw-r--r--apps/web/src/hooks/use-timeline-playhead.ts164
-rw-r--r--apps/web/src/hooks/use-timeline-zoom.ts74
-rw-r--r--apps/web/src/types/timeline.ts20
11 files changed, 372 insertions, 320 deletions
diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 315e0764..f48d032a 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";
export default function Editor() {
const {
@@ -35,6 +36,7 @@ export default function Editor() {
const params = useParams();
const projectId = params.project_id as string;
+ 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..c3290355 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -83,12 +83,12 @@ export function PropertiesPanel() {
);
if (mediaItem?.type === "audio") {
- return <AudioProperties element={element} />;
+ return <AudioProperties key={elementId} element={element} />;
}
return (
<div key={elementId}>
- <MediaProperties element={element} />
+ <MediaProperties key={elementId} element={element} />
</div>
);
}
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 (
+ <div
+ ref={ref}
+ className={`relative overflow-hidden h-5 w-full select-none cursor-pointer ${className}`}
+ onMouseDown={onMouseDown}
+ data-ruler-wrapper
+ >
+ {children}
+ </div>
+ );
+});
+
+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..d004c465
--- /dev/null
+++ b/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx
@@ -0,0 +1,77 @@
+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<HTMLCanvasElement>(null);
+
+ useEffect(() => {
+ const ctx = canvasRef.current?.getContext("2d");
+ if (!ctx) return;
+
+ ctx.clearRect(0, 0, width, height);
+
+ const pixelsPerSecond = 50 * 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 (
+ <canvas ref={canvasRef} width={width} height={height} className="block" />
+ );
+}
diff --git a/apps/web/src/components/editor/timeline-playhead.tsx b/apps/web/src/components/editor/timeline-playhead.tsx
index 78aed3a8..daee080e 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<HTMLDivElement>;
rulerScrollRef: React.RefObject<HTMLDivElement>;
- tracksScrollRef: React.RefObject<HTMLDivElement>;
trackLabelsRef?: React.RefObject<HTMLDivElement>;
timelineRef: React.RefObject<HTMLDivElement>;
playheadRef?: React.RefObject<HTMLDivElement>;
@@ -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<HTMLDivElement>(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 (
<div
ref={playheadRef}
- className="absolute pointer-events-auto z-[100]"
+ className="absolute pointer-events-auto z-[999]"
style={{
left: `${leftPosition}px`,
top: 0,
height: `${totalHeight}px`,
width: "2px", // Slightly wider for better click target
}}
- onMouseDown={handlePlayheadMouseDown}
+ onMouseDown={handleRulerMouseDown}
>
{/* The playhead line spanning full height */}
<div
@@ -96,21 +89,24 @@ export function useTimelinePlayheadRuler({
seek,
rulerRef,
rulerScrollRef,
- tracksScrollRef,
- playheadRef,
-}: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {
- 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 e83b64b9..7b7455e0 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -15,8 +15,9 @@ import {
Video,
Music,
TypeIcon,
- Magnet,
Lock,
+ ZoomIn,
+ ZoomOut,
} from "lucide-react";
import {
Tooltip,
@@ -54,6 +55,9 @@ import {
getTotalTracksHeight,
TIMELINE_CONSTANTS,
} 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.
@@ -92,10 +96,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
@@ -108,7 +115,6 @@ export function Timeline() {
// Scroll synchronization and auto-scroll to playhead
const rulerScrollRef = useRef<HTMLDivElement>(null);
- const tracksScrollRef = useRef<HTMLDivElement>(null);
const trackLabelsRef = useRef<HTMLDivElement>(null);
const playheadRef = useRef<HTMLDivElement>(null);
const trackLabelsScrollRef = useRef<HTMLDivElement>(null);
@@ -125,8 +131,6 @@ export function Timeline() {
seek,
rulerRef,
rulerScrollRef,
- tracksScrollRef,
- playheadRef,
});
// Selection box functionality
@@ -196,14 +200,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]"
@@ -213,14 +217,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(
@@ -244,7 +241,6 @@ export function Timeline() {
zoomLevel,
seek,
rulerScrollRef,
- tracksScrollRef,
clearSelectedElements,
isSelecting,
justFinishedSelecting,
@@ -616,14 +612,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 = () => {
@@ -631,7 +624,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 = () => {
@@ -639,12 +631,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) {
@@ -654,7 +644,6 @@ export function Timeline() {
return;
lastVerticalSync.current = now;
isUpdatingRef.current = true;
- tracksViewport.scrollTop = trackLabelsViewport.scrollTop;
isUpdatingRef.current = false;
};
const handleTracksVerticalScroll = () => {
@@ -663,30 +652,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);
};
}, []);
@@ -846,6 +827,39 @@ export function Timeline() {
</TooltipTrigger>
<TooltipContent>Delete element (Delete)</TooltipContent>
</Tooltip>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ className="ml-auto"
+ variant="text"
+ size="icon"
+ onClick={() => handleChangeZoomLevel(zoomLevel - 0.15)}
+ >
+ <ZoomOut className="h-4 w-4" />
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Zoom Out</TooltipContent>
+ </Tooltip>
+ <Slider
+ className="max-w-24"
+ max={TIMELINE_CONSTANTS.MAX_ZOOM_STEP}
+ min={0}
+ step={1}
+ value={[zoomStep]}
+ onValueChange={(value) => handleChangeZoomStep(value[0])}
+ />
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ variant="text"
+ size="icon"
+ onClick={() => handleChangeZoomLevel(zoomLevel + 0.15)}
+ >
+ <ZoomIn className="h-4 w-4" />
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Zoom In</TooltipContent>
+ </Tooltip>
</TooltipProvider>
</div>
<div className="flex items-center gap-1">
@@ -875,7 +889,6 @@ export function Timeline() {
seek={seek}
rulerRef={rulerRef}
rulerScrollRef={rulerScrollRef}
- tracksScrollRef={tracksScrollRef}
trackLabelsRef={trackLabelsRef}
timelineRef={timelineRef}
playheadRef={playheadRef}
@@ -893,114 +906,38 @@ export function Timeline() {
/>
{/* Timeline Header with Ruler */}
<div className="flex bg-panel sticky top-0 z-10">
- {/* Track Labels Header */}
- <div className="w-48 flex-shrink-0 bg-muted/30 border-r flex items-center justify-between px-3 py-2">
- {/* Empty space */}
- <span className="text-sm font-medium text-muted-foreground opacity-0">
- .
- </span>
- </div>
+ <div className="w-48 flex-shrink-0 bg-muted/30 border-r h-5 px-3" />
- {/* Timeline Ruler */}
- <div
- className="flex-1 relative overflow-hidden h-4"
- onWheel={handleWheel}
- onMouseDown={handleSelectionMouseDown}
- onClick={handleTimelineContentClick}
- data-ruler-area
- >
+ <div className="flex-1 overflow-hidden h-5">
<ScrollArea className="w-full" ref={rulerScrollRef}>
- <div
+ <TimelineCanvasRulerWrapper
ref={rulerRef}
- className="relative h-4 select-none cursor-default"
- style={{
- width: `${dynamicTimelineWidth}px`,
- }}
onMouseDown={handleRulerMouseDown}
>
- {/* 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 (
- <div
- key={i}
- className={`absolute top-0 bottom-0 ${
- isMainMarker
- ? "border-l border-muted-foreground/40"
- : "border-l border-muted-foreground/20"
- }`}
- style={{
- left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
- }}
- >
- <span
- className={`absolute top-1 left-1 text-[0.6rem] ${
- isMainMarker
- ? "text-muted-foreground font-medium"
- : "text-muted-foreground/70"
- }`}
- >
- {(() => {
- 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);
- })()}
- </span>
- </div>
- );
- }).filter(Boolean);
- })()}
- </div>
+ <TimelineCanvasRuler
+ zoomLevel={zoomLevel}
+ duration={duration}
+ width={dynamicTimelineWidth}
+ />
+ </TimelineCanvasRulerWrapper>
</ScrollArea>
</div>
</div>
{/* Tracks Area */}
- <div className="flex-1 flex overflow-hidden">
- {/* Track Labels */}
- {tracks.length > 0 && (
- <div
- ref={trackLabelsRef}
- className="w-48 flex-shrink-0 border-r bg-panel-accent overflow-y-auto"
- data-track-labels
- >
- <ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}>
- <div className="flex flex-col gap-1">
+ <ScrollArea className="w-full h-full">
+ <div
+ className="flex-1 flex overflow-hidden overflow-y-auto"
+ data-tracks-area
+ >
+ {/* Track Labels */}
+ {tracks.length > 0 && (
+ <div
+ ref={trackLabelsRef}
+ className="w-48 flex-shrink-0 border-r bg-panel-accent "
+ data-track-labels
+ >
+ <div className="flex flex-col gap-1" ref={trackLabelsScrollRef}>
{tracks.map((track) => (
<div
key={track.id}
@@ -1018,25 +955,23 @@ export function Timeline() {
</div>
))}
</div>
- </ScrollArea>
- </div>
- )}
+ </div>
+ )}
- {/* Timeline Tracks Content */}
- <div
- className="flex-1 relative overflow-hidden"
- onWheel={handleWheel}
- onMouseDown={handleSelectionMouseDown}
- onClick={handleTimelineContentClick}
- ref={tracksContainerRef}
- >
- <SelectionBox
- startPos={selectionBox?.startPos || null}
- currentPos={selectionBox?.currentPos || null}
- containerRef={tracksContainerRef}
- isActive={selectionBox?.isActive || false}
- />
- <ScrollArea className="w-full h-full" ref={tracksScrollRef}>
+ {/* Timeline Tracks Content */}
+ <div
+ className="flex-1 relative overflow-hidden"
+ onWheel={handleWheel}
+ onMouseDown={handleSelectionMouseDown}
+ onClick={handleTimelineContentClick}
+ ref={tracksContainerRef}
+ >
+ <SelectionBox
+ startPos={selectionBox?.startPos || null}
+ currentPos={selectionBox?.currentPos || null}
+ containerRef={tracksContainerRef}
+ isActive={selectionBox?.isActive || false}
+ />
<div
className="relative flex-1"
style={{
@@ -1090,9 +1025,9 @@ export function Timeline() {
</>
)}
</div>
- </ScrollArea>
+ </div>
</div>
- </div>
+ </ScrollArea>
</div>
</div>
);
diff --git a/apps/web/src/constants/timeline-constants.ts b/apps/web/src/constants/timeline-constants.ts
index 92045c5e..f012db7b 100644
--- a/apps/web/src/constants/timeline-constants.ts
+++ b/apps/web/src/constants/timeline-constants.ts
@@ -75,6 +75,11 @@ export const TIMELINE_CONSTANTS = {
TRACK_HEIGHT: 60, // Default fallback
DEFAULT_TEXT_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..215268ac
--- /dev/null
+++ b/apps/web/src/hooks/use-disable-browser-zoom.ts
@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+
+export const useDisableBrowserZoom = () => {
+ useEffect(() => {
+ const handleWheel = (e: WheelEvent) => {
+ if (e.ctrlKey) {
+ e.preventDefault();
+ }
+ };
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.ctrlKey) {
+ const key = e.key;
+ if (key === "+" || key === "-" || key === "0" || key === "=") {
+ e.preventDefault();
+ }
+ }
+ };
+
+ const handleGesture = (e: Event) => {
+ e.preventDefault();
+ };
+
+ 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,
+ });
+
+ 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..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<HTMLDivElement>;
rulerScrollRef: React.RefObject<HTMLDivElement>;
- tracksScrollRef: React.RefObject<HTMLDivElement>;
- playheadRef?: React.RefObject<HTMLDivElement>;
}
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<number | null>(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<number | null>(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,
};
}
diff --git a/apps/web/src/hooks/use-timeline-zoom.ts b/apps/web/src/hooks/use-timeline-zoom.ts
index ce32c9f0..16d20d7e 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<HTMLDivElement>;
@@ -7,48 +8,63 @@ 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 {
+export function useTimelineZoom(): UseTimelineZoomReturn {
const [zoomLevel, setZoomLevel] = useState(1);
+ const zoomStep = useMemo(
+ () =>
+ Math.max(1, Math.round(zoomLevel / TIMELINE_CONSTANTS.ZOOM_STEP_BASE)),
+ [zoomLevel]
+ );
+
+ const handleChangeZoomStep = useCallback((newStep: number) => {
+ setZoomLevel(
+ Math.max(
+ TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN,
+ newStep * TIMELINE_CONSTANTS.ZOOM_STEP_BASE
+ )
+ );
+ }, []);
+
+ const handleChangeZoomLevel = useCallback((newLevel: number) => {
+ setZoomLevel(
+ Math.max(
+ TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN,
+ Math.min(TIMELINE_CONSTANTS.ZOOM_LEVEL_MAX, newLevel)
+ )
+ );
+ }, []);
+
+ // Mouse wheel zoom, ctrl/meta gesture
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)));
+ 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)
+ )
+ );
}
- // Otherwise, allow normal scrolling
}, []);
- // 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();
- }
- };
-
- document.addEventListener("wheel", preventZoom, { passive: false });
-
- return () => {
- document.removeEventListener("wheel", preventZoom);
- };
- }, [isInTimeline, containerRef]);
-
return {
zoomLevel,
+ zoomStep,
setZoomLevel,
+ handleChangeZoomStep,
+ handleChangeZoomLevel,
handleWheel,
};
}
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<HTMLDivElement>) => void;
+ className?: string;
+}
+
+export interface TimelineCanvasRulerProps {
+ zoomLevel: number;
+ duration: number;
+ width: number;
+ height?: number;
+}
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 14:02:28 +0000