summaryrefslogtreecommitdiff
path: root/apps/web/src
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src')
-rw-r--r--apps/web/src/components/editor/preview-panel.tsx491
-rw-r--r--apps/web/src/components/editor/timeline/index.tsx (renamed from apps/web/src/components/editor/timeline.tsx)709
-rw-r--r--apps/web/src/components/editor/timeline/timeline-element.tsx (renamed from apps/web/src/components/editor/timeline-element.tsx)27
-rw-r--r--apps/web/src/components/editor/timeline/timeline-playhead.tsx (renamed from apps/web/src/components/editor/timeline-playhead.tsx)0
-rw-r--r--apps/web/src/components/editor/timeline/timeline-track.tsx (renamed from apps/web/src/components/editor/timeline-track.tsx)0
-rw-r--r--apps/web/src/components/landing/hero.tsx2
-rw-r--r--apps/web/src/components/onboarding.tsx4
-rw-r--r--apps/web/src/components/ui/scroll-area.tsx9
-rw-r--r--apps/web/src/constants/timeline-constants.ts10
-rw-r--r--apps/web/src/hooks/use-timeline-zoom.ts6
-rw-r--r--apps/web/src/stores/timeline-store.ts7
-rw-r--r--apps/web/src/types/timeline.ts12
12 files changed, 815 insertions, 462 deletions
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 2ecee391..2cba1374 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -16,8 +16,8 @@ import {
DropdownMenuTrigger,
DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
-import { Play, Pause, Expand } from "lucide-react";
-import { useState, useRef, useEffect } from "react";
+import { Play, Pause, Expand, SkipBack, SkipForward } from "lucide-react";
+import { useState, useRef, useEffect, useCallback } from "react";
import { cn } from "@/lib/utils";
import { formatTimeCode } from "@/lib/time";
import { FONT_CLASS_MAP } from "@/lib/font-config";
@@ -31,9 +31,9 @@ interface ActiveElement {
}
export function PreviewPanel() {
- const { tracks } = useTimelineStore();
+ const { tracks, getTotalDuration } = useTimelineStore();
const { mediaItems } = useMediaStore();
- const { currentTime } = usePlaybackStore();
+ const { currentTime, toggle, setCurrentTime, isPlaying } = usePlaybackStore();
const { canvasSize } = useEditorStore();
const previewRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
@@ -41,52 +41,51 @@ export function PreviewPanel() {
width: 0,
height: 0,
});
+ const [isExpanded, setIsExpanded] = useState(false);
const { activeProject } = useProjectStore();
- // Calculate optimal preview size that fits in container while maintaining aspect ratio
useEffect(() => {
const updatePreviewSize = () => {
if (!containerRef.current) return;
- const container = containerRef.current.getBoundingClientRect();
- const computedStyle = getComputedStyle(containerRef.current);
+ let availableWidth, availableHeight;
- // Get padding values
- const paddingTop = parseFloat(computedStyle.paddingTop);
- const paddingBottom = parseFloat(computedStyle.paddingBottom);
- const paddingLeft = parseFloat(computedStyle.paddingLeft);
- const paddingRight = parseFloat(computedStyle.paddingRight);
-
- // Get gap value (gap-4 = 1rem = 16px)
- const gap = parseFloat(computedStyle.gap) || 16;
-
- // Get toolbar height if it exists
- const toolbar = containerRef.current.querySelector("[data-toolbar]");
- const toolbarHeight = toolbar
- ? toolbar.getBoundingClientRect().height
- : 0;
+ if (isExpanded) {
+ const controlsHeight = 80;
+ const marginSpace = 24;
+ availableWidth = window.innerWidth - marginSpace;
+ availableHeight = window.innerHeight - controlsHeight - marginSpace;
+ } else {
+ const container = containerRef.current.getBoundingClientRect();
+ const computedStyle = getComputedStyle(containerRef.current);
+ const paddingTop = parseFloat(computedStyle.paddingTop);
+ const paddingBottom = parseFloat(computedStyle.paddingBottom);
+ const paddingLeft = parseFloat(computedStyle.paddingLeft);
+ const paddingRight = parseFloat(computedStyle.paddingRight);
+ const gap = parseFloat(computedStyle.gap) || 16;
+ const toolbar = containerRef.current.querySelector("[data-toolbar]");
+ const toolbarHeight = toolbar
+ ? toolbar.getBoundingClientRect().height
+ : 0;
- // Calculate available space after accounting for padding, gap, and toolbar
- const availableWidth = container.width - paddingLeft - paddingRight;
- const availableHeight =
- container.height -
- paddingTop -
- paddingBottom -
- toolbarHeight -
- (toolbarHeight > 0 ? gap : 0);
+ availableWidth = container.width - paddingLeft - paddingRight;
+ availableHeight =
+ container.height -
+ paddingTop -
+ paddingBottom -
+ toolbarHeight -
+ (toolbarHeight > 0 ? gap : 0);
+ }
const targetRatio = canvasSize.width / canvasSize.height;
const containerRatio = availableWidth / availableHeight;
-
let width, height;
if (containerRatio > targetRatio) {
- // Container is wider - constrain by height
- height = availableHeight;
+ height = availableHeight * (isExpanded ? 0.95 : 1);
width = height * targetRatio;
} else {
- // Container is taller - constrain by width
- width = availableWidth;
+ width = availableWidth * (isExpanded ? 0.95 : 1);
height = width / targetRatio;
}
@@ -94,16 +93,47 @@ export function PreviewPanel() {
};
updatePreviewSize();
-
const resizeObserver = new ResizeObserver(updatePreviewSize);
if (containerRef.current) {
resizeObserver.observe(containerRef.current);
}
+ if (isExpanded) {
+ window.addEventListener("resize", updatePreviewSize);
+ }
+
+ return () => {
+ resizeObserver.disconnect();
+ if (isExpanded) {
+ window.removeEventListener("resize", updatePreviewSize);
+ }
+ };
+ }, [canvasSize.width, canvasSize.height, isExpanded]);
+
+ useEffect(() => {
+ const handleEscapeKey = (event: KeyboardEvent) => {
+ if (event.key === "Escape" && isExpanded) {
+ setIsExpanded(false);
+ }
+ };
+
+ if (isExpanded) {
+ document.addEventListener("keydown", handleEscapeKey);
+ document.body.style.overflow = "hidden";
+ } else {
+ document.body.style.overflow = "";
+ }
+
+ return () => {
+ document.removeEventListener("keydown", handleEscapeKey);
+ document.body.style.overflow = "";
+ };
+ }, [isExpanded]);
- return () => resizeObserver.disconnect();
- }, [canvasSize.width, canvasSize.height]);
+ const toggleExpanded = useCallback(() => {
+ setIsExpanded((prev) => !prev);
+ }, []);
- // Get active elements at current time
+ const hasAnyElements = tracks.some((track) => track.elements.length > 0);
const getActiveElements = (): ActiveElement[] => {
const activeElements: ActiveElement[] = [];
@@ -116,16 +146,13 @@ export function PreviewPanel() {
if (currentTime >= elementStart && currentTime < elementEnd) {
let mediaItem = null;
-
- // Only get media item for media elements
if (element.type === "media") {
mediaItem =
element.mediaId === "test"
- ? null // Test elements don't have a real media item
+ ? null
: mediaItems.find((item) => item.id === element.mediaId) ||
null;
}
-
activeElements.push({ element, track, mediaItem });
}
});
@@ -136,9 +163,6 @@ export function PreviewPanel() {
const activeElements = getActiveElements();
- // Check if there are any elements in the timeline at all
- const hasAnyElements = tracks.some((track) => track.elements.length > 0);
-
// Get media elements for blur background (video/image only)
const getBlurBackgroundElements = (): ActiveElement[] => {
return activeElements.filter(
@@ -338,58 +362,334 @@ export function PreviewPanel() {
};
return (
- <div className="h-full w-full flex flex-col min-h-0 min-w-0 bg-panel rounded-sm">
- <div
- ref={containerRef}
- className="flex-1 flex flex-col items-center justify-center p-3 min-h-0 min-w-0"
- >
- <div className="flex-1"></div>
- {hasAnyElements ? (
- <div
- ref={previewRef}
- className="relative overflow-hidden border"
- style={{
- width: previewDimensions.width,
- height: previewDimensions.height,
- backgroundColor:
- activeProject?.backgroundType === "blur"
- ? "transparent"
- : activeProject?.backgroundColor || "#000000",
- }}
- >
- {renderBlurBackground()}
- {activeElements.length === 0 ? (
- <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
- No elements at current time
- </div>
- ) : (
- activeElements.map((elementData, index) =>
- renderElement(elementData, index)
- )
- )}
- {/* Show message when blur is selected but no media available */}
- {activeProject?.backgroundType === "blur" &&
- blurBackgroundElements.length === 0 &&
- activeElements.length > 0 && (
- <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
- Add a video or image to use blur background
+ <>
+ <div className="h-full w-full flex flex-col min-h-0 min-w-0 bg-panel rounded-sm">
+ <div
+ ref={containerRef}
+ className="flex-1 flex flex-col items-center justify-center p-3 min-h-0 min-w-0"
+ >
+ <div className="flex-1"></div>
+ {hasAnyElements ? (
+ <div
+ ref={previewRef}
+ className="relative overflow-hidden border"
+ style={{
+ width: previewDimensions.width,
+ height: previewDimensions.height,
+ backgroundColor:
+ activeProject?.backgroundType === "blur"
+ ? "transparent"
+ : activeProject?.backgroundColor || "#000000",
+ }}
+ >
+ {renderBlurBackground()}
+ {activeElements.length === 0 ? (
+ <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+ No elements at current time
</div>
+ ) : (
+ activeElements.map((elementData, index) =>
+ renderElement(elementData, index)
+ )
)}
- </div>
- ) : null}
+ {activeProject?.backgroundType === "blur" &&
+ blurBackgroundElements.length === 0 &&
+ activeElements.length > 0 && (
+ <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
+ Add a video or image to use blur background
+ </div>
+ )}
+ </div>
+ ) : null}
+
+ <div className="flex-1"></div>
+
+ <PreviewToolbar
+ hasAnyElements={hasAnyElements}
+ onToggleExpanded={toggleExpanded}
+ isExpanded={isExpanded}
+ currentTime={currentTime}
+ setCurrentTime={setCurrentTime}
+ toggle={toggle}
+ getTotalDuration={getTotalDuration}
+ />
+ </div>
+ </div>
+
+ {isExpanded && (
+ <FullscreenPreview
+ previewDimensions={previewDimensions}
+ activeProject={activeProject}
+ renderBlurBackground={renderBlurBackground}
+ activeElements={activeElements}
+ renderElement={renderElement}
+ blurBackgroundElements={blurBackgroundElements}
+ hasAnyElements={hasAnyElements}
+ toggleExpanded={toggleExpanded}
+ currentTime={currentTime}
+ setCurrentTime={setCurrentTime}
+ toggle={toggle}
+ getTotalDuration={getTotalDuration}
+ />
+ )}
+ </>
+ );
+}
+
+function FullscreenToolbar({
+ hasAnyElements,
+ onToggleExpanded,
+ currentTime,
+ setCurrentTime,
+ toggle,
+ getTotalDuration,
+}: {
+ hasAnyElements: boolean;
+ onToggleExpanded: () => void;
+ currentTime: number;
+ setCurrentTime: (time: number) => void;
+ toggle: () => void;
+ getTotalDuration: () => number;
+}) {
+ const { isPlaying } = usePlaybackStore();
+ const { activeProject } = useProjectStore();
+ const [isDragging, setIsDragging] = useState(false);
+
+ const totalDuration = getTotalDuration();
+ const progress = totalDuration > 0 ? (currentTime / totalDuration) * 100 : 0;
+
+ const handleTimelineClick = (e: React.MouseEvent<HTMLDivElement>) => {
+ if (!hasAnyElements) return;
+ const rect = e.currentTarget.getBoundingClientRect();
+ const clickX = e.clientX - rect.left;
+ const percentage = Math.max(0, Math.min(1, clickX / rect.width));
+ const newTime = percentage * totalDuration;
+ setCurrentTime(Math.max(0, Math.min(newTime, totalDuration)));
+ };
+
+ const handleTimelineDrag = (e: React.MouseEvent<HTMLDivElement>) => {
+ if (!hasAnyElements) return;
+ e.preventDefault();
+ e.stopPropagation();
+ const rect = e.currentTarget.getBoundingClientRect();
+ setIsDragging(true);
+
+ const handleMouseMove = (moveEvent: MouseEvent) => {
+ moveEvent.preventDefault();
+ const dragX = moveEvent.clientX - rect.left;
+ const percentage = Math.max(0, Math.min(1, dragX / rect.width));
+ const newTime = percentage * totalDuration;
+ setCurrentTime(Math.max(0, Math.min(newTime, totalDuration)));
+ };
+
+ const handleMouseUp = () => {
+ setIsDragging(false);
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ document.body.style.userSelect = "";
+ };
+
+ document.body.style.userSelect = "none";
+ document.addEventListener("mousemove", handleMouseMove);
+ document.addEventListener("mouseup", handleMouseUp);
+ handleMouseMove(e.nativeEvent);
+ };
+
+ const skipBackward = () => {
+ const newTime = Math.max(0, currentTime - 1);
+ setCurrentTime(newTime);
+ };
+
+ const skipForward = () => {
+ const newTime = Math.min(totalDuration, currentTime + 1);
+ setCurrentTime(newTime);
+ };
- <div className="flex-1"></div>
+ return (
+ <div
+ data-toolbar
+ className="flex items-center gap-2 p-1 pt-2 w-full text-white"
+ >
+ <div className="flex items-center gap-1 text-[0.70rem] tabular-nums text-white/90">
+ <span className="text-primary">
+ {formatTimeCode(currentTime, "HH:MM:SS:FF", activeProject?.fps || 30)}
+ </span>
+ <span className="opacity-50">/</span>
+ <span>
+ {formatTimeCode(
+ totalDuration,
+ "HH:MM:SS:FF",
+ activeProject?.fps || 30
+ )}
+ </span>
+ </div>
- <PreviewToolbar hasAnyElements={hasAnyElements} />
+ <div className="flex items-center gap-1">
+ <Button
+ variant="text"
+ size="icon"
+ onClick={skipBackward}
+ disabled={!hasAnyElements}
+ className="h-auto p-0 text-white hover:text-white/80"
+ title="Skip backward 1s"
+ >
+ <SkipBack className="h-3 w-3" />
+ </Button>
+ <Button
+ variant="text"
+ size="icon"
+ onClick={toggle}
+ disabled={!hasAnyElements}
+ className="h-auto p-0 text-white hover:text-white/80"
+ >
+ {isPlaying ? (
+ <Pause className="h-3 w-3" />
+ ) : (
+ <Play className="h-3 w-3" />
+ )}
+ </Button>
+ <Button
+ variant="text"
+ size="icon"
+ onClick={skipForward}
+ disabled={!hasAnyElements}
+ className="h-auto p-0 text-white hover:text-white/80"
+ title="Skip forward 1s"
+ >
+ <SkipForward className="h-3 w-3" />
+ </Button>
</div>
+
+ <div className="flex-1 flex items-center gap-2">
+ <div
+ className={cn(
+ "relative h-1 rounded-full cursor-pointer flex-1 bg-white/20",
+ !hasAnyElements && "opacity-50 cursor-not-allowed"
+ )}
+ onClick={hasAnyElements ? handleTimelineClick : undefined}
+ onMouseDown={hasAnyElements ? handleTimelineDrag : undefined}
+ style={{ userSelect: "none" }}
+ >
+ <div
+ className={cn(
+ "absolute top-0 left-0 h-full rounded-full bg-white",
+ !isDragging && "duration-100"
+ )}
+ style={{ width: `${progress}%` }}
+ />
+ <div
+ className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-sm bg-white border border-black/20"
+ style={{ left: `${progress}%` }}
+ />
+ </div>
+ </div>
+
+ <Button
+ variant="text"
+ size="icon"
+ className="!size-4 text-white/80 hover:text-white"
+ onClick={onToggleExpanded}
+ title="Exit fullscreen (Esc)"
+ >
+ <Expand className="!size-4" />
+ </Button>
</div>
);
}
-function PreviewToolbar({ hasAnyElements }: { hasAnyElements: boolean }) {
- const { isPlaying, toggle, currentTime } = usePlaybackStore();
+function FullscreenPreview({
+ previewDimensions,
+ activeProject,
+ renderBlurBackground,
+ activeElements,
+ renderElement,
+ blurBackgroundElements,
+ hasAnyElements,
+ toggleExpanded,
+ currentTime,
+ setCurrentTime,
+ toggle,
+ getTotalDuration,
+}: {
+ previewDimensions: { width: number; height: number };
+ activeProject: any;
+ renderBlurBackground: () => React.ReactNode;
+ activeElements: ActiveElement[];
+ renderElement: (elementData: ActiveElement, index: number) => React.ReactNode;
+ blurBackgroundElements: ActiveElement[];
+ hasAnyElements: boolean;
+ toggleExpanded: () => void;
+ currentTime: number;
+ setCurrentTime: (time: number) => void;
+ toggle: () => void;
+ getTotalDuration: () => number;
+}) {
+ return (
+ <div className="fixed inset-0 z-[9999] flex flex-col">
+ <div className="flex-1 flex items-center justify-center bg-background">
+ <div
+ className="relative overflow-hidden border border-border m-3"
+ style={{
+ width: previewDimensions.width,
+ height: previewDimensions.height,
+ backgroundColor:
+ activeProject?.backgroundType === "blur"
+ ? "#1a1a1a"
+ : activeProject?.backgroundColor || "#1a1a1a",
+ }}
+ >
+ {renderBlurBackground()}
+ {activeElements.length === 0 ? (
+ <div className="absolute inset-0 flex items-center justify-center text-white/60">
+ No elements at current time
+ </div>
+ ) : (
+ activeElements.map((elementData, index) =>
+ renderElement(elementData, index)
+ )
+ )}
+ {activeProject?.backgroundType === "blur" &&
+ blurBackgroundElements.length === 0 &&
+ activeElements.length > 0 && (
+ <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
+ Add a video or image to use blur background
+ </div>
+ )}
+ </div>
+ </div>
+ <div className="p-4 bg-black">
+ <FullscreenToolbar
+ hasAnyElements={hasAnyElements}
+ onToggleExpanded={toggleExpanded}
+ currentTime={currentTime}
+ setCurrentTime={setCurrentTime}
+ toggle={toggle}
+ getTotalDuration={getTotalDuration}
+ />
+ </div>
+ </div>
+ );
+}
+
+function PreviewToolbar({
+ hasAnyElements,
+ onToggleExpanded,
+ isExpanded,
+ currentTime,
+ setCurrentTime,
+ toggle,
+ getTotalDuration,
+}: {
+ hasAnyElements: boolean;
+ onToggleExpanded: () => void;
+ isExpanded: boolean;
+ currentTime: number;
+ setCurrentTime: (time: number) => void;
+ toggle: () => void;
+ getTotalDuration: () => number;
+}) {
+ const { isPlaying } = usePlaybackStore();
const { setCanvasSize, setCanvasSizeToOriginal } = useEditorStore();
- const { getTotalDuration } = useTimelineStore();
const { activeProject } = useProjectStore();
const {
currentPreset,
@@ -408,6 +708,21 @@ function PreviewToolbar({ hasAnyElements }: { hasAnyElements: boolean }) {
setCanvasSizeToOriginal(aspectRatio);
};
+ if (isExpanded) {
+ return (
+ <FullscreenToolbar
+ {...{
+ hasAnyElements,
+ onToggleExpanded,
+ currentTime,
+ setCurrentTime,
+ toggle,
+ getTotalDuration,
+ }}
+ />
+ );
+ }
+
return (
<div
data-toolbar
@@ -488,6 +803,8 @@ function PreviewToolbar({ hasAnyElements }: { hasAnyElements: boolean }) {
variant="text"
size="icon"
className="!size-4 text-muted-foreground"
+ onClick={onToggleExpanded}
+ title="Enter fullscreen"
>
<Expand className="!size-4" />
</Button>
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline/index.tsx
index 59e8a201..5316355d 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -1,7 +1,7 @@
"use client";
-import { ScrollArea } from "../ui/scroll-area";
-import { Button } from "../ui/button";
+import { ScrollArea } from "../../ui/scroll-area";
+import { Button } from "../../ui/button";
import {
Scissors,
ArrowLeftToLine,
@@ -17,19 +17,21 @@ import {
TypeIcon,
Magnet,
Link,
+ ZoomIn,
+ ZoomOut,
} from "lucide-react";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
TooltipProvider,
-} from "../ui/tooltip";
+} from "../../ui/tooltip";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
-} from "../ui/context-menu";
+} from "../../ui/context-menu";
import { useTimelineStore } from "@/stores/timeline-store";
import { useMediaStore } from "@/stores/media-store";
import { usePlaybackStore } from "@/stores/playback-store";
@@ -43,9 +45,9 @@ import {
TimelinePlayhead,
useTimelinePlayheadRuler,
} from "./timeline-playhead";
-import { SelectionBox } from "./selection-box";
+import { SelectionBox } from "../selection-box";
import { useSelectionBox } from "@/hooks/use-selection-box";
-import { SnapIndicator } from "./snap-indicator";
+import { SnapIndicator } from "../snap-indicator";
import { SnapPoint } from "@/hooks/use-timeline-snapping";
import type { DragData, TimelineTrack } from "@/types/timeline";
import {
@@ -55,6 +57,7 @@ import {
TIMELINE_CONSTANTS,
snapTimeToFrame,
} from "@/constants/timeline-constants";
+import { Slider } from "@/components/ui/slider";
export function Timeline() {
// Timeline shows all tracks (video, audio, effects) and their elements.
@@ -63,23 +66,11 @@ export function Timeline() {
const {
tracks,
- addTrack,
- addElementToTrack,
- removeElementFromTrack,
- removeElementFromTrackWithRipple,
getTotalDuration,
- selectedElements,
clearSelectedElements,
+ snappingEnabled,
setSelectedElements,
- splitElement,
- splitAndKeepLeft,
- splitAndKeepRight,
toggleTrackMute,
- separateAudio,
- snappingEnabled,
- toggleSnapping,
- rippleEditingEnabled,
- toggleRippleEditing,
dragState,
} = useTimelineStore();
const { mediaItems, addMediaItem } = useMediaStore();
@@ -429,139 +420,6 @@ export function Timeline() {
onDrop: handleDrop,
};
- // Action handlers for toolbar
- const handleSplitSelected = () => {
- if (selectedElements.length === 0) {
- return;
- }
- let splitCount = 0;
- selectedElements.forEach(({ trackId, elementId }) => {
- const track = tracks.find((t) => t.id === trackId);
- const element = track?.elements.find((c) => c.id === elementId);
- if (element && track) {
- const effectiveStart = element.startTime;
- const effectiveEnd =
- element.startTime +
- (element.duration - element.trimStart - element.trimEnd);
-
- if (currentTime > effectiveStart && currentTime < effectiveEnd) {
- const newElementId = splitElement(trackId, elementId, currentTime);
- if (newElementId) splitCount++;
- }
- }
- });
- if (splitCount === 0) {
- toast.error("Playhead must be within selected elements to split");
- }
- };
-
- const handleDuplicateSelected = () => {
- if (selectedElements.length === 0) {
- return;
- }
- const canDuplicate = selectedElements.length === 1;
- if (!canDuplicate) return;
-
- const newSelections: { trackId: string; elementId: string }[] = [];
-
- selectedElements.forEach(({ trackId, elementId }) => {
- const track = tracks.find((t) => t.id === trackId);
- const element = track?.elements.find((el) => el.id === elementId);
-
- if (element) {
- const newStartTime =
- element.startTime +
- (element.duration - element.trimStart - element.trimEnd) +
- 0.1;
-
- // Create element without id (will be generated by store)
- const { id, ...elementWithoutId } = element;
-
- addElementToTrack(trackId, {
- ...elementWithoutId,
- startTime: newStartTime,
- });
-
- // We can't predict the new id, so just clear selection for now
- // TODO: addElementToTrack could return the new element id
- }
- });
-
- clearSelectedElements();
- };
-
- const handleFreezeSelected = () => {
- toast.info("Freeze frame functionality coming soon!");
- };
-
- const handleSplitAndKeepLeft = () => {
- if (selectedElements.length !== 1) {
- toast.error("Select exactly one element");
- return;
- }
- const { trackId, elementId } = selectedElements[0];
- const track = tracks.find((t) => t.id === trackId);
- const element = track?.elements.find((c) => c.id === elementId);
- if (!element) return;
- 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 selected element");
- return;
- }
- splitAndKeepLeft(trackId, elementId, currentTime);
- };
-
- const handleSplitAndKeepRight = () => {
- if (selectedElements.length !== 1) {
- toast.error("Select exactly one element");
- return;
- }
- const { trackId, elementId } = selectedElements[0];
- const track = tracks.find((t) => t.id === trackId);
- const element = track?.elements.find((c) => c.id === elementId);
- if (!element) return;
- 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 selected element");
- return;
- }
- splitAndKeepRight(trackId, elementId, currentTime);
- };
-
- const handleSeparateAudio = () => {
- if (selectedElements.length !== 1) {
- toast.error("Select exactly one media element to separate audio");
- return;
- }
- const { trackId, elementId } = selectedElements[0];
- const track = tracks.find((t) => t.id === trackId);
- if (!track || track.type !== "media") {
- toast.error("Select a media element to separate audio");
- return;
- }
- separateAudio(trackId, elementId);
- };
-
- const handleDeleteSelected = () => {
- if (selectedElements.length === 0) {
- return;
- }
- selectedElements.forEach(({ trackId, elementId }) => {
- if (rippleEditingEnabled) {
- removeElementFromTrackWithRipple(trackId, elementId);
- } else {
- removeElementFromTrack(trackId, elementId);
- }
- });
- clearSelectedElements();
- };
-
// --- Scroll synchronization effect ---
useEffect(() => {
const rulerViewport = rulerScrollRef.current?.querySelector(
@@ -648,192 +506,7 @@ export function Timeline() {
onMouseEnter={() => setIsInTimeline(true)}
onMouseLeave={() => setIsInTimeline(false)}
>
- {/* Toolbar */}
- <div className="border-b flex items-center justify-between px-2 py-1">
- <div className="flex items-center gap-1 w-full">
- <TooltipProvider delayDuration={500}>
- {/* Play/Pause Button */}
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- variant="text"
- size="icon"
- onClick={toggle}
- className="mr-2"
- >
- {isPlaying ? (
- <Pause className="h-4 w-4" />
- ) : (
- <Play className="h-4 w-4" />
- )}
- </Button>
- </TooltipTrigger>
- <TooltipContent>
- {isPlaying ? "Pause (Space)" : "Play (Space)"}
- </TooltipContent>
- </Tooltip>
- <div className="w-px h-6 bg-border mx-1" />
- {/* Time Display */}
- <div
- className="text-xs text-muted-foreground font-mono px-2"
- style={{ minWidth: "18ch", textAlign: "center" }}
- >
- {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
- </div>
- {/* Test Clip Button - for debugging */}
- {tracks.length === 0 && (
- <>
- <div className="w-px h-6 bg-border mx-1" />
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- variant="outline"
- size="sm"
- onClick={() => {
- const trackId = addTrack("media");
- addElementToTrack(trackId, {
- type: "media",
- mediaId: "test",
- name: "Test Clip",
- duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
- startTime: 0,
- trimStart: 0,
- trimEnd: 0,
- });
- }}
- className="text-xs"
- >
- Add Test Clip
- </Button>
- </TooltipTrigger>
- <TooltipContent>
- Add a test clip to try playback
- </TooltipContent>
- </Tooltip>
- </>
- )}
- <div className="w-px h-6 bg-border mx-1" />
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- variant="text"
- size="icon"
- onClick={handleSplitSelected}
- >
- <Scissors className="h-4 w-4" />
- </Button>
- </TooltipTrigger>
- <TooltipContent>Split element (Ctrl+S)</TooltipContent>
- </Tooltip>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- variant="text"
- size="icon"
- onClick={handleSplitAndKeepLeft}
- >
- <ArrowLeftToLine className="h-4 w-4" />
- </Button>
- </TooltipTrigger>
- <TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent>
- </Tooltip>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- variant="text"
- size="icon"
- onClick={handleSplitAndKeepRight}
- >
- <ArrowRightToLine className="h-4 w-4" />
- </Button>
- </TooltipTrigger>
- <TooltipContent>Split and keep right (Ctrl+W)</TooltipContent>
- </Tooltip>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- variant="text"
- size="icon"
- onClick={handleSeparateAudio}
- >
- <SplitSquareHorizontal className="h-4 w-4" />
- </Button>
- </TooltipTrigger>
- <TooltipContent>Separate audio (Ctrl+D)</TooltipContent>
- </Tooltip>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- variant="text"
- size="icon"
- onClick={handleDuplicateSelected}
- >
- <Copy className="h-4 w-4" />
- </Button>
- </TooltipTrigger>
- <TooltipContent>Duplicate element (Ctrl+D)</TooltipContent>
- </Tooltip>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- variant="text"
- size="icon"
- onClick={handleFreezeSelected}
- >
- <Snowflake className="h-4 w-4" />
- </Button>
- </TooltipTrigger>
- <TooltipContent>Freeze frame (F)</TooltipContent>
- </Tooltip>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- variant="text"
- size="icon"
- onClick={handleDeleteSelected}
- >
- <Trash2 className="h-4 w-4" />
- </Button>
- </TooltipTrigger>
- <TooltipContent>Delete element (Delete)</TooltipContent>
- </Tooltip>
- </TooltipProvider>
- </div>
- <div className="flex items-center gap-1">
- <TooltipProvider delayDuration={500}>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button variant="text" size="icon" onClick={toggleSnapping}>
- {snappingEnabled ? (
- <Magnet className="h-4 w-4 text-primary" />
- ) : (
- <Magnet className="h-4 w-4" />
- )}
- </Button>
- </TooltipTrigger>
- <TooltipContent>Auto snapping</TooltipContent>
- </Tooltip>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- variant="text"
- size="icon"
- onClick={toggleRippleEditing}
- >
- <Link
- className={`h-4 w-4 ${rippleEditingEnabled ? "text-primary" : ""}`}
- />
- </Button>
- </TooltipTrigger>
- <TooltipContent>
- {rippleEditingEnabled
- ? "Disable Ripple Editing"
- : "Enable Ripple Editing"}
- </TooltipContent>
- </Tooltip>
- </TooltipProvider>
- </div>
- </div>
+ <TimelineToolbar zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
{/* Timeline Container */}
<div
@@ -877,7 +550,13 @@ export function Timeline() {
{/* Timeline Ruler */}
<div
className="flex-1 relative overflow-hidden h-4"
- onWheel={handleWheel}
+ onWheel={(e) => {
+ // Check if this is horizontal scrolling - if so, don't handle it here
+ if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+ return; // Let ScrollArea handle horizontal scrolling
+ }
+ handleWheel(e);
+ }}
onMouseDown={handleSelectionMouseDown}
onClick={handleTimelineContentClick}
data-ruler-area
@@ -996,7 +675,13 @@ export function Timeline() {
{/* Timeline Tracks Content */}
<div
className="flex-1 relative overflow-hidden"
- onWheel={handleWheel}
+ onWheel={(e) => {
+ // Check if this is horizontal scrolling - if so, don't handle it here
+ if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+ return; // Let ScrollArea handle horizontal scrolling
+ }
+ handleWheel(e);
+ }}
onMouseDown={(e) => {
handleTimelineMouseDown(e);
handleSelectionMouseDown(e);
@@ -1010,7 +695,12 @@ export function Timeline() {
containerRef={tracksContainerRef}
isActive={selectionBox?.isActive || false}
/>
- <ScrollArea className="w-full h-full" ref={tracksScrollRef}>
+ <ScrollArea
+ className="w-full h-full"
+ ref={tracksScrollRef}
+ type="scroll"
+ showHorizontalScrollbar
+ >
<div
className="relative flex-1"
style={{
@@ -1087,3 +777,340 @@ function TrackIcon({ track }: { track: TimelineTrack }) {
</>
);
}
+
+function TimelineToolbar({
+ zoomLevel,
+ setZoomLevel,
+}: {
+ zoomLevel: number;
+ setZoomLevel: (zoom: number) => void;
+}) {
+ const {
+ tracks,
+ addTrack,
+ addElementToTrack,
+ removeElementFromTrack,
+ removeElementFromTrackWithRipple,
+ selectedElements,
+ clearSelectedElements,
+ splitElement,
+ splitAndKeepLeft,
+ splitAndKeepRight,
+ separateAudio,
+ snappingEnabled,
+ toggleSnapping,
+ rippleEditingEnabled,
+ toggleRippleEditing,
+ } = useTimelineStore();
+ const { currentTime, duration, isPlaying, toggle } = usePlaybackStore();
+
+ // Action handlers
+ const handleSplitSelected = () => {
+ if (selectedElements.length === 0) return;
+ let splitCount = 0;
+ selectedElements.forEach(({ trackId, elementId }) => {
+ const track = tracks.find((t) => t.id === trackId);
+ const element = track?.elements.find((c) => c.id === elementId);
+ if (element && track) {
+ const effectiveStart = element.startTime;
+ const effectiveEnd =
+ element.startTime +
+ (element.duration - element.trimStart - element.trimEnd);
+ if (currentTime > effectiveStart && currentTime < effectiveEnd) {
+ const newElementId = splitElement(trackId, elementId, currentTime);
+ if (newElementId) splitCount++;
+ }
+ }
+ });
+ if (splitCount === 0) {
+ toast.error("Playhead must be within selected elements to split");
+ }
+ };
+
+ const handleDuplicateSelected = () => {
+ if (selectedElements.length === 0) return;
+ const canDuplicate = selectedElements.length === 1;
+ if (!canDuplicate) return;
+
+ selectedElements.forEach(({ trackId, elementId }) => {
+ const track = tracks.find((t) => t.id === trackId);
+ const element = track?.elements.find((el) => el.id === elementId);
+ if (element) {
+ const newStartTime =
+ element.startTime +
+ (element.duration - element.trimStart - element.trimEnd) +
+ 0.1;
+ const { id, ...elementWithoutId } = element;
+ addElementToTrack(trackId, {
+ ...elementWithoutId,
+ startTime: newStartTime,
+ });
+ }
+ });
+ clearSelectedElements();
+ };
+
+ const handleFreezeSelected = () => {
+ toast.info("Freeze frame functionality coming soon!");
+ };
+
+ const handleSplitAndKeepLeft = () => {
+ if (selectedElements.length !== 1) {
+ toast.error("Select exactly one element");
+ return;
+ }
+ const { trackId, elementId } = selectedElements[0];
+ const track = tracks.find((t) => t.id === trackId);
+ const element = track?.elements.find((c) => c.id === elementId);
+ if (!element) return;
+ 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 selected element");
+ return;
+ }
+ splitAndKeepLeft(trackId, elementId, currentTime);
+ };
+
+ const handleSplitAndKeepRight = () => {
+ if (selectedElements.length !== 1) {
+ toast.error("Select exactly one element");
+ return;
+ }
+ const { trackId, elementId } = selectedElements[0];
+ const track = tracks.find((t) => t.id === trackId);
+ const element = track?.elements.find((c) => c.id === elementId);
+ if (!element) return;
+ 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 selected element");
+ return;
+ }
+ splitAndKeepRight(trackId, elementId, currentTime);
+ };
+
+ const handleSeparateAudio = () => {
+ if (selectedElements.length !== 1) {
+ toast.error("Select exactly one media element to separate audio");
+ return;
+ }
+ const { trackId, elementId } = selectedElements[0];
+ const track = tracks.find((t) => t.id === trackId);
+ if (!track || track.type !== "media") {
+ toast.error("Select a media element to separate audio");
+ return;
+ }
+ separateAudio(trackId, elementId);
+ };
+
+ const handleDeleteSelected = () => {
+ if (selectedElements.length === 0) return;
+ selectedElements.forEach(({ trackId, elementId }) => {
+ if (rippleEditingEnabled) {
+ removeElementFromTrackWithRipple(trackId, elementId);
+ } else {
+ removeElementFromTrack(trackId, elementId);
+ }
+ });
+ clearSelectedElements();
+ };
+
+ // Zoom handlers
+ const handleZoomIn = () => {
+ setZoomLevel(Math.min(4, zoomLevel + 0.25));
+ };
+
+ const handleZoomOut = () => {
+ setZoomLevel(Math.max(0.25, zoomLevel - 0.25));
+ };
+
+ const handleZoomSliderChange = (values: number[]) => {
+ setZoomLevel(values[0]);
+ };
+ return (
+ <div className="border-b flex items-center justify-between px-2 py-1">
+ <div className="flex items-center gap-1 w-full">
+ <TooltipProvider delayDuration={500}>
+ {/* Play/Pause Button */}
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ variant="text"
+ size="icon"
+ onClick={toggle}
+ className="mr-2"
+ >
+ {isPlaying ? (
+ <Pause className="h-4 w-4" />
+ ) : (
+ <Play className="h-4 w-4" />
+ )}
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>
+ {isPlaying ? "Pause (Space)" : "Play (Space)"}
+ </TooltipContent>
+ </Tooltip>
+ <div className="w-px h-6 bg-border mx-1" />
+ {/* Time Display */}
+ <div
+ className="text-xs text-muted-foreground font-mono px-2"
+ style={{ minWidth: "18ch", textAlign: "center" }}
+ >
+ {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
+ </div>
+ {/* Test Clip Button - for debugging */}
+ {tracks.length === 0 && (
+ <>
+ <div className="w-px h-6 bg-border mx-1" />
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ variant="outline"
+ size="sm"
+ onClick={() => {
+ const trackId = addTrack("media");
+ addElementToTrack(trackId, {
+ type: "media",
+ mediaId: "test",
+ name: "Test Clip",
+ duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
+ startTime: 0,
+ trimStart: 0,
+ trimEnd: 0,
+ });
+ }}
+ className="text-xs"
+ >
+ Add Test Clip
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Add a test clip to try playback</TooltipContent>
+ </Tooltip>
+ </>
+ )}
+ <div className="w-px h-6 bg-border mx-1" />
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button variant="text" size="icon" onClick={handleSplitSelected}>
+ <Scissors className="h-4 w-4" />
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Split element (Ctrl+S)</TooltipContent>
+ </Tooltip>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ variant="text"
+ size="icon"
+ onClick={handleSplitAndKeepLeft}
+ >
+ <ArrowLeftToLine className="h-4 w-4" />
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent>
+ </Tooltip>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ variant="text"
+ size="icon"
+ onClick={handleSplitAndKeepRight}
+ >
+ <ArrowRightToLine className="h-4 w-4" />
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Split and keep right (Ctrl+W)</TooltipContent>
+ </Tooltip>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button variant="text" size="icon" onClick={handleSeparateAudio}>
+ <SplitSquareHorizontal className="h-4 w-4" />
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Separate audio (Ctrl+D)</TooltipContent>
+ </Tooltip>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ variant="text"
+ size="icon"
+ onClick={handleDuplicateSelected}
+ >
+ <Copy className="h-4 w-4" />
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Duplicate element (Ctrl+D)</TooltipContent>
+ </Tooltip>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button variant="text" size="icon" onClick={handleFreezeSelected}>
+ <Snowflake className="h-4 w-4" />
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Freeze frame (F)</TooltipContent>
+ </Tooltip>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button variant="text" size="icon" onClick={handleDeleteSelected}>
+ <Trash2 className="h-4 w-4" />
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Delete element (Delete)</TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ </div>
+ <div className="flex items-center gap-1">
+ <TooltipProvider delayDuration={500}>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button variant="text" size="icon" onClick={toggleSnapping}>
+ {snappingEnabled ? (
+ <LockOpen className="h-4 w-4 text-primary" />
+ ) : (
+ <Lock className="h-4 w-4" />
+ )}
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>Auto snapping</TooltipContent>
+ </Tooltip>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button variant="text" size="icon" onClick={toggleRippleEditing}>
+ <Link
+ className={`h-4 w-4 ${rippleEditingEnabled ? "text-primary" : ""}`}
+ />
+ </Button>
+ </TooltipTrigger>
+ <TooltipContent>
+ {rippleEditingEnabled
+ ? "Disable Ripple Editing"
+ : "Enable Ripple Editing"}
+ </TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ <div className="flex items-center gap-1">
+ <Button variant="text" size="icon" onClick={handleZoomOut}>
+ <ZoomOut className="h-4 w-4" />
+ </Button>
+ <Slider
+ className="w-24"
+ value={[zoomLevel]}
+ onValueChange={handleZoomSliderChange}
+ min={0.25}
+ max={4}
+ step={0.25}
+ />
+ <Button variant="text" size="icon" onClick={handleZoomIn}>
+ <ZoomIn className="h-4 w-4" />
+ </Button>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx
index eb9f1c01..8aadde82 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-element.tsx
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
-import { Button } from "../ui/button";
+import { Button } from "../../ui/button";
import {
MoreVertical,
Scissors,
@@ -17,7 +17,7 @@ import {
import { useMediaStore } from "@/stores/media-store";
import { useTimelineStore } from "@/stores/timeline-store";
import { usePlaybackStore } from "@/stores/playback-store";
-import AudioWaveform from "./audio-waveform";
+import AudioWaveform from "../audio-waveform";
import { toast } from "sonner";
import { TimelineElementProps, TrackType } from "@/types/timeline";
import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize";
@@ -35,14 +35,14 @@ import {
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
-} from "../ui/dropdown-menu";
+} from "../../ui/dropdown-menu";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuTrigger,
-} from "../ui/context-menu";
+} from "../../ui/context-menu";
export function TimelineElement({
element,
@@ -239,15 +239,15 @@ export function TimelineElement({
if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
const trackHeight = getTrackHeight(track.type);
- const tileHeight = trackHeight - VIDEO_TILE_PADDING;
+ const tileHeight = trackHeight - 8; // Match image padding
const tileWidth = tileHeight * TILE_ASPECT_RATIO;
return (
- <div className="w-full h-full flex items-center gap-2">
- <div className="flex-1 h-full relative overflow-hidden">
+ <div className="w-full h-full flex items-center justify-center">
+ <div className="bg-[#004D52] py-3 w-full h-full relative">
{/* Background with tiled thumbnails */}
<div
- className="absolute inset-0"
+ className="absolute top-3 bottom-3 left-0 right-0"
style={{
backgroundImage: mediaItem.thumbnailUrl
? `url(${mediaItem.thumbnailUrl})`
@@ -261,7 +261,7 @@ export function TimelineElement({
/>
{/* Overlay with vertical borders */}
<div
- className="absolute inset-0 pointer-events-none"
+ className="absolute top-3 bottom-3 left-0 right-0 pointer-events-none"
style={{
backgroundImage: `repeating-linear-gradient(
to right,
@@ -274,15 +274,6 @@ export function TimelineElement({
}}
/>
</div>
- {elementWidth > tileWidth * OVERLAY_SPACE_MULTIPLIER ? (
- <div className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/70 text-white text-xs px-2 py-1 rounded pointer-events-none max-w-[40%] truncate">
- {element.name}
- </div>
- ) : (
- <span className="text-xs text-foreground/80 truncate flex-shrink-0 max-w-[120px]">
- {element.name}
- </span>
- )}
</div>
);
}
diff --git a/apps/web/src/components/editor/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
index 7a357067..7a357067 100644
--- a/apps/web/src/components/editor/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
diff --git a/apps/web/src/components/editor/timeline-track.tsx b/apps/web/src/components/editor/timeline/timeline-track.tsx
index 82ca0b98..82ca0b98 100644
--- a/apps/web/src/components/editor/timeline-track.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-track.tsx
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index c609aab2..dba958ac 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -70,7 +70,7 @@ export function Hero() {
size="lg"
className="px-6 h-11 text-base bg-foreground"
>
- Try early alpha
+ Try early beta
<ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
</Button>
</Link>
diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/onboarding.tsx
index 87cd0115..80b5f99c 100644
--- a/apps/web/src/components/onboarding.tsx
+++ b/apps/web/src/components/onboarding.tsx
@@ -32,7 +32,7 @@ export function Onboarding() {
return (
<div className="space-y-5">
<div className="space-y-3">
- <Title title="Welcome to OpenCut alpha! 🎉" />
+ <Title title="Welcome to OpenCut Beta! 🎉" />
<Description description="You're among the first to try OpenCut - the fully open source CapCut alternative." />
</div>
<NextButton onClick={handleNext}>Next</NextButton>
@@ -42,7 +42,7 @@ export function Onboarding() {
return (
<div className="space-y-5">
<div className="space-y-3">
- <Title title="⚠️ This is a super early alpha!" />
+ <Title title="⚠️ This is a super early beta!" />
<Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." />
<Description description="If you're curious, check out our roadmap [here](https://opencut.app/roadmap)" />
</div>
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index 6b7c3c53..5c9db727 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -7,17 +7,22 @@ import { cn } from "../../lib/utils";
const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
- React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+ React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+ type?: "auto" | "always" | "scroll" | "hover";
+ showHorizontalScrollbar?: boolean;
+ }
+>(({ className, children, type, showHorizontalScrollbar, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
+ type={type}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
+ {showHorizontalScrollbar && <ScrollBar orientation="horizontal" />}
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
));
diff --git a/apps/web/src/constants/timeline-constants.ts b/apps/web/src/constants/timeline-constants.ts
index 8c76a2e8..5d446d50 100644
--- a/apps/web/src/constants/timeline-constants.ts
+++ b/apps/web/src/constants/timeline-constants.ts
@@ -80,11 +80,11 @@ export const TIMELINE_CONSTANTS = {
// FPS presets for project settings
export const FPS_PRESETS = [
- { value: "24", label: "24 fps (Film)" },
- { value: "25", label: "25 fps (PAL)" },
- { value: "30", label: "30 fps (NTSC)" },
- { value: "60", label: "60 fps (High)" },
- { value: "120", label: "120 fps (Slow-mo)" },
+ { value: "24", label: "24 fps" },
+ { value: "25", label: "25 fps" },
+ { value: "30", label: "30 fps" },
+ { value: "60", label: "60 fps" },
+ { value: "120", label: "120 fps" },
] as const;
// Frame snapping utilities
diff --git a/apps/web/src/hooks/use-timeline-zoom.ts b/apps/web/src/hooks/use-timeline-zoom.ts
index ce32c9f0..4f5e0af0 100644
--- a/apps/web/src/hooks/use-timeline-zoom.ts
+++ b/apps/web/src/hooks/use-timeline-zoom.ts
@@ -24,6 +24,12 @@ export function useTimelineZoom({
const delta = e.deltaY > 0 ? -0.15 : 0.15;
setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta)));
}
+ // For horizontal scrolling (when shift is held or horizontal wheel movement),
+ // let the event bubble up to allow ScrollArea to handle it
+ else if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+ // Don't prevent default - let ScrollArea handle horizontal scrolling
+ return;
+ }
// Otherwise, allow normal scrolling
}, []);
diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 01ad1635..20e80253 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -1317,8 +1317,9 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
findOrCreateTrack: (trackType) => {
// Always create new text track to allow multiple text elements
+ // Insert text tracks at the top
if (trackType === "text") {
- return get().addTrack(trackType);
+ return get().insertTrackAt(trackType, 0);
}
const existingTrack = get()._tracks.find((t) => t.type === trackType);
@@ -1356,7 +1357,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
},
addTextAtTime: (item, currentTime = 0) => {
- const targetTrackId = get().addTrack("text"); // Always create new text track to allow multiple text elements
+ const targetTrackId = get().insertTrackAt("text", 0); // Always create new text track at the top
get().addElementToTrack(targetTrackId, {
type: "text",
@@ -1399,7 +1400,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
},
addTextToNewTrack: (item) => {
- const targetTrackId = get().addTrack("text"); // Always create new text track to allow multiple text elements
+ const targetTrackId = get().insertTrackAt("text", 0); // Always create new text track at the top
get().addElementToTrack(targetTrackId, {
type: "text",
diff --git a/apps/web/src/types/timeline.ts b/apps/web/src/types/timeline.ts
index 17dbb5d1..f8a79d03 100644
--- a/apps/web/src/types/timeline.ts
+++ b/apps/web/src/types/timeline.ts
@@ -89,13 +89,19 @@ export interface TimelineTrack {
export function sortTracksByOrder(tracks: TimelineTrack[]): TimelineTrack[] {
return [...tracks].sort((a, b) => {
+ // Text tracks always go to the top
+ if (a.type === "text" && b.type !== "text") return -1;
+ if (b.type === "text" && a.type !== "text") return 1;
+
// Audio tracks always go to bottom
if (a.type === "audio" && b.type !== "audio") return 1;
if (b.type === "audio" && a.type !== "audio") return -1;
- // Main track goes above audio but below other tracks
- if (a.isMain && !b.isMain && b.type !== "audio") return 1;
- if (b.isMain && !a.isMain && a.type !== "audio") return -1;
+ // Main track goes above audio but below text tracks
+ if (a.isMain && !b.isMain && b.type !== "audio" && b.type !== "text")
+ return 1;
+ if (b.isMain && !a.isMain && a.type !== "audio" && a.type !== "text")
+ return -1;
// Within same category, maintain creation order
return 0;
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 09:00:13 +0000