setIsInTimeline(true)}
- onMouseLeave={() => setIsInTimeline(false)}
- onWheel={handleWheel}
- >
- {/* Toolbar */}
-
- );
-}
-
-function TimelineTrackContent({
- track,
- zoomLevel,
- setContextMenu,
- contextMenu,
-}: {
- track: TimelineTrack;
- zoomLevel: number;
- setContextMenu: (menu: ContextMenuState | null) => void;
- contextMenu: ContextMenuState | null;
-}) {
- const { mediaItems } = useMediaStore();
- const {
- tracks,
- moveClipToTrack,
- updateClipStartTime,
- addClipToTrack,
- selectedClips,
- selectClip,
- deselectClip,
- dragState,
- startDrag: startDragAction,
- updateDragTime,
- endDrag: endDragAction,
- } = useTimelineStore();
-
- const timelineRef = useRef
-
- {/* Play/Pause Button */}
-
-
-
-
-
- {isPlaying ? "Pause (Space)" : "Play (Space)"}
-
-
-
-
-
- {/* Time Display */}
-
-
-
-
- Add a test clip to try playback
-
-
- )}
-
-
-
-
-
-
-
- Split clip (S)
-
-
-
-
-
-
- Split and keep left (A)
-
-
-
-
-
-
- Split and keep right (D)
-
-
-
-
-
-
- Separate audio (E)
-
-
-
-
-
-
- Duplicate clip (Ctrl+D)
-
-
-
-
-
-
- Freeze frame (F)
-
-
-
-
-
-
- Delete clip (Delete)
-
-
-
-
- {/* Speed Control */}
-
-
-
-
- Playback Speed
-
-
-
-
- {/* Timeline Container */}
-
- {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
-
-
- {/* Test Clip Button - for debugging */}
- {tracks.length === 0 && (
- <>
-
-
- {/* Timeline Header with Ruler */}
-
-
- {/* Clean Unified Context Menu */}
- {contextMenu && (
-
- {/* Track Labels Header */}
-
-
- {/* Tracks Area */}
-
-
- Tracks
-
-
-
- {/* Timeline Ruler */}
-
- {zoomLevel.toFixed(1)}x
-
-
-
-
-
- {
- // Calculate the clicked time position and seek to it
- handleSeekToPosition(e);
- }}
- >
- {/* Time markers */}
- {(() => {
- // Calculate appropriate time interval based on zoom level
- const getTimeInterval = (zoom: number) => {
- const pixelsPerSecond = 50 * zoom;
- if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in
- if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in
- if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom
- if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out
- if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out
- if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out
- return 30; // Every 30s when extremely zoomed out
- };
-
- const interval = getTimeInterval(zoomLevel);
- const markerCount = Math.ceil(duration / interval) + 1;
-
- return Array.from({ length: markerCount }, (_, i) => {
- const time = i * interval;
- if (time > duration) return null;
-
- const isMainMarker =
- time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
-
- return (
-
-
-
- {(() => {
- const formatTime = (seconds: number) => {
- const hours = Math.floor(seconds / 3600);
- const minutes = Math.floor((seconds % 3600) / 60);
- const secs = seconds % 60;
-
- if (hours > 0) {
- return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
- } else if (minutes > 0) {
- return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`;
- } else if (interval >= 1) {
- return `${Math.floor(secs)}s`;
- } else {
- return `${secs.toFixed(1)}s`;
- }
- };
- return formatTime(time);
- })()}
-
-
- );
- }).filter(Boolean);
- })()}
-
- {/* Playhead in ruler (scrubbable) */}
-
-
-
-
- {/* Track Labels */}
- {tracks.length > 0 && (
-
-
-
- )}
-
- {/* Timeline Tracks Content */}
-
- {tracks.map((track) => (
-
- {
- e.preventDefault();
- setContextMenu({
- type: "track",
- trackId: track.id,
- x: e.clientX,
- y: e.clientY,
- });
- }}
- >
-
- ))}
-
-
-
- {track.name}
-
-
- {track.muted && (
-
- Muted
-
- )}
-
-
-
- {/* Timeline grid and clips area (with left margin for sifdebar) */}
-
-
- {tracks.length === 0 ? (
-
-
-
- ) : (
- <>
- {tracks.map((track, index) => (
-
-
-
-
- - Drop media here to start -
- {
- e.preventDefault();
- setContextMenu({
- type: "track",
- trackId: track.id,
- x: e.clientX,
- y: e.clientY,
- });
- }}
- onClick={(e) => {
- // If clicking empty area (not on a clip), deselect all clips
- if (
- !(e.target as HTMLElement).closest(".timeline-clip")
- ) {
- const { clearSelectedClips } =
- useTimelineStore.getState();
- clearSelectedClips();
- }
- }}
- >
-
- ))}
-
- {/* Playhead for tracks area (scrubbable) */}
- {tracks.length > 0 && (
-
- )}
-
- )}
- {isDragOver && (
-
-
- )}
-
- {isProcessing
- ? `Processing ${progress}%`
- : "Drop media here to add to timeline"}
-
- e.preventDefault()}
- >
- {contextMenu.type === "track" ? (
- // Track context menu
- <>
-
-
-
-
- ) : (
- // Clip context menu
- <>
-
-
-
-
-
- )}
-
- )}
- {
- 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",
- trackId: track.id,
- x: e.clientX,
- y: e.clientY,
- });
- }
- }}
- onClick={(e) => {
- // If clicking empty area (not on a clip), deselect all clips
- if (!(e.target as HTMLElement).closest(".timeline-clip")) {
- const { clearSelectedClips } = useTimelineStore.getState();
- clearSelectedClips();
- }
- }}
- onDragOver={handleTrackDragOver}
- onDragEnter={handleTrackDragEnter}
- onDragLeave={handleTrackDragLeave}
- onDrop={handleTrackDrop}
- >
-
- );
-}
+"use client";
+
+import { processMediaFiles } from "@/lib/media-processing";
+import { useMediaStore } from "@/stores/media-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";
+import {
+ ArrowLeftToLine,
+ ArrowRightToLine,
+ Copy,
+ MoreVertical,
+ Pause,
+ Play,
+ Scissors,
+ Snowflake,
+ SplitSquareHorizontal,
+ Trash2,
+ Volume2,
+ VolumeX,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "../ui/button";
+import { ScrollArea } from "../ui/scroll-area";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../ui/select";
+
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "../ui/tooltip";
+
+import AudioWaveform from "./audio-waveform";
+
+
+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,
+ getTotalDuration,
+ selectedClips,
+ clearSelectedClips,
+ setSelectedClips,
+ updateClipTrim,
+ undo,
+ redo,
+ } = useTimelineStore();
+ const { mediaItems, addMediaItem } = useMediaStore();
+ 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);
+ const dragCounterRef = useRef(0);
+ const timelineRef = useRef
- {track.clips.length === 0 ? (
-
-
- {isDropping
- ? wouldOverlap
- ? "Cannot drop - would overlap"
- : "Drop clip here"
- : "Drop media here"}
-
- ) : (
- <>
- {track.clips.map((clip) => {
- const isSelected = selectedClips.some(
- (c) => c.trackId === track.id && c.clipId === clip.id
- );
-
- return (
- setIsInTimeline(true)}
+ onMouseLeave={() => setIsInTimeline(false)}
+ onWheel={handleWheel}
+ >
+ {/* Toolbar */}
+
+ );
+}
+
+function TimelineTrackContent({
+ track,
+ zoomLevel,
+ setContextMenu,
+ contextMenu,
+}: {
+ track: TimelineTrack;
+ zoomLevel: number;
+ setContextMenu: (
+ menu: {
+ type: "track" | "clip";
+ trackId: string;
+ clipId?: string;
+ x: number;
+ y: number;
+ } | null
+ ) => void;
+ contextMenu: {
+ type: "track" | "clip";
+ trackId: string;
+ clipId?: string;
+ x: number;
+ y: number;
+ } | null;
+}) {
+ const { mediaItems } = useMediaStore();
+ const {
+ tracks,
+ moveClipToTrack,
+ updateClipTrim,
+ updateClipStartTime,
+ addClipToTrack,
+ removeClipFromTrack,
+ toggleTrackMute,
+ selectedClips,
+ selectClip,
+ deselectClip,
+ } = useTimelineStore();
+ const { currentTime } = usePlaybackStore();
+ const [isDropping, setIsDropping] = useState(false);
+ const [dropPosition, setDropPosition] = useState
+
+ {/* Play/Pause Button */}
+
+
+
+
+
+ {isPlaying ? "Pause (Space)" : "Play (Space)"}
+
+
+
+
+
+ {/* Time Display */}
+
+
+
+
+ Add a test clip to try playback
+
+
+ )}
+
+
+
+
+
+
+
+ Split clip (S)
+
+
+
+
+
+
+ Split and keep left (A)
+
+
+
+
+
+
+ Split and keep right (D)
+
+
+
+
+
+
+ Separate audio (E)
+
+
+
+
+
+
+ Duplicate clip (Ctrl+D)
+
+
+
+
+
+
+ Freeze frame (F)
+
+
+
+
+
+
+ Delete clip (Delete)
+
+
+
+
+ {/* Speed Control */}
+
+
+
+
+ Playback Speed
+
+
+
+
+ {/* Timeline Container */}
+
+ {currentTime.toFixed(1)}s / {duration.toFixed(1)}s
+
+
+ {/* Test Clip Button - for debugging */}
+ {tracks.length === 0 && (
+ <>
+
+
+ {/* Timeline Header with Ruler */}
+
+
+ {/* Clean Unified Context Menu */}
+ {contextMenu && (
+
+ {/* Track Labels Header */}
+
+
+ {/* Tracks Area */}
+
+
+ Tracks
+
+
+
+ {/* Timeline Ruler */}
+
+ {zoomLevel.toFixed(1)}x
+
+
+
+
+
+ {
+ // Calculate the clicked time position and seek to it
+ handleSeekToPosition(e);
+ }}
+ >
+ {/* Time markers */}
+ {(() => {
+ // Calculate appropriate time interval based on zoom level
+ const getTimeInterval = (zoom: number) => {
+ const pixelsPerSecond = 50 * zoom;
+ if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in
+ if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in
+ if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom
+ if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out
+ if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out
+ if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out
+ return 30; // Every 30s when extremely zoomed out
+ };
+
+ const interval = getTimeInterval(zoomLevel);
+ const markerCount = Math.ceil(duration / interval) + 1;
+
+ return Array.from({ length: markerCount }, (_, i) => {
+ const time = i * interval;
+ if (time > duration) return null;
+
+ const isMainMarker =
+ time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
+
+ return (
+
+
+
+ {(() => {
+ const formatTime = (seconds: number) => {
+ const hours = Math.floor(seconds / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+ const secs = seconds % 60;
+
+ if (hours > 0) {
+ return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
+ } else if (minutes > 0) {
+ return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`;
+ } else if (interval >= 1) {
+ return `${Math.floor(secs)}s`;
+ } else {
+ return `${secs.toFixed(1)}s`;
+ }
+ };
+ return formatTime(time);
+ })()}
+
+
+ );
+ }).filter(Boolean);
+ })()}
+
+ {/* Playhead in ruler (scrubbable) */}
+
+
+
+
+ {/* Track Labels */}
+ {tracks.length > 0 && (
+
+
+
+ )}
+
+ {/* Timeline Tracks Content */}
+
+ {tracks.map((track) => (
+
+ {
+ e.preventDefault();
+ setContextMenu({
+ type: "track",
+ trackId: track.id,
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }}
+ >
+
+ ))}
+
+
+
+ {track.name}
+
+
+ {track.muted && (
+
+ Muted
+
+ )}
+
+
+
+ {/* Timeline grid and clips area (with left margin for sifdebar) */}
+
+
+ {tracks.length === 0 ? (
+
+
+
+ ) : (
+ <>
+ {tracks.map((track, index) => (
+
+
+
+
+ + Drop media here to start +
+ {
+ e.preventDefault();
+ setContextMenu({
+ type: "track",
+ trackId: track.id,
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }}
+ >
+
+ ))}
+
+ {/* Playhead for tracks area (scrubbable) */}
+ {tracks.length > 0 && (
+
+ )}
+
+ )}
+ {isDragOver && (
+
+
+ )}
+ Drop media here to add a new track
+ e.preventDefault()}
+ >
+ {contextMenu.type === "track" ? (
+ // Track context menu
+ <>
+
+
+
+
+ ) : (
+ // Clip context menu
+ <>
+
+
+
+
+
+ )}
+
+ )}
+
+ 
+
+ );
+ }
+
+ if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
+ return (
+
+
+ );
+ }
+
+ if (mediaItem.type === "audio") {
+ return (
+
+ 
+
+
+ {clip.name}
+
+
+
+ );
+ }
+
+ // Fallback for videos without thumbnails
+ return (
+ {clip.name}
+ );
+ };
+
+ const handleSplitClip = (clip: any) => {
+ // Use current playback time as split point
+ const splitTime = currentTime;
+ // Only split if splitTime is within the clip's effective range
+ const effectiveStart = clip.startTime;
+ const effectiveEnd =
+ clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+ if (splitTime <= effectiveStart || splitTime >= effectiveEnd) return;
+ const firstDuration = splitTime - effectiveStart;
+ const secondDuration = effectiveEnd - splitTime;
+ // First part: adjust original clip
+ updateClipTrim(
+ track.id,
+ clip.id,
+ clip.trimStart,
+ clip.trimEnd + secondDuration
+ );
+ // Second part: add new clip after split
+ addClipToTrack(track.id, {
+ mediaId: clip.mediaId,
+ name: clip.name + " (cut)",
+ duration: clip.duration,
+ startTime: splitTime,
+ trimStart: clip.trimStart + firstDuration,
+ trimEnd: clip.trimEnd,
+ });
+ };
+
+ return (
+
+
+ {
+ 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",
+ trackId: track.id,
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }
+ }}
+ onDragOver={handleTrackDragOver}
+ onDragEnter={handleTrackDragEnter}
+ onDragLeave={handleTrackDragLeave}
+ onDrop={handleTrackDrop}
+ onMouseMove={handleResizeMove}
+ onMouseUp={handleResizeEnd}
+ onMouseLeave={handleResizeEnd}
+ >
+
+ {track.clips.length === 0 ? (
+
+ {isDropping
+ ? wouldOverlap
+ ? "Cannot drop - would overlap"
+ : "Drop clip here"
+ : "Drop media here"}
+
+ ) : (
+ <>
+ {track.clips.map((clip) => {
+ const effectiveDuration =
+ clip.duration - clip.trimStart - clip.trimEnd;
+ const clipWidth = Math.max(
+ 80,
+ effectiveDuration * 50 * zoomLevel
+ );
+ const clipLeft = clip.startTime * 50 * zoomLevel;
+ const isSelected = selectedClips.some(
+ (c) => c.trackId === track.id && c.clipId === clip.id
+ );
+ return (
+ {
+ e.stopPropagation();
+
+ // Close context menu if it's open
+ if (contextMenu) {
+ setContextMenu(null);
+ return; // Don't handle selection when closing context menu
+ }
+
+ 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);
+ } else if (isSelected) {
+ // If clip is already selected, deselect it
+ deselectClip(track.id, clip.id);
+ } else {
+ // If clip is not selected, select it (replacing other selections)
+ selectClip(track.id, clip.id, false);
+ }
+ }}
+ tabIndex={0}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setContextMenu({
+ type: "clip",
+ trackId: track.id,
+ clipId: clip.id,
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }}
+ >
+ {/* Left trim handle */}
+
+ );
+}
+
diff --git a/apps/web/src/lib/waitlist.ts b/apps/web/src/lib/waitlist.ts
index c01347d..7b67258 100644
--- a/apps/web/src/lib/waitlist.ts
+++ b/apps/web/src/lib/waitlist.ts
@@ -1,6 +1,5 @@
-import { db } from "@opencut/db";
+import { db, sql } from "@opencut/db";
import { waitlist } from "@opencut/db/schema";
-import { sql } from "drizzle-orm";
export async function getWaitlistCount() {
try {
diff --git a/packages/auth/src/server.ts b/packages/auth/src/server.ts
index f6c68dc..6590c0a 100644
--- a/packages/auth/src/server.ts
+++ b/packages/auth/src/server.ts
@@ -16,7 +16,7 @@ export const auth = betterAuth({
emailAndPassword: {
enabled: true,
},
- socialProviders: {
+ socialProviders: {
google: {
clientId: process.env.GOOGLE_CLIENT_ID as string,
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
@@ -26,4 +26,4 @@ export const auth = betterAuth({
trustedOrigins: ["http://localhost:3000"],
});
-export type Auth = typeof auth;
\ No newline at end of file
+export type Auth = typeof auth;
diff --git a/packages/db/src/index.ts b/packages/db/src/index.ts
index b712776..91fc841 100644
--- a/packages/db/src/index.ts
+++ b/packages/db/src/index.ts
@@ -13,4 +13,7 @@ const client = postgres(process.env.DATABASE_URL);
export const db = drizzle(client, { schema });
// Re-export schema for convenience
-export * from "./schema";
\ No newline at end of file
+export * from "./schema";
+
+// Re-export drizzle-orm functions to ensure version consistency
+export { eq, and, or, not, isNull, isNotNull, inArray, notInArray, exists, notExists, sql } from "drizzle-orm";
\ No newline at end of file
handleResizeStart(e, clip.id, "left")}
+ />
+ {/* Clip content */}
+
+ handleClipDragStart(e, clip)}
+ onDragEnd={handleClipDragEnd}
+ >
+ {renderClipContent(clip)}
+ {/* Clip options menu */}
+
+ {/* Right trim handle */}
+
+
+ {clipMenuOpen === clip.id && (
+
+
+
+
+
+ )}
+ handleResizeStart(e, clip.id, "right")}
+ />
+
+ );
+ })}
+
+ {/* Drop position indicator */}
+ {isDraggedOver && dropPosition !== null && (
+
+
+
+
+ )}
+
+ )}
+
+ {wouldOverlap ? "⚠️" : ""}
+ {dropPosition.toFixed(1)}s
+
+