summaryrefslogtreecommitdiff
path: root/apps/web/src
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src')
-rw-r--r--apps/web/src/app/editor/[project_id]/page.tsx2
-rw-r--r--apps/web/src/components/editor/properties-panel/index.tsx6
-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.tsx78
-rw-r--r--apps/web/src/components/editor/timeline-element.tsx88
-rw-r--r--apps/web/src/components/editor/timeline-playhead.tsx32
-rw-r--r--apps/web/src/components/editor/timeline.tsx244
-rw-r--r--apps/web/src/constants/timeline-constants.ts5
-rw-r--r--apps/web/src/hooks/use-disable-browser-zoom.ts63
-rw-r--r--apps/web/src/hooks/use-timeline-element-resize.ts12
-rw-r--r--apps/web/src/hooks/use-timeline-playhead.ts202
-rw-r--r--apps/web/src/hooks/use-timeline-zoom.ts103
-rw-r--r--apps/web/src/types/timeline.ts20
13 files changed, 335 insertions, 544 deletions
diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 4be4d9cc..aa5b7315 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -16,7 +16,6 @@ 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() {
@@ -40,7 +39,6 @@ export default function Editor() {
const handledProjectIds = useRef<Set<string>>(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 dc0dd4b2..9e28850f 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -83,11 +83,7 @@ export function PropertiesPanel() {
);
if (mediaItem?.type === "audio") {
- return (
- <div key={elementId}>
- <AudioProperties element={element} />
- </div>
- );
+ return <AudioProperties element={element} />;
}
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
deleted file mode 100644
index c0efc19e..00000000
--- a/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler-wrapper.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index c40cdbda..00000000
--- a/apps/web/src/components/editor/timeline-canvas/timeline-canvas-ruler.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-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<HTMLCanvasElement>(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 (
- <canvas ref={canvasRef} width={width} height={height} className="block" />
- );
-}
diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index 71b2cd26..4ba889ef 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -96,93 +96,9 @@ export function TimelineElement({
isBeingDragged && dragState.isDragging
? dragState.currentTime
: element.startTime;
- const elementLeft = elementStartTime * 50 * zoomLevel;
-
- const handleDeleteElement = () => {
- removeElementFromTrack(track.id, element.id);
- setElementMenuOpen(false);
- };
-
- const handleSplitElement = () => {
- const effectiveStart = element.startTime;
- const effectiveEnd =
- element.startTime +
- (element.duration - element.trimStart - element.trimEnd);
-
- if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
- toast.error("Playhead must be within element to split");
- return;
- }
-
- const secondElementId = splitElement(track.id, element.id, currentTime);
- if (!secondElementId) {
- toast.error("Failed to split element");
- }
- setElementMenuOpen(false);
- };
-
- const handleSplitAndKeepLeft = () => {
- const effectiveStart = element.startTime;
- const effectiveEnd =
- element.startTime +
- (element.duration - element.trimStart - element.trimEnd);
-
- if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
- toast.error("Playhead must be within element");
- return;
- }
-
- splitAndKeepLeft(track.id, element.id, currentTime);
- setElementMenuOpen(false);
- };
-
- const handleSplitAndKeepRight = () => {
- const effectiveStart = element.startTime;
- const effectiveEnd =
- element.startTime +
- (element.duration - element.trimStart - element.trimEnd);
-
- if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
- toast.error("Playhead must be within element");
- return;
- }
-
- splitAndKeepRight(track.id, element.id, currentTime);
- setElementMenuOpen(false);
- };
-
- const handleSeparateAudio = () => {
- if (element.type !== "media") {
- toast.error("Audio separation only available for media elements");
- return;
- }
-
- const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
- if (!mediaItem || mediaItem.type !== "video") {
- toast.error("Audio separation only available for video elements");
- return;
- }
-
- const audioElementId = separateAudio(track.id, element.id);
- if (!audioElementId) {
- toast.error("Failed to separate audio");
- }
- setElementMenuOpen(false);
- };
-
- const canSplitAtPlayhead = () => {
- const effectiveStart = element.startTime;
- const effectiveEnd =
- element.startTime +
- (element.duration - element.trimStart - element.trimEnd);
- return currentTime > effectiveStart && currentTime < effectiveEnd;
- };
- const canSeparateAudio = () => {
- if (element.type !== "media") return false;
- const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
- return mediaItem?.type === "video" && track.type === "media";
- };
+ // Element should always be positioned at startTime - trimStart only affects content, not position
+ const elementLeft = elementStartTime * 50 * zoomLevel;
const handleElementSplitContext = () => {
const effectiveStart = element.startTime;
diff --git a/apps/web/src/components/editor/timeline-playhead.tsx b/apps/web/src/components/editor/timeline-playhead.tsx
index 390abc3d..78aed3a8 100644
--- a/apps/web/src/components/editor/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline-playhead.tsx
@@ -2,7 +2,10 @@
import { useRef } from "react";
import { TimelineTrack } from "@/types/timeline";
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import {
+ TIMELINE_CONSTANTS,
+ getTotalTracksHeight,
+} from "@/constants/timeline-constants";
import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";
interface TimelinePlayheadProps {
@@ -13,6 +16,7 @@ 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>;
@@ -27,6 +31,7 @@ export function TimelinePlayhead({
seek,
rulerRef,
rulerScrollRef,
+ tracksScrollRef,
trackLabelsRef,
timelineRef,
playheadRef: externalPlayheadRef,
@@ -34,13 +39,15 @@ export function TimelinePlayhead({
}: TimelinePlayheadProps) {
const internalPlayheadRef = useRef<HTMLDivElement>(null);
const playheadRef = externalPlayheadRef || internalPlayheadRef;
- const { playheadPosition, handleRulerMouseDown } = useTimelinePlayhead({
+ const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
currentTime,
duration,
zoomLevel,
seek,
rulerRef,
rulerScrollRef,
+ tracksScrollRef,
+ playheadRef,
});
// Use timeline container height minus a few pixels for breathing room
@@ -59,14 +66,14 @@ export function TimelinePlayhead({
return (
<div
ref={playheadRef}
- className="absolute pointer-events-auto z-[50]"
+ className="absolute pointer-events-auto z-[100]"
style={{
left: `${leftPosition}px`,
top: 0,
height: `${totalHeight}px`,
width: "2px", // Slightly wider for better click target
}}
- onMouseDown={handleRulerMouseDown}
+ onMouseDown={handlePlayheadMouseDown}
>
{/* The playhead line spanning full height */}
<div
@@ -89,24 +96,21 @@ export function useTimelinePlayheadRuler({
seek,
rulerRef,
rulerScrollRef,
-}: Omit<
- TimelinePlayheadProps,
- | "tracks"
- | "trackLabelsRef"
- | "timelineRef"
- | "tracksScrollRef"
- | "playheadRef"
->) {
- const { handleRulerMouseDown } = useTimelinePlayhead({
+ tracksScrollRef,
+ playheadRef,
+}: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {
+ const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({
currentTime,
duration,
zoomLevel,
seek,
rulerRef,
rulerScrollRef,
+ tracksScrollRef,
+ playheadRef,
});
- return { handleRulerMouseDown };
+ return { handleRulerMouseDown, isDraggingRuler };
}
export { TimelinePlayhead as default };
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 5130c753..a78eb3f6 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -16,8 +16,6 @@ import {
Music,
TypeIcon,
Lock,
- ZoomIn,
- ZoomOut,
LockOpen,
} from "lucide-react";
import {
@@ -57,9 +55,6 @@ 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.
@@ -99,13 +94,10 @@ export function Timeline() {
const [isInTimeline, setIsInTimeline] = useState(false);
// Timeline zoom functionality
- const {
- zoomLevel,
- zoomStep,
- handleChangeZoomLevel,
- handleChangeZoomStep,
- handleWheel,
- } = useTimelineZoom();
+ const { zoomLevel, setZoomLevel, handleWheel } = useTimelineZoom({
+ containerRef: timelineRef,
+ isInTimeline,
+ });
// Old marquee selection removed - using new SelectionBox component instead
@@ -118,6 +110,7 @@ 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);
@@ -134,6 +127,8 @@ export function Timeline() {
seek,
rulerRef,
rulerScrollRef,
+ tracksScrollRef,
+ playheadRef,
});
// Selection box functionality
@@ -203,14 +198,14 @@ export function Timeline() {
clearSelectedElements();
// Determine if we're clicking in ruler or tracks area
- const isTracksAreaClick = (e.target as HTMLElement).closest(
- "[data-tracks-area]"
+ const isRulerClick = (e.target as HTMLElement).closest(
+ "[data-ruler-area]"
);
let mouseX: number;
let scrollLeft = 0;
- if (isTracksAreaClick) {
+ if (isRulerClick) {
// Calculate based on ruler position
const rulerContent = rulerScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
@@ -220,7 +215,14 @@ export function Timeline() {
mouseX = e.clientX - rect.left;
scrollLeft = rulerContent.scrollLeft;
} else {
- return;
+ // 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;
}
const rawTime = Math.max(
@@ -243,6 +245,7 @@ export function Timeline() {
zoomLevel,
seek,
rulerScrollRef,
+ tracksScrollRef,
clearSelectedElements,
isSelecting,
justFinishedSelecting,
@@ -506,11 +509,14 @@ 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) return;
+ if (!rulerViewport || !tracksViewport) return;
// Horizontal scroll synchronization between ruler and tracks
const handleRulerScroll = () => {
@@ -518,6 +524,7 @@ 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 = () => {
@@ -525,10 +532,12 @@ 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) {
@@ -538,6 +547,7 @@ export function Timeline() {
return;
lastVerticalSync.current = now;
isUpdatingRef.current = true;
+ tracksViewport.scrollTop = trackLabelsViewport.scrollTop;
isUpdatingRef.current = false;
};
const handleTracksVerticalScroll = () => {
@@ -546,22 +556,30 @@ 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);
};
}, []);
@@ -721,39 +739,6 @@ 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">
@@ -787,6 +772,7 @@ export function Timeline() {
seek={seek}
rulerRef={rulerRef}
rulerScrollRef={rulerScrollRef}
+ tracksScrollRef={tracksScrollRef}
trackLabelsRef={trackLabelsRef}
timelineRef={timelineRef}
playheadRef={playheadRef}
@@ -804,38 +790,114 @@ export function Timeline() {
/>
{/* Timeline Header with Ruler */}
<div className="flex bg-panel sticky top-0 z-10">
- <div className="w-48 flex-shrink-0 bg-muted/30 border-r h-5 px-3" />
+ {/* 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="flex-1 overflow-hidden h-5">
+ {/* Timeline Ruler */}
+ <div
+ className="flex-1 relative overflow-hidden h-4"
+ onWheel={handleWheel}
+ onMouseDown={handleSelectionMouseDown}
+ onClick={handleTimelineContentClick}
+ data-ruler-area
+ >
<ScrollArea className="w-full" ref={rulerScrollRef}>
- <TimelineCanvasRulerWrapper
+ <div
ref={rulerRef}
+ className="relative h-4 select-none cursor-default"
+ style={{
+ width: `${dynamicTimelineWidth}px`,
+ }}
onMouseDown={handleRulerMouseDown}
>
- <TimelineCanvasRuler
- zoomLevel={zoomLevel}
- duration={duration}
- width={dynamicTimelineWidth}
- />
- </TimelineCanvasRulerWrapper>
+ {/* 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>
</ScrollArea>
</div>
</div>
{/* Tracks Area */}
- <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}>
+ <div className="flex-1 flex overflow-hidden">
+ {/* Track Labels */}
+ {tracks.length > 0 && (
+ <div
+ ref={trackLabelsRef}
+ className="w-48 flex-shrink-0 border-r border-black overflow-y-auto"
+ data-track-labels
+ >
+ <ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}>
+ <div className="flex flex-col gap-1">
{tracks.map((track) => (
<div
key={track.id}
@@ -853,23 +915,25 @@ export function Timeline() {
</div>
))}
</div>
- </div>
- )}
+ </ScrollArea>
+ </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}
- />
+ {/* 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}>
<div
className="relative flex-1"
style={{
@@ -923,9 +987,9 @@ export function Timeline() {
</>
)}
</div>
- </div>
+ </ScrollArea>
</div>
- </ScrollArea>
+ </div>
</div>
</div>
);
diff --git a/apps/web/src/constants/timeline-constants.ts b/apps/web/src/constants/timeline-constants.ts
index 05e44e2f..8c76a2e8 100644
--- a/apps/web/src/constants/timeline-constants.ts
+++ b/apps/web/src/constants/timeline-constants.ts
@@ -76,11 +76,6 @@ 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
deleted file mode 100644
index 9467cb71..00000000
--- a/apps/web/src/hooks/use-disable-browser-zoom.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-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-element-resize.ts b/apps/web/src/hooks/use-timeline-element-resize.ts
index 0e409977..63b566c2 100644
--- a/apps/web/src/hooks/use-timeline-element-resize.ts
+++ b/apps/web/src/hooks/use-timeline-element-resize.ts
@@ -1,6 +1,7 @@
import { useState, useEffect } from "react";
import { ResizeState, TimelineElement, TimelineTrack } from "@/types/timeline";
import { useMediaStore } from "@/stores/media-store";
+import { useTimelineStore } from "@/stores/timeline-store";
interface UseTimelineElementResizeProps {
element: TimelineElement;
@@ -28,6 +29,7 @@ export function useTimelineElementResize({
}: UseTimelineElementResizeProps) {
const [resizing, setResizing] = useState<ResizeState | null>(null);
const { mediaItems } = useMediaStore();
+ const { updateElementStartTime } = useTimelineStore();
// Set up document-level mouse listeners during resize (like proper drag behavior)
useEffect(() => {
@@ -100,12 +102,20 @@ export function useTimelineElementResize({
const deltaTime = deltaX / (50 * zoomLevel);
if (resizing.side === "left") {
- // Left resize - only trim within original duration
+ // Left resize - trim content AND move element position to the right
const maxAllowed = element.duration - resizing.initialTrimEnd - 0.1;
const calculated = resizing.initialTrimStart + deltaTime;
const newTrimStart = Math.max(0, Math.min(maxAllowed, calculated));
+ // Calculate how much the trim changed and update startTime accordingly
+ const trimDelta = newTrimStart - resizing.initialTrimStart;
+ const newStartTime = element.startTime + trimDelta;
+
+ // Update both trim and start time for proper left resize behavior
onUpdateTrim(track.id, element.id, newTrimStart, resizing.initialTrimEnd);
+
+ // Update startTime so element moves to the right when trimming from left
+ updateElementStartTime(track.id, element.id, newStartTime);
} else {
// Right resize - can extend duration for supported element types
const calculated = resizing.initialTrimEnd - deltaTime;
diff --git a/apps/web/src/hooks/use-timeline-playhead.ts b/apps/web/src/hooks/use-timeline-playhead.ts
index 9eb06485..9a82c23f 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 { useRef, useState, useCallback } from "react";
+import { useState, useEffect, useCallback } from "react";
interface UseTimelinePlayheadProps {
currentTime: number;
@@ -9,15 +9,10 @@ interface UseTimelinePlayheadProps {
seek: (time: number) => void;
rulerRef: React.RefObject<HTMLDivElement>;
rulerScrollRef: React.RefObject<HTMLDivElement>;
+ tracksScrollRef: React.RefObject<HTMLDivElement>;
+ playheadRef?: React.RefObject<HTMLDivElement>;
}
-/**
- * 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,
@@ -25,101 +20,138 @@ export function useTimelinePlayhead({
seek,
rulerRef,
rulerScrollRef,
+ tracksScrollRef,
+ playheadRef,
}: UseTimelinePlayheadProps) {
- // Get current project info (especially FPS) from global store
- const { activeProject } = useProjectStore();
+ // Playhead scrubbing state
+ const [isScrubbing, setIsScrubbing] = useState(false);
+ const [scrubTime, setScrubTime] = useState<number | null>(null);
- // Ref to track if currently scrubbing
- const isScrubbingRef = useRef(false);
+ // Ruler drag detection state
+ const [isDraggingRuler, setIsDraggingRuler] = useState(false);
+ const [hasDraggedRuler, setHasDraggedRuler] = useState(false);
- // Ref to hold the playhead time while scrubbing (does not trigger re-render)
- const scrubTimeRef = useRef<number | null>(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 =
- isScrubbingRef.current && scrubTimeRef.current !== null
- ? scrubTimeRef.current
- : currentTime;
-
- /**
- * 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;
- const scrollArea = rulerScrollRef.current?.querySelector(
- "[data-radix-scroll-area-viewport]"
- ) as HTMLElement;
-
- if (!ruler || !scrollArea) return 0;
+ isScrubbing && scrubTime !== null ? scrubTime : currentTime;
- const rect = ruler.getBoundingClientRect();
- 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;
+ // --- Playhead Scrubbing Handlers ---
+ const handlePlayheadMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation(); // Prevent ruler drag from triggering
+ setIsScrubbing(true);
+ handleScrub(e);
},
- [rulerRef, rulerScrollRef, duration, zoomLevel, activeProject?.fps]
+ [duration, zoomLevel]
);
- /**
- * 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
- */
+ // 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);
- isScrubbingRef.current = true;
- scrubTimeRef.current = time;
- seek(time);
+ // Don't interfere if clicking on the playhead itself
+ if (playheadRef?.current?.contains(e.target as Node)) return;
- // 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);
- }
- };
+ e.preventDefault();
+ setIsDraggingRuler(true);
+ setHasDraggedRuler(false);
- // 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);
- };
+ // Start scrubbing immediately
+ setIsScrubbing(true);
+ handleScrub(e);
+ },
+ [duration, zoomLevel]
+ );
- // Attach listeners to window for drag outside the ruler area
- window.addEventListener("mousemove", onMouseMove);
- window.addEventListener("mouseup", onMouseUp);
+ 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
},
- [getTimeFromMouse, seek]
+ [duration, zoomLevel, seek, rulerRef]
);
+ // 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, // Current playhead position (real-time while scrubbing)
- handleRulerMouseDown, // Attach to the ruler's onMouseDown
+ 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 c8780f9a..ce32c9f0 100644
--- a/apps/web/src/hooks/use-timeline-zoom.ts
+++ b/apps/web/src/hooks/use-timeline-zoom.ts
@@ -1,5 +1,4 @@
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { useState, useCallback, RefObject, useMemo } from "react";
+import { useState, useCallback, useEffect, RefObject } from "react";
interface UseTimelineZoomProps {
containerRef: RefObject<HTMLDivElement>;
@@ -8,86 +7,48 @@ 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;
}
-/**
- * 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)
+export function useTimelineZoom({
+ containerRef,
+ isInTimeline = false,
+}: UseTimelineZoomProps): UseTimelineZoomReturn {
const [zoomLevel, setZoomLevel] = useState(1);
- /**
- * 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
- )
- );
- }, []);
-
- /**
- * 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)
- )
- );
- }, []);
-
- /**
- * 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) => {
+ // 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
- ? -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)
- )
- );
+ 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
}, []);
- // Return all handlers and state values for use in timeline components
+ // 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, // 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
+ zoomLevel,
+ setZoomLevel,
+ handleWheel,
};
}
diff --git a/apps/web/src/types/timeline.ts b/apps/web/src/types/timeline.ts
index 146205c4..17dbb5d1 100644
--- a/apps/web/src/types/timeline.ts
+++ b/apps/web/src/types/timeline.ts
@@ -1,6 +1,5 @@
import { MediaType } from "@/stores/media-store";
import { generateUUID } from "@/lib/utils";
-import { ReactNode } from "react";
export type TrackType = "media" | "text" | "audio";
@@ -156,22 +155,3 @@ 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-25 14:49:34 +0000