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

Merge branch 'main' into main

Browse Source
This commit is contained in:
Maze
2025-06-24 14:48:48 +02:00
committed by GitHub
parent d929caabff 4b2afb7271
commit 20bb485ad1
2 changed files with 209 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
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. // Timeline shows all tracks (video, audio, effects) and their clips.
// 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. // Clips can be trimmed, deleted, and moved.
const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips, setSelectedClips, updateClipTrim, undo, redo } = const {
useTimelineStore(); tracks,
addTrack,
addClipToTrack,
removeTrack,
toggleTrackMute,
removeClipFromTrack,
getTotalDuration,
selectedClips,
clearSelectedClips,
setSelectedClips,
updateClipTrim,
undo,
redo,
} = useTimelineStore();
const { mediaItems, addMediaItem } = useMediaStore(); 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 [isDragOver, setIsDragOver] = useState(false);
const [isProcessing, setIsProcessing] = useState(false); const [isProcessing, setIsProcessing] = useState(false);
const [zoomLevel, setZoomLevel] = useState(1); const [zoomLevel, setZoomLevel] = useState(1);
@ -53,7 +75,7 @@ export function Timeline() {
// Unified context menu state // Unified context menu state
const [contextMenu, setContextMenu] = useState<{ const [contextMenu, setContextMenu] = useState<{
type: 'track' | 'clip'; type: "track" | "clip";
trackId: string; trackId: string;
clipId?: string; clipId?: string;
x: number; x: number;
@ -92,7 +114,10 @@ export function Timeline() {
// Keyboard event for deleting selected clips // Keyboard event for deleting selected clips
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { 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 }) => { selectedClips.forEach(({ trackId, clipId }) => {
removeClipFromTrack(trackId, clipId); removeClipFromTrack(trackId, clipId);
}); });
@ -148,10 +173,15 @@ export function Timeline() {
useEffect(() => { useEffect(() => {
if (!marquee || !marquee.active) return; if (!marquee || !marquee.active) return;
const handleMouseMove = (e: MouseEvent) => { 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) => { 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("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp); window.addEventListener("mouseup", handleMouseUp);
@ -177,7 +207,8 @@ export function Timeline() {
return; return;
} }
// Clamp to timeline bounds // 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 bx1 = clamp(x1, 0, rect.width);
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);
@ -203,10 +234,14 @@ export function Timeline() {
}); });
if (newSelection.length > 0) { if (newSelection.length > 0) {
if (marquee.additive) { 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 = [ newSelection = [
...selectedClips, ...selectedClips,
...newSelection.filter((c) => !selectedSet.has(c.trackId + ':' + c.clipId)), ...newSelection.filter(
(c) => !selectedSet.has(c.trackId + ":" + c.clipId)
),
]; ];
} }
setSelectedClips(newSelection); setSelectedClips(newSelection);
@ -214,7 +249,14 @@ export function Timeline() {
clearSelectedClips(); clearSelectedClips();
} }
setMarquee(null); setMarquee(null);
}, [marquee, tracks, zoomLevel, selectedClips, setSelectedClips, clearSelectedClips]); }, [
marquee,
tracks,
zoomLevel,
selectedClips,
setSelectedClips,
clearSelectedClips,
]);
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
@ -254,7 +296,9 @@ export function Timeline() {
dragCounterRef.current = 0; dragCounterRef.current = 0;
// Ignore timeline clip drags - they're handled by track-specific handlers // 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) { if (hasTimelineClip) {
return; return;
} }
@ -351,13 +395,17 @@ export function Timeline() {
}; };
// --- Playhead Scrubbing Handlers --- // --- Playhead Scrubbing Handlers ---
const handlePlayheadMouseDown = useCallback((e: React.MouseEvent) => { const handlePlayheadMouseDown = useCallback(
(e: React.MouseEvent) => {
e.preventDefault(); e.preventDefault();
setIsScrubbing(true); setIsScrubbing(true);
handleScrub(e); handleScrub(e);
}, [duration, zoomLevel]); },
[duration, zoomLevel]
);
const handleScrub = useCallback((e: MouseEvent | React.MouseEvent) => { const handleScrub = useCallback(
(e: MouseEvent | React.MouseEvent) => {
const timeline = timelineRef.current; const timeline = timelineRef.current;
if (!timeline) return; if (!timeline) return;
const rect = timeline.getBoundingClientRect(); const rect = timeline.getBoundingClientRect();
@ -365,7 +413,9 @@ export function Timeline() {
const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel))); const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
setScrubTime(time); setScrubTime(time);
seek(time); // update video preview in real time seek(time); // update video preview in real time
}, [duration, zoomLevel, seek]); },
[duration, zoomLevel, seek]
);
useEffect(() => { useEffect(() => {
if (!isScrubbing) return; if (!isScrubbing) return;
@ -383,7 +433,8 @@ export function Timeline() {
}; };
}, [isScrubbing, scrubTime, seek, handleScrub]); }, [isScrubbing, scrubTime, seek, handleScrub]);
const playheadPosition = isScrubbing && scrubTime !== null ? scrubTime : currentTime; const playheadPosition =
isScrubbing && scrubTime !== null ? scrubTime : currentTime;
const dragProps = { const dragProps = {
onDragEnter: handleDragEnter, onDragEnter: handleDragEnter,
@ -399,14 +450,20 @@ export function Timeline() {
return; return;
} }
selectedClips.forEach(({ trackId, clipId }) => { selectedClips.forEach(({ trackId, clipId }) => {
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 clip = track?.clips.find((c) => c.id === clipId);
if (clip && track) { if (clip && track) {
const splitTime = currentTime; const splitTime = currentTime;
const effectiveStart = clip.startTime; 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, clip.trimStart, clip.trimEnd + (effectiveEnd - splitTime)); updateClipTrim(
track.id,
clip.id,
clip.trimStart,
clip.trimEnd + (effectiveEnd - splitTime)
);
addClipToTrack(track.id, { addClipToTrack(track.id, {
mediaId: clip.mediaId, mediaId: clip.mediaId,
name: clip.name + " (split)", name: clip.name + " (split)",
@ -427,14 +484,17 @@ export function Timeline() {
return; return;
} }
selectedClips.forEach(({ trackId, clipId }) => { selectedClips.forEach(({ trackId, clipId }) => {
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 clip = track?.clips.find((c) => c.id === clipId);
if (clip && track) { if (clip && track) {
addClipToTrack(track.id, { addClipToTrack(track.id, {
mediaId: clip.mediaId, mediaId: clip.mediaId,
name: clip.name + " (copy)", name: clip.name + " (copy)",
duration: clip.duration, 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, trimStart: clip.trimStart,
trimEnd: clip.trimEnd, trimEnd: clip.trimEnd,
}); });
@ -449,8 +509,8 @@ export function Timeline() {
return; return;
} }
selectedClips.forEach(({ trackId, clipId }) => { selectedClips.forEach(({ trackId, clipId }) => {
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 clip = track?.clips.find((c) => c.id === clipId);
if (clip && track) { if (clip && track) {
// Add a new freeze frame clip at the playhead // Add a new freeze frame clip at the playhead
addClipToTrack(track.id, { addClipToTrack(track.id, {
@ -478,20 +538,23 @@ export function Timeline() {
toast.success("Deleted selected clip(s)"); toast.success("Deleted selected clip(s)");
}; };
// Prevent explorer zooming in/out when in timeline // Prevent explorer zooming in/out when in timeline
useEffect(() => { useEffect(() => {
const preventZoom = (e: WheelEvent) => { const preventZoom = (e: WheelEvent) => {
// if (isInTimeline && (e.ctrlKey || e.metaKey)) { // 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(); e.preventDefault();
} }
}; };
document.addEventListener('wheel', preventZoom, { passive: false }); document.addEventListener("wheel", preventZoom, { passive: false });
return () => { return () => {
document.removeEventListener('wheel', preventZoom); document.removeEventListener("wheel", preventZoom);
}; };
}, [isInTimeline]); }, [isInTimeline]);
@ -524,17 +587,24 @@ export function Timeline() {
onClick={toggle} onClick={toggle}
className="mr-2" 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> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>{isPlaying ? "Pause (Space)" : "Play (Space)"}</TooltipContent> <TooltipContent>
{isPlaying ? "Pause (Space)" : "Play (Space)"}
</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 className="text-xs text-muted-foreground font-mono px-2"> <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>
<div className="w-px h-6 bg-border mx-1" /> <div className="w-px h-6 bg-border mx-1" />
@ -606,7 +676,11 @@ export function Timeline() {
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button variant="text" size="icon" onClick={handleDuplicateSelected}> <Button
variant="text"
size="icon"
onClick={handleDuplicateSelected}
>
<Copy className="h-4 w-4" /> <Copy className="h-4 w-4" />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
@ -710,14 +784,16 @@ export function Timeline() {
return ( return (
<div <div
key={i} key={i}
className={`absolute top-0 bottom-0 ${isMainMarker className={`absolute top-0 bottom-0 ${
isMainMarker
? "border-l border-muted-foreground/40" ? "border-l border-muted-foreground/40"
: "border-l border-muted-foreground/20" : "border-l border-muted-foreground/20"
}`} }`}
style={{ left: `${time * 50 * zoomLevel}px` }} style={{ left: `${time * 50 * zoomLevel}px` }}
> >
<span <span
className={`absolute top-1 left-1 text-xs ${isMainMarker className={`absolute top-1 left-1 text-xs ${
isMainMarker
? "text-muted-foreground font-medium" ? "text-muted-foreground font-medium"
: "text-muted-foreground/70" : "text-muted-foreground/70"
}`} }`}
@ -762,18 +838,8 @@ export function Timeline() {
{/* Tracks Area */} {/* Tracks Area */}
<div className="flex-1 flex overflow-hidden"> <div className="flex-1 flex overflow-hidden">
{/* Track Labels */} {/* Track Labels */}
{tracks.length > 0 && (
<div className="w-48 flex-shrink-0 border-r bg-background overflow-y-auto"> <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>
) : (
<div className="flex flex-col"> <div className="flex flex-col">
{tracks.map((track) => ( {tracks.map((track) => (
<div <div
@ -782,7 +848,7 @@ export function Timeline() {
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
setContextMenu({ setContextMenu({
type: 'track', type: "track",
trackId: track.id, trackId: track.id,
x: e.clientX, x: e.clientX,
y: e.clientY, y: e.clientY,
@ -811,17 +877,21 @@ export function Timeline() {
</div> </div>
))} ))}
</div> </div>
)}
</div> </div>
)}
{/* Timeline Tracks Content */} {/* Timeline Tracks Content */}
<div className="flex-1 relative overflow-hidden"> <div className="flex-1 relative overflow-hidden">
<div className="w-full h-[600px] overflow-hidden flex" ref={timelineRef} style={{ position: 'relative' }}> <div
{/* Timeline grid and clips area (with left margin for sidebar) */} className="w-full h-full overflow-hidden flex"
ref={timelineRef}
style={{ position: "relative" }}
>
{/* Timeline grid and clips area (with left margin for sifdebar) */}
<div <div
className="relative flex-1" className="relative flex-1"
style={{ 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`, width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,
}} }}
onClick={handleTimelineAreaClick} onClick={handleTimelineAreaClick}
@ -852,7 +922,7 @@ export function Timeline() {
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
setContextMenu({ setContextMenu({
type: 'track', type: "track",
trackId: track.id, trackId: track.id,
x: e.clientX, x: e.clientX,
y: e.clientY, y: e.clientY,
@ -893,19 +963,23 @@ export function Timeline() {
style={{ left: contextMenu.x, top: contextMenu.y }} style={{ left: contextMenu.x, top: contextMenu.y }}
onContextMenu={(e) => e.preventDefault()} onContextMenu={(e) => e.preventDefault()}
> >
{contextMenu.type === 'track' ? ( {contextMenu.type === "track" ? (
// Track context menu // Track context menu
<> <>
<button <button
className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left" className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
onClick={() => { onClick={() => {
const track = tracks.find(t => t.id === contextMenu.trackId); const track = tracks.find(
(t) => t.id === contextMenu.trackId
);
if (track) toggleTrackMute(track.id); if (track) toggleTrackMute(track.id);
setContextMenu(null); setContextMenu(null);
}} }}
> >
{(() => { {(() => {
const track = tracks.find(t => t.id === contextMenu.trackId); const track = tracks.find(
(t) => t.id === contextMenu.trackId
);
return track?.muted ? ( return track?.muted ? (
<> <>
<Volume2 className="h-4 w-4 mr-2" /> <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" className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
onClick={() => { onClick={() => {
if (contextMenu.clipId) { if (contextMenu.clipId) {
const track = tracks.find(t => t.id === contextMenu.trackId); const track = tracks.find(
const clip = track?.clips.find(c => c.id === contextMenu.clipId); (t) => t.id === contextMenu.trackId
);
const clip = track?.clips.find(
(c) => c.id === contextMenu.clipId
);
if (clip && track) { if (clip && track) {
const splitTime = currentTime; const splitTime = currentTime;
const effectiveStart = clip.startTime; 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( updateClipTrim(
track.id, track.id,
clip.id, clip.id,
@ -958,7 +1041,8 @@ export function Timeline() {
name: clip.name + " (split)", name: clip.name + " (split)",
duration: clip.duration, duration: clip.duration,
startTime: splitTime, startTime: splitTime,
trimStart: clip.trimStart + (splitTime - effectiveStart), trimStart:
clip.trimStart + (splitTime - effectiveStart),
trimEnd: clip.trimEnd, trimEnd: clip.trimEnd,
}); });
toast.success("Clip split successfully"); 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" className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
onClick={() => { onClick={() => {
if (contextMenu.clipId) { if (contextMenu.clipId) {
const track = tracks.find(t => t.id === contextMenu.trackId); const track = tracks.find(
const clip = track?.clips.find(c => c.id === contextMenu.clipId); (t) => t.id === contextMenu.trackId
);
const clip = track?.clips.find(
(c) => c.id === contextMenu.clipId
);
if (clip && track) { if (clip && track) {
useTimelineStore.getState().addClipToTrack(track.id, { useTimelineStore.getState().addClipToTrack(track.id, {
mediaId: clip.mediaId, mediaId: clip.mediaId,
name: clip.name + " (copy)", name: clip.name + " (copy)",
duration: clip.duration, 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, trimStart: clip.trimStart,
trimEnd: clip.trimEnd, 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" className="flex items-center w-full px-3 py-2 text-destructive hover:bg-destructive/10 transition-colors text-left"
onClick={() => { onClick={() => {
if (contextMenu.clipId) { if (contextMenu.clipId) {
removeClipFromTrack(contextMenu.trackId, contextMenu.clipId); removeClipFromTrack(
contextMenu.trackId,
contextMenu.clipId
);
toast.success("Clip deleted"); toast.success("Clip deleted");
} }
setContextMenu(null); setContextMenu(null);
@ -1026,7 +1120,15 @@ function TimelineTrackContent({
}: { }: {
track: TimelineTrack; track: TimelineTrack;
zoomLevel: number; 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 { mediaItems } = useMediaStore();
const { const {
@ -1549,7 +1651,8 @@ function TimelineTrackContent({
return ( return (
<div <div
className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver className={`w-full h-full transition-all duration-150 ease-out ${
isDraggedOver
? wouldOverlap ? wouldOverlap
? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg" ? "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" : "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
@ -1560,7 +1663,7 @@ function TimelineTrackContent({
// Only show track menu if we didn't click on a clip // Only show track menu if we didn't click on a clip
if (!(e.target as HTMLElement).closest(".timeline-clip")) { if (!(e.target as HTMLElement).closest(".timeline-clip")) {
setContextMenu({ setContextMenu({
type: 'track', type: "track",
trackId: track.id, trackId: track.id,
x: e.clientX, x: e.clientX,
y: e.clientY, y: e.clientY,
@ -1578,7 +1681,8 @@ function TimelineTrackContent({
<div className="h-full relative track-clips-container min-w-full"> <div className="h-full relative track-clips-container min-w-full">
{track.clips.length === 0 ? ( {track.clips.length === 0 ? (
<div <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 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 ? wouldOverlap
? "border-red-500 bg-red-500/10 text-red-600" ? "border-red-500 bg-red-500/10 text-red-600"
: "border-blue-500 bg-blue-500/10 text-blue-600" : "border-blue-500 bg-blue-500/10 text-blue-600"
@ -1631,7 +1735,7 @@ function TimelineTrackContent({
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setContextMenu({ setContextMenu({
type: 'clip', type: "clip",
trackId: track.id, trackId: track.id,
clipId: clip.id, clipId: clip.id,
x: e.clientX, x: e.clientX,

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

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