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

Merge branch 'main' into implement-workflows

Browse Source
This commit is contained in:
Zaid-maker
2025-06-24 17:57:40 +05:00
parent 62051de6c1 4b2afb7271
commit 82e7d2236d
2 changed files with 211 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,10 +40,32 @@ export function Timeline() {
// Timeline shows all tracks (video, audio, effects) and their clips.
// You can drag media here to add it to your project.
// Clips can be trimmed, deleted, and moved.
const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips, setSelectedClips, updateClipTrim, undo, redo } =
useTimelineStore();
const {
tracks,
addTrack,
addClipToTrack,
removeTrack,
toggleTrackMute,
removeClipFromTrack,
getTotalDuration,
selectedClips,
clearSelectedClips,
setSelectedClips,
updateClipTrim,
undo,
redo,
} = useTimelineStore();
const { mediaItems, addMediaItem } = useMediaStore();
const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle, setSpeed, speed } = usePlaybackStore();
const {
currentTime,
duration,
seek,
setDuration,
isPlaying,
toggle,
setSpeed,
speed,
} = usePlaybackStore();
const [isDragOver, setIsDragOver] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
const [zoomLevel, setZoomLevel] = useState(1);
@ -53,7 +75,7 @@ export function Timeline() {
// Unified context menu state
const [contextMenu, setContextMenu] = useState<{
type: 'track' | 'clip';
type: "track" | "clip";
trackId: string;
clipId?: string;
x: number;
@ -92,7 +114,10 @@ export function Timeline() {
// Keyboard event for deleting selected clips
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.key === "Delete" || e.key === "Backspace") && selectedClips.length > 0) {
if (
(e.key === "Delete" || e.key === "Backspace") &&
selectedClips.length > 0
) {
selectedClips.forEach(({ trackId, clipId }) => {
removeClipFromTrack(trackId, clipId);
});
@ -148,10 +173,15 @@ export function Timeline() {
useEffect(() => {
if (!marquee || !marquee.active) return;
const handleMouseMove = (e: MouseEvent) => {
setMarquee((prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY });
setMarquee(
(prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY }
);
};
const handleMouseUp = (e: MouseEvent) => {
setMarquee((prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false });
setMarquee(
(prev) =>
prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false }
);
};
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
@ -177,7 +207,8 @@ export function Timeline() {
return;
}
// Clamp to timeline bounds
const clamp = (val: number, min: number, max: number) => Math.max(min, Math.min(max, val));
const clamp = (val: number, min: number, max: number) =>
Math.max(min, Math.min(max, val));
const bx1 = clamp(x1, 0, rect.width);
const bx2 = clamp(x2, 0, rect.width);
const by1 = clamp(y1, 0, rect.height);
@ -203,10 +234,14 @@ export function Timeline() {
});
if (newSelection.length > 0) {
if (marquee.additive) {
const selectedSet = new Set(selectedClips.map((c) => c.trackId + ':' + c.clipId));
const selectedSet = new Set(
selectedClips.map((c) => c.trackId + ":" + c.clipId)
);
newSelection = [
...selectedClips,
...newSelection.filter((c) => !selectedSet.has(c.trackId + ':' + c.clipId)),
...newSelection.filter(
(c) => !selectedSet.has(c.trackId + ":" + c.clipId)
),
];
}
setSelectedClips(newSelection);
@ -214,7 +249,14 @@ export function Timeline() {
clearSelectedClips();
}
setMarquee(null);
}, [marquee, tracks, zoomLevel, selectedClips, setSelectedClips, clearSelectedClips]);
}, [
marquee,
tracks,
zoomLevel,
selectedClips,
setSelectedClips,
clearSelectedClips,
]);
const handleDragEnter = (e: React.DragEvent) => {
// When something is dragged over the timeline, show overlay
@ -254,7 +296,9 @@ export function Timeline() {
dragCounterRef.current = 0;
// Ignore timeline clip drags - they're handled by track-specific handlers
const hasTimelineClip = e.dataTransfer.types.includes("application/x-timeline-clip");
const hasTimelineClip = e.dataTransfer.types.includes(
"application/x-timeline-clip"
);
if (hasTimelineClip) {
return;
}
@ -327,14 +371,14 @@ export function Timeline() {
const clickX = e.clientX - rect.left;
const clickedTime = clickX / (50 * zoomLevel);
const clampedTime = Math.max(0, Math.min(duration, clickedTime));
seek(clampedTime);
};
const handleTimelineAreaClick = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
clearSelectedClips();
// Calculate the clicked time position and seek to it
handleSeekToPosition(e);
}
@ -351,21 +395,27 @@ export function Timeline() {
};
// --- Playhead Scrubbing Handlers ---
const handlePlayheadMouseDown = useCallback((e: React.MouseEvent) => {
e.preventDefault();
setIsScrubbing(true);
handleScrub(e);
}, [duration, zoomLevel]);
const handlePlayheadMouseDown = useCallback(
(e: React.MouseEvent) => {
e.preventDefault();
setIsScrubbing(true);
handleScrub(e);
},
[duration, zoomLevel]
);
const handleScrub = useCallback((e: MouseEvent | React.MouseEvent) => {
const timeline = timelineRef.current;
if (!timeline) return;
const rect = timeline.getBoundingClientRect();
const x = e.clientX - rect.left;
const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
setScrubTime(time);
seek(time); // update video preview in real time
}, [duration, zoomLevel, seek]);
const handleScrub = useCallback(
(e: MouseEvent | React.MouseEvent) => {
const timeline = timelineRef.current;
if (!timeline) return;
const rect = timeline.getBoundingClientRect();
const x = e.clientX - rect.left;
const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
setScrubTime(time);
seek(time); // update video preview in real time
},
[duration, zoomLevel, seek]
);
useEffect(() => {
if (!isScrubbing) return;
@ -383,7 +433,8 @@ export function Timeline() {
};
}, [isScrubbing, scrubTime, seek, handleScrub]);
const playheadPosition = isScrubbing && scrubTime !== null ? scrubTime : currentTime;
const playheadPosition =
isScrubbing && scrubTime !== null ? scrubTime : currentTime;
const dragProps = {
onDragEnter: handleDragEnter,
@ -399,14 +450,20 @@ export function Timeline() {
return;
}
selectedClips.forEach(({ trackId, clipId }) => {
const track = tracks.find(t => t.id === trackId);
const clip = track?.clips.find(c => c.id === clipId);
const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId);
if (clip && track) {
const splitTime = currentTime;
const effectiveStart = clip.startTime;
const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
if (splitTime > effectiveStart && splitTime < effectiveEnd) {
updateClipTrim(track.id, clip.id, clip.trimStart, clip.trimEnd + (effectiveEnd - splitTime));
updateClipTrim(
track.id,
clip.id,
clip.trimStart,
clip.trimEnd + (effectiveEnd - splitTime)
);
addClipToTrack(track.id, {
mediaId: clip.mediaId,
name: clip.name + " (split)",
@ -427,14 +484,17 @@ export function Timeline() {
return;
}
selectedClips.forEach(({ trackId, clipId }) => {
const track = tracks.find(t => t.id === trackId);
const clip = track?.clips.find(c => c.id === clipId);
const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId);
if (clip && track) {
addClipToTrack(track.id, {
mediaId: clip.mediaId,
name: clip.name + " (copy)",
duration: clip.duration,
startTime: clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd) + 0.1,
startTime:
clip.startTime +
(clip.duration - clip.trimStart - clip.trimEnd) +
0.1,
trimStart: clip.trimStart,
trimEnd: clip.trimEnd,
});
@ -449,8 +509,8 @@ export function Timeline() {
return;
}
selectedClips.forEach(({ trackId, clipId }) => {
const track = tracks.find(t => t.id === trackId);
const clip = track?.clips.find(c => c.id === 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, {
@ -478,20 +538,23 @@ export function Timeline() {
toast.success("Deleted selected clip(s)");
};
// Prevent explorer zooming in/out when in timeline
useEffect(() => {
const preventZoom = (e: WheelEvent) => {
// if (isInTimeline && (e.ctrlKey || e.metaKey)) {
if (isInTimeline && (e.ctrlKey || e.metaKey) && timelineRef.current?.contains(e.target as Node)) {
if (
isInTimeline &&
(e.ctrlKey || e.metaKey) &&
timelineRef.current?.contains(e.target as Node)
) {
e.preventDefault();
}
};
document.addEventListener('wheel', preventZoom, { passive: false });
document.addEventListener("wheel", preventZoom, { passive: false });
return () => {
document.removeEventListener('wheel', preventZoom);
document.removeEventListener("wheel", preventZoom);
};
}, [isInTimeline]);
@ -524,17 +587,24 @@ export function Timeline() {
onClick={toggle}
className="mr-2"
>
{isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
{isPlaying ? (
<Pause className="h-4 w-4" />
) : (
<Play className="h-4 w-4" />
)}
</Button>
</TooltipTrigger>
<TooltipContent>{isPlaying ? "Pause (Space)" : "Play (Space)"}</TooltipContent>
<TooltipContent>
{isPlaying ? "Pause (Space)" : "Play (Space)"}
</TooltipContent>
</Tooltip>
<div className="w-px h-6 bg-border mx-1" />
{/* Time Display */}
<div className="text-xs text-muted-foreground font-mono px-2">
{Math.floor(currentTime * 10) / 10}s / {Math.floor(duration * 10) / 10}s
{Math.floor(currentTime * 10) / 10}s /{" "}
{Math.floor(duration * 10) / 10}s
</div>
<div className="w-px h-6 bg-border mx-1" />
@ -606,7 +676,11 @@ export function Timeline() {
<Tooltip>
<TooltipTrigger asChild>
<Button variant="text" size="icon" onClick={handleDuplicateSelected}>
<Button
variant="text"
size="icon"
onClick={handleDuplicateSelected}
>
<Copy className="h-4 w-4" />
</Button>
</TooltipTrigger>
@ -710,17 +784,19 @@ export function Timeline() {
return (
<div
key={i}
className={`absolute top-0 bottom-0 ${isMainMarker
? "border-l border-muted-foreground/40"
: "border-l border-muted-foreground/20"
}`}
className={`absolute top-0 bottom-0 ${
isMainMarker
? "border-l border-muted-foreground/40"
: "border-l border-muted-foreground/20"
}`}
style={{ left: `${time * 50 * zoomLevel}px` }}
>
<span
className={`absolute top-1 left-1 text-xs ${isMainMarker
? "text-muted-foreground font-medium"
: "text-muted-foreground/70"
}`}
className={`absolute top-1 left-1 text-xs ${
isMainMarker
? "text-muted-foreground font-medium"
: "text-muted-foreground/70"
}`}
>
{(() => {
const formatTime = (seconds: number) => {
@ -762,18 +838,8 @@ export function Timeline() {
{/* Tracks Area */}
<div className="flex-1 flex overflow-hidden">
{/* Track Labels */}
<div className="w-48 flex-shrink-0 border-r bg-background overflow-y-auto">
{tracks.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full py-8 text-center px-4">
<div className="w-12 h-12 rounded-full bg-muted/30 flex items-center justify-center mb-3">
<SplitSquareHorizontal className="h-6 w-6 text-muted-foreground" />
</div>
<p className="text-sm text-muted-foreground">No tracks</p>
<p className="text-xs text-muted-foreground/70 mt-1">
Drop media to create tracks
</p>
</div>
) : (
{tracks.length > 0 && (
<div className="w-48 flex-shrink-0 border-r bg-background overflow-y-auto">
<div className="flex flex-col">
{tracks.map((track) => (
<div
@ -782,7 +848,7 @@ export function Timeline() {
onContextMenu={(e) => {
e.preventDefault();
setContextMenu({
type: 'track',
type: "track",
trackId: track.id,
x: e.clientX,
y: e.clientY,
@ -795,8 +861,8 @@ export function Timeline() {
track.type === "video"
? "bg-blue-500"
: track.type === "audio"
? "bg-green-500"
: "bg-purple-500"
? "bg-green-500"
: "bg-purple-500"
}`}
/>
<span className="ml-2 text-sm font-medium truncate">
@ -811,17 +877,21 @@ export function Timeline() {
</div>
))}
</div>
)}
</div>
</div>
)}
{/* Timeline Tracks Content */}
<div className="flex-1 relative overflow-hidden">
<div className="w-full h-[600px] overflow-hidden flex" ref={timelineRef} style={{ position: 'relative' }}>
{/* Timeline grid and clips area (with left margin for sidebar) */}
<div
className="w-full h-full overflow-hidden flex"
ref={timelineRef}
style={{ position: "relative" }}
>
{/* Timeline grid and clips area (with left margin for sifdebar) */}
<div
className="relative flex-1"
style={{
height: `${tracks.length * 60}px`,
height: `${Math.max(200, Math.min(800, tracks.length * 60))}px`,
width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,
}}
onClick={handleTimelineAreaClick}
@ -852,7 +922,7 @@ export function Timeline() {
onContextMenu={(e) => {
e.preventDefault();
setContextMenu({
type: 'track',
type: "track",
trackId: track.id,
x: e.clientX,
y: e.clientY,
@ -893,19 +963,23 @@ export function Timeline() {
style={{ left: contextMenu.x, top: contextMenu.y }}
onContextMenu={(e) => e.preventDefault()}
>
{contextMenu.type === 'track' ? (
{contextMenu.type === "track" ? (
// Track context menu
<>
<button
className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
onClick={() => {
const track = tracks.find(t => t.id === contextMenu.trackId);
const track = tracks.find(
(t) => t.id === contextMenu.trackId
);
if (track) toggleTrackMute(track.id);
setContextMenu(null);
}}
>
{(() => {
const track = tracks.find(t => t.id === contextMenu.trackId);
const track = tracks.find(
(t) => t.id === contextMenu.trackId
);
return track?.muted ? (
<>
<Volume2 className="h-4 w-4 mr-2" />
@ -939,14 +1013,23 @@ export function Timeline() {
className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
onClick={() => {
if (contextMenu.clipId) {
const track = tracks.find(t => t.id === contextMenu.trackId);
const clip = track?.clips.find(c => c.id === contextMenu.clipId);
const track = tracks.find(
(t) => t.id === contextMenu.trackId
);
const clip = track?.clips.find(
(c) => c.id === contextMenu.clipId
);
if (clip && track) {
const splitTime = currentTime;
const effectiveStart = clip.startTime;
const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
const effectiveEnd =
clip.startTime +
(clip.duration - clip.trimStart - clip.trimEnd);
if (splitTime > effectiveStart && splitTime < effectiveEnd) {
if (
splitTime > effectiveStart &&
splitTime < effectiveEnd
) {
updateClipTrim(
track.id,
clip.id,
@ -958,7 +1041,8 @@ export function Timeline() {
name: clip.name + " (split)",
duration: clip.duration,
startTime: splitTime,
trimStart: clip.trimStart + (splitTime - effectiveStart),
trimStart:
clip.trimStart + (splitTime - effectiveStart),
trimEnd: clip.trimEnd,
});
toast.success("Clip split successfully");
@ -977,14 +1061,21 @@ export function Timeline() {
className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
onClick={() => {
if (contextMenu.clipId) {
const track = tracks.find(t => t.id === contextMenu.trackId);
const clip = track?.clips.find(c => c.id === contextMenu.clipId);
const track = tracks.find(
(t) => t.id === contextMenu.trackId
);
const clip = track?.clips.find(
(c) => c.id === contextMenu.clipId
);
if (clip && track) {
useTimelineStore.getState().addClipToTrack(track.id, {
mediaId: clip.mediaId,
name: clip.name + " (copy)",
duration: clip.duration,
startTime: clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd) + 0.1,
startTime:
clip.startTime +
(clip.duration - clip.trimStart - clip.trimEnd) +
0.1,
trimStart: clip.trimStart,
trimEnd: clip.trimEnd,
});
@ -1002,7 +1093,10 @@ export function Timeline() {
className="flex items-center w-full px-3 py-2 text-destructive hover:bg-destructive/10 transition-colors text-left"
onClick={() => {
if (contextMenu.clipId) {
removeClipFromTrack(contextMenu.trackId, contextMenu.clipId);
removeClipFromTrack(
contextMenu.trackId,
contextMenu.clipId
);
toast.success("Clip deleted");
}
setContextMenu(null);
@ -1026,7 +1120,15 @@ function TimelineTrackContent({
}: {
track: TimelineTrack;
zoomLevel: number;
setContextMenu: (menu: { type: 'track' | 'clip'; trackId: string; clipId?: string; x: number; y: number; } | null) => void;
setContextMenu: (
menu: {
type: "track" | "clip";
trackId: string;
clipId?: string;
x: number;
y: number;
} | null
) => void;
}) {
const { mediaItems } = useMediaStore();
const {
@ -1171,7 +1273,7 @@ function TimelineTrackContent({
return;
}
}
} catch (error) { }
} catch (error) {}
}
// Calculate drop position for overlap checking
@ -1549,18 +1651,19 @@ function TimelineTrackContent({
return (
<div
className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver
? wouldOverlap
? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
: "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
: "hover:bg-muted/20"
}`}
className={`w-full h-full transition-all duration-150 ease-out ${
isDraggedOver
? wouldOverlap
? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
: "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
: "hover:bg-muted/20"
}`}
onContextMenu={(e) => {
e.preventDefault();
// Only show track menu if we didn't click on a clip
if (!(e.target as HTMLElement).closest(".timeline-clip")) {
setContextMenu({
type: 'track',
type: "track",
trackId: track.id,
x: e.clientX,
y: e.clientY,
@ -1578,12 +1681,13 @@ function TimelineTrackContent({
<div className="h-full relative track-clips-container min-w-full">
{track.clips.length === 0 ? (
<div
className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${isDropping
? wouldOverlap
? "border-red-500 bg-red-500/10 text-red-600"
: "border-blue-500 bg-blue-500/10 text-blue-600"
: "border-muted/30"
}`}
className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${
isDropping
? wouldOverlap
? "border-red-500 bg-red-500/10 text-red-600"
: "border-blue-500 bg-blue-500/10 text-blue-600"
: "border-muted/30"
}`}
>
{isDropping
? wouldOverlap
@ -1614,7 +1718,7 @@ function TimelineTrackContent({
const isSelected = selectedClips.some(
(c) => c.trackId === track.id && c.clipId === clip.id
);
if (e.metaKey || e.ctrlKey || e.shiftKey) {
// Multi-selection mode: toggle the clip
selectClip(track.id, clip.id, true);
@ -1631,7 +1735,7 @@ function TimelineTrackContent({
e.preventDefault();
e.stopPropagation();
setContextMenu({
type: 'clip',
type: "clip",
trackId: track.id,
clipId: clip.id,
x: e.clientX,

4
apps/web/src/lib/waitlist.ts
View File

@ -1,5 +1,5 @@
import { db } from "@/lib/db";
import { waitlist } from "@/lib/db/schema";
import { db } from "@opencut/db";
import { waitlist } from "@opencut/db/schema";
import { sql } from "drizzle-orm";
export async function getWaitlistCount() {