diff options
Diffstat (limited to 'apps/web/src')
22 files changed, 782 insertions, 192 deletions
diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx index ec79bd7f..f28cd191 100644 --- a/apps/web/src/app/(auth)/login/page.tsx +++ b/apps/web/src/app/(auth)/login/page.tsx @@ -119,7 +119,11 @@ const LoginPage = () => { className="w-full h-11" size="lg" > - {isEmailLoading ? <Loader2 className="animate-spin" /> : "Sign in"} + {isEmailLoading ? ( + <Loader2 className="animate-spin" /> + ) : ( + "Sign in" + )} </Button> </div> </div> @@ -137,6 +141,6 @@ const LoginPage = () => { </Card> </div> ); -} +}; export default memo(LoginPage); diff --git a/apps/web/src/app/(auth)/signup/page.tsx b/apps/web/src/app/(auth)/signup/page.tsx index e9705213..c3a0f899 100644 --- a/apps/web/src/app/(auth)/signup/page.tsx +++ b/apps/web/src/app/(auth)/signup/page.tsx @@ -157,6 +157,6 @@ const SignUpPage = () => { </Card> </div> ); -} +}; export default memo(SignUpPage); diff --git a/apps/web/src/app/api/auth/[...all]/route.ts b/apps/web/src/app/api/auth/[...all]/route.ts index 393fb7e7..55510dcb 100644 --- a/apps/web/src/app/api/auth/[...all]/route.ts +++ b/apps/web/src/app/api/auth/[...all]/route.ts @@ -1,4 +1,4 @@ -import { auth } from "@opencut/auth/server";
+import { auth } from "@opencut/auth";
import { toNextJsHandler } from "better-auth/next-js";
export const { POST, GET } = toNextJsHandler(auth);
\ No newline at end of file diff --git a/apps/web/src/app/api/waitlist/route.ts b/apps/web/src/app/api/waitlist/route.ts index f62e24e9..e5c9fd94 100644 --- a/apps/web/src/app/api/waitlist/route.ts +++ b/apps/web/src/app/api/waitlist/route.ts @@ -1,6 +1,5 @@ import { NextRequest, NextResponse } from "next/server";
-import { db, eq } from "@opencut/db";
-import { waitlist } from "@opencut/db/schema";
+import { db, eq, waitlist } from "@opencut/db";
import { checkBotId } from "botid/server";
import { nanoid } from "nanoid";
import { waitlistRateLimit } from "@/lib/rate-limit";
diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx index 65667106..aa5b7315 100644 --- a/apps/web/src/app/editor/[project_id]/page.tsx +++ b/apps/web/src/app/editor/[project_id]/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { useParams, useRouter } from "next/navigation"; import { ResizablePanelGroup, @@ -16,6 +16,7 @@ import { usePanelStore } from "@/stores/panel-store"; import { useProjectStore } from "@/stores/project-store"; import { EditorProvider } from "@/components/editor-provider"; import { usePlaybackControls } from "@/hooks/use-playback-controls"; +import { Onboarding } from "@/components/onboarding"; export default function Editor() { const { @@ -36,12 +37,12 @@ export default function Editor() { const router = useRouter(); const projectId = params.project_id as string; const handledProjectIds = useRef<Set<string>>(new Set()); + const [isOnboardingOpen, setIsOnboardingOpen] = useState(true); usePlaybackControls(); useEffect(() => { const initProject = async () => { - if (!projectId) return; if (activeProject?.id === projectId) { diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx index c4081c75..3b51e182 100644 --- a/apps/web/src/components/editor-header.tsx +++ b/apps/web/src/components/editor-header.tsx @@ -7,6 +7,7 @@ import { useTimelineStore } from "@/stores/timeline-store"; import { HeaderBase } from "./header-base";
import { formatTimeCode } from "@/lib/time";
import { useProjectStore } from "@/stores/project-store";
+import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
export function EditorHeader() {
const { getTotalDuration } = useTimelineStore();
@@ -43,6 +44,7 @@ export function EditorHeader() { const rightContent = (
<nav className="flex items-center gap-2">
+ <KeyboardShortcutsHelp />
<Button
size="sm"
variant="primary"
diff --git a/apps/web/src/components/editor-provider.tsx b/apps/web/src/components/editor-provider.tsx index 38255956..d970f86d 100644 --- a/apps/web/src/components/editor-provider.tsx +++ b/apps/web/src/components/editor-provider.tsx @@ -3,6 +3,7 @@ import { useEffect } from "react";
import { Loader2 } from "lucide-react";
import { useEditorStore } from "@/stores/editor-store";
+import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
interface EditorProviderProps {
children: React.ReactNode;
@@ -11,6 +12,11 @@ interface EditorProviderProps { export function EditorProvider({ children }: EditorProviderProps) {
const { isInitializing, isPanelsReady, initializeApp } = useEditorStore();
+ useKeyboardShortcuts({
+ enabled: !isInitializing && isPanelsReady,
+ context: "editor",
+ });
+
useEffect(() => {
initializeApp();
}, [initializeApp]);
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 894b6257..2ecee391 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -347,7 +347,7 @@ export function PreviewPanel() { {hasAnyElements ? ( <div ref={previewRef} - className="relative overflow-hidden rounded-sm border" + className="relative overflow-hidden border" style={{ width: previewDimensions.width, height: previewDimensions.height, diff --git a/apps/web/src/components/editor/timeline-track.tsx b/apps/web/src/components/editor/timeline-track.tsx index 2be143eb..91b3ffa3 100644 --- a/apps/web/src/components/editor/timeline-track.tsx +++ b/apps/web/src/components/editor/timeline-track.tsx @@ -54,12 +54,59 @@ export function TimelineTrackContent({ const { currentTime } = usePlaybackStore(); // Initialize snapping hook - const { snapElementPosition } = useTimelineSnapping({ + const { snapElementPosition, snapElementEdge } = useTimelineSnapping({ snapThreshold: 10, enableElementSnapping: snappingEnabled, enablePlayheadSnapping: snappingEnabled, }); + // Helper function for drop snapping that tries both edges + const getDropSnappedTime = ( + dropTime: number, + elementDuration: number, + excludeElementId?: string + ) => { + if (!snappingEnabled) { + // Use frame snapping if project has FPS, otherwise use decimal snapping + const projectStore = useProjectStore.getState(); + const projectFps = projectStore.activeProject?.fps || 30; + return snapTimeToFrame(dropTime, projectFps); + } + + // Try snapping both start and end edges for drops + const startSnapResult = snapElementEdge( + dropTime, + elementDuration, + tracks, + currentTime, + zoomLevel, + excludeElementId, + true // snap to start edge + ); + + const endSnapResult = snapElementEdge( + dropTime, + elementDuration, + tracks, + currentTime, + zoomLevel, + excludeElementId, + false // snap to end edge + ); + + // Choose the snap result with the smaller distance (closer snap) + let bestSnapResult = startSnapResult; + if ( + endSnapResult.snapPoint && + (!startSnapResult.snapPoint || + endSnapResult.snapDistance < startSnapResult.snapDistance) + ) { + bestSnapResult = endSnapResult; + } + + return bestSnapResult.snappedTime; + }; + const timelineRef = useRef<HTMLDivElement>(null); const [isDropping, setIsDropping] = useState(false); const [dropPosition, setDropPosition] = useState<number | null>(null); @@ -103,15 +150,52 @@ export function TimelineTrackContent({ let finalTime = adjustedTime; let snapPoint = null; if (snappingEnabled) { - const snapResult = snapElementPosition( + // Find the element being dragged to get its duration + let elementDuration = 5; // fallback duration + if (dragState.elementId && dragState.trackId) { + const sourceTrack = tracks.find((t) => t.id === dragState.trackId); + const element = sourceTrack?.elements.find( + (e) => e.id === dragState.elementId + ); + if (element) { + elementDuration = + element.duration - element.trimStart - element.trimEnd; + } + } + + // Try snapping both start and end edges + const startSnapResult = snapElementEdge( adjustedTime, + elementDuration, tracks, currentTime, zoomLevel, - dragState.elementId || undefined + dragState.elementId || undefined, + true // snap to start edge ); - finalTime = snapResult.snappedTime; - snapPoint = snapResult.snapPoint; + + const endSnapResult = snapElementEdge( + adjustedTime, + elementDuration, + tracks, + currentTime, + zoomLevel, + dragState.elementId || undefined, + false // snap to end edge + ); + + // Choose the snap result with the smaller distance (closer snap) + let bestSnapResult = startSnapResult; + if ( + endSnapResult.snapPoint && + (!startSnapResult.snapPoint || + endSnapResult.snapDistance < startSnapResult.snapDistance) + ) { + bestSnapResult = endSnapResult; + } + + finalTime = bestSnapResult.snappedTime; + snapPoint = bestSnapResult.snapPoint; // Notify parent component about snap point change onSnapPointChange?.(snapPoint); @@ -390,9 +474,10 @@ export function TimelineTrackContent({ if (dragData.type === "text") { // Text elements have default duration of 5 seconds const newElementDuration = 5; - const projectStore = useProjectStore.getState(); - const projectFps = projectStore.activeProject?.fps || 30; - const snappedTime = snapTimeToFrame(dropTime, projectFps); + const snappedTime = getDropSnappedTime( + dropTime, + newElementDuration + ); const newElementEnd = snappedTime + newElementDuration; wouldOverlap = track.elements.some((existingElement) => { @@ -411,9 +496,10 @@ export function TimelineTrackContent({ ); if (mediaItem) { const newElementDuration = mediaItem.duration || 5; - const projectStore = useProjectStore.getState(); - const projectFps = projectStore.activeProject?.fps || 30; - const snappedTime = snapTimeToFrame(dropTime, projectFps); + const snappedTime = getDropSnappedTime( + dropTime, + newElementDuration + ); const newElementEnd = snappedTime + newElementDuration; wouldOverlap = track.elements.some((existingElement) => { @@ -453,9 +539,11 @@ export function TimelineTrackContent({ movingElement.duration - movingElement.trimStart - movingElement.trimEnd; - const projectStore = useProjectStore.getState(); - const projectFps = projectStore.activeProject?.fps || 30; - const snappedTime = snapTimeToFrame(dropTime, projectFps); + const snappedTime = getDropSnappedTime( + dropTime, + movingElementDuration, + elementId + ); const movingElementEnd = snappedTime + movingElementDuration; wouldOverlap = track.elements.some((existingElement) => { @@ -482,17 +570,15 @@ export function TimelineTrackContent({ if (wouldOverlap) { e.dataTransfer.dropEffect = "none"; setWouldOverlap(true); - const projectStore = useProjectStore.getState(); - const projectFps = projectStore.activeProject?.fps || 30; - setDropPosition(snapTimeToFrame(dropTime, projectFps)); + // Use default duration for position indicator + setDropPosition(getDropSnappedTime(dropTime, 5)); return; } e.dataTransfer.dropEffect = hasTimelineElement ? "move" : "copy"; setWouldOverlap(false); - const projectStore = useProjectStore.getState(); - const projectFps = projectStore.activeProject?.fps || 30; - setDropPosition(snapTimeToFrame(dropTime, projectFps)); + // Use default duration for position indicator + setDropPosition(getDropSnappedTime(dropTime, 5)); }; const handleTrackDragEnter = (e: React.DragEvent) => { @@ -614,18 +700,20 @@ export function TimelineTrackContent({ return; } - // Adjust position based on where user clicked on the element - const adjustedStartTime = snappedTime - clickOffsetTime; - const finalStartTime = Math.max( - 0, - snapTimeToFrame(adjustedStartTime, projectFps) - ); - // Check for overlaps with existing elements (excluding the moving element itself) const movingElementDuration = movingElement.duration - movingElement.trimStart - movingElement.trimEnd; + + // Adjust position based on where user clicked on the element + const adjustedStartTime = newStartTime - clickOffsetTime; + const snappedStartTime = getDropSnappedTime( + adjustedStartTime, + movingElementDuration, + elementId + ); + const finalStartTime = Math.max(0, snappedStartTime); const movingElementEnd = finalStartTime + movingElementDuration; const hasOverlap = track.elements.some((existingElement) => { @@ -711,7 +799,11 @@ export function TimelineTrackContent({ // Check for overlaps with existing elements in target track const newElementDuration = 5; // Default text duration - const newElementEnd = snappedTime + newElementDuration; + const textSnappedTime = getDropSnappedTime( + newStartTime, + newElementDuration + ); + const newElementEnd = textSnappedTime + newElementDuration; const hasOverlap = targetTrack.elements.some((existingElement) => { const existingStart = existingElement.startTime; @@ -722,7 +814,9 @@ export function TimelineTrackContent({ existingElement.trimEnd); // Check if elements overlap - return snappedTime < existingEnd && newElementEnd > existingStart; + return ( + textSnappedTime < existingEnd && newElementEnd > existingStart + ); }); if (hasOverlap) { @@ -737,7 +831,7 @@ export function TimelineTrackContent({ name: dragData.name || "Text", content: dragData.content || "Default Text", duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION, - startTime: snappedTime, + startTime: textSnappedTime, trimStart: 0, trimEnd: 0, fontSize: 48, @@ -857,7 +951,11 @@ export function TimelineTrackContent({ // Check for overlaps with existing elements in target track const newElementDuration = mediaItem.duration || 5; - const newElementEnd = snappedTime + newElementDuration; + const mediaSnappedTime = getDropSnappedTime( + newStartTime, + newElementDuration + ); + const newElementEnd = mediaSnappedTime + newElementDuration; const hasOverlap = targetTrack.elements.some((existingElement) => { const existingStart = existingElement.startTime; @@ -868,7 +966,9 @@ export function TimelineTrackContent({ existingElement.trimEnd); // Check if elements overlap - return snappedTime < existingEnd && newElementEnd > existingStart; + return ( + mediaSnappedTime < existingEnd && newElementEnd > existingStart + ); }); if (hasOverlap) { @@ -883,7 +983,7 @@ export function TimelineTrackContent({ mediaId: mediaItem.id, name: mediaItem.name, duration: mediaItem.duration || 5, - startTime: snappedTime, + startTime: mediaSnappedTime, trimStart: 0, trimEnd: 0, }); diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index 4a770627..539846b3 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -15,7 +15,6 @@ import { Video, Music, TypeIcon, - Magnet, Lock, LockOpen, } from "lucide-react"; @@ -54,12 +53,14 @@ import { getCumulativeHeightBefore, getTotalTracksHeight, TIMELINE_CONSTANTS, + snapTimeToFrame, } from "@/constants/timeline-constants"; export function Timeline() { // Timeline shows all tracks (video, audio, effects) and their elements. // You can drag media here to add it to your project. // elements can be trimmed, deleted, and moved. + const { tracks, addTrack, @@ -235,7 +236,6 @@ export function Timeline() { // Use frame snapping for timeline clicking const projectFps = activeProject?.fps || 30; - const { snapTimeToFrame } = require("@/constants/timeline-constants"); const time = snapTimeToFrame(rawTime, projectFps); seek(time); @@ -258,71 +258,6 @@ export function Timeline() { setDuration(Math.max(totalDuration, 10)); // Minimum 10 seconds for empty timeline }, [tracks, setDuration, getTotalDuration]); - // Keyboard event for deleting selected elements - useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - // Don't trigger when typing in input fields or textareas - if ( - e.target instanceof HTMLInputElement || - e.target instanceof HTMLTextAreaElement - ) { - return; - } - - // Only trigger when timeline is focused or mouse is over timeline - if ( - !isInTimeline && - !timelineRef.current?.contains(document.activeElement) - ) { - return; - } - - if ( - (e.key === "Delete" || e.key === "Backspace") && - selectedElements.length > 0 - ) { - selectedElements.forEach(({ trackId, elementId }) => { - removeElementFromTrack(trackId, elementId); - }); - clearSelectedElements(); - } - }; - window.addEventListener("keydown", handleKeyDown); - return () => window.removeEventListener("keydown", handleKeyDown); - }, [ - selectedElements, - removeElementFromTrack, - clearSelectedElements, - isInTimeline, - ]); - - // Keyboard event for undo (Cmd+Z) - useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - if ((e.metaKey || e.ctrlKey) && e.key === "z" && !e.shiftKey) { - e.preventDefault(); - undo(); - } - }; - window.addEventListener("keydown", handleKeyDown); - return () => window.removeEventListener("keydown", handleKeyDown); - }, [undo]); - - // Keyboard event for redo (Cmd+Shift+Z or Cmd+Y) - useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - if ((e.metaKey || e.ctrlKey) && e.key === "z" && e.shiftKey) { - e.preventDefault(); - redo(); - } else if ((e.metaKey || e.ctrlKey) && e.key === "y") { - e.preventDefault(); - redo(); - } - }; - window.addEventListener("keydown", handleKeyDown); - return () => window.removeEventListener("keydown", handleKeyDown); - }, [redo]); - // Old marquee system removed - using new SelectionBox component instead const handleDragEnter = (e: React.DragEvent) => { @@ -380,7 +315,9 @@ export function Timeline() { useTimelineStore.getState().addTextToNewTrack(dragData); } else { // Handle media items - const mediaItem = mediaItems.find((item) => item.id === dragData.id); + const mediaItem = mediaItems.find( + (item: any) => item.id === dragData.id + ); if (!mediaItem) { toast.error("Media item not found"); return; diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx index 81505d4a..5b7f2303 100644 --- a/apps/web/src/components/footer.tsx +++ b/apps/web/src/components/footer.tsx @@ -34,15 +34,15 @@ export function Footer() { <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-8"> {/* Brand Section */} <div className="md:col-span-1 max-w-sm"> - <div className="flex items-center gap-2 mb-4"> + <div className="flex justify-start items-center gap-2 mb-4"> <Image src="/logo.svg" alt="OpenCut" width={24} height={24} /> <span className="font-bold text-lg">OpenCut</span> </div> - <p className="text-sm text-muted-foreground mb-5"> + <p className="text-sm md:text-left text-muted-foreground mb-5"> The open source video editor that gets the job done. Simple, powerful, and works on any platform. </p> - <div className="flex gap-3"> + <div className="flex justify-start gap-3"> <Link href="https://github.com/OpenCut-app/OpenCut" className="text-muted-foreground hover:text-foreground transition-colors" @@ -70,7 +70,7 @@ export function Footer() { </div> </div> - <div className="flex gap-12 justify-end items-start py-2"> + <div className="flex gap-12 justify-start items-start py-2"> <div> <h3 className="font-semibold text-foreground mb-4">Resources</h3> <ul className="space-y-2 text-sm"> @@ -129,7 +129,7 @@ export function Footer() { </div> {/* Bottom Section */} - <div className="pt-2 flex flex-col md:flex-row justify-between items-center gap-4"> + <div className="pt-2 flex flex-col md:flex-row justify-between items-start gap-4"> <div className="flex items-center gap-4 text-sm text-muted-foreground"> <span>© 2025 OpenCut, All Rights Reserved</span> </div> diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx index 4f3986e3..68e8f0ff 100644 --- a/apps/web/src/components/icons.tsx +++ b/apps/web/src/components/icons.tsx @@ -38,6 +38,14 @@ export function GithubIcon({ className }: { className?: string }) { ); } +export function VercelIcon({ className }: { className?: string }) { + return ( + <svg className={className} width="20" height="18" viewBox="0 0 76 65" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="currentColor"/> + </svg> + ); +} + export function BackgroundIcon({ className }: { className?: string }) { return ( <svg diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx new file mode 100644 index 00000000..936254be --- /dev/null +++ b/apps/web/src/components/keyboard-shortcuts-help.tsx @@ -0,0 +1,133 @@ +"use client"; + +import { useState } from "react"; +import { Button } from "./ui/button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "./ui/dialog"; +import { Badge } from "./ui/badge"; +import { Keyboard } from "lucide-react"; +import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts"; + +const KeyBadge = ({ keyName }: { keyName: string }) => { + // Replace common key names with symbols or friendly names + const displayKey = keyName + .replace("Cmd", "⌘") + .replace("Shift", "Shift") + .replace("ArrowLeft", "Arrow Left") + .replace("ArrowRight", "Arrow Right") + .replace("ArrowUp", "Arrow Up") + .replace("ArrowDown", "Arrow Down") + .replace("←", "◀") + .replace("→", "▶") + .replace("Space", "Space"); + + return ( + <Badge variant="secondary" className="font-mono text-xs px-1 py-1"> + {displayKey} + </Badge> + ); +}; + +const ShortcutItem = ({ shortcut }: { shortcut: any }) => { + // Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J" + const displayKeys = shortcut.keys.filter((key: string) => { + const lowerKey = key.toLowerCase(); + const upperKey = key.toUpperCase(); + + // If this is a lowercase letter and the uppercase version exists, skip it + if ( + key === lowerKey && + key !== upperKey && + shortcut.keys.includes(upperKey) + ) { + return false; + } + + return true; + }); + + return ( + <div className="flex items-center justify-between"> + <div className="flex items-center gap-3"> + {shortcut.icon && ( + <div className="text-muted-foreground">{shortcut.icon}</div> + )} + <span className="text-sm">{shortcut.description}</span> + </div> + <div className="flex items-center gap-1"> + {displayKeys.map((key: string, index: number) => ( + <div key={index} className="flex items-center gap-1"> + <div className="flex items-center"> + {key.split("+").map((keyPart: string, partIndex: number) => ( + <div key={partIndex} className="flex items-center gap-1"> + <KeyBadge keyName={keyPart} /> + {partIndex < key.split("+").length - 1 && ( + <span className="text-xs text-muted-foreground">+</span> + )} + </div> + ))} + </div> + {index < displayKeys.length - 1 && ( + <span className="text-xs text-muted-foreground">or</span> + )} + </div> + ))} + </div> + </div> + ); +}; + +export const KeyboardShortcutsHelp = () => { + const [open, setOpen] = useState(false); + + // Get shortcuts from centralized hook (disabled so it doesn't add event listeners) + const { shortcuts } = useKeyboardShortcuts({ enabled: false }); + + const categories = Array.from(new Set(shortcuts.map((s) => s.category))); + + return ( + <Dialog open={open} onOpenChange={setOpen}> + <DialogTrigger asChild> + <Button variant="text" size="sm" className="gap-2"> + <Keyboard className="w-4 h-4" /> + Shortcuts + </Button> + </DialogTrigger> + <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-hidden flex"> + <DialogHeader> + <DialogTitle className="flex items-center gap-2"> + <Keyboard className="w-5 h-5" /> + Keyboard Shortcuts + </DialogTitle> + <DialogDescription> + Speed up your video editing workflow with these keyboard shortcuts. + Most shortcuts work when the timeline is focused. + </DialogDescription> + </DialogHeader> + + <div className="space-y-6"> + {categories.map((category) => ( + <div key={category} className="flex flex-col gap-1"> + <h3 className="text-xs text-muted-foreground uppercase tracking-wide font-medium"> + {category} + </h3> + <div className="space-y-0.5"> + {shortcuts + .filter((shortcut) => shortcut.category === category) + .map((shortcut, index) => ( + <ShortcutItem key={index} shortcut={shortcut} /> + ))} + </div> + </div> + ))} + </div> + </DialogContent> + </Dialog> + ); +}; diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx index b1910dc5..d5fe38d1 100644 --- a/apps/web/src/components/landing/hero.tsx +++ b/apps/web/src/components/landing/hero.tsx @@ -3,6 +3,8 @@ import { motion } from "motion/react"; import { Button } from "../ui/button"; import { Input } from "../ui/input"; +import { SponsorButton } from "../ui/sponsor-button"; +import { VercelIcon } from "../icons"; import { ArrowRight } from "lucide-react"; import { useState, useEffect } from "react"; import { toast } from "sonner"; @@ -84,7 +86,9 @@ export function Hero() { }); } else { toast.error("Oops!", { - description: (data as { error: string }).error || "Something went wrong. Please try again.", + description: + (data as { error: string }).error || + "Something went wrong. Please try again.", }); } } catch (error) { @@ -98,7 +102,13 @@ export function Hero() { return ( <div className="min-h-[calc(100vh-4.5rem)] supports-[height:100dvh]:min-h-[calc(100dvh-4.5rem)] flex flex-col justify-between items-center text-center px-4"> - <Image className="absolute top-0 left-0 -z-50 size-full object-cover" src="/landing-page-bg.png" height={1903.5} width={1269} alt="landing-page.bg" /> + <Image + className="absolute top-0 left-0 -z-50 size-full object-cover" + src="/landing-page-bg.png" + height={1903.5} + width={1269} + alt="landing-page.bg" + /> <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} @@ -108,6 +118,18 @@ export function Hero() { <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} + transition={{ delay: 0.6, duration: 0.8 }} + className="mb-8 flex justify-center" + > + <SponsorButton + href="https://vercel.com/?utm_source=opencut" + logo={VercelIcon} + companyName="Vercel" + /> + </motion.div> + <motion.div + initial={{ opacity: 0, y: 20 }} + animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2, duration: 0.8 }} className="inline-block font-bold tracking-tighter text-4xl md:text-[4rem]" > @@ -121,11 +143,20 @@ export function Hero() { animate={{ opacity: 1 }} transition={{ delay: 0.4, duration: 0.8 }} > - A simple but powerful video editor that gets the job done. Works on any platform. + A simple but powerful video editor that gets the job done. Works on + any platform. </motion.p> - <motion.div className="mt-12 flex gap-8 justify-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.6, duration: 0.8 }}> - <form onSubmit={handleSubmit} className="flex gap-3 w-full max-w-lg flex-col sm:flex-row"> + <motion.div + className="mt-12 flex gap-8 justify-center" + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + transition={{ delay: 0.6, duration: 0.8 }} + > + <form + onSubmit={handleSubmit} + className="flex gap-3 w-full max-w-lg flex-col sm:flex-row" + > <div className="relative w-full"> <Input type="email" @@ -137,12 +168,28 @@ export function Hero() { required /> </div> - <Button type="submit" size="lg" className="px-6 h-11 text-base !bg-foreground" disabled={isSubmitting || !csrfToken}> - <span className="relative z-10">{isSubmitting ? "Joining..." : "Join waitlist"}</span> + <Button + type="submit" + size="lg" + className="px-6 h-11 text-base !bg-foreground" + disabled={isSubmitting || !csrfToken} + > + <span className="relative z-10"> + {isSubmitting ? "Joining..." : "Join waitlist"} + </span> <ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" /> </Button> </form> </motion.div> + <motion.div + initial={{ opacity: 0, y: 10 }} + animate={{ opacity: 1, y: 0 }} + transition={{ delay: 0.8, duration: 0.6 }} + className="mt-8 inline-flex items-center gap-2 text-sm text-muted-foreground justify-center" + > + <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" /> + <span>50k+ people already joined</span> + </motion.div> </motion.div> </div> ); diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/onboarding.tsx new file mode 100644 index 00000000..a2943677 --- /dev/null +++ b/apps/web/src/components/onboarding.tsx @@ -0,0 +1,29 @@ +"use client";
+
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "./ui/dialog";
+
+interface OnboardingProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export function Onboarding({ isOpen, onClose }: OnboardingProps) {
+ return (
+ <Dialog open={isOpen} onOpenChange={onClose}>
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle>Welcome to Clipture</DialogTitle>
+ <DialogDescription>
+ Let's get you started with the basics.
+ </DialogDescription>
+ </DialogHeader>
+ </DialogContent>
+ </Dialog>
+ );
+}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx index 0a487d0a..ebfd8907 100644 --- a/apps/web/src/components/ui/dialog.tsx +++ b/apps/web/src/components/ui/dialog.tsx @@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef< <DialogPrimitive.Overlay ref={ref} className={cn( - "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", + "fixed inset-0 z-[100] bg-black/20 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className )} {...props} @@ -39,9 +39,17 @@ const DialogContent = React.forwardRef< <DialogPrimitive.Content ref={ref} className={cn( - "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", + "fixed left-[50%] top-[50%] z-[150] grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className )} + onCloseAutoFocus={(e) => { + e.stopPropagation(); + e.preventDefault(); + }} + onOpenAutoFocus={(e) => { + e.stopPropagation(); + e.preventDefault(); + }} {...props} > <ScrollArea className="max-h-[85vh]"> diff --git a/apps/web/src/components/ui/draggable-item.tsx b/apps/web/src/components/ui/draggable-item.tsx index 3245c7ba..dfb4dce7 100644 --- a/apps/web/src/components/ui/draggable-item.tsx +++ b/apps/web/src/components/ui/draggable-item.tsx @@ -144,7 +144,12 @@ export function DraggableMediaItem({ <div className="w-full h-full [&_img]:w-full [&_img]:h-full [&_img]:object-cover [&_img]:rounded-none"> {preview} </div> - {showPlusOnDrag && <PlusButton onClick={handleAddToTimeline} tooltipText="Add to timeline or drag to position" />} + {showPlusOnDrag && ( + <PlusButton + onClick={handleAddToTimeline} + tooltipText="Add to timeline or drag to position" + /> + )} </AspectRatio> </div> </div>, diff --git a/apps/web/src/components/ui/sponsor-button.tsx b/apps/web/src/components/ui/sponsor-button.tsx new file mode 100644 index 00000000..79c708a2 --- /dev/null +++ b/apps/web/src/components/ui/sponsor-button.tsx @@ -0,0 +1,40 @@ +import { motion } from "motion/react"; +import { ComponentType } from "react"; + +interface SponsorButtonProps { + href: string; + logo: ComponentType<{ className?: string }>; + companyName: string; + className?: string; +} + +export function SponsorButton({ + href, + logo: Logo, + companyName, + className = "", +}: SponsorButtonProps) { + + return ( + <motion.a + href={href} + target="_blank" + rel="noopener noreferrer" + className={`inline-flex items-center gap-2 px-3 py-2 rounded-full border border-white/10 bg-white/5 backdrop-blur-sm hover:bg-white/10 hover:border-white/20 transition-all duration-200 group shadow-lg ${className}`} + > + <span className="text-xs font-medium text-zinc-400 group-hover:text-zinc-300 transition-colors"> + Sponsored by + </span> + + <div className="flex items-center gap-1.5"> + <div className="text-zinc-100 group-hover:text-white transition-colors"> + <Logo className="w-4 h-4" /> + </div> + + <span className="text-xs font-medium text-zinc-100 group-hover:text-white transition-colors"> + {companyName} + </span> + </div> + </motion.a> + ); +} diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts new file mode 100644 index 00000000..84cb78f8 --- /dev/null +++ b/apps/web/src/hooks/use-keyboard-shortcuts.ts @@ -0,0 +1,334 @@ +"use client";
+
+import { useEffect, useCallback } from "react";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { useProjectStore } from "@/stores/project-store";
+import { toast } from "sonner";
+
+export interface KeyboardShortcut {
+ id: string;
+ keys: string[];
+ description: string;
+ category: string;
+ action: () => void;
+ enabled?: boolean;
+ requiresSelection?: boolean;
+ icon?: React.ReactNode;
+}
+
+interface UseKeyboardShortcutsOptions {
+ enabled?: boolean;
+ context?: "global" | "timeline" | "editor";
+}
+
+export const useKeyboardShortcuts = (
+ options: UseKeyboardShortcutsOptions = {}
+) => {
+ const { enabled = true, context = "editor" } = options;
+
+ const {
+ tracks,
+ selectedElements,
+ clearSelectedElements,
+ setSelectedElements,
+ removeElementFromTrack,
+ splitElement,
+ addElementToTrack,
+ snappingEnabled,
+ toggleSnapping,
+ undo,
+ redo,
+ } = useTimelineStore();
+
+ const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore();
+
+ const { activeProject } = useProjectStore();
+
+ // Check if user is typing in an input field
+ const isInputFocused = useCallback(() => {
+ const activeElement = document.activeElement as HTMLElement;
+ return (
+ activeElement &&
+ (activeElement.tagName === "INPUT" ||
+ activeElement.tagName === "TEXTAREA" ||
+ activeElement.contentEditable === "true")
+ );
+ }, []);
+
+ // Define all shortcuts in one place
+ const shortcuts: KeyboardShortcut[] = [
+ // Playback Controls
+ {
+ id: "play-pause",
+ keys: ["Space"],
+ description: "Play/Pause",
+ category: "Playback",
+ action: () => {
+ toggle();
+ },
+ },
+ {
+ id: "rewind",
+ keys: ["j", "J"],
+ description: "Rewind 1 second",
+ category: "Playback",
+ action: () => {
+ seek(Math.max(0, currentTime - 1));
+ },
+ },
+ {
+ id: "play-pause-alt",
+ keys: ["k", "K"],
+ description: "Play/Pause (alternative)",
+ category: "Playback",
+ action: () => {
+ toggle();
+ },
+ },
+ {
+ id: "fast-forward",
+ keys: ["l", "L"],
+ description: "Fast forward 1 second",
+ category: "Playback",
+ action: () => {
+ seek(Math.min(duration, currentTime + 1));
+ },
+ },
+
+ // Navigation
+ {
+ id: "frame-backward",
+ keys: ["ArrowLeft"],
+ description: "Frame step backward",
+ category: "Navigation",
+ action: () => {
+ const projectFps = activeProject?.fps || 30;
+ seek(Math.max(0, currentTime - 1 / projectFps));
+ },
+ },
+ {
+ id: "frame-forward",
+ keys: ["ArrowRight"],
+ description: "Frame step forward",
+ category: "Navigation",
+ action: () => {
+ const projectFps = activeProject?.fps || 30;
+ seek(Math.min(duration, currentTime + 1 / projectFps));
+ },
+ },
+ {
+ id: "jump-backward",
+ keys: ["Shift+ArrowLeft"],
+ description: "Jump back 5 seconds",
+ category: "Navigation",
+ action: () => {
+ seek(Math.max(0, currentTime - 5));
+ },
+ },
+ {
+ id: "jump-forward",
+ keys: ["Shift+ArrowRight"],
+ description: "Jump forward 5 seconds",
+ category: "Navigation",
+ action: () => {
+ seek(Math.min(duration, currentTime + 5));
+ },
+ },
+ {
+ id: "goto-start",
+ keys: ["Home"],
+ description: "Go to timeline start",
+ category: "Navigation",
+ action: () => {
+ seek(0);
+ },
+ },
+ {
+ id: "goto-end",
+ keys: ["End"],
+ description: "Go to timeline end",
+ category: "Navigation",
+ action: () => {
+ seek(duration);
+ },
+ },
+
+ // Editing
+ {
+ id: "split-element",
+ keys: ["s", "S"],
+ description: "Split element at playhead",
+ category: "Editing",
+ requiresSelection: true,
+ action: () => {
+ if (selectedElements.length !== 1) {
+ toast.error("Select exactly one element to split");
+ return;
+ }
+
+ const { trackId, elementId } = selectedElements[0];
+ const track = tracks.find((t: any) => t.id === trackId);
+ const element = track?.elements.find((el: any) => el.id === elementId);
+
+ if (element) {
+ const effectiveStart = element.startTime;
+ const effectiveEnd =
+ element.startTime +
+ (element.duration - element.trimStart - element.trimEnd);
+
+ if (currentTime > effectiveStart && currentTime < effectiveEnd) {
+ splitElement(trackId, elementId, currentTime);
+ } else {
+ toast.error("Playhead must be within selected element");
+ }
+ }
+ },
+ },
+ {
+ id: "delete-elements",
+ keys: ["Delete", "Backspace"],
+ description: "Delete selected elements",
+ category: "Editing",
+ requiresSelection: true,
+ action: () => {
+ if (selectedElements.length === 0) {
+ toast.error("No elements selected");
+ return;
+ }
+ selectedElements.forEach(
+ ({ trackId, elementId }: { trackId: string; elementId: string }) => {
+ removeElementFromTrack(trackId, elementId);
+ }
+ );
+ clearSelectedElements();
+ },
+ },
+ {
+ id: "toggle-snapping",
+ keys: ["n", "N"],
+ description: "Toggle snapping",
+ category: "Editing",
+ action: () => {
+ toggleSnapping();
+ },
+ },
+
+ // Selection & Organization
+ {
+ id: "select-all",
+ keys: ["Cmd+a", "Ctrl+a"],
+ description: "Select all elements",
+ category: "Selection",
+ action: () => {
+ const allElements = tracks.flatMap((track: any) =>
+ track.elements.map((element: any) => ({
+ trackId: track.id,
+ elementId: element.id,
+ }))
+ );
+ setSelectedElements(allElements);
+ },
+ },
+ {
+ id: "duplicate-element",
+ keys: ["Cmd+d", "Ctrl+d"],
+ description: "Duplicate selected element",
+ category: "Selection",
+ requiresSelection: true,
+ action: () => {
+ if (selectedElements.length !== 1) {
+ toast.error("Select exactly one element to duplicate");
+ return;
+ }
+
+ const { trackId, elementId } = selectedElements[0];
+ const track = tracks.find((t: any) => t.id === trackId);
+ const element = track?.elements.find((el: any) => el.id === elementId);
+
+ if (element) {
+ const newStartTime =
+ element.startTime +
+ (element.duration - element.trimStart - element.trimEnd) +
+ 0.1;
+ const { id, ...elementWithoutId } = element;
+
+ addElementToTrack(trackId, {
+ ...elementWithoutId,
+ startTime: newStartTime,
+ });
+ }
+ },
+ },
+
+ // History
+ {
+ id: "undo",
+ keys: ["Cmd+z", "Ctrl+z"],
+ description: "Undo",
+ category: "History",
+ action: () => {
+ undo();
+ },
+ },
+ {
+ id: "redo",
+ keys: ["Cmd+Shift+z", "Ctrl+Shift+z", "Cmd+y", "Ctrl+y"],
+ description: "Redo",
+ category: "History",
+ action: () => {
+ redo();
+ },
+ },
+ ];
+
+ // Parse keyboard event to match against shortcuts
+ const parseKeyboardEvent = useCallback((e: KeyboardEvent): string => {
+ const parts: string[] = [];
+
+ if (e.metaKey || e.ctrlKey) parts.push(e.metaKey ? "Cmd" : "Ctrl");
+ if (e.shiftKey) parts.push("Shift");
+ if (e.altKey) parts.push("Alt");
+
+ parts.push(e.key);
+
+ return parts.join("+");
+ }, []);
+
+ // Handle keyboard events
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent) => {
+ if (!enabled || isInputFocused()) return;
+
+ const keyCombo = parseKeyboardEvent(e);
+ const shortcut = shortcuts.find((s) =>
+ s.keys.some((key) => key === keyCombo || key === e.key)
+ );
+
+ if (shortcut) {
+ // Check if shortcut requires selection
+ if (shortcut.requiresSelection && selectedElements.length === 0) {
+ return;
+ }
+
+ e.preventDefault();
+ shortcut.action();
+ }
+ },
+ [enabled, shortcuts, selectedElements, parseKeyboardEvent, isInputFocused]
+ );
+
+ // Set up event listener
+ useEffect(() => {
+ if (!enabled) return;
+
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [enabled, handleKeyDown]);
+
+ // Return shortcuts for help component
+ return {
+ shortcuts: shortcuts.filter((s) => s.enabled !== false),
+ enabled,
+ };
+};
diff --git a/apps/web/src/hooks/use-playback-controls.ts b/apps/web/src/hooks/use-playback-controls.ts index 1191d4b4..ecbd1232 100644 --- a/apps/web/src/hooks/use-playback-controls.ts +++ b/apps/web/src/hooks/use-playback-controls.ts @@ -106,68 +106,4 @@ export const usePlaybackControls = () => { separateAudio(trackId, elementId); }, [selectedElements, tracks, separateAudio]); - - const handleKeyPress = useCallback( - (e: KeyboardEvent) => { - if ( - e.target instanceof HTMLInputElement || - e.target instanceof HTMLTextAreaElement - ) { - return; - } - - switch (e.key) { - case " ": - e.preventDefault(); - if (isPlaying) { - pause(); - } else { - play(); - } - break; - - case "s": - if (e.ctrlKey || e.metaKey) { - e.preventDefault(); - handleSplitSelectedElement(); - } - break; - - case "q": - if (e.ctrlKey || e.metaKey) { - e.preventDefault(); - handleSplitAndKeepLeftCallback(); - } - break; - - case "w": - if (e.ctrlKey || e.metaKey) { - e.preventDefault(); - handleSplitAndKeepRightCallback(); - } - break; - - case "d": - if (e.ctrlKey || e.metaKey) { - e.preventDefault(); - handleSeparateAudioCallback(); - } - break; - } - }, - [ - isPlaying, - play, - pause, - handleSplitSelectedElement, - handleSplitAndKeepLeftCallback, - handleSplitAndKeepRightCallback, - handleSeparateAudioCallback, - ] - ); - - useEffect(() => { - document.addEventListener("keydown", handleKeyPress); - return () => document.removeEventListener("keydown", handleKeyPress); - }, [handleKeyPress]); }; diff --git a/apps/web/src/lib/waitlist.ts b/apps/web/src/lib/waitlist.ts index 7b67258b..22b15b78 100644 --- a/apps/web/src/lib/waitlist.ts +++ b/apps/web/src/lib/waitlist.ts @@ -1,5 +1,4 @@ -import { db, sql } from "@opencut/db";
-import { waitlist } from "@opencut/db/schema";
+import { db, sql, waitlist } from "@opencut/db";
export async function getWaitlistCount() {
try {
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts index 57e1e808..aabc302a 100644 --- a/apps/web/src/middleware.ts +++ b/apps/web/src/middleware.ts @@ -3,6 +3,8 @@ import type { NextRequest } from "next/server"; import { env } from "./env";
export async function middleware(request: NextRequest) {
+ const protectedPaths = ["/editor", "/projects"];
+
// Handle fuckcapcut.com domain redirect
if (request.headers.get("host") === "fuckcapcut.com") {
return NextResponse.redirect("https://opencut.app/why-not-capcut", 301);
@@ -10,7 +12,7 @@ export async function middleware(request: NextRequest) { const path = request.nextUrl.pathname;
- if (path === "/editor" && env.NODE_ENV === "production") {
+ if (protectedPaths.includes(path) && env.NODE_ENV === "production") {
const homeUrl = new URL("/", request.url);
homeUrl.searchParams.set("redirect", request.url);
return NextResponse.redirect(homeUrl);
|