xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: move to a typed-tracks system and add support for text

Browse Source
This commit is contained in:
Maze Winther
2025-07-06 20:45:29 +02:00
parent 0e32c732dd
commit 40c7fbb4f8
20 changed files with 1799 additions and 1469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/contributors/page.tsx
View File

@ -47,7 +47,7 @@ async function getContributors(): Promise<Contributor[]> {
return []; return [];
} }
const contributors = await response.json(); const contributors = (await response.json()) as Contributor[];
const filteredContributors = contributors.filter( const filteredContributors = contributors.filter(
(contributor: Contributor) => contributor.type === "User" (contributor: Contributor) => contributor.type === "User"

56
apps/web/src/components/development-debug.tsx
View File

@ -1,20 +1,17 @@
"use client"; "use client";
import { import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";
useTimelineStore,
type TimelineClip,
type TimelineTrack,
} from "@/stores/timeline-store";
import { useMediaStore, type MediaItem } from "@/stores/media-store"; import { useMediaStore, type MediaItem } from "@/stores/media-store";
import { usePlaybackStore } from "@/stores/playback-store"; import { usePlaybackStore } from "@/stores/playback-store";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useState } from "react"; import { useState } from "react";
import type { TimelineElement } from "@/types/timeline";
// Only show in development // Only show in development
const SHOW_DEBUG_INFO = process.env.NODE_ENV === "development"; const SHOW_DEBUG_INFO = process.env.NODE_ENV === "development";
interface ActiveClip { interface ActiveElement {
clip: TimelineClip; element: TimelineElement;
track: TimelineTrack; track: TimelineTrack;
mediaItem: MediaItem | null; mediaItem: MediaItem | null;
} }
@ -28,31 +25,32 @@ export function DevelopmentDebug() {
// Don't render anything in production // Don't render anything in production
if (!SHOW_DEBUG_INFO) return null; if (!SHOW_DEBUG_INFO) return null;
// Get active clips at current time // Get active elements at current time
const getActiveClips = (): ActiveClip[] => { const getActiveElements = (): ActiveElement[] => {
const activeClips: ActiveClip[] = []; const activeElements: ActiveElement[] = [];
tracks.forEach((track) => { tracks.forEach((track) => {
track.clips.forEach((clip) => { track.elements.forEach((element) => {
const clipStart = clip.startTime; const elementStart = element.startTime;
const clipEnd = const elementEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (currentTime >= clipStart && currentTime < clipEnd) { if (currentTime >= elementStart && currentTime < elementEnd) {
const mediaItem = const mediaItem =
clip.mediaId === "test" element.type === "media"
? null // Test clips don't have a real media item ? mediaItems.find((item) => item.id === element.mediaId) || null
: mediaItems.find((item) => item.id === clip.mediaId) || null; : null; // Text elements don't have media items
activeClips.push({ clip, track, mediaItem }); activeElements.push({ element, track, mediaItem });
} }
}); });
}); });
return activeClips; return activeElements;
}; };
const activeClips = getActiveClips(); const activeElements = getActiveElements();
return ( return (
<div className="fixed bottom-4 right-4 z-50"> <div className="fixed bottom-4 right-4 z-50">
@ -71,28 +69,30 @@ export function DevelopmentDebug() {
{showDebug && ( {showDebug && (
<div className="backdrop-blur-md bg-background/90 border border-border/50 rounded-lg p-3 max-w-sm"> <div className="backdrop-blur-md bg-background/90 border border-border/50 rounded-lg p-3 max-w-sm">
<div className="text-xs font-medium mb-2 text-foreground"> <div className="text-xs font-medium mb-2 text-foreground">
Active Clips ({activeClips.length}) Active Elements ({activeElements.length})
</div> </div>
<div className="space-y-1 max-h-40 overflow-y-auto"> <div className="space-y-1 max-h-40 overflow-y-auto">
{activeClips.map((clipData, index) => ( {activeElements.map((elementData, index) => (
<div <div
key={clipData.clip.id} key={elementData.element.id}
className="flex items-center gap-2 px-2 py-1 bg-muted/60 rounded text-xs" className="flex items-center gap-2 px-2 py-1 bg-muted/60 rounded text-xs"
> >
<span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4 flex-shrink-0"> <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4 flex-shrink-0">
{index + 1} {index + 1}
</span> </span>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="truncate">{clipData.clip.name}</div> <div className="truncate">{elementData.element.name}</div>
<div className="text-muted-foreground text-[10px]"> <div className="text-muted-foreground text-[10px]">
{clipData.mediaItem?.type || "test"} {elementData.element.type === "media"
? elementData.mediaItem?.type || "media"
: "text"}
</div> </div>
</div> </div>
</div> </div>
))} ))}
{activeClips.length === 0 && ( {activeElements.length === 0 && (
<div className="text-muted-foreground text-xs py-2 text-center"> <div className="text-muted-foreground text-xs py-2 text-center">
No active clips No active elements
</div> </div>
)} )}
</div> </div>

16
apps/web/src/components/editor/media-panel/views/media.tsx
View File

@ -73,18 +73,22 @@ export function MediaView() {
// Remove a media item from the store // Remove a media item from the store
e.stopPropagation(); e.stopPropagation();
// Remove tracks automatically when delete media // Remove elements automatically when delete media
const { tracks, removeTrack } = useTimelineStore.getState(); const { tracks, removeTrack } = useTimelineStore.getState();
tracks.forEach((track) => { tracks.forEach((track) => {
const clipsToRemove = track.clips.filter((clip) => clip.mediaId === id); const elementsToRemove = track.elements.filter(
clipsToRemove.forEach((clip) => { (element) => element.type === "media" && element.mediaId === id
useTimelineStore.getState().removeClipFromTrack(track.id, clip.id); );
elementsToRemove.forEach((element) => {
useTimelineStore
.getState()
.removeElementFromTrack(track.id, element.id);
}); });
// Only remove track if it becomes empty and has no other clips // Only remove track if it becomes empty and has no other elements
const updatedTrack = useTimelineStore const updatedTrack = useTimelineStore
.getState() .getState()
.tracks.find((t) => t.id === track.id); .tracks.find((t) => t.id === track.id);
if (updatedTrack && updatedTrack.clips.length === 0) { if (updatedTrack && updatedTrack.elements.length === 0) {
removeTrack(track.id); removeTrack(track.id);
} }
}); });

1
apps/web/src/components/editor/media-panel/views/text.tsx
View File

@ -17,7 +17,6 @@ export function TextView() {
content: "Default text", content: "Default text",
}} }}
aspectRatio={1} aspectRatio={1}
className="w-24"
showLabel={false} showLabel={false}
/> />
</div> </div>

226
apps/web/src/components/editor/preview-panel.tsx
View File

@ -2,9 +2,9 @@
import { import {
useTimelineStore, useTimelineStore,
type TimelineClip,
type TimelineTrack, type TimelineTrack,
} from "@/stores/timeline-store"; } from "@/stores/timeline-store";
import { TimelineElement } from "@/types/timeline";
import { import {
useMediaStore, useMediaStore,
type MediaItem, type MediaItem,
@ -21,13 +21,13 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
DropdownMenuSeparator, DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Play, Pause, Volume2, VolumeX, Plus, Square } from "lucide-react"; import { Play, Pause } from "lucide-react";
import { useState, useRef, useEffect } from "react"; import { useState, useRef, useEffect } from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { formatTimeCode } from "@/lib/time"; import { formatTimeCode } from "@/lib/time";
interface ActiveClip { interface ActiveElement {
clip: TimelineClip; element: TimelineElement;
track: TimelineTrack; track: TimelineTrack;
mediaItem: MediaItem | null; mediaItem: MediaItem | null;
} }
@ -35,8 +35,8 @@ interface ActiveClip {
export function PreviewPanel() { export function PreviewPanel() {
const { tracks } = useTimelineStore(); const { tracks } = useTimelineStore();
const { mediaItems } = useMediaStore(); const { mediaItems } = useMediaStore();
const { currentTime, muted, toggleMute, volume } = usePlaybackStore(); const { currentTime } = usePlaybackStore();
const { canvasSize, canvasPresets, setCanvasSize } = useEditorStore(); const { canvasSize } = useEditorStore();
const previewRef = useRef<HTMLDivElement>(null); const previewRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [previewDimensions, setPreviewDimensions] = useState({ const [previewDimensions, setPreviewDimensions] = useState({
@ -104,97 +104,139 @@ export function PreviewPanel() {
return () => resizeObserver.disconnect(); return () => resizeObserver.disconnect();
}, [canvasSize.width, canvasSize.height]); }, [canvasSize.width, canvasSize.height]);
// Get active clips at current time // Get active elements at current time
const getActiveClips = (): ActiveClip[] => { const getActiveElements = (): ActiveElement[] => {
const activeClips: ActiveClip[] = []; const activeElements: ActiveElement[] = [];
tracks.forEach((track) => { tracks.forEach((track) => {
track.clips.forEach((clip) => { track.elements.forEach((element) => {
const clipStart = clip.startTime; const elementStart = element.startTime;
const clipEnd = const elementEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime + (element.duration - element.trimStart - element.trimEnd);
if (currentTime >= clipStart && currentTime < clipEnd) { if (currentTime >= elementStart && currentTime < elementEnd) {
const mediaItem = let mediaItem = null;
clip.mediaId === "test"
? null // Test clips don't have a real media item
: mediaItems.find((item) => item.id === clip.mediaId) || null;
activeClips.push({ clip, track, mediaItem }); // 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
: mediaItems.find((item) => item.id === element.mediaId) || null;
}
activeElements.push({ element, track, mediaItem });
} }
}); });
}); });
return activeClips; return activeElements;
}; };
const activeClips = getActiveClips(); const activeElements = getActiveElements();
// Check if there are any clips in the timeline at all // Check if there are any elements in the timeline at all
const hasAnyClips = tracks.some((track) => track.clips.length > 0); const hasAnyElements = tracks.some((track) => track.elements.length > 0);
// Render a clip // Render an element
const renderClip = (clipData: ActiveClip, index: number) => { const renderElement = (elementData: ActiveElement, index: number) => {
const { clip, mediaItem } = clipData; const { element, mediaItem } = elementData;
// Test clips // Text elements
if (!mediaItem || clip.mediaId === "test") { if (element.type === "text") {
return ( return (
<div <div
key={clip.id} key={element.id}
className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center" className="absolute flex items-center justify-center"
style={{
left: `${50 + (element.x / canvasSize.width) * 100}%`,
top: `${50 + (element.y / canvasSize.height) * 100}%`,
transform: `translate(-50%, -50%) rotate(${element.rotation}deg)`,
opacity: element.opacity,
zIndex: 100 + index, // Text elements on top
}}
> >
<div className="text-center"> <div
<div className="text-2xl mb-2">🎬</div> style={{
<p className="text-xs text-white">{clip.name}</p> fontSize: `${element.fontSize}px`,
fontFamily: element.fontFamily,
color: element.color,
backgroundColor: element.backgroundColor,
textAlign: element.textAlign,
fontWeight: element.fontWeight,
fontStyle: element.fontStyle,
textDecoration: element.textDecoration,
padding: '4px 8px',
borderRadius: '2px',
whiteSpace: 'pre-wrap',
}}
>
{element.content}
</div> </div>
</div> </div>
); );
} }
// Video clips // Media elements
if (mediaItem.type === "video") { if (element.type === "media") {
return ( // Test elements
<div key={clip.id} className="absolute inset-0"> if (!mediaItem || element.mediaId === "test") {
<VideoPlayer return (
src={mediaItem.url} <div
poster={mediaItem.thumbnailUrl} key={element.id}
clipStartTime={clip.startTime} className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
trimStart={clip.trimStart} >
trimEnd={clip.trimEnd} <div className="text-center">
clipDuration={clip.duration} <div className="text-2xl mb-2">🎬</div>
/> <p className="text-xs text-white">{element.name}</p>
</div> </div>
);
}
// Image clips
if (mediaItem.type === "image") {
return (
<div key={clip.id} className="absolute inset-0">
<img
src={mediaItem.url}
alt={mediaItem.name}
className="w-full h-full object-cover"
draggable={false}
/>
</div>
);
}
// Audio clips (visual representation)
if (mediaItem.type === "audio") {
return (
<div
key={clip.id}
className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center"
>
<div className="text-center">
<div className="text-2xl mb-2">🎵</div>
<p className="text-xs text-white">{mediaItem.name}</p>
</div> </div>
</div> );
); }
// Video elements
if (mediaItem.type === "video") {
return (
<div key={element.id} className="absolute inset-0">
<VideoPlayer
src={mediaItem.url!}
poster={mediaItem.thumbnailUrl}
clipStartTime={element.startTime}
trimStart={element.trimStart}
trimEnd={element.trimEnd}
clipDuration={element.duration}
/>
</div>
);
}
// Image elements
if (mediaItem.type === "image") {
return (
<div key={element.id} className="absolute inset-0">
<img
src={mediaItem.url!}
alt={mediaItem.name}
className="w-full h-full object-cover"
draggable={false}
/>
</div>
);
}
// Audio elements (visual representation)
if (mediaItem.type === "audio") {
return (
<div
key={element.id}
className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center"
>
<div className="text-center">
<div className="text-2xl mb-2">🎵</div>
<p className="text-xs text-white">{mediaItem.name}</p>
</div>
</div>
);
}
} }
return null; return null;
@ -206,7 +248,7 @@ export function PreviewPanel() {
ref={containerRef} ref={containerRef}
className="flex-1 flex flex-col items-center justify-center p-3 min-h-0 min-w-0 gap-4" className="flex-1 flex flex-col items-center justify-center p-3 min-h-0 min-w-0 gap-4"
> >
{hasAnyClips ? ( {hasAnyElements ? (
<div <div
ref={previewRef} ref={previewRef}
className="relative overflow-hidden rounded-sm bg-black border" className="relative overflow-hidden rounded-sm bg-black border"
@ -215,12 +257,12 @@ export function PreviewPanel() {
height: previewDimensions.height, height: previewDimensions.height,
}} }}
> >
{activeClips.length === 0 ? ( {activeElements.length === 0 ? (
<div className="absolute inset-0 flex items-center justify-center text-muted-foreground"> <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
No clips at current time No elements at current time
</div> </div>
) : ( ) : (
activeClips.map((clipData, index) => renderClip(clipData, index)) activeElements.map((elementData, index) => renderElement(elementData, index))
)} )}
</div> </div>
) : ( ) : (
@ -230,13 +272,13 @@ export function PreviewPanel() {
</> </>
)} )}
<PreviewToolbar hasAnyClips={hasAnyClips} /> <PreviewToolbar hasAnyElements={hasAnyElements} />
</div> </div>
</div> </div>
); );
} }
function PreviewToolbar({ hasAnyClips }: { hasAnyClips: boolean }) { function PreviewToolbar({ hasAnyElements }: { hasAnyElements: boolean }) {
const { isPlaying, toggle, currentTime } = usePlaybackStore(); const { isPlaying, toggle, currentTime } = usePlaybackStore();
const { const {
canvasSize, canvasSize,
@ -261,13 +303,15 @@ function PreviewToolbar({ hasAnyClips }: { hasAnyClips: boolean }) {
const getOriginalAspectRatio = () => { const getOriginalAspectRatio = () => {
// Find first video or image in timeline // Find first video or image in timeline
for (const track of tracks) { for (const track of tracks) {
for (const clip of track.clips) { for (const element of track.elements) {
const mediaItem = mediaItems.find((item) => item.id === clip.mediaId); if (element.type === "media") {
if ( const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
mediaItem && if (
(mediaItem.type === "video" || mediaItem.type === "image") mediaItem &&
) { (mediaItem.type === "video" || mediaItem.type === "image")
return getMediaAspectRatio(mediaItem); ) {
return getMediaAspectRatio(mediaItem);
}
} }
} }
} }
@ -291,7 +335,7 @@ function PreviewToolbar({ hasAnyClips }: { hasAnyClips: boolean }) {
<p <p
className={cn( className={cn(
"text-xs text-muted-foreground tabular-nums", "text-xs text-muted-foreground tabular-nums",
!hasAnyClips && "opacity-50" !hasAnyElements && "opacity-50"
)} )}
> >
{formatTimeCode(currentTime, "HH:MM:SS:CS")}/ {formatTimeCode(currentTime, "HH:MM:SS:CS")}/
@ -302,7 +346,7 @@ function PreviewToolbar({ hasAnyClips }: { hasAnyClips: boolean }) {
variant="text" variant="text"
size="icon" size="icon"
onClick={toggle} onClick={toggle}
disabled={!hasAnyClips} disabled={!hasAnyElements}
> >
{isPlaying ? ( {isPlaying ? (
<Pause className="h-3 w-3" /> <Pause className="h-3 w-3" />
@ -316,7 +360,7 @@ function PreviewToolbar({ hasAnyClips }: { hasAnyClips: boolean }) {
<Button <Button
size="sm" size="sm"
className="!bg-background text-foreground/85 text-xs h-auto rounded-none border border-muted-foreground px-0.5 py-0 font-light" className="!bg-background text-foreground/85 text-xs h-auto rounded-none border border-muted-foreground px-0.5 py-0 font-light"
disabled={!hasAnyClips} disabled={!hasAnyElements}
> >
{currentPreset?.name || "Ratio"} {currentPreset?.name || "Ratio"}
</Button> </Button>

30
apps/web/src/components/editor/properties-panel.tsx
View File

@ -25,27 +25,29 @@ export function PropertiesPanel() {
const [backgroundType, setBackgroundType] = useState<BackgroundType>("blur"); const [backgroundType, setBackgroundType] = useState<BackgroundType>("blur");
const [backgroundColor, setBackgroundColor] = useState("#000000"); const [backgroundColor, setBackgroundColor] = useState("#000000");
// Get the first video clip for preview (simplified) // Get the first video element for preview (simplified)
const firstVideoClip = tracks const firstVideoElement = tracks
.flatMap((track) => track.clips) .flatMap((track) => track.elements)
.find((clip) => { .find((element) => {
const mediaItem = mediaItems.find((item) => item.id === clip.mediaId); if (element.type !== "media") return false;
const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
return mediaItem?.type === "video"; return mediaItem?.type === "video";
}); });
const firstVideoItem = firstVideoClip const firstVideoItem = firstVideoElement && firstVideoElement.type === "media"
? mediaItems.find((item) => item.id === firstVideoClip.mediaId) ? mediaItems.find((item) => item.id === firstVideoElement.mediaId)
: null; : null;
const firstImageClip = tracks const firstImageElement = tracks
.flatMap((track) => track.clips) .flatMap((track) => track.elements)
.find((clip) => { .find((element) => {
const mediaItem = mediaItems.find((item) => item.id === clip.mediaId); if (element.type !== "media") return false;
const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
return mediaItem?.type === "image"; return mediaItem?.type === "image";
}); });
const firstImageItem = firstImageClip const firstImageItem = firstImageElement && firstImageElement.type === "media"
? mediaItems.find((item) => item.id === firstImageClip.mediaId) ? mediaItems.find((item) => item.id === firstImageElement.mediaId)
: null; : null;
return ( return (
@ -62,7 +64,7 @@ export function PropertiesPanel() {
<Label>Preview</Label> <Label>Preview</Label>
<div className="w-full aspect-video max-w-48"> <div className="w-full aspect-video max-w-48">
<ImageTimelineTreatment <ImageTimelineTreatment
src={firstImageItem.url} src={firstImageItem.url!}
alt={firstImageItem.name} alt={firstImageItem.name}
targetAspectRatio={16 / 9} targetAspectRatio={16 / 9}
className="rounded-sm border" className="rounded-sm border"

213
apps/web/src/components/editor/timeline-clip.tsx → apps/web/src/components/editor/timeline-element.tsx
View File

@ -10,13 +10,14 @@ import {
Music, Music,
ChevronRight, ChevronRight,
ChevronLeft, ChevronLeft,
Type,
} from "lucide-react"; } from "lucide-react";
import { useMediaStore } from "@/stores/media-store"; import { useMediaStore } from "@/stores/media-store";
import { useTimelineStore } from "@/stores/timeline-store"; import { useTimelineStore } from "@/stores/timeline-store";
import { usePlaybackStore } from "@/stores/playback-store"; import { usePlaybackStore } from "@/stores/playback-store";
import AudioWaveform from "./audio-waveform"; import AudioWaveform from "./audio-waveform";
import { toast } from "sonner"; import { toast } from "sonner";
import { TimelineClipProps, ResizeState } from "@/types/timeline"; import { TimelineElementProps, ResizeState, TrackType } from "@/types/timeline";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -27,23 +28,21 @@ import {
DropdownMenuSubContent, DropdownMenuSubContent,
DropdownMenuSubTrigger, DropdownMenuSubTrigger,
} from "../ui/dropdown-menu"; } from "../ui/dropdown-menu";
import { isDragging } from "motion/react";
export function TimelineClip({ export function TimelineElement({
clip, element,
track, track,
zoomLevel, zoomLevel,
isSelected, isSelected,
onClipMouseDown, onElementMouseDown,
onClipClick, onElementClick,
}: TimelineClipProps) { }: TimelineElementProps) {
const { mediaItems } = useMediaStore(); const { mediaItems } = useMediaStore();
const { const {
updateClipTrim, updateElementTrim,
addClipToTrack, removeElementFromTrack,
removeClipFromTrack,
dragState, dragState,
splitClip, splitElement,
splitAndKeepLeft, splitAndKeepLeft,
splitAndKeepRight, splitAndKeepRight,
separateAudio, separateAudio,
@ -51,47 +50,48 @@ export function TimelineClip({
const { currentTime } = usePlaybackStore(); const { currentTime } = usePlaybackStore();
const [resizing, setResizing] = useState<ResizeState | null>(null); const [resizing, setResizing] = useState<ResizeState | null>(null);
const [clipMenuOpen, setClipMenuOpen] = useState(false); const [elementMenuOpen, setElementMenuOpen] = useState(false);
const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd; const effectiveDuration =
const clipWidth = Math.max(80, effectiveDuration * 50 * zoomLevel); element.duration - element.trimStart - element.trimEnd;
const elementWidth = Math.max(80, effectiveDuration * 50 * zoomLevel);
// Use real-time position during drag, otherwise use stored position // Use real-time position during drag, otherwise use stored position
const isBeingDragged = dragState.clipId === clip.id; const isBeingDragged = dragState.elementId === element.id;
const clipStartTime = const elementStartTime =
isBeingDragged && dragState.isDragging isBeingDragged && dragState.isDragging
? dragState.currentTime ? dragState.currentTime
: clip.startTime; : element.startTime;
const clipLeft = clipStartTime * 50 * zoomLevel; const elementLeft = elementStartTime * 50 * zoomLevel;
const getTrackColor = (type: string) => { const getTrackColor = (type: TrackType) => {
switch (type) { switch (type) {
case "video": case "media":
return "bg-blue-500/20 border-blue-500/30"; return "bg-blue-500/20 border-blue-500/30";
case "text":
return "bg-purple-500/20 border-purple-500/30";
case "audio": case "audio":
return "bg-green-500/20 border-green-500/30"; return "bg-green-500/20 border-green-500/30";
case "effects":
return "bg-purple-500/20 border-purple-500/30";
default: default:
return "bg-gray-500/20 border-gray-500/30"; return "bg-gray-500/20 border-gray-500/30";
} }
}; };
// Resize handles for trimming clips // Resize handles for trimming elements
const handleResizeStart = ( const handleResizeStart = (
e: React.MouseEvent, e: React.MouseEvent,
clipId: string, elementId: string,
side: "left" | "right" side: "left" | "right"
) => { ) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
setResizing({ setResizing({
clipId, elementId,
side, side,
startX: e.clientX, startX: e.clientX,
initialTrimStart: clip.trimStart, initialTrimStart: element.trimStart,
initialTrimEnd: clip.trimEnd, initialTrimEnd: element.trimEnd,
}); });
}; };
@ -105,20 +105,20 @@ export function TimelineClip({
const newTrimStart = Math.max( const newTrimStart = Math.max(
0, 0,
Math.min( Math.min(
clip.duration - clip.trimEnd - 0.1, element.duration - element.trimEnd - 0.1,
resizing.initialTrimStart + deltaTime resizing.initialTrimStart + deltaTime
) )
); );
updateClipTrim(track.id, clip.id, newTrimStart, clip.trimEnd); updateElementTrim(track.id, element.id, newTrimStart, element.trimEnd);
} else { } else {
const newTrimEnd = Math.max( const newTrimEnd = Math.max(
0, 0,
Math.min( Math.min(
clip.duration - clip.trimStart - 0.1, element.duration - element.trimStart - 0.1,
resizing.initialTrimEnd - deltaTime resizing.initialTrimEnd - deltaTime
) )
); );
updateClipTrim(track.id, clip.id, clip.trimStart, newTrimEnd); updateElementTrim(track.id, element.id, element.trimStart, newTrimEnd);
} }
}; };
@ -130,96 +130,111 @@ export function TimelineClip({
setResizing(null); setResizing(null);
}; };
const handleDeleteClip = () => { const handleDeleteElement = () => {
removeClipFromTrack(track.id, clip.id); removeElementFromTrack(track.id, element.id);
setClipMenuOpen(false); setElementMenuOpen(false);
toast.success("Clip deleted");
}; };
const handleSplitClip = () => { const handleSplitElement = () => {
const effectiveStart = clip.startTime; const effectiveStart = element.startTime;
const effectiveEnd = const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (currentTime <= effectiveStart || currentTime >= effectiveEnd) { if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
toast.error("Playhead must be within clip to split"); toast.error("Playhead must be within element to split");
return; return;
} }
const secondClipId = splitClip(track.id, clip.id, currentTime); const secondElementId = splitElement(track.id, element.id, currentTime);
if (secondClipId) { if (!secondElementId) {
toast.success("Clip split successfully"); toast.error("Failed to split element");
} else {
toast.error("Failed to split clip");
} }
setClipMenuOpen(false); setElementMenuOpen(false);
}; };
const handleSplitAndKeepLeft = () => { const handleSplitAndKeepLeft = () => {
const effectiveStart = clip.startTime; const effectiveStart = element.startTime;
const effectiveEnd = const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (currentTime <= effectiveStart || currentTime >= effectiveEnd) { if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
toast.error("Playhead must be within clip"); toast.error("Playhead must be within element");
return; return;
} }
splitAndKeepLeft(track.id, clip.id, currentTime); splitAndKeepLeft(track.id, element.id, currentTime);
toast.success("Split and kept left portion"); setElementMenuOpen(false);
setClipMenuOpen(false);
}; };
const handleSplitAndKeepRight = () => { const handleSplitAndKeepRight = () => {
const effectiveStart = clip.startTime; const effectiveStart = element.startTime;
const effectiveEnd = const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (currentTime <= effectiveStart || currentTime >= effectiveEnd) { if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
toast.error("Playhead must be within clip"); toast.error("Playhead must be within element");
return; return;
} }
splitAndKeepRight(track.id, clip.id, currentTime); splitAndKeepRight(track.id, element.id, currentTime);
toast.success("Split and kept right portion"); setElementMenuOpen(false);
setClipMenuOpen(false);
}; };
const handleSeparateAudio = () => { const handleSeparateAudio = () => {
const mediaItem = mediaItems.find((item) => item.id === clip.mediaId); if (element.type !== "media") {
toast.error("Audio separation only available for media elements");
if (!mediaItem || mediaItem.type !== "video") {
toast.error("Audio separation only available for video clips");
return; return;
} }
const audioClipId = separateAudio(track.id, clip.id); const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
if (audioClipId) { if (!mediaItem || mediaItem.type !== "video") {
toast.success("Audio separated to audio track"); toast.error("Audio separation only available for video elements");
} else { return;
}
const audioElementId = separateAudio(track.id, element.id);
if (!audioElementId) {
toast.error("Failed to separate audio"); toast.error("Failed to separate audio");
} }
setClipMenuOpen(false); setElementMenuOpen(false);
}; };
const canSplitAtPlayhead = () => { const canSplitAtPlayhead = () => {
const effectiveStart = clip.startTime; const effectiveStart = element.startTime;
const effectiveEnd = const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
return currentTime > effectiveStart && currentTime < effectiveEnd; return currentTime > effectiveStart && currentTime < effectiveEnd;
}; };
const canSeparateAudio = () => { const canSeparateAudio = () => {
const mediaItem = mediaItems.find((item) => item.id === clip.mediaId); if (element.type !== "media") return false;
return mediaItem?.type === "video" && track.type === "video"; const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
return mediaItem?.type === "video" && track.type === "media";
}; };
const renderClipContent = () => { const renderElementContent = () => {
const mediaItem = mediaItems.find((item) => item.id === clip.mediaId); if (element.type === "text") {
return (
<div className="w-full h-full flex items-center justify-center px-2">
<Type className="h-4 w-4 mr-2 text-purple-400 flex-shrink-0" />
<span className="text-xs text-foreground/80 truncate">
{element.content}
</span>
</div>
);
}
// Render media element ->
const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
if (!mediaItem) { if (!mediaItem) {
return ( return (
<span className="text-xs text-foreground/80 truncate">{clip.name}</span> <span className="text-xs text-foreground/80 truncate">
{element.name}
</span>
); );
} }
@ -248,18 +263,19 @@ export function TimelineClip({
/> />
</div> </div>
<span className="text-xs text-foreground/80 truncate flex-1"> <span className="text-xs text-foreground/80 truncate flex-1">
{clip.name} {element.name}
</span> </span>
</div> </div>
); );
} }
// Render audio element ->
if (mediaItem.type === "audio") { if (mediaItem.type === "audio") {
return ( return (
<div className="w-full h-full flex items-center gap-2"> <div className="w-full h-full flex items-center gap-2">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<AudioWaveform <AudioWaveform
audioUrl={mediaItem.url} audioUrl={mediaItem.url || ""}
height={24} height={24}
className="w-full" className="w-full"
/> />
@ -269,24 +285,26 @@ export function TimelineClip({
} }
return ( return (
<span className="text-xs text-foreground/80 truncate">{clip.name}</span> <span className="text-xs text-foreground/80 truncate">
{element.name}
</span>
); );
}; };
const handleClipMouseDown = (e: React.MouseEvent) => { const handleElementMouseDown = (e: React.MouseEvent) => {
if (onClipMouseDown) { if (onElementMouseDown) {
onClipMouseDown(e, clip); onElementMouseDown(e, element);
} }
}; };
return ( return (
<div <div
className={`absolute top-0 h-full select-none transition-all duration-75${ className={`absolute top-0 h-full select-none timeline-element ${
isBeingDragged ? "z-50" : "z-10" isBeingDragged ? "z-50" : "z-10"
}`} }`}
style={{ style={{
left: `${clipLeft}px`, left: `${elementLeft}px`,
width: `${clipWidth}px`, width: `${elementWidth}px`,
}} }}
onMouseMove={resizing ? handleResizeMove : undefined} onMouseMove={resizing ? handleResizeMove : undefined}
onMouseUp={resizing ? handleResizeEnd : undefined} onMouseUp={resizing ? handleResizeEnd : undefined}
@ -298,29 +316,34 @@ export function TimelineClip({
)} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-foreground" : ""} ${ )} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-foreground" : ""} ${
isBeingDragged ? "z-50" : "z-10" isBeingDragged ? "z-50" : "z-10"
}`} }`}
onClick={(e) => onClipClick && onClipClick(e, clip)} onClick={(e) => onElementClick && onElementClick(e, element)}
onMouseDown={handleClipMouseDown} onMouseDown={handleElementMouseDown}
onContextMenu={(e) => onClipMouseDown && onClipMouseDown(e, clip)} onContextMenu={(e) =>
onElementMouseDown && onElementMouseDown(e, element)
}
> >
<div className="absolute inset-1 flex items-center p-1"> <div className="absolute inset-1 flex items-center p-1">
{renderClipContent()} {renderElementContent()}
</div> </div>
{isSelected && ( {isSelected && (
<> <>
<div <div
className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize bg-foreground z-50" className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize bg-foreground z-50"
onMouseDown={(e) => handleResizeStart(e, clip.id, "left")} onMouseDown={(e) => handleResizeStart(e, element.id, "left")}
/> />
<div <div
className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize bg-foreground z-50" className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize bg-foreground z-50"
onMouseDown={(e) => handleResizeStart(e, clip.id, "right")} onMouseDown={(e) => handleResizeStart(e, element.id, "right")}
/> />
</> </>
)} )}
<div className="absolute top-1 right-1"> <div className="absolute top-1 right-1">
<DropdownMenu open={clipMenuOpen} onOpenChange={setClipMenuOpen}> <DropdownMenu
open={elementMenuOpen}
onOpenChange={setElementMenuOpen}
>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
variant="outline" variant="outline"
@ -328,21 +351,21 @@ export function TimelineClip({
className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 hover:bg-background" className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 hover:bg-background"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setClipMenuOpen(true); setElementMenuOpen(true);
}} }}
> >
<MoreVertical className="h-3 w-3" /> <MoreVertical className="h-3 w-3" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56"> <DropdownMenuContent align="end" className="w-56">
{/* Split operations - only available when playhead is within clip */} {/* Split operations - only available when playhead is within element */}
<DropdownMenuSub> <DropdownMenuSub>
<DropdownMenuSubTrigger disabled={!canSplitAtPlayhead()}> <DropdownMenuSubTrigger disabled={!canSplitAtPlayhead()}>
<Scissors className="mr-2 h-4 w-4" /> <Scissors className="mr-2 h-4 w-4" />
Split Split
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
<DropdownMenuSubContent> <DropdownMenuSubContent>
<DropdownMenuItem onClick={handleSplitClip}> <DropdownMenuItem onClick={handleSplitElement}>
<SplitSquareHorizontal className="mr-2 h-4 w-4" /> <SplitSquareHorizontal className="mr-2 h-4 w-4" />
Split at Playhead Split at Playhead
</DropdownMenuItem> </DropdownMenuItem>
@ -357,7 +380,7 @@ export function TimelineClip({
</DropdownMenuSubContent> </DropdownMenuSubContent>
</DropdownMenuSub> </DropdownMenuSub>
{/* Audio separation - only available for video clips */} {/* Audio separation - only available for video elements */}
{canSeparateAudio() && ( {canSeparateAudio() && (
<> <>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
@ -370,11 +393,11 @@ export function TimelineClip({
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem <DropdownMenuItem
onClick={handleDeleteClip} onClick={handleDeleteElement}
className="text-destructive" className="text-destructive"
> >
<Trash2 className="mr-2 h-4 w-4" /> <Trash2 className="mr-2 h-4 w-4" />
Delete Clip Delete {element.type === "text" ? "text" : "clip"}
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>

2
apps/web/src/components/editor/timeline-toolbar.tsx
View File

@ -102,7 +102,7 @@ export function TimelineToolbar({
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => { onClick={() => {
const trackId = addTrack("video"); const trackId = addTrack("media");
addClipToTrack(trackId, { addClipToTrack(trackId, {
mediaId: "test", mediaId: "test",
name: "Test Clip", name: "Test Clip",

691
apps/web/src/components/editor/timeline-track.tsx
View File

File diff suppressed because it is too large Load Diff

468
apps/web/src/components/editor/timeline.tsx
View File

@ -42,23 +42,22 @@ import {
SelectValue, SelectValue,
} from "../ui/select"; } from "../ui/select";
import { TimelineTrackContent } from "./timeline-track"; import { TimelineTrackContent } from "./timeline-track";
import type { DragData } from "@/types/timeline";
export function Timeline() { export function Timeline() {
// Timeline shows all tracks (video, audio, effects) and their clips. // Timeline shows all tracks (video, audio, effects) and their elements.
// You can drag media here to add it to your project. // You can drag media here to add it to your project.
// Clips can be trimmed, deleted, and moved. // elements can be trimmed, deleted, and moved.
const { const {
tracks, tracks,
addTrack, addTrack,
addClipToTrack, addElementToTrack,
removeTrack, removeElementFromTrack,
toggleTrackMute,
removeClipFromTrack,
getTotalDuration, getTotalDuration,
selectedClips, selectedElements,
clearSelectedClips, clearSelectedElements,
setSelectedClips, setSelectedElements,
splitClip, splitElement,
splitAndKeepLeft, splitAndKeepLeft,
splitAndKeepRight, splitAndKeepRight,
separateAudio, separateAudio,
@ -116,36 +115,28 @@ export function Timeline() {
const lastRulerSync = useRef(0); const lastRulerSync = useRef(0);
const lastTracksSync = useRef(0); const lastTracksSync = useRef(0);
// New refs for direct playhead DOM manipulation
const rulerPlayheadRef = useRef<HTMLDivElement>(null);
const tracksPlayheadRef = useRef<HTMLDivElement>(null);
// Refs to store initial mouse and scroll positions for drag calculations
const initialMouseXRef = useRef(0);
const initialTimelineScrollLeftRef = useRef(0);
// Update timeline duration when tracks change // Update timeline duration when tracks change
useEffect(() => { useEffect(() => {
const totalDuration = getTotalDuration(); const totalDuration = getTotalDuration();
setDuration(Math.max(totalDuration, 10)); // Minimum 10 seconds for empty timeline setDuration(Math.max(totalDuration, 10)); // Minimum 10 seconds for empty timeline
}, [tracks, setDuration, getTotalDuration]); }, [tracks, setDuration, getTotalDuration]);
// Keyboard event for deleting selected clips // Keyboard event for deleting selected elements
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
if ( if (
(e.key === "Delete" || e.key === "Backspace") && (e.key === "Delete" || e.key === "Backspace") &&
selectedClips.length > 0 selectedElements.length > 0
) { ) {
selectedClips.forEach(({ trackId, clipId }) => { selectedElements.forEach(({ trackId, elementId }) => {
removeClipFromTrack(trackId, clipId); removeElementFromTrack(trackId, elementId);
}); });
clearSelectedClips(); clearSelectedElements();
} }
}; };
window.addEventListener("keydown", handleKeyDown); window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown);
}, [selectedClips, removeClipFromTrack, clearSelectedClips]); }, [selectedElements, removeElementFromTrack, clearSelectedElements]);
// Keyboard event for undo (Cmd+Z) // Keyboard event for undo (Cmd+Z)
useEffect(() => { useEffect(() => {
@ -190,9 +181,9 @@ export function Timeline() {
// Add new click handler for deselection // Add new click handler for deselection
const handleTimelineClick = (e: React.MouseEvent) => { const handleTimelineClick = (e: React.MouseEvent) => {
// If clicking empty area (not on a clip) and not starting marquee, deselect all clips // If clicking empty area (not on an element) and not starting marquee, deselect all elements
if (!(e.target as HTMLElement).closest(".timeline-clip")) { if (!(e.target as HTMLElement).closest(".timeline-element")) {
clearSelectedClips(); clearSelectedElements();
} }
}; };
@ -218,7 +209,7 @@ export function Timeline() {
}; };
}, [marquee]); }, [marquee]);
// On marquee end, select clips in box // On marquee end, select elements in box
useEffect(() => { useEffect(() => {
if (!marquee || marquee.active) return; if (!marquee || marquee.active) return;
const timeline = timelineRef.current; const timeline = timelineRef.current;
@ -240,56 +231,54 @@ export function Timeline() {
const bx2 = clamp(x2, 0, rect.width); const bx2 = clamp(x2, 0, rect.width);
const by1 = clamp(y1, 0, rect.height); const by1 = clamp(y1, 0, rect.height);
const by2 = clamp(y2, 0, rect.height); const by2 = clamp(y2, 0, rect.height);
let newSelection: { trackId: string; clipId: string }[] = []; let newSelection: { trackId: string; elementId: string }[] = [];
tracks.forEach((track, trackIdx) => { tracks.forEach((track, trackIdx) => {
track.clips.forEach((clip) => { track.elements.forEach((element) => {
const effectiveDuration = clip.duration - clip.trimStart - clip.trimEnd; const clipLeft = element.startTime * 50 * zoomLevel;
const clipWidth = Math.max(80, effectiveDuration * 50 * zoomLevel);
const clipLeft = clip.startTime * 50 * zoomLevel;
const clipTop = trackIdx * 60; const clipTop = trackIdx * 60;
const clipBottom = clipTop + 60; const clipBottom = clipTop + 60;
const clipRight = clipLeft + 60; // Set a fixed width for time display const clipRight = clipLeft + 60;
if ( if (
bx1 < clipRight && bx1 < clipRight &&
bx2 > clipLeft && bx2 > clipLeft &&
by1 < clipBottom && by1 < clipBottom &&
by2 > clipTop by2 > clipTop
) { ) {
newSelection.push({ trackId: track.id, clipId: clip.id }); newSelection.push({ trackId: track.id, elementId: element.id });
} }
}); });
}); });
if (newSelection.length > 0) { if (newSelection.length > 0) {
if (marquee.additive) { if (marquee.additive) {
const selectedSet = new Set( const selectedSet = new Set(
selectedClips.map((c) => c.trackId + ":" + c.clipId) selectedElements.map((c) => c.trackId + ":" + c.elementId)
); );
newSelection = [ newSelection = [
...selectedClips, ...selectedElements,
...newSelection.filter( ...newSelection.filter(
(c) => !selectedSet.has(c.trackId + ":" + c.clipId) (c) => !selectedSet.has(c.trackId + ":" + c.elementId)
), ),
]; ];
} }
setSelectedClips(newSelection); setSelectedElements(newSelection);
} else if (!marquee.additive) { } else if (!marquee.additive) {
clearSelectedClips(); clearSelectedElements();
} }
setMarquee(null); setMarquee(null);
}, [ }, [
marquee, marquee,
tracks, tracks,
zoomLevel, zoomLevel,
selectedClips, selectedElements,
setSelectedClips, setSelectedElements,
clearSelectedClips, clearSelectedElements,
]); ]);
const handleDragEnter = (e: React.DragEvent) => { const handleDragEnter = (e: React.DragEvent) => {
// When something is dragged over the timeline, show overlay // When something is dragged over the timeline, show overlay
e.preventDefault(); e.preventDefault();
// Don't show overlay for timeline clips - they're handled by tracks // Don't show overlay for timeline elements - they're handled by tracks
if (e.dataTransfer.types.includes("application/x-timeline-clip")) { if (e.dataTransfer.types.includes("application/x-timeline-element")) {
return; return;
} }
dragCounterRef.current += 1; dragCounterRef.current += 1;
@ -305,8 +294,8 @@ export function Timeline() {
const handleDragLeave = (e: React.DragEvent) => { const handleDragLeave = (e: React.DragEvent) => {
e.preventDefault(); e.preventDefault();
// Don't update state for timeline clips - they're handled by tracks // Don't update state for timeline elements - they're handled by tracks
if (e.dataTransfer.types.includes("application/x-timeline-clip")) { if (e.dataTransfer.types.includes("application/x-timeline-element")) {
return; return;
} }
@ -317,44 +306,74 @@ export function Timeline() {
}; };
const handleDrop = async (e: React.DragEvent) => { const handleDrop = async (e: React.DragEvent) => {
// When media is dropped, add it as a new track/clip // When media is dropped, add it as a new track/element
e.preventDefault(); e.preventDefault();
setIsDragOver(false); setIsDragOver(false);
dragCounterRef.current = 0; dragCounterRef.current = 0;
// Ignore timeline clip drags - they're handled by track-specific handlers // Ignore timeline element drags - they're handled by track-specific handlers
const hasTimelineClip = e.dataTransfer.types.includes( const hasTimelineElement = e.dataTransfer.types.includes(
"application/x-timeline-clip" "application/x-timeline-element"
); );
if (hasTimelineClip) { if (hasTimelineElement) {
return; return;
} }
const mediaItemData = e.dataTransfer.getData("application/x-media-item"); const itemData = e.dataTransfer.getData("application/x-media-item");
if (mediaItemData) { if (itemData) {
// Handle media item drops by creating new tracks
try { try {
const { id, type } = JSON.parse(mediaItemData); const dragData: DragData = JSON.parse(itemData);
const mediaItem = mediaItems.find((item) => item.id === id);
if (!mediaItem) { if (dragData.type === "text") {
toast.error("Media item not found"); // Always create new text track to avoid overlaps
return; const newTrackId = addTrack("text");
addElementToTrack(newTrackId, {
type: "text",
name: dragData.name || "Text",
content: dragData.content || "Default Text",
duration: 5,
startTime: 0,
trimStart: 0,
trimEnd: 0,
fontSize: 48,
fontFamily: "Arial",
color: "#ffffff",
backgroundColor: "transparent",
textAlign: "center",
fontWeight: "normal",
fontStyle: "normal",
textDecoration: "none",
x: 0,
y: 0,
rotation: 0,
opacity: 1,
});
} else {
// Handle media items
const mediaItem = mediaItems.find((item) => item.id === dragData.id);
if (!mediaItem) {
toast.error("Media item not found");
return;
}
const trackType = dragData.type === "audio" ? "audio" : "media";
let targetTrack = tracks.find((t) => t.type === trackType);
const newTrackId = targetTrack ? targetTrack.id : addTrack(trackType);
addElementToTrack(newTrackId, {
type: "media",
mediaId: mediaItem.id,
name: mediaItem.name,
duration: mediaItem.duration || 5,
startTime: 0,
trimStart: 0,
trimEnd: 0,
});
} }
// Add to video or audio track depending on type
const trackType = type === "audio" ? "audio" : "video";
const newTrackId = addTrack(trackType);
addClipToTrack(newTrackId, {
mediaId: mediaItem.id,
name: mediaItem.name,
duration: mediaItem.duration || 5,
startTime: 0,
trimStart: 0,
trimEnd: 0,
});
} catch (error) { } catch (error) {
// Show error if parsing fails console.error("Error parsing dropped item data:", error);
console.error("Error parsing media item data:", error); toast.error("Failed to add item to timeline");
toast.error("Failed to add media to timeline");
} }
} else if (e.dataTransfer.files?.length > 0) { } else if (e.dataTransfer.files?.length > 0) {
// Handle file drops by creating new tracks // Handle file drops by creating new tracks
@ -374,9 +393,10 @@ export function Timeline() {
); );
if (addedItem) { if (addedItem) {
const trackType = const trackType =
processedItem.type === "audio" ? "audio" : "video"; processedItem.type === "audio" ? "audio" : "media";
const newTrackId = addTrack(trackType); const newTrackId = addTrack(trackType);
addClipToTrack(newTrackId, { addElementToTrack(newTrackId, {
type: "media",
mediaId: addedItem.id, mediaId: addedItem.id,
name: addedItem.name, name: addedItem.name,
duration: addedItem.duration || 5, duration: addedItem.duration || 5,
@ -502,175 +522,134 @@ export function Timeline() {
// Action handlers for toolbar // Action handlers for toolbar
const handleSplitSelected = () => { const handleSplitSelected = () => {
if (selectedClips.length === 0) { if (selectedElements.length === 0) {
toast.error("No clips selected"); toast.error("No elements selected");
return; return;
} }
let splitCount = 0; let splitCount = 0;
selectedClips.forEach(({ trackId, clipId }) => { selectedElements.forEach(({ trackId, elementId }) => {
const track = tracks.find((t) => t.id === trackId); const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId); const element = track?.elements.find((c) => c.id === elementId);
if (clip && track) { if (element && track) {
const effectiveStart = clip.startTime; const effectiveStart = element.startTime;
const effectiveEnd = const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (currentTime > effectiveStart && currentTime < effectiveEnd) { if (currentTime > effectiveStart && currentTime < effectiveEnd) {
const newClipId = splitClip(trackId, clipId, currentTime); const newElementId = splitElement(trackId, elementId, currentTime);
if (newClipId) splitCount++; if (newElementId) splitCount++;
} }
} }
}); });
if (splitCount > 0) { if (splitCount === 0) {
toast.success(`Split ${splitCount} clip(s) at playhead`); toast.error("Playhead must be within selected elements to split");
} else {
toast.error("Playhead must be within selected clips to split");
} }
}; };
const handleDuplicateSelected = () => { const handleDuplicateSelected = () => {
if (selectedClips.length === 0) { if (selectedElements.length === 0) {
toast.error("No clips selected"); toast.error("No elements selected");
return; return;
} }
selectedClips.forEach(({ trackId, clipId }) => { 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 track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId); const element = track?.elements.find((el) => el.id === elementId);
if (clip && track) {
addClipToTrack(track.id, { if (element) {
mediaId: clip.mediaId, const newStartTime =
name: clip.name + " (copy)", element.startTime +
duration: clip.duration, (element.duration - element.trimStart - element.trimEnd) +
startTime: 0.1;
clip.startTime +
(clip.duration - clip.trimStart - clip.trimEnd) + // Create element without id (will be generated by store)
0.1, const { id, ...elementWithoutId } = element;
trimStart: clip.trimStart,
trimEnd: clip.trimEnd, 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
} }
}); });
toast.success("Duplicated selected clip(s)");
clearSelectedElements();
}; };
const handleFreezeSelected = () => { const handleFreezeSelected = () => {
if (selectedClips.length === 0) { toast.info("Freeze frame functionality coming soon!");
toast.error("No clips selected");
return;
}
selectedClips.forEach(({ trackId, clipId }) => {
const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId);
if (clip && track) {
// Add a new freeze frame clip at the playhead
addClipToTrack(track.id, {
mediaId: clip.mediaId,
name: clip.name + " (freeze)",
duration: 1, // 1 second freeze frame
startTime: currentTime,
trimStart: 0,
trimEnd: clip.duration - 1,
});
}
});
}; };
const handleSplitAndKeepLeft = () => { const handleSplitAndKeepLeft = () => {
if (selectedClips.length === 0) { if (selectedElements.length !== 1) {
toast.error("No clips selected"); toast.error("Select exactly one element");
return; return;
} }
const { trackId, elementId } = selectedElements[0];
let splitCount = 0; const track = tracks.find((t) => t.id === trackId);
selectedClips.forEach(({ trackId, clipId }) => { const element = track?.elements.find((c) => c.id === elementId);
const track = tracks.find((t) => t.id === trackId); if (!element) return;
const clip = track?.clips.find((c) => c.id === clipId); const effectiveStart = element.startTime;
if (clip && track) { const effectiveEnd =
const effectiveStart = clip.startTime; element.startTime +
const effectiveEnd = (element.duration - element.trimStart - element.trimEnd);
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
toast.error("Playhead must be within selected element");
if (currentTime > effectiveStart && currentTime < effectiveEnd) { return;
splitAndKeepLeft(trackId, clipId, currentTime);
splitCount++;
}
}
});
if (splitCount > 0) {
toast.success(`Split and kept left portion of ${splitCount} clip(s)`);
} else {
toast.error("Playhead must be within selected clips");
} }
splitAndKeepLeft(trackId, elementId, currentTime);
}; };
const handleSplitAndKeepRight = () => { const handleSplitAndKeepRight = () => {
if (selectedClips.length === 0) { if (selectedElements.length !== 1) {
toast.error("No clips selected"); toast.error("Select exactly one element");
return; return;
} }
const { trackId, elementId } = selectedElements[0];
let splitCount = 0; const track = tracks.find((t) => t.id === trackId);
selectedClips.forEach(({ trackId, clipId }) => { const element = track?.elements.find((c) => c.id === elementId);
const track = tracks.find((t) => t.id === trackId); if (!element) return;
const clip = track?.clips.find((c) => c.id === clipId); const effectiveStart = element.startTime;
if (clip && track) { const effectiveEnd =
const effectiveStart = clip.startTime; element.startTime +
const effectiveEnd = (element.duration - element.trimStart - element.trimEnd);
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
toast.error("Playhead must be within selected element");
if (currentTime > effectiveStart && currentTime < effectiveEnd) { return;
splitAndKeepRight(trackId, clipId, currentTime);
splitCount++;
}
}
});
if (splitCount > 0) {
toast.success(`Split and kept right portion of ${splitCount} clip(s)`);
} else {
toast.error("Playhead must be within selected clips");
} }
splitAndKeepRight(trackId, elementId, currentTime);
}; };
const handleSeparateAudio = () => { const handleSeparateAudio = () => {
if (selectedClips.length === 0) { if (selectedElements.length !== 1) {
toast.error("No clips selected"); toast.error("Select exactly one media element to separate audio");
return; return;
} }
const { trackId, elementId } = selectedElements[0];
let separatedCount = 0; const track = tracks.find((t) => t.id === trackId);
selectedClips.forEach(({ trackId, clipId }) => { if (!track || track.type !== "media") {
const track = tracks.find((t) => t.id === trackId); toast.error("Select a media element to separate audio");
const clip = track?.clips.find((c) => c.id === clipId); return;
const mediaItem = mediaItems.find((item) => item.id === clip?.mediaId);
if (
clip &&
track &&
mediaItem?.type === "video" &&
track.type === "video"
) {
const audioClipId = separateAudio(trackId, clipId);
if (audioClipId) separatedCount++;
}
});
if (separatedCount > 0) {
toast.success(`Separated audio from ${separatedCount} video clip(s)`);
} else {
toast.error("Select video clips to separate audio");
} }
separateAudio(trackId, elementId);
}; };
const handleDeleteSelected = () => { const handleDeleteSelected = () => {
if (selectedClips.length === 0) { if (selectedElements.length === 0) {
toast.error("No clips selected"); toast.error("No elements selected");
return; return;
} }
selectedClips.forEach(({ trackId, clipId }) => { selectedElements.forEach(({ trackId, elementId }) => {
removeClipFromTrack(trackId, clipId); removeElementFromTrack(trackId, elementId);
}); });
clearSelectedClips(); clearSelectedElements();
toast.success("Deleted selected clip(s)");
}; };
// Prevent explorer zooming in/out when in timeline // Prevent explorer zooming in/out when in timeline
@ -754,7 +733,7 @@ export function Timeline() {
return ( return (
<div <div
className={`h-full flex flex-col transition-colors duration-200 relative ${isDragOver ? "bg-accent/30 border-accent" : ""}`} className={`h-full flex flex-col transition-colors duration-200 relative`}
{...dragProps} {...dragProps}
onMouseEnter={() => setIsInTimeline(true)} onMouseEnter={() => setIsInTimeline(true)}
onMouseLeave={() => setIsInTimeline(false)} onMouseLeave={() => setIsInTimeline(false)}
@ -783,9 +762,7 @@ export function Timeline() {
{isPlaying ? "Pause (Space)" : "Play (Space)"} {isPlaying ? "Pause (Space)" : "Play (Space)"}
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
<div className="w-px h-6 bg-border mx-1" /> <div className="w-px h-6 bg-border mx-1" />
{/* Time Display */} {/* Time Display */}
<div <div
className="text-xs text-muted-foreground font-mono px-2" className="text-xs text-muted-foreground font-mono px-2"
@ -793,7 +770,6 @@ export function Timeline() {
> >
{currentTime.toFixed(1)}s / {duration.toFixed(1)}s {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
</div> </div>
{/* Test Clip Button - for debugging */} {/* Test Clip Button - for debugging */}
{tracks.length === 0 && ( {tracks.length === 0 && (
<> <>
@ -804,8 +780,9 @@ export function Timeline() {
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => { onClick={() => {
const trackId = addTrack("video"); const trackId = addTrack("media");
addClipToTrack(trackId, { addElementToTrack(trackId, {
type: "media",
mediaId: "test", mediaId: "test",
name: "Test Clip", name: "Test Clip",
duration: 5, duration: 5,
@ -823,18 +800,15 @@ export function Timeline() {
</Tooltip> </Tooltip>
</> </>
)} )}
<div className="w-px h-6 bg-border mx-1" /> <div className="w-px h-6 bg-border mx-1" />
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button variant="text" size="icon" onClick={handleSplitSelected}> <Button variant="text" size="icon" onClick={handleSplitSelected}>
<Scissors className="h-4 w-4" /> <Scissors className="h-4 w-4" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Split clip (Ctrl+S)</TooltipContent> <TooltipContent>Split element (Ctrl+S)</TooltipContent>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
@ -847,7 +821,6 @@ export function Timeline() {
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent> <TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
@ -860,7 +833,6 @@ export function Timeline() {
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Split and keep right (Ctrl+W)</TooltipContent> <TooltipContent>Split and keep right (Ctrl+W)</TooltipContent>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button variant="text" size="icon" onClick={handleSeparateAudio}> <Button variant="text" size="icon" onClick={handleSeparateAudio}>
@ -869,7 +841,6 @@ export function Timeline() {
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Separate audio (Ctrl+D)</TooltipContent> <TooltipContent>Separate audio (Ctrl+D)</TooltipContent>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
@ -880,9 +851,8 @@ export function Timeline() {
<Copy className="h-4 w-4" /> <Copy className="h-4 w-4" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Duplicate clip (Ctrl+D)</TooltipContent> <TooltipContent>Duplicate element (Ctrl+D)</TooltipContent>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button variant="text" size="icon" onClick={handleFreezeSelected}> <Button variant="text" size="icon" onClick={handleFreezeSelected}>
@ -891,19 +861,15 @@ export function Timeline() {
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Freeze frame (F)</TooltipContent> <TooltipContent>Freeze frame (F)</TooltipContent>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button variant="text" size="icon" onClick={handleDeleteSelected}> <Button variant="text" size="icon" onClick={handleDeleteSelected}>
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Delete clip (Delete)</TooltipContent> <TooltipContent>Delete element (Delete)</TooltipContent>
</Tooltip> </Tooltip>
<div className="w-px h-6 bg-border mx-1" />c{/* Speed Control */}
<div className="w-px h-6 bg-border mx-1" />
{/* Speed Control */}
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Select <Select
@ -935,9 +901,6 @@ export function Timeline() {
<span className="text-sm font-medium text-muted-foreground"> <span className="text-sm font-medium text-muted-foreground">
Tracks Tracks
</span> </span>
<div className="text-xs text-muted-foreground">
{zoomLevel.toFixed(1)}x
</div>
</div> </div>
{/* Timeline Ruler */} {/* Timeline Ruler */}
@ -1045,7 +1008,7 @@ export function Timeline() {
<div className="flex items-center flex-1 min-w-0"> <div className="flex items-center flex-1 min-w-0">
<div <div
className={`w-3 h-3 rounded-full flex-shrink-0 ${ className={`w-3 h-3 rounded-full flex-shrink-0 ${
track.type === "video" track.type === "media"
? "bg-blue-500" ? "bg-blue-500"
: track.type === "audio" : track.type === "audio"
? "bg-green-500" ? "bg-green-500"
@ -1080,16 +1043,7 @@ export function Timeline() {
onMouseDown={handleTimelineMouseDown} onMouseDown={handleTimelineMouseDown}
> >
{tracks.length === 0 ? ( {tracks.length === 0 ? (
<div className="absolute inset-0 flex items-center justify-center"> <div></div>
<div className="text-center">
<div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4 mx-auto">
<SplitSquareHorizontal className="h-8 w-8 text-muted-foreground" />
</div>
<p className="text-sm text-muted-foreground">
Drop media here to start
</p>
</div>
</div>
) : ( ) : (
<> <>
{tracks.map((track, index) => ( {tracks.map((track, index) => (
@ -1102,13 +1056,13 @@ export function Timeline() {
height: "60px", height: "60px",
}} }}
onClick={(e) => { onClick={(e) => {
// If clicking empty area (not on a clip), deselect all clips // If clicking empty area (not on a element), deselect all elements
if ( if (
!(e.target as HTMLElement).closest( !(e.target as HTMLElement).closest(
".timeline-clip" ".timeline-element"
) )
) { ) {
clearSelectedClips(); clearSelectedElements();
} }
}} }}
> >
@ -1119,33 +1073,8 @@ export function Timeline() {
</div> </div>
</ContextMenuTrigger> </ContextMenuTrigger>
<ContextMenuContent> <ContextMenuContent>
<ContextMenuItem <ContextMenuItem>
onClick={() => { Track settings (soon)
toggleTrackMute(track.id);
}}
>
{track.muted ? (
<>
<Volume2 className="h-4 w-4 mr-2" />
Unmute Track
</>
) : (
<>
<VolumeX className="h-4 w-4 mr-2" />
Mute Track
</>
)}
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem
onClick={() => {
removeTrack(track.id);
toast.success("Track deleted");
}}
className="text-destructive focus:text-destructive"
>
<Trash2 className="h-4 w-4 mr-2" />
Delete Track
</ContextMenuItem> </ContextMenuItem>
</ContextMenuContent> </ContextMenuContent>
</ContextMenu> </ContextMenu>
@ -1164,15 +1093,6 @@ export function Timeline() {
)} )}
</> </>
)} )}
{isDragOver && (
<div className="absolute inset-0 z-20 flex items-center justify-center pointer-events-none backdrop-blur-lg">
<div>
{isProcessing
? `Processing ${progress}%`
: "Drop media here to add to timeline"}
</div>
</div>
)}
</div> </div>
</ScrollArea> </ScrollArea>
</div> </div>

2
apps/web/src/components/footer.tsx
View File

@ -4,7 +4,7 @@ import { motion } from "motion/react";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { RiGithubLine, RiTwitterXLine } from "react-icons/ri"; import { RiGithubLine, RiTwitterXLine } from "react-icons/ri";
import { getStars } from "@/lib/fetchGhStars"; import { getStars } from "@/lib/fetch-github-stars";
import Image from "next/image"; import Image from "next/image";
export function Footer() { export function Footer() {

2
apps/web/src/components/header.tsx
View File

@ -5,7 +5,7 @@ import { Button } from "./ui/button";
import { ArrowRight } from "lucide-react"; import { ArrowRight } from "lucide-react";
import { HeaderBase } from "./header-base"; import { HeaderBase } from "./header-base";
import { useSession } from "@opencut/auth/client"; import { useSession } from "@opencut/auth/client";
import { getStars } from "@/lib/fetchGhStars"; import { getStars } from "@/lib/fetch-github-stars";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";

7
apps/web/src/components/landing/hero.tsx
View File

@ -4,7 +4,6 @@ import { motion } from "motion/react";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { Input } from "../ui/input"; import { Input } from "../ui/input";
import { ArrowRight } from "lucide-react"; import { ArrowRight } from "lucide-react";
import Link from "next/link";
import { useState } from "react"; import { useState } from "react";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
@ -42,7 +41,7 @@ export function Hero({ signupCount }: HeroProps) {
body: JSON.stringify({ email: email.trim() }), body: JSON.stringify({ email: email.trim() }),
}); });
const data = await response.json(); const data = (await response.json()) as { error: string };
if (response.ok) { if (response.ok) {
toast({ toast({
@ -53,7 +52,9 @@ export function Hero({ signupCount }: HeroProps) {
} else { } else {
toast({ toast({
title: "Oops!", title: "Oops!",
description: data.error || "Something went wrong. Please try again.", description:
(data as { error: string }).error ||
"Something went wrong. Please try again.",
variant: "destructive", variant: "destructive",
}); });
} }

18
apps/web/src/components/ui/draggable-item.tsx
View File

@ -7,11 +7,6 @@ import { createPortal } from "react-dom";
import { Plus } from "lucide-react"; import { Plus } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
// Create the empty image once, outside the component
const emptyImg = new Image();
emptyImg.src =
"data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
export interface DraggableMediaItemProps { export interface DraggableMediaItemProps {
name: string; name: string;
preview: ReactNode; preview: ReactNode;
@ -39,6 +34,10 @@ export function DraggableMediaItem({
const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 }); const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
const dragRef = useRef<HTMLDivElement>(null); const dragRef = useRef<HTMLDivElement>(null);
const emptyImg = new window.Image();
emptyImg.src =
"data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
useEffect(() => { useEffect(() => {
if (!isDragging) return; if (!isDragging) return;
@ -76,10 +75,9 @@ export function DraggableMediaItem({
return ( return (
<> <>
<div ref={dragRef} className="relative group"> <div ref={dragRef} className="relative group w-28 h-28">
<Button <div
variant="outline" className={`flex flex-col gap-1 p-0 h-auto w-full relative cursor-default ${className}`}
className={`flex flex-col gap-1 p-0 h-auto w-full relative border-none !bg-transparent cursor-default ${className}`}
> >
<AspectRatio <AspectRatio
ratio={aspectRatio} ratio={aspectRatio}
@ -108,7 +106,7 @@ export function DraggableMediaItem({
: name} : name}
</span> </span>
)} )}
</Button> </div>
</div> </div>
{/* Custom drag preview */} {/* Custom drag preview */}

89
apps/web/src/hooks/use-drag-clip.ts
View File

@ -3,23 +3,24 @@ import { useTimelineStore } from "@/stores/timeline-store";
interface DragState { interface DragState {
isDragging: boolean; isDragging: boolean;
clipId: string | null; elementId: string | null;
trackId: string | null; trackId: string | null;
startMouseX: number; startMouseX: number;
startClipTime: number; startElementTime: number;
clickOffsetTime: number; clickOffsetTime: number;
currentTime: number; currentTime: number;
} }
export function useDragClip(zoomLevel: number) { export function useDragClip(zoomLevel: number) {
const { tracks, updateClipStartTime, moveClipToTrack } = useTimelineStore(); const { tracks, updateElementStartTime, moveElementToTrack } =
useTimelineStore();
const [dragState, setDragState] = useState<DragState>({ const [dragState, setDragState] = useState<DragState>({
isDragging: false, isDragging: false,
clipId: null, elementId: null,
trackId: null, trackId: null,
startMouseX: 0, startMouseX: 0,
startClipTime: 0, startElementTime: 0,
clickOffsetTime: 0, clickOffsetTime: 0,
currentTime: 0, currentTime: 0,
}); });
@ -33,9 +34,9 @@ export function useDragClip(zoomLevel: number) {
const startDrag = useCallback( const startDrag = useCallback(
( (
e: React.MouseEvent, e: React.MouseEvent,
clipId: string, elementId: string,
trackId: string, trackId: string,
clipStartTime: number, elementStartTime: number,
clickOffsetTime: number clickOffsetTime: number
) => { ) => {
e.preventDefault(); e.preventDefault();
@ -43,12 +44,12 @@ export function useDragClip(zoomLevel: number) {
setDragState({ setDragState({
isDragging: true, isDragging: true,
clipId, elementId,
trackId, trackId,
startMouseX: e.clientX, startMouseX: e.clientX,
startClipTime: clipStartTime, startElementTime: elementStartTime,
clickOffsetTime, clickOffsetTime,
currentTime: clipStartTime, currentTime: elementStartTime,
}); });
}, },
[] []
@ -76,7 +77,7 @@ export function useDragClip(zoomLevel: number) {
const endDrag = useCallback( const endDrag = useCallback(
(targetTrackId?: string) => { (targetTrackId?: string) => {
if (!dragState.isDragging || !dragState.clipId || !dragState.trackId) if (!dragState.isDragging || !dragState.elementId || !dragState.trackId)
return; return;
const finalTrackId = targetTrackId || dragState.trackId; const finalTrackId = targetTrackId || dragState.trackId;
@ -85,71 +86,81 @@ export function useDragClip(zoomLevel: number) {
// Check for overlaps // Check for overlaps
const sourceTrack = tracks.find((t) => t.id === dragState.trackId); const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
const targetTrack = tracks.find((t) => t.id === finalTrackId); const targetTrack = tracks.find((t) => t.id === finalTrackId);
const movingClip = sourceTrack?.clips.find( const movingElement = sourceTrack?.elements.find(
(c) => c.id === dragState.clipId (e) => e.id === dragState.elementId
); );
if (!movingClip || !targetTrack) { if (!movingElement || !targetTrack) {
setDragState((prev) => ({ ...prev, isDragging: false })); setDragState((prev) => ({ ...prev, isDragging: false }));
return; return;
} }
const movingClipDuration = const movingElementDuration =
movingClip.duration - movingClip.trimStart - movingClip.trimEnd; movingElement.duration -
const movingClipEnd = finalTime + movingClipDuration; movingElement.trimStart -
movingElement.trimEnd;
const movingElementEnd = finalTime + movingElementDuration;
const hasOverlap = targetTrack.clips.some((existingClip) => { const hasOverlap = targetTrack.elements.some((existingElement) => {
// Skip the clip being moved if it's on the same track // Skip the element being moved if it's on the same track
if ( if (
dragState.trackId === finalTrackId && dragState.trackId === finalTrackId &&
existingClip.id === dragState.clipId existingElement.id === dragState.elementId
) { ) {
return false; return false;
} }
const existingStart = existingClip.startTime; const existingStart = existingElement.startTime;
const existingEnd = const existingEnd =
existingClip.startTime + existingElement.startTime +
(existingClip.duration - (existingElement.duration -
existingClip.trimStart - existingElement.trimStart -
existingClip.trimEnd); existingElement.trimEnd);
return finalTime < existingEnd && movingClipEnd > existingStart; return finalTime < existingEnd && movingElementEnd > existingStart;
}); });
if (!hasOverlap) { if (!hasOverlap) {
if (dragState.trackId === finalTrackId) { if (dragState.trackId === finalTrackId) {
// Moving within same track // Moving within same track
updateClipStartTime(finalTrackId, dragState.clipId!, finalTime); updateElementStartTime(finalTrackId, dragState.elementId!, finalTime);
} else { } else {
// Moving to different track // Moving to different track
moveClipToTrack(dragState.trackId!, finalTrackId, dragState.clipId!); moveElementToTrack(
dragState.trackId!,
finalTrackId,
dragState.elementId!
);
requestAnimationFrame(() => { requestAnimationFrame(() => {
updateClipStartTime(finalTrackId, dragState.clipId!, finalTime); updateElementStartTime(
finalTrackId,
dragState.elementId!,
finalTime
);
}); });
} }
} }
setDragState({ setDragState({
isDragging: false, isDragging: false,
clipId: null, elementId: null,
trackId: null, trackId: null,
startMouseX: 0, startMouseX: 0,
startClipTime: 0, startElementTime: 0,
clickOffsetTime: 0, clickOffsetTime: 0,
currentTime: 0, currentTime: 0,
}); });
}, },
[dragState, tracks, updateClipStartTime, moveClipToTrack] [dragState, tracks, updateElementStartTime, moveElementToTrack]
); );
const cancelDrag = useCallback(() => { const cancelDrag = useCallback(() => {
setDragState({ setDragState({
isDragging: false, isDragging: false,
clipId: null, elementId: null,
trackId: null, trackId: null,
startMouseX: 0, startMouseX: 0,
startClipTime: 0, startElementTime: 0,
clickOffsetTime: 0, clickOffsetTime: 0,
currentTime: 0, currentTime: 0,
}); });
@ -176,12 +187,12 @@ export function useDragClip(zoomLevel: number) {
}; };
}, [dragState.isDragging, updateDrag, endDrag, cancelDrag]); }, [dragState.isDragging, updateDrag, endDrag, cancelDrag]);
const getDraggedClipPosition = useCallback( const getDraggedElementPosition = useCallback(
(clipId: string) => { (elementId: string) => {
// Use ref to get current state, not stale closure // Use ref to get current state, not stale closure
const currentDragState = dragStateRef.current; const currentDragState = dragStateRef.current;
const isMatch = const isMatch =
currentDragState.isDragging && currentDragState.clipId === clipId; currentDragState.isDragging && currentDragState.elementId === elementId;
if (isMatch) { if (isMatch) {
return currentDragState.currentTime; return currentDragState.currentTime;
@ -209,7 +220,7 @@ export function useDragClip(zoomLevel: number) {
return { return {
// State // State
isDragging: dragState.isDragging, isDragging: dragState.isDragging,
draggedClipId: dragState.clipId, draggedElementId: dragState.elementId,
currentDragTime: dragState.currentTime, currentDragTime: dragState.currentTime,
clickOffsetTime: dragState.clickOffsetTime, clickOffsetTime: dragState.clickOffsetTime,
@ -217,7 +228,7 @@ export function useDragClip(zoomLevel: number) {
startDrag, startDrag,
endDrag, endDrag,
cancelDrag, cancelDrag,
getDraggedClipPosition, getDraggedElementPosition,
isValidDropTarget, isValidDropTarget,
// Refs // Refs

91
apps/web/src/hooks/use-playback-controls.ts
View File

@ -7,106 +7,105 @@ export const usePlaybackControls = () => {
const { isPlaying, currentTime, play, pause, seek } = usePlaybackStore(); const { isPlaying, currentTime, play, pause, seek } = usePlaybackStore();
const { const {
selectedClips, selectedElements,
tracks, tracks,
splitClip, splitElement,
splitAndKeepLeft, splitAndKeepLeft,
splitAndKeepRight, splitAndKeepRight,
separateAudio, separateAudio,
} = useTimelineStore(); } = useTimelineStore();
const handleSplitSelectedClip = useCallback(() => { const handleSplitSelectedElement = useCallback(() => {
if (selectedClips.length !== 1) { if (selectedElements.length !== 1) {
toast.error("Select exactly one clip to split"); toast.error("Select exactly one element to split");
return; return;
} }
const { trackId, clipId } = selectedClips[0]; const { trackId, elementId } = selectedElements[0];
const track = tracks.find((t) => t.id === trackId); const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId); const element = track?.elements.find((e) => e.id === elementId);
if (!clip) return; if (!element) return;
const effectiveStart = clip.startTime; const effectiveStart = element.startTime;
const effectiveEnd = const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (currentTime <= effectiveStart || currentTime >= effectiveEnd) { if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
toast.error("Playhead must be within selected clip"); toast.error("Playhead must be within selected element");
return; return;
} }
splitClip(trackId, clipId, currentTime); splitElement(trackId, elementId, currentTime);
toast.success("Clip split at playhead"); }, [selectedElements, tracks, currentTime, splitElement]);
}, [selectedClips, tracks, currentTime, splitClip]);
const handleSplitAndKeepLeftCallback = useCallback(() => { const handleSplitAndKeepLeftCallback = useCallback(() => {
if (selectedClips.length !== 1) { if (selectedElements.length !== 1) {
toast.error("Select exactly one clip"); toast.error("Select exactly one element");
return; return;
} }
const { trackId, clipId } = selectedClips[0]; const { trackId, elementId } = selectedElements[0];
const track = tracks.find((t) => t.id === trackId); const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId); const element = track?.elements.find((e) => e.id === elementId);
if (!clip) return; if (!element) return;
const effectiveStart = clip.startTime; const effectiveStart = element.startTime;
const effectiveEnd = const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (currentTime <= effectiveStart || currentTime >= effectiveEnd) { if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
toast.error("Playhead must be within selected clip"); toast.error("Playhead must be within selected element");
return; return;
} }
splitAndKeepLeft(trackId, clipId, currentTime); splitAndKeepLeft(trackId, elementId, currentTime);
toast.success("Split and kept left portion"); }, [selectedElements, tracks, currentTime, splitAndKeepLeft]);
}, [selectedClips, tracks, currentTime, splitAndKeepLeft]);
const handleSplitAndKeepRightCallback = useCallback(() => { const handleSplitAndKeepRightCallback = useCallback(() => {
if (selectedClips.length !== 1) { if (selectedElements.length !== 1) {
toast.error("Select exactly one clip"); toast.error("Select exactly one element");
return; return;
} }
const { trackId, clipId } = selectedClips[0]; const { trackId, elementId } = selectedElements[0];
const track = tracks.find((t) => t.id === trackId); const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId); const element = track?.elements.find((e) => e.id === elementId);
if (!clip) return; if (!element) return;
const effectiveStart = clip.startTime; const effectiveStart = element.startTime;
const effectiveEnd = const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (currentTime <= effectiveStart || currentTime >= effectiveEnd) { if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
toast.error("Playhead must be within selected clip"); toast.error("Playhead must be within selected element");
return; return;
} }
splitAndKeepRight(trackId, clipId, currentTime); splitAndKeepRight(trackId, elementId, currentTime);
toast.success("Split and kept right portion"); }, [selectedElements, tracks, currentTime, splitAndKeepRight]);
}, [selectedClips, tracks, currentTime, splitAndKeepRight]);
const handleSeparateAudioCallback = useCallback(() => { const handleSeparateAudioCallback = useCallback(() => {
if (selectedClips.length !== 1) { if (selectedElements.length !== 1) {
toast.error("Select exactly one video clip to separate audio"); toast.error("Select exactly one media element to separate audio");
return; return;
} }
const { trackId, clipId } = selectedClips[0]; const { trackId, elementId } = selectedElements[0];
const track = tracks.find((t) => t.id === trackId); const track = tracks.find((t) => t.id === trackId);
if (!track || track.type !== "video") { if (!track || track.type !== "media") {
toast.error("Select a video clip to separate audio"); toast.error("Select a media element to separate audio");
return; return;
} }
separateAudio(trackId, clipId); separateAudio(trackId, elementId);
toast.success("Audio separated to audio track"); }, [selectedElements, tracks, separateAudio]);
}, [selectedClips, tracks, separateAudio]);
const handleKeyPress = useCallback( const handleKeyPress = useCallback(
(e: KeyboardEvent) => { (e: KeyboardEvent) => {
@ -130,7 +129,7 @@ export const usePlaybackControls = () => {
case "s": case "s":
if (e.ctrlKey || e.metaKey) { if (e.ctrlKey || e.metaKey) {
e.preventDefault(); e.preventDefault();
handleSplitSelectedClip(); handleSplitSelectedElement();
} }
break; break;
@ -160,7 +159,7 @@ export const usePlaybackControls = () => {
isPlaying, isPlaying,
play, play,
pause, pause,
handleSplitSelectedClip, handleSplitSelectedElement,
handleSplitAndKeepLeftCallback, handleSplitAndKeepLeftCallback,
handleSplitAndKeepRightCallback, handleSplitAndKeepRightCallback,
handleSeparateAudioCallback, handleSeparateAudioCallback,

2
apps/web/src/lib/fetchGhStars.ts → apps/web/src/lib/fetch-github-stars.ts
View File

@ -10,7 +10,7 @@ export async function getStars(): Promise<string> {
if (!res.ok) { if (!res.ok) {
throw new Error(`GitHub API error: ${res.status} ${res.statusText}`); throw new Error(`GitHub API error: ${res.status} ${res.statusText}`);
} }
const data = await res.json(); const data = (await res.json()) as { stargazers_count: number };
const count = data.stargazers_count; const count = data.stargazers_count;
if (typeof count !== "number") { if (typeof count !== "number") {

38
apps/web/src/stores/media-store.ts
View File

@ -1,16 +1,25 @@
import { create } from "zustand"; import { create } from "zustand";
import { storageService } from "@/lib/storage/storage-service"; import { storageService } from "@/lib/storage/storage-service";
export type MediaType = "image" | "video" | "audio";
export interface MediaItem { export interface MediaItem {
id: string; id: string;
name: string; name: string;
type: "image" | "video" | "audio"; type: MediaType;
file: File; file: File;
url: string; // Object URL for preview url?: string; // Object URL for preview
thumbnailUrl?: string; // For video thumbnails thumbnailUrl?: string; // For video thumbnails
duration?: number; // For video/audio duration duration?: number; // For video/audio duration
width?: number; // For video/image width width?: number; // For video/image width
height?: number; // For video/image height height?: number; // For video/image height
// Text-specific properties
content?: string; // Text content
fontSize?: number; // Font size
fontFamily?: string; // Font family
color?: string; // Text color
backgroundColor?: string; // Background color
textAlign?: "left" | "center" | "right"; // Text alignment
} }
interface MediaStore { interface MediaStore {
@ -25,7 +34,7 @@ interface MediaStore {
} }
// Helper function to determine file type // Helper function to determine file type
export const getFileType = (file: File): "image" | "video" | "audio" | null => { export const getFileType = (file: File): MediaType | null => {
const { type } = file; const { type } = file;
if (type.startsWith("image/")) { if (type.startsWith("image/")) {
@ -46,7 +55,7 @@ export const getImageDimensions = (
file: File file: File
): Promise<{ width: number; height: number }> => { ): Promise<{ width: number; height: number }> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const img = new Image(); const img = new window.Image();
img.addEventListener("load", () => { img.addEventListener("load", () => {
const width = img.naturalWidth; const width = img.naturalWidth;
@ -69,8 +78,8 @@ export const generateVideoThumbnail = (
file: File file: File
): Promise<{ thumbnailUrl: string; width: number; height: number }> => { ): Promise<{ thumbnailUrl: string; width: number; height: number }> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const video = document.createElement("video"); const video = document.createElement("video") as HTMLVideoElement;
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
if (!ctx) { if (!ctx) {
@ -115,7 +124,7 @@ export const getMediaDuration = (file: File): Promise<number> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const element = document.createElement( const element = document.createElement(
file.type.startsWith("video/") ? "video" : "audio" file.type.startsWith("video/") ? "video" : "audio"
) as HTMLVideoElement | HTMLAudioElement; ) as HTMLVideoElement;
element.addEventListener("loadedmetadata", () => { element.addEventListener("loadedmetadata", () => {
resolve(element.duration); resolve(element.duration);
@ -162,17 +171,17 @@ export const useMediaStore = create<MediaStore>((set, get) => ({
console.error("Failed to save media item:", error); console.error("Failed to save media item:", error);
// Remove from local state if save failed // Remove from local state if save failed
set((state) => ({ set((state) => ({
mediaItems: state.mediaItems.filter((item) => item.id !== newItem.id), mediaItems: state.mediaItems.filter((media) => media.id !== newItem.id),
})); }));
} }
}, },
removeMediaItem: async (id) => { removeMediaItem: async (id: string) => {
const state = get(); const state = get();
const item = state.mediaItems.find((item) => item.id === id); const item = state.mediaItems.find((media) => media.id === id);
// Cleanup object URLs to prevent memory leaks // Cleanup object URLs to prevent memory leaks
if (item) { if (item && item.url) {
URL.revokeObjectURL(item.url); URL.revokeObjectURL(item.url);
if (item.thumbnailUrl) { if (item.thumbnailUrl) {
URL.revokeObjectURL(item.thumbnailUrl); URL.revokeObjectURL(item.thumbnailUrl);
@ -181,7 +190,7 @@ export const useMediaStore = create<MediaStore>((set, get) => ({
// Remove from local state immediately // Remove from local state immediately
set((state) => ({ set((state) => ({
mediaItems: state.mediaItems.filter((item) => item.id !== id), mediaItems: state.mediaItems.filter((media) => media.id !== id),
})); }));
// Remove from persistent storage // Remove from persistent storage
@ -189,7 +198,6 @@ export const useMediaStore = create<MediaStore>((set, get) => ({
await storageService.deleteMediaItem(id); await storageService.deleteMediaItem(id);
} catch (error) { } catch (error) {
console.error("Failed to delete media item:", error); console.error("Failed to delete media item:", error);
// Could re-add to local state here if needed
} }
}, },
@ -211,7 +219,9 @@ export const useMediaStore = create<MediaStore>((set, get) => ({
// Cleanup all object URLs // Cleanup all object URLs
state.mediaItems.forEach((item) => { state.mediaItems.forEach((item) => {
URL.revokeObjectURL(item.url); if (item.url) {
URL.revokeObjectURL(item.url);
}
if (item.thumbnailUrl) { if (item.thumbnailUrl) {
URL.revokeObjectURL(item.thumbnailUrl); URL.revokeObjectURL(item.thumbnailUrl);
} }

387
apps/web/src/stores/timeline-store.ts
View File

@ -1,10 +1,14 @@
import { create } from "zustand"; import { create } from "zustand";
import type { TrackType } from "@/types/timeline"; import type {
TrackType,
TimelineElement,
CreateTimelineElement,
} from "@/types/timeline";
import { useEditorStore } from "./editor-store"; import { useEditorStore } from "./editor-store";
import { useMediaStore, getMediaAspectRatio } from "./media-store"; import { useMediaStore, getMediaAspectRatio } from "./media-store";
// Helper function to manage clip naming with suffixes // Helper function to manage element naming with suffixes
const getClipNameWithSuffix = ( const getElementNameWithSuffix = (
originalName: string, originalName: string,
suffix: string suffix: string
): string => { ): string => {
@ -18,21 +22,11 @@ const getClipNameWithSuffix = (
return `${baseName} (${suffix})`; return `${baseName} (${suffix})`;
}; };
export interface TimelineClip {
id: string;
mediaId: string;
name: string;
duration: number;
startTime: number;
trimStart: number;
trimEnd: number;
}
export interface TimelineTrack { export interface TimelineTrack {
id: string; id: string;
name: string; name: string;
type: TrackType; type: TrackType;
clips: TimelineClip[]; elements: TimelineElement[];
muted?: boolean; muted?: boolean;
} }
@ -42,28 +36,30 @@ interface TimelineStore {
redoStack: TimelineTrack[][]; redoStack: TimelineTrack[][];
// Multi-selection // Multi-selection
selectedClips: { trackId: string; clipId: string }[]; selectedElements: { trackId: string; elementId: string }[];
selectClip: (trackId: string, clipId: string, multi?: boolean) => void; selectElement: (trackId: string, elementId: string, multi?: boolean) => void;
deselectClip: (trackId: string, clipId: string) => void; deselectElement: (trackId: string, elementId: string) => void;
clearSelectedClips: () => void; clearSelectedElements: () => void;
setSelectedClips: (clips: { trackId: string; clipId: string }[]) => void; setSelectedElements: (
elements: { trackId: string; elementId: string }[]
) => void;
// Drag state // Drag state
dragState: { dragState: {
isDragging: boolean; isDragging: boolean;
clipId: string | null; elementId: string | null;
trackId: string | null; trackId: string | null;
startMouseX: number; startMouseX: number;
startClipTime: number; startElementTime: number;
clickOffsetTime: number; clickOffsetTime: number;
currentTime: number; currentTime: number;
}; };
setDragState: (dragState: Partial<TimelineStore["dragState"]>) => void; setDragState: (dragState: Partial<TimelineStore["dragState"]>) => void;
startDrag: ( startDrag: (
clipId: string, elementId: string,
trackId: string, trackId: string,
startMouseX: number, startMouseX: number,
startClipTime: number, startElementTime: number,
clickOffsetTime: number clickOffsetTime: number
) => void; ) => void;
updateDragTime: (currentTime: number) => void; updateDragTime: (currentTime: number) => void;
@ -71,44 +67,45 @@ interface TimelineStore {
// Actions // Actions
addTrack: (type: TrackType) => string; addTrack: (type: TrackType) => string;
insertTrackAt: (type: TrackType, index: number) => string;
removeTrack: (trackId: string) => void; removeTrack: (trackId: string) => void;
addClipToTrack: (trackId: string, clip: Omit<TimelineClip, "id">) => void; addElementToTrack: (trackId: string, element: CreateTimelineElement) => void;
removeClipFromTrack: (trackId: string, clipId: string) => void; removeElementFromTrack: (trackId: string, elementId: string) => void;
moveClipToTrack: ( moveElementToTrack: (
fromTrackId: string, fromTrackId: string,
toTrackId: string, toTrackId: string,
clipId: string elementId: string
) => void; ) => void;
updateClipTrim: ( updateElementTrim: (
trackId: string, trackId: string,
clipId: string, elementId: string,
trimStart: number, trimStart: number,
trimEnd: number trimEnd: number
) => void; ) => void;
updateClipStartTime: ( updateElementStartTime: (
trackId: string, trackId: string,
clipId: string, elementId: string,
startTime: number startTime: number
) => void; ) => void;
toggleTrackMute: (trackId: string) => void; toggleTrackMute: (trackId: string) => void;
// Split operations for clips // Split operations for elements
splitClip: ( splitElement: (
trackId: string, trackId: string,
clipId: string, elementId: string,
splitTime: number splitTime: number
) => string | null; ) => string | null;
splitAndKeepLeft: ( splitAndKeepLeft: (
trackId: string, trackId: string,
clipId: string, elementId: string,
splitTime: number splitTime: number
) => void; ) => void;
splitAndKeepRight: ( splitAndKeepRight: (
trackId: string, trackId: string,
clipId: string, elementId: string,
splitTime: number splitTime: number
) => void; ) => void;
separateAudio: (trackId: string, clipId: string) => string | null; separateAudio: (trackId: string, elementId: string) => string | null;
// Computed values // Computed values
getTotalDuration: () => number; getTotalDuration: () => number;
@ -123,10 +120,10 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
tracks: [], tracks: [],
history: [], history: [],
redoStack: [], redoStack: [],
selectedClips: [], selectedElements: [],
pushHistory: () => { pushHistory: () => {
const { tracks, history, redoStack } = get(); const { tracks, history } = get();
set({ set({
history: [...history, JSON.parse(JSON.stringify(tracks))], history: [...history, JSON.parse(JSON.stringify(tracks))],
redoStack: [], redoStack: [],
@ -144,46 +141,62 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
}); });
}, },
selectClip: (trackId, clipId, multi = false) => { selectElement: (trackId, elementId, multi = false) => {
set((state) => { set((state) => {
const exists = state.selectedClips.some( const exists = state.selectedElements.some(
(c) => c.trackId === trackId && c.clipId === clipId (c) => c.trackId === trackId && c.elementId === elementId
); );
if (multi) { if (multi) {
return exists return exists
? { ? {
selectedClips: state.selectedClips.filter( selectedElements: state.selectedElements.filter(
(c) => !(c.trackId === trackId && c.clipId === clipId) (c) => !(c.trackId === trackId && c.elementId === elementId)
), ),
} }
: { selectedClips: [...state.selectedClips, { trackId, clipId }] }; : {
selectedElements: [
...state.selectedElements,
{ trackId, elementId },
],
};
} else { } else {
return { selectedClips: [{ trackId, clipId }] }; return { selectedElements: [{ trackId, elementId }] };
} }
}); });
}, },
deselectClip: (trackId, clipId) => { deselectElement: (trackId, elementId) => {
set((state) => ({ set((state) => ({
selectedClips: state.selectedClips.filter( selectedElements: state.selectedElements.filter(
(c) => !(c.trackId === trackId && c.clipId === clipId) (c) => !(c.trackId === trackId && c.elementId === elementId)
), ),
})); }));
}, },
clearSelectedClips: () => { clearSelectedElements: () => {
set({ selectedClips: [] }); set({ selectedElements: [] });
}, },
setSelectedClips: (clips) => set({ selectedClips: clips }), setSelectedElements: (elements) => set({ selectedElements: elements }),
addTrack: (type) => { addTrack: (type) => {
get().pushHistory(); get().pushHistory();
// Generate proper track name based on type
const trackName =
type === "media"
? "Media Track"
: type === "text"
? "Text Track"
: type === "audio"
? "Audio Track"
: "Track";
const newTrack: TimelineTrack = { const newTrack: TimelineTrack = {
id: crypto.randomUUID(), id: crypto.randomUUID(),
name: `${type.charAt(0).toUpperCase() + type.slice(1)} Track`, name: trackName,
type, type,
clips: [], elements: [],
muted: false, muted: false,
}; };
set((state) => ({ set((state) => ({
@ -192,6 +205,35 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
return newTrack.id; return newTrack.id;
}, },
insertTrackAt: (type, index) => {
get().pushHistory();
// Generate proper track name based on type
const trackName =
type === "media"
? "Media Track"
: type === "text"
? "Text Track"
: type === "audio"
? "Audio Track"
: "Track";
const newTrack: TimelineTrack = {
id: crypto.randomUUID(),
name: trackName,
type,
elements: [],
muted: false,
};
set((state) => {
const newTracks = [...state.tracks];
newTracks.splice(index, 0, newTrack);
return { tracks: newTracks };
});
return newTrack.id;
},
removeTrack: (trackId) => { removeTrack: (trackId) => {
get().pushHistory(); get().pushHistory();
set((state) => ({ set((state) => ({
@ -199,31 +241,64 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
})); }));
}, },
addClipToTrack: (trackId, clipData) => { addElementToTrack: (trackId, elementData) => {
get().pushHistory(); get().pushHistory();
// Check if this is the first clip being added to the timeline // Validate element type matches track type
const track = get().tracks.find((t) => t.id === trackId);
if (!track) {
console.error("Track not found:", trackId);
return;
}
// Validate element can be added to this track type
if (track.type === "media" && elementData.type !== "media") {
console.error("Media track only accepts media elements");
return;
}
if (track.type === "text" && elementData.type !== "text") {
console.error("Text track only accepts text elements");
return;
}
if (track.type === "audio" && elementData.type !== "media") {
console.error("Audio track only accepts media elements");
return;
}
// For media elements, validate mediaId exists
if (elementData.type === "media" && !elementData.mediaId) {
console.error("Media element must have mediaId");
return;
}
// For text elements, validate required text properties
if (elementData.type === "text" && !elementData.content) {
console.error("Text element must have content");
return;
}
// Check if this is the first element being added to the timeline
const currentState = get(); const currentState = get();
const totalClipsInTimeline = currentState.tracks.reduce( const totalElementsInTimeline = currentState.tracks.reduce(
(total, track) => total + track.clips.length, (total, track) => total + track.elements.length,
0 0
); );
const isFirstClip = totalClipsInTimeline === 0; const isFirstElement = totalElementsInTimeline === 0;
const newClip: TimelineClip = { const newElement: TimelineElement = {
...clipData, ...elementData,
id: crypto.randomUUID(), id: crypto.randomUUID(),
startTime: clipData.startTime || 0, startTime: elementData.startTime || 0,
trimStart: 0, trimStart: 0,
trimEnd: 0, trimEnd: 0,
}; } as TimelineElement; // Type assertion since we trust the caller passes valid data
// If this is the first clip, automatically set the project canvas size // If this is the first element and it's a media element, automatically set the project canvas size
// to match the media's aspect ratio // to match the media's aspect ratio
if (isFirstClip && clipData.mediaId) { if (isFirstElement && newElement.type === "media") {
const mediaStore = useMediaStore.getState(); const mediaStore = useMediaStore.getState();
const mediaItem = mediaStore.mediaItems.find( const mediaItem = mediaStore.mediaItems.find(
(item) => item.id === clipData.mediaId (item) => item.id === newElement.mediaId
); );
if ( if (
@ -240,13 +315,13 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
set((state) => ({ set((state) => ({
tracks: state.tracks.map((track) => tracks: state.tracks.map((track) =>
track.id === trackId track.id === trackId
? { ...track, clips: [...track.clips, newClip] } ? { ...track, elements: [...track.elements, newElement] }
: track : track
), ),
})); }));
}, },
removeClipFromTrack: (trackId, clipId) => { removeElementFromTrack: (trackId, elementId) => {
get().pushHistory(); get().pushHistory();
set((state) => ({ set((state) => ({
tracks: state.tracks tracks: state.tracks
@ -254,21 +329,25 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
track.id === trackId track.id === trackId
? { ? {
...track, ...track,
clips: track.clips.filter((clip) => clip.id !== clipId), elements: track.elements.filter(
(element) => element.id !== elementId
),
} }
: track : track
) )
.filter((track) => track.clips.length > 0), .filter((track) => track.elements.length > 0),
})); }));
}, },
moveClipToTrack: (fromTrackId, toTrackId, clipId) => { moveElementToTrack: (fromTrackId, toTrackId, elementId) => {
get().pushHistory(); get().pushHistory();
set((state) => { set((state) => {
const fromTrack = state.tracks.find((track) => track.id === fromTrackId); const fromTrack = state.tracks.find((track) => track.id === fromTrackId);
const clipToMove = fromTrack?.clips.find((clip) => clip.id === clipId); const elementToMove = fromTrack?.elements.find(
(element) => element.id === elementId
);
if (!clipToMove) return state; if (!elementToMove) return state;
return { return {
tracks: state.tracks tracks: state.tracks
@ -276,30 +355,34 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
if (track.id === fromTrackId) { if (track.id === fromTrackId) {
return { return {
...track, ...track,
clips: track.clips.filter((clip) => clip.id !== clipId), elements: track.elements.filter(
(element) => element.id !== elementId
),
}; };
} else if (track.id === toTrackId) { } else if (track.id === toTrackId) {
return { return {
...track, ...track,
clips: [...track.clips, clipToMove], elements: [...track.elements, elementToMove],
}; };
} }
return track; return track;
}) })
.filter((track) => track.clips.length > 0), .filter((track) => track.elements.length > 0),
}; };
}); });
}, },
updateClipTrim: (trackId, clipId, trimStart, trimEnd) => { updateElementTrim: (trackId, elementId, trimStart, trimEnd) => {
get().pushHistory(); get().pushHistory();
set((state) => ({ set((state) => ({
tracks: state.tracks.map((track) => tracks: state.tracks.map((track) =>
track.id === trackId track.id === trackId
? { ? {
...track, ...track,
clips: track.clips.map((clip) => elements: track.elements.map((element) =>
clip.id === clipId ? { ...clip, trimStart, trimEnd } : clip element.id === elementId
? { ...element, trimStart, trimEnd }
: element
), ),
} }
: track : track
@ -307,15 +390,15 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
})); }));
}, },
updateClipStartTime: (trackId, clipId, startTime) => { updateElementStartTime: (trackId, elementId, startTime) => {
get().pushHistory(); get().pushHistory();
set((state) => ({ set((state) => ({
tracks: state.tracks.map((track) => tracks: state.tracks.map((track) =>
track.id === trackId track.id === trackId
? { ? {
...track, ...track,
clips: track.clips.map((clip) => elements: track.elements.map((element) =>
clip.id === clipId ? { ...clip, startTime } : clip element.id === elementId ? { ...element, startTime } : element
), ),
} }
: track : track
@ -332,47 +415,48 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
})); }));
}, },
splitClip: (trackId, clipId, splitTime) => { splitElement: (trackId, elementId, splitTime) => {
const { tracks } = get(); const { tracks } = get();
const track = tracks.find((t) => t.id === trackId); const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId); const element = track?.elements.find((c) => c.id === elementId);
if (!clip) return null; if (!element) return null;
const effectiveStart = clip.startTime; const effectiveStart = element.startTime;
const effectiveEnd = const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return null; if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return null;
get().pushHistory(); get().pushHistory();
const relativeTime = splitTime - clip.startTime; const relativeTime = splitTime - element.startTime;
const firstDuration = relativeTime; const firstDuration = relativeTime;
const secondDuration = const secondDuration =
clip.duration - clip.trimStart - clip.trimEnd - relativeTime; element.duration - element.trimStart - element.trimEnd - relativeTime;
const secondClipId = crypto.randomUUID(); const secondElementId = crypto.randomUUID();
set((state) => ({ set((state) => ({
tracks: state.tracks.map((track) => tracks: state.tracks.map((track) =>
track.id === trackId track.id === trackId
? { ? {
...track, ...track,
clips: track.clips.flatMap((c) => elements: track.elements.flatMap((c) =>
c.id === clipId c.id === elementId
? [ ? [
{ {
...c, ...c,
trimEnd: c.trimEnd + secondDuration, trimEnd: c.trimEnd + secondDuration,
name: getClipNameWithSuffix(c.name, "left"), name: getElementNameWithSuffix(c.name, "left"),
}, },
{ {
...c, ...c,
id: secondClipId, id: secondElementId,
startTime: splitTime, startTime: splitTime,
trimStart: c.trimStart + firstDuration, trimStart: c.trimStart + firstDuration,
name: getClipNameWithSuffix(c.name, "right"), name: getElementNameWithSuffix(c.name, "right"),
}, },
] ]
: [c] : [c]
@ -382,40 +466,41 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
), ),
})); }));
return secondClipId; return secondElementId;
}, },
// Split clip and keep only the left portion // Split element and keep only the left portion
splitAndKeepLeft: (trackId, clipId, splitTime) => { splitAndKeepLeft: (trackId, elementId, splitTime) => {
const { tracks } = get(); const { tracks } = get();
const track = tracks.find((t) => t.id === trackId); const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId); const element = track?.elements.find((c) => c.id === elementId);
if (!clip) return; if (!element) return;
const effectiveStart = clip.startTime; const effectiveStart = element.startTime;
const effectiveEnd = const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return; if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
get().pushHistory(); get().pushHistory();
const relativeTime = splitTime - clip.startTime; const relativeTime = splitTime - element.startTime;
const durationToRemove = const durationToRemove =
clip.duration - clip.trimStart - clip.trimEnd - relativeTime; element.duration - element.trimStart - element.trimEnd - relativeTime;
set((state) => ({ set((state) => ({
tracks: state.tracks.map((track) => tracks: state.tracks.map((track) =>
track.id === trackId track.id === trackId
? { ? {
...track, ...track,
clips: track.clips.map((c) => elements: track.elements.map((c) =>
c.id === clipId c.id === elementId
? { ? {
...c, ...c,
trimEnd: c.trimEnd + durationToRemove, trimEnd: c.trimEnd + durationToRemove,
name: getClipNameWithSuffix(c.name, "left"), name: getElementNameWithSuffix(c.name, "left"),
} }
: c : c
), ),
@ -425,36 +510,37 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
})); }));
}, },
// Split clip and keep only the right portion // Split element and keep only the right portion
splitAndKeepRight: (trackId, clipId, splitTime) => { splitAndKeepRight: (trackId, elementId, splitTime) => {
const { tracks } = get(); const { tracks } = get();
const track = tracks.find((t) => t.id === trackId); const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId); const element = track?.elements.find((c) => c.id === elementId);
if (!clip) return; if (!element) return;
const effectiveStart = clip.startTime; const effectiveStart = element.startTime;
const effectiveEnd = const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd); element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return; if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
get().pushHistory(); get().pushHistory();
const relativeTime = splitTime - clip.startTime; const relativeTime = splitTime - element.startTime;
set((state) => ({ set((state) => ({
tracks: state.tracks.map((track) => tracks: state.tracks.map((track) =>
track.id === trackId track.id === trackId
? { ? {
...track, ...track,
clips: track.clips.map((c) => elements: track.elements.map((c) =>
c.id === clipId c.id === elementId
? { ? {
...c, ...c,
startTime: splitTime, startTime: splitTime,
trimStart: c.trimStart + relativeTime, trimStart: c.trimStart + relativeTime,
name: getClipNameWithSuffix(c.name, "right"), name: getElementNameWithSuffix(c.name, "right"),
} }
: c : c
), ),
@ -464,33 +550,33 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
})); }));
}, },
// Extract audio from video clip to an audio track // Extract audio from video element to an audio track
separateAudio: (trackId, clipId) => { separateAudio: (trackId, elementId) => {
const { tracks } = get(); const { tracks } = get();
const track = tracks.find((t) => t.id === trackId); const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId); const element = track?.elements.find((c) => c.id === elementId);
if (!clip || track?.type !== "video") return null; if (!element || track?.type !== "media") return null;
get().pushHistory(); get().pushHistory();
// Find existing audio track or prepare to create one // Find existing audio track or prepare to create one
const existingAudioTrack = tracks.find((t) => t.type === "audio"); const existingAudioTrack = tracks.find((t) => t.type === "audio");
const audioClipId = crypto.randomUUID(); const audioElementId = crypto.randomUUID();
if (existingAudioTrack) { if (existingAudioTrack) {
// Add audio clip to existing audio track // Add audio element to existing audio track
set((state) => ({ set((state) => ({
tracks: state.tracks.map((track) => tracks: state.tracks.map((track) =>
track.id === existingAudioTrack.id track.id === existingAudioTrack.id
? { ? {
...track, ...track,
clips: [ elements: [
...track.clips, ...track.elements,
{ {
...clip, ...element,
id: audioClipId, id: audioElementId,
name: getClipNameWithSuffix(clip.name, "audio"), name: getElementNameWithSuffix(element.name, "audio"),
}, },
], ],
} }
@ -498,16 +584,16 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
), ),
})); }));
} else { } else {
// Create new audio track with the audio clip in a single atomic update // Create new audio track with the audio element in a single atomic update
const newAudioTrack: TimelineTrack = { const newAudioTrack: TimelineTrack = {
id: crypto.randomUUID(), id: crypto.randomUUID(),
name: "Audio Track", name: "Audio Track",
type: "audio", type: "audio",
clips: [ elements: [
{ {
...clip, ...element,
id: audioClipId, id: audioElementId,
name: getClipNameWithSuffix(clip.name, "audio"), name: getElementNameWithSuffix(element.name, "audio"),
}, },
], ],
muted: false, muted: false,
@ -518,7 +604,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
})); }));
} }
return audioClipId; return audioElementId;
}, },
getTotalDuration: () => { getTotalDuration: () => {
@ -526,10 +612,13 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
if (tracks.length === 0) return 0; if (tracks.length === 0) return 0;
const trackEndTimes = tracks.map((track) => const trackEndTimes = tracks.map((track) =>
track.clips.reduce((maxEnd, clip) => { track.elements.reduce((maxEnd, element) => {
const clipEnd = const elementEnd =
clip.startTime + clip.duration - clip.trimStart - clip.trimEnd; element.startTime +
return Math.max(maxEnd, clipEnd); element.duration -
element.trimStart -
element.trimEnd;
return Math.max(maxEnd, elementEnd);
}, 0) }, 0)
); );
@ -545,10 +634,10 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
dragState: { dragState: {
isDragging: false, isDragging: false,
clipId: null, elementId: null,
trackId: null, trackId: null,
startMouseX: 0, startMouseX: 0,
startClipTime: 0, startElementTime: 0,
clickOffsetTime: 0, clickOffsetTime: 0,
currentTime: 0, currentTime: 0,
}, },
@ -558,16 +647,22 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
dragState: { ...state.dragState, ...dragState }, dragState: { ...state.dragState, ...dragState },
})), })),
startDrag: (clipId, trackId, startMouseX, startClipTime, clickOffsetTime) => { startDrag: (
elementId,
trackId,
startMouseX,
startElementTime,
clickOffsetTime
) => {
set({ set({
dragState: { dragState: {
isDragging: true, isDragging: true,
clipId, elementId,
trackId, trackId,
startMouseX, startMouseX,
startClipTime, startElementTime,
clickOffsetTime, clickOffsetTime,
currentTime: startClipTime, currentTime: startElementTime,
}, },
}); });
}, },
@ -585,10 +680,10 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
set({ set({
dragState: { dragState: {
isDragging: false, isDragging: false,
clipId: null, elementId: null,
trackId: null, trackId: null,
startMouseX: 0, startMouseX: 0,
startClipTime: 0, startElementTime: 0,
clickOffsetTime: 0, clickOffsetTime: 0,
currentTime: 0, currentTime: 0,
}, },

73
apps/web/src/types/timeline.ts
View File

@ -1,20 +1,79 @@
import { TimelineTrack, TimelineClip } from "@/stores/timeline-store"; import { MediaType } from "@/stores/media-store";
import { TimelineTrack } from "@/stores/timeline-store";
export type TrackType = "video" | "audio" | "effects"; export type TrackType = "media" | "text" | "audio";
export interface TimelineClipProps { // Base element properties
clip: TimelineClip; interface BaseTimelineElement {
id: string;
name: string;
duration: number;
startTime: number;
trimStart: number;
trimEnd: number;
}
// Media element that references MediaStore
export interface MediaElement extends BaseTimelineElement {
type: "media";
mediaId: string;
}
// Text element with embedded text data
export interface TextElement extends BaseTimelineElement {
type: "text";
content: string;
fontSize: number;
fontFamily: string;
color: string;
backgroundColor: string;
textAlign: "left" | "center" | "right";
fontWeight: "normal" | "bold";
fontStyle: "normal" | "italic";
textDecoration: "none" | "underline" | "line-through";
x: number; // Position relative to canvas center
y: number; // Position relative to canvas center
rotation: number; // in degrees
opacity: number; // 0-1
}
// Typed timeline elements
export type TimelineElement = MediaElement | TextElement;
// Creation types (without id, for addElementToTrack)
export type CreateMediaElement = Omit<MediaElement, "id">;
export type CreateTextElement = Omit<TextElement, "id">;
export type CreateTimelineElement = CreateMediaElement | CreateTextElement;
export interface TimelineElementProps {
element: TimelineElement;
track: TimelineTrack; track: TimelineTrack;
zoomLevel: number; zoomLevel: number;
isSelected: boolean; isSelected: boolean;
onClipMouseDown: (e: React.MouseEvent, clip: TimelineClip) => void; onElementMouseDown: (e: React.MouseEvent, element: TimelineElement) => void;
onClipClick: (e: React.MouseEvent, clip: TimelineClip) => void; onElementClick: (e: React.MouseEvent, element: TimelineElement) => void;
} }
export interface ResizeState { export interface ResizeState {
clipId: string; elementId: string;
side: "left" | "right"; side: "left" | "right";
startX: number; startX: number;
initialTrimStart: number; initialTrimStart: number;
initialTrimEnd: number; initialTrimEnd: number;
} }
// Drag data types for type-safe drag and drop
export interface MediaItemDragData {
id: string;
type: MediaType;
name: string;
}
export interface TextItemDragData {
id: string;
type: "text";
name: string;
content: string;
}
export type DragData = MediaItemDragData | TextItemDragData;