RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feature/optimize-timeline-ruler

This commit is contained in:
gantiro 2025-07-16 20:53:00 +07:00
parent 2974fd89a9 3371a68896
commit 955f6331f2
17 changed files with 573 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/Dockerfile
View File

@ -21,6 +21,12 @@ COPY packages/auth/ packages/auth/
ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1
# Set build-time environment variables for validation
ENV DATABASE_URL="postgresql://opencut:opencutthegoat@localhost:5432/opencut"
ENV BETTER_AUTH_SECRET="build-time-secret"
ENV UPSTASH_REDIS_REST_URL="http://localhost:8079"
ENV UPSTASH_REDIS_REST_TOKEN="example_token"
ENV NEXT_PUBLIC_BETTER_AUTH_URL="http://localhost:3000"
WORKDIR /app/apps/web
RUN bun run build

7
apps/web/drizzle.config.ts
View File

@ -1,9 +1,8 @@
import type { Config } from "drizzle-kit";
import * as dotenv from "dotenv";
import { env } from "@/env";
// Load the right env file based on environment
if (env.NODE_ENV === "production") {
if (process.env.NODE_ENV === "production") {
dotenv.config({ path: ".env.production" });
} else {
dotenv.config({ path: ".env.local" });
@ -13,8 +12,8 @@ export default {
schema: "../../packages/db/src/schema.ts",
dialect: "postgresql",
dbCredentials: {
url: env.DATABASE_URL,
url: process.env.DATABASE_URL!,
},
out: "./migrations",
strict: env.NODE_ENV === "production",
strict: process.env.NODE_ENV === "production",
} satisfies Config;

8
apps/web/src/app/(auth)/login/page.tsx
View File

@ -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);

2
apps/web/src/app/(auth)/signup/page.tsx
View File

@ -157,6 +157,6 @@ const SignUpPage = () => {
</Card>
</div>
);
}
};
export default memo(SignUpPage);

2
apps/web/src/app/api/auth/[...all]/route.ts
View File

@ -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);

3
apps/web/src/app/api/waitlist/route.ts
View File

@ -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";

2
apps/web/src/components/editor-header.tsx
View File

@ -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"

6
apps/web/src/components/editor-provider.tsx
View File

@ -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]);

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

@ -55,6 +55,7 @@ import {
getCumulativeHeightBefore,
getTotalTracksHeight,
TIMELINE_CONSTANTS,
snapTimeToFrame,
} from "@/constants/timeline-constants";
import { Slider } from "../ui/slider";
import TimelineCanvasRuler from "./timeline-canvas/timeline-canvas-ruler";
@ -64,6 +65,7 @@ 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,
@ -232,7 +234,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);
@ -254,71 +255,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) => {
@ -376,7 +312,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;

113
apps/web/src/components/keyboard-shortcuts-help.tsx Normal file
View File

@ -0,0 +1,113 @@
"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
const displayKey = keyName
.replace("Cmd", "⌘")
.replace("Shift", "⇧")
.replace("←", "◀")
.replace("→", "▶")
.replace("Space", "⎵");
return (
<Badge variant="secondary" className="font-mono text-xs px-2 py-1">
{displayKey}
</Badge>
);
};
const ShortcutItem = ({ shortcut }: { shortcut: any }) => (
<div className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-muted/50">
<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">
{shortcut.keys.map((key: string, index: number) => (
<div key={index} className="flex items-center gap-1">
<KeyBadge keyName={key} />
{index < shortcut.keys.length - 1 && (
<span className="text-xs text-muted-foreground">+</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-auto">
<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}>
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide mb-3">
{category}
</h3>
<div className="space-y-1">
{shortcuts
.filter((shortcut) => shortcut.category === category)
.map((shortcut, index) => (
<ShortcutItem key={index} shortcut={shortcut} />
))}
</div>
</div>
))}
</div>
<div className="mt-6 p-4 bg-muted/30 rounded-lg">
<h4 className="font-medium text-sm mb-2">Tips:</h4>
<ul className="text-sm text-muted-foreground space-y-1">
<li>
• Shortcuts work when the editor is focused (not typing in inputs)
</li>
<li>• J/K/L are industry-standard video editing shortcuts</li>
<li>• Use arrow keys for frame-perfect positioning</li>
<li>• Hold Shift with arrow keys for larger jumps</li>
</ul>
</div>
</DialogContent>
</Dialog>
);
};

47
apps/web/src/components/landing/hero.tsx
View File

@ -84,7 +84,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 +100,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 }}
@ -121,11 +129,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 +154,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>
);

37
apps/web/src/components/ui/draggable-item.tsx
View File

@ -2,6 +2,11 @@
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { ReactNode, useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import { Plus } from "lucide-react";
@ -139,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>,
@ -149,8 +159,16 @@ export function DraggableMediaItem({
);
}
function PlusButton({ className, onClick }: { className?: string; onClick?: () => void }) {
return (
function PlusButton({
className,
onClick,
tooltipText,
}: {
className?: string;
onClick?: () => void;
tooltipText?: string;
}) {
const button = (
<Button
size="icon"
className={cn("absolute bottom-2 right-2 size-4", className)}
@ -163,4 +181,17 @@ function PlusButton({ className, onClick }: { className?: string; onClick?: () =
<Plus className="!size-3" />
</Button>
);
if (tooltipText) {
return (
<Tooltip>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent>
<p>{tooltipText}</p>
</TooltipContent>
</Tooltip>
);
}
return button;
}

349
apps/web/src/hooks/use-keyboard-shortcuts.ts Normal file
View File

@ -0,0 +1,349 @@
"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();
toast.info(isPlaying ? "Paused" : "Playing", { duration: 1000 });
},
},
{
id: "rewind",
keys: ["j", "J"],
description: "Rewind 1 second",
category: "Playback",
action: () => {
seek(Math.max(0, currentTime - 1));
toast.info("Rewind 1s", { duration: 1000 });
},
},
{
id: "play-pause-alt",
keys: ["k", "K"],
description: "Play/Pause (alternative)",
category: "Playback",
action: () => {
toggle();
toast.info(isPlaying ? "Paused" : "Playing", { duration: 1000 });
},
},
{
id: "fast-forward",
keys: ["l", "L"],
description: "Fast forward 1 second",
category: "Playback",
action: () => {
seek(Math.min(duration, currentTime + 1));
toast.info("Forward 1s", { duration: 1000 });
},
},
// 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);
toast.info("Start of timeline", { duration: 1000 });
},
},
{
id: "goto-end",
keys: ["End"],
description: "Go to timeline end",
category: "Navigation",
action: () => {
seek(duration);
toast.info("End of timeline", { duration: 1000 });
},
},
// 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);
toast.success("Element split at playhead");
} 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();
toast.info(`Snapping ${snappingEnabled ? "disabled" : "enabled"}`, {
duration: 1000,
});
},
},
// 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);
toast.info(`Selected ${allElements.length} elements`, {
duration: 1000,
});
},
},
{
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,
});
toast.success("Element duplicated");
}
},
},
// 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,
};
};

64
apps/web/src/hooks/use-playback-controls.ts
View File

@ -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]);
};

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

@ -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 {

2
apps/web/src/middleware.ts
View File

@ -10,7 +10,7 @@ export async function middleware(request: NextRequest) {
const path = request.nextUrl.pathname;
if (path === "/editor" && env.NODE_ENV === "production") {
if (path.startsWith("/editor") && env.NODE_ENV === "production") {
const homeUrl = new URL("/", request.url);
homeUrl.searchParams.set("redirect", request.url);
return NextResponse.redirect(homeUrl);

7
apps/web/tsconfig.json
View File

@ -12,7 +12,7 @@
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
@ -34,9 +34,10 @@
"**/*.tsx",
"apps/web/.next/types/**/*.ts",
"next-env.d.ts",
".next/types/**/*.ts"
".next/types/**/*.ts",
"src/types/**/*.d.ts"
],
"exclude": [
"node_modules"
]
}
}