summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMaze <167211895+mazeincoding@users.noreply.github.com>2025-06-24 14:48:48 +0200
committerGitHub <noreply@github.com>2025-06-24 14:48:48 +0200
commit20bb485ad11ee0a1199a3142e32536a6a90fbbe6 (patch)
tree449519cbc4ecd21afca5e39c3324b7b67c28e2a5
parentd929caabffb0bcefd2584f384ee01919543c53b1 (diff)
parent4b2afb7271c5639062494cec190825b6389bef0a (diff)
downloadopencut-20bb485ad11ee0a1199a3142e32536a6a90fbbe6.tar.gz
Merge branch 'main' into main
-rw-r--r--apps/web/src/components/editor/timeline.tsx314
-rw-r--r--apps/web/src/lib/waitlist.ts2
2 files changed, 209 insertions, 107 deletions
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 9dec5bbc..c397dd1a 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -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,
diff --git a/apps/web/src/lib/waitlist.ts b/apps/web/src/lib/waitlist.ts
index e4fcd487..c01347d8 100644
--- a/apps/web/src/lib/waitlist.ts
+++ b/apps/web/src/lib/waitlist.ts
@@ -1,7 +1,5 @@
-// Jeanpseven esteve aqui
import { db } from "@opencut/db";
import { waitlist } from "@opencut/db/schema";
-
import { sql } from "drizzle-orm";
export async function getWaitlistCount() {