+
+ )}
+ {children}
+ + {title} +
++ {description} +
+
-
-
-
- );
+function PostHeader({ post }: { post: Post }) {
+ const formattedDate = new Date(post.publishedAt).toLocaleDateString("en-US", {
+ day: "numeric",
+ month: "long",
+ year: "numeric",
+ });
+
+ return (
+ <>
+ {post.coverImage &&
-
-
-
-
-
-
-
-
-
- {data.post.coverImage && (
-
-
-
- )}
-
-
-
-
- - {data.post.title} -
-
- {data.post.authors[0] && (
- <>
-
- - {data.post.authors[0].name} -
- - )} -
+
+ );
}
-export default Page;
+function PostMeta({ date, publishedAt }: { date: string; publishedAt: Date }) {
+ return (
+
+
+
+ );
+}
+
+function PostTitle({ title }: { title: string }) {
+ return (
+ {title}
+ ); +} + +function PostAuthor({ author }: { author?: Author }) { + if (!author) return null; + + return ( +
+
+ );
+}
+
+function PostContent({ html }: { html: string }) {
+ return (
+ {author.name}
+No posts yet
;
-
- return (
-
-
-
+
+ );
+}
-
-
- );
+function AuthorList({ authors }: { authors: Author[] }) {
+ return (
+ No posts yet
;
-
-
-
-
+ return (
+
+ {data.posts.map((post) => (
+
+
+
+ ))}
+
-
-
-
- - Blog -
-- Read the latest news and updates about OpenCut, the free and - open-source video editor. -
-
- {data.posts.map((post) => (
-
-
- {post.coverImage && (
-
- {post.authors && post.authors.length > 0 && (
-
-
-
- ))}
-
-
-
- )}
+function BlogPostItem({ post }: { post: Post }) {
+ return (
+
+
+
+
+ );
+}
-
+
+ {post.authors && post.authors.length > 0 && (
+ {post.title}
+{post.description}
+
- {post.authors.map((author, index) => (
-
- )}
-
-
-
- {author.name.charAt(0).toUpperCase()}
-
-
-
- {author.name}
-
- {index < post.authors.length - 1 && (
- •
- )}
-
- ))}
- {post.title}
-{post.description}
-
+ {authors.map((author) => (
+
+ );
}
diff --git a/apps/web/src/app/contributors/page.tsx b/apps/web/src/app/contributors/page.tsx
index 3ad99023..21703852 100644
--- a/apps/web/src/app/contributors/page.tsx
+++ b/apps/web/src/app/contributors/page.tsx
@@ -1,330 +1,242 @@
-import { Metadata } from "next";
-import { Header } from "@/components/header";
-import { Card, CardContent } from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import { ExternalLink } from "lucide-react";
+import type { Metadata } from "next";
import Link from "next/link";
-import {
- GithubIcon,
- MarbleIcon,
- VercelIcon,
- DataBuddyIcon,
-} from "@/components/icons";
-import { Badge } from "@/components/ui/badge";
-import { EXTERNAL_TOOLS } from "@/constants/site";
+import { GitHubContributeSection } from "@/components/gitHub-contribute-section";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+import { EXTERNAL_TOOLS } from "@/constants/site-constants";
+import { BasePage } from "../base-page";
export const metadata: Metadata = {
- title: "Contributors - OpenCut",
- description:
- "Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
- openGraph: {
- title: "Contributors - OpenCut",
- description:
- "Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
- type: "website",
- },
+ title: "Contributors - OpenCut",
+ description:
+ "Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
+ openGraph: {
+ title: "Contributors - OpenCut",
+ description:
+ "Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
+ type: "website",
+ },
};
interface Contributor {
- id: number;
- login: string;
- avatar_url: string;
- html_url: string;
- contributions: number;
- type: string;
+ id: number;
+ login: string;
+ avatar_url: string;
+ html_url: string;
+ contributions: number;
+ type: string;
}
async function getContributors(): Promise
+
+
+ {author.name.charAt(0).toUpperCase()}
+
+
+
+ ))}
+
-
-
-
- );
+function ExternalToolsSection() {
+ return (
+
-
-
-
-
-
-
-
-
+
+ );
+}
-
+
+
+
+ {contributor.login.charAt(0).toUpperCase()}
+
+
+
+
+
+ );
+}
-
-
-
-
-
-
-
-
- {topContributors.length > 0 && (
- - Contributors -
-- Meet the amazing developers who are building the future of video - editing -
- -
-
-
-
- {contributors.length}
- contributors
-
-
-
-
- {contributors.reduce((sum, c) => sum + c.contributions, 0)}
-
- contributions
-
-
-
- )}
-
- {otherContributors.length > 0 && (
-
-
-
- - Top Contributors -
-- Leading the way in contributions -
-
- {topContributors.map((contributor, index) => (
-
-
-
-
-
-
-
-
-
-
- ))}
-
-
-
- {contributor.login.charAt(0).toUpperCase()}
-
-
-
- - {contributor.login} -
-
-
- {contributor.contributions}
-
- contributions
-
-
-
- )}
-
- {contributors.length === 0 && (
-
-
-
- - All Contributors -
-- Everyone who makes OpenCut better -
-
- {otherContributors.map((contributor, index) => (
-
-
-
-
-
- {contributor.login.charAt(0).toUpperCase()}
-
-
-
-
- ))}
- - {contributor.login} -
-- {contributor.contributions} -
-
-
- )}
+ const contributors = await getContributors();
+ const topContributors = contributors.slice(0, 2);
+ const otherContributors = contributors.slice(2);
+ const totalContributions = contributors.reduce(
+ (sum, c) => sum + c.contributions,
+ 0,
+ );
+
+ return (
+
-
- - No contributors found -
-- Unable to load contributors at the moment. Check back later or - view on GitHub. -
- - - -
+
+
+
+ {topContributors.length > 0 && (
+
+
-
+function TopContributorCard({ contributor }: { contributor: Contributor }) {
+ return (
+
+
-
+function StatItem({ value, label }: { value: number; label: string }) {
+ return (
+ External Tools
-- Tools we use to build OpenCut -
-
+
+ {value}
+ {label}
+
+ );
+}
-
- {EXTERNAL_TOOLS.map((tool, index) => {
- const IconComponent = {
- MarbleIcon,
- VercelIcon,
- DataBuddyIcon,
- }[tool.icon];
+function TopContributorsSection({
+ contributors,
+}: {
+ contributors: Contributor[];
+}) {
+ return (
+
-
-
-
-
- );
- })}
-
-
+
+ );
+}
- return (
-
-
+
+
+ Top contributors
++ Leading the way in contributions +
+
+ {contributors.map((contributor) => (
+
+
-
-
-
- - {tool.name} -
-- {tool.description} -
-
+
+ {contributor.login}
+
+ {contributor.contributions}
+ contributions
+
+
-
-
-
- Join the community
-- OpenCut is built by developers like you. Every contribution, - no matter how small, helps make video editing more accessible - for everyone. -
+function AllContributorsSection({ + contributors, +}: { + contributors: Contributor[]; +}) { + return ( +
+
+ );
+}
-
+
+
+ All contributors
++ Everyone who makes OpenCut better +
+
+ {contributors.map((contributor) => (
+
+
+
+
+
+ {contributor.login.charAt(0).toUpperCase()}
+
+
+
+
+ ))}
+
+
+ {contributor.login}
++ {contributor.contributions} +
+
-
-
-
-
-
-
-
-
+
+ );
}
diff --git a/apps/web/src/app/editor/[project_id]/layout.tsx b/apps/web/src/app/editor/[project_id]/layout.tsx
deleted file mode 100644
index c37e78b7..00000000
--- a/apps/web/src/app/editor/[project_id]/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-export default function EditorLayout({
- children,
-}: {
- children: React.ReactNode;
-}) {
- return
+
+
+ External tools
+Tools we use to build OpenCut
+
+ {EXTERNAL_TOOLS.map((tool, index) => (
+
+
+
+
+
+
+ ))}
+
+
+
+ {tool.name}
++ {tool.description} +
+{children}
;
-}
diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 1b53b6b5..e652e928 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -1,459 +1,108 @@
"use client";
-import { useEffect, useRef } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
import {
- ResizablePanelGroup,
- ResizablePanel,
- ResizableHandle,
+ ResizablePanelGroup,
+ ResizablePanel,
+ ResizableHandle,
} from "@/components/ui/resizable";
-import { MediaPanel } from "@/components/editor/media-panel";
-import { PropertiesPanel } from "@/components/editor/properties-panel";
+import { AssetsPanel } from "@/components/editor/panels/assets";
+import { PropertiesPanel } from "@/components/editor/panels/properties";
import { Timeline } from "@/components/editor/timeline";
-import { PreviewPanel } from "@/components/editor/preview-panel";
+import { PreviewPanel } from "@/components/editor/panels/preview";
import { EditorHeader } from "@/components/editor/editor-header";
-import { usePanelStore } from "@/stores/panel-store";
-import { useProjectStore } from "@/stores/project-store";
import { EditorProvider } from "@/components/providers/editor-provider";
-import { usePlaybackControls } from "@/hooks/use-playback-controls";
import { Onboarding } from "@/components/editor/onboarding";
+import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog";
+import { usePanelStore } from "@/stores/panel-store";
export default function Editor() {
- const {
- toolsPanel,
- previewPanel,
- mainContent,
- timeline,
- setToolsPanel,
- setPreviewPanel,
- setMainContent,
- setTimeline,
- propertiesPanel,
- setPropertiesPanel,
- activePreset,
- resetCounter,
- } = usePanelStore();
-
- const {
- activeProject,
- loadProject,
- createNewProject,
- isInvalidProjectId,
- markProjectIdAsInvalid,
- } = useProjectStore();
- const params = useParams();
- const router = useRouter();
- const projectId = params.project_id as string;
- const handledProjectIds = useRef
-
-
- {activePreset === "media" ? (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : activePreset === "inspector" ? (
-
- setPropertiesPanel(100 - size)}
- className="min-w-0 min-h-0"
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : activePreset === "vertical-preview" ? (
-
- setPreviewPanel(100 - size)}
- className="min-w-0 min-h-0"
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : (
-
-
- {/* Main content area */}
-
- {/* Tools Panel */}
-
-
-
-
-
-
-
-
-
-
-
-
+
+ );
+}
- {/* Timeline */}
-
-
-
- )}
-
-
+
+
+
+
-
- );
+ return (
+
+
+ );
}
diff --git a/apps/web/src/app/privacy/page.tsx b/apps/web/src/app/privacy/page.tsx
index 4bb1e023..b71b8d30 100644
--- a/apps/web/src/app/privacy/page.tsx
+++ b/apps/web/src/app/privacy/page.tsx
@@ -1,253 +1,287 @@
-import { Metadata } from "next";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { GithubIcon } from "@/components/icons";
-import Link from "next/link";
-import { Footer } from "@/components/footer";
-import { Header } from "@/components/header";
+import type { Metadata } from "next";
+import { BasePage } from "@/app/base-page";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Separator } from "@/components/ui/separator";
+import { SOCIAL_LINKS } from "@/constants/site-constants";
export const metadata: Metadata = {
- title: "Privacy Policy - OpenCut",
- description:
- "Learn how OpenCut handles your data and privacy. Our commitment to protecting your information while you edit videos.",
- openGraph: {
- title: "Privacy Policy - OpenCut",
- description:
- "Learn how OpenCut handles your data and privacy. Our commitment to protecting your information while you edit videos.",
- type: "website",
- },
+ title: "Privacy Policy - OpenCut",
+ description:
+ "Learn how OpenCut handles your data and privacy. Our commitment to protecting your information while you edit videos.",
+ openGraph: {
+ title: "Privacy Policy - OpenCut",
+ description:
+ "Learn how OpenCut handles your data and privacy. Our commitment to protecting your information while you edit videos.",
+ type: "website",
+ },
};
export default function PrivacyPage() {
- return (
-
-
-
-
-
- );
+
-
-
-
-
-
-
-
-
-
-
+ return (
+
+
+
+
+ Quick summary
+
+
+
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
- - Privacy Policy -
-- Learn how we handle your data and privacy. Contact us if you - have any questions. -
-- Your Videos Stay Private -
-- - OpenCut processes all videos locally on your device. - {" "} - We never upload, store, or have access to your video files. - Your content remains completely private and under your - control at all times. -
-- All video editing, rendering, and processing happens in your - browser using WebAssembly and local storage. No video data - is transmitted to our servers. -
-+ Your content stays private and encrypted. +
+-
+
- + Basic editing happens locally in your browser - we never see + your files + +
- + AI features require encrypted uploads - your content is + encrypted before leaving your device + +
- + We only collect your email and basic profile info for your + account + +
- Project data stays on your device, not our servers +
- + We use analytics to improve the app, but no personal video + content is tracked + +
- + You can delete your account anytime and all data gets removed + +
- We don't sell your data or share it with advertisers +
+ Questions? Email us at{" "} + + oss@opencut.app + +
+- Account Information -
-- When you create an account, we only collect: -
--
-
- Email address (for account access) -
- - Profile information from Google OAuth (if you choose to - sign in with Google) - -
- - We do NOT store your projects on our servers. - {" "} - All project data, including names, thumbnails, and creation - dates, is stored locally in your browser using IndexedDB. -
-- We use{" "} - - Better Auth - {" "} - for secure authentication and follow industry-standard - security practices. -
-How We Handle Your Content
++ Basic video editing happens locally on your device.{" "} + For standard editing features, we never upload, store, or have access + to your video files. Your content remains completely private and under + your control. +
++ AI features require secure processing: When you + choose to use AI features like auto captions, your audio/video content + is encrypted on your device before being uploaded to our servers for + processing. We use zero-knowledge encryption, meaning we cannot + decrypt or view your content. +
++ After AI processing is complete, the encrypted content is immediately + deleted from our servers. Only the results (like generated captions) + are returned to your device. +
+Analytics
-- We use{" "} - - Databuddy - {" "} - for completely anonymized and non-invasive analytics to - understand how people use OpenCut. -
-- This helps us improve the editor, but we never collect - personal information, track individual users, or store any - data that could identify you. -
-Account Information
+When you create an account, we only collect:
+-
+
- Email address (for account access) +
- + Profile information from Google OAuth (if you choose to sign in with + Google) + +
+ We do NOT store your projects on our servers. All + project data, including names, thumbnails, and creation dates, is + stored locally in your browser using IndexedDB. +
++ We use{" "} + + Better Auth + {" "} + for secure authentication and follow industry-standard security + practices. +
+- Local Storage & Cookies -
-- We use browser local storage and IndexedDB to: -
--
-
- Save your projects locally on your device -
- Remember your editor preferences and settings -
- Keep you logged in across browser sessions -
- All data stays on your device and can be cleared at any time - through your browser settings. -
-AI Features & Encryption
++ When you use AI-powered features (like auto captions, content + analysis, or enhancement tools), your content needs to be processed on + our servers. Here's how we protect your privacy: +
+-
+
- + Client-side encryption: Your content is encrypted + on your device before upload + +
- + Zero-knowledge processing: We cannot decrypt or + view your original content + +
- + Temporary processing: Encrypted content is deleted + immediately after processing + +
- + Opt-in only: AI features are optional - basic + editing remains fully local + +
+ Different AI features may process different types of content (audio + for captions, video for analysis, etc.), but all follow the same + zero-knowledge encryption approach. +
+- Third-Party Services -
-- OpenCut integrates with these services: -
--
-
- - Google OAuth: For optional Google sign-in - (governed by Google's privacy policy) - -
- - Vercel: For hosting and content delivery - -
- - Databuddy: For anonymized analytics - -
Analytics
++ We use{" "} + + Databuddy + {" "} + for completely anonymized and non-invasive analytics to understand how + people use OpenCut. +
++ This helps us improve the editor, but we never collect personal + information, track individual users, or store any data that could + identify you. +
+Your Rights
-- You have complete control over your data: -
--
-
- - Delete your account and all associated data at any time - -
- Export your project data -
- Clear local storage to remove all saved projects -
- Contact us with any privacy concerns -
Local Storage & Cookies
+We use browser local storage and IndexedDB to:
+-
+
- Save your projects locally on your device +
- Remember your editor preferences and settings +
- Keep you logged in across browser sessions +
+ All data stays on your device and can be cleared at any time through + your browser settings. +
+- Open Source Transparency -
-- OpenCut is completely open source. You can review our code, - see exactly how we handle data, and even self-host the - application if you prefer. -
-- View our source code on{" "} - - GitHub - - . -
-Third-Party Services
+OpenCut integrates with these services:
+-
+
- + Google OAuth: For optional Google sign-in (governed + by Google's privacy policy) + +
- + Vercel: For hosting and content delivery + +
- + Databuddy: For anonymized analytics + +
Contact Us
-- Questions about this privacy policy or how we handle your - data? -
-- Open an issue on our{" "} - - GitHub repository - - , email us at{" "} - - oss@opencut.app - - , or reach out on{" "} - - X (Twitter) - - . -
-Your Rights
+You have complete control over your data:
+-
+
- Delete your account and all associated data at any time +
- Export your project data +
- Clear local storage to remove all saved projects +
- Contact us with any privacy concerns +
- Last updated: July 14, 2025 -
-Open Source Transparency
++ OpenCut is completely open source. You can review our code, see + exactly how we handle data, and even self-host the application if you + prefer. +
++ View our source code on{" "} + + GitHub + + . +
+Contact Us
+Questions about this privacy policy or how we handle your data?
++ Open an issue on our{" "} + + GitHub repository + + , email us at{" "} + + oss@opencut.app + + , or reach out on{" "} + + X (Twitter) + + . +
++ Last updated: July 14, 2025 +
+ + ); } diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx index 3d66a3c5..d58c3aac 100644 --- a/apps/web/src/app/projects/page.tsx +++ b/apps/web/src/app/projects/page.tsx @@ -1,646 +1,956 @@ "use client"; -import { - Calendar, - ChevronLeft, - Loader2, - MoreHorizontal, - ArrowDown01, - Plus, - Search, - Trash2, - Video, - X, -} from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import { useRouter } from "next/navigation"; -import { useCallback, useEffect, useState } from "react"; -import { DeleteProjectDialog } from "@/components/delete-project-dialog"; -import { RenameProjectDialog } from "@/components/rename-project-dialog"; +import type { KeyboardEvent, MouseEvent } from "react"; +import { useEffect, useState } from "react"; +import { toast } from "sonner"; +import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/components/ui/tooltip"; import { Skeleton } from "@/components/ui/skeleton"; -import { useProjectStore } from "@/stores/project-store"; -import { useTimelineStore } from "@/stores/timeline-store"; -import type { TProject } from "@/types/project"; +import { useEditor } from "@/hooks/use-editor"; +import { useProjectsStore } from "./store"; +import type { + TProjectMetadata, + TProjectSortKey, + TProjectSortOption, +} from "@/types/project"; +import { formatTimeCode } from "@/lib/time"; +import { formatDate } from "@/utils/date"; +import { HugeiconsIcon } from "@hugeicons/react"; +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/components/ui/breadcrumb"; +import { + Calendar04Icon, + GridViewIcon, + LeftToRightListDashIcon, + PlusSignIcon, + Search01Icon, + Video01Icon, + MoreHorizontalIcon, + Delete02Icon, + Copy01Icon, + Edit03Icon, + ArrowDown02Icon, + InformationCircleIcon, +} from "@hugeicons/core-free-icons"; +import { OcVideoIcon } from "@opencut/ui/icons"; +import { Label } from "@/components/ui/label"; +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { DeleteProjectDialog } from "@/components/editor/dialogs/delete-project-dialog"; +import { ProjectInfoDialog } from "@/components/editor/dialogs/project-info-dialog"; +import { RenameProjectDialog } from "@/components/editor/dialogs/rename-project-dialog"; +import { cn } from "@/utils/ui"; + +const formatProjectDuration = ({ + duration, +}: { + duration: number | undefined; +}): string | null => { + if (duration === undefined) { + return null; + } + + const format = duration >= 3600 ? "HH:MM:SS" : "MM:SS"; + return formatTimeCode({ timeInSeconds: duration, format }); +}; export default function ProjectsPage() { - const { - savedProjects, - isLoading, - isInitialized, - deleteProject, - createNewProject, - getFilteredAndSortedProjects, - } = useProjectStore(); - const [thumbnailCache, setThumbnailCache] = useState< - Record
-
- setSearchQuery("")}
- />
- ) : (
-
-
-
- );
+ const { searchQuery, sortKey, sortOrder, viewMode } = useProjectsStore();
+ const editor = useEditor();
+
+ useEffect(() => {
+ if (!editor.project.getIsInitialized()) {
+ editor.project.loadAllProjects();
+ }
+ }, [editor.project]);
+
+ const sortOption: TProjectSortOption = `${sortKey}-${sortOrder}`;
+ const projectsToDisplay = editor.project.getFilteredAndSortedProjects({
+ searchQuery,
+ sortOption,
+ });
+
+ const isLoading = editor.project.getIsLoading();
+ const isInitialized = editor.project.getIsInitialized();
+
+ return (
+
-
-
-
- {isSelectionMode ? (
-
-
-
- {selectedProjects.size > 0 && (
-
- )}
-
- ) : (
-
-
-
-
-
- - Your Projects -
-- {savedProjects.length}{" "} - {savedProjects.length === 1 ? "project" : "projects"} - {isSelectionMode && selectedProjects.size > 0 && ( - - • {selectedProjects.size} selected - - )} -
-
- {isSelectionMode ? (
-
-
-
- {selectedProjects.size > 0 && (
-
- )}
-
- ) : (
-
-
-
- )}
-
-
-
- {isSelectionMode && sortedProjects.length > 0 && (
-
- )}
-
- {isLoading || !isInitialized ? (
-
- setSearchQuery(e.target.value)}
- />
-
-
-
-
-
-
-
-
-
-
-
- {
- if (sortOption.startsWith("createdAt")) {
- setSortOption(
- sortOption.endsWith("asc")
- ? "createdAt-desc"
- : "createdAt-asc"
- );
- } else {
- setSortOption("createdAt-asc");
- }
- }}
- >
- Created{" "}
- {sortOption.startsWith("createdAt") &&
- (sortOption.endsWith("asc") ? "↑" : "↓")}
-
- {
- if (sortOption.startsWith("name")) {
- setSortOption(
- sortOption.endsWith("asc")
- ? "name-desc"
- : "name-asc"
- );
- } else {
- setSortOption("name-asc");
- }
- }}
- >
- Name{" "}
- {sortOption.startsWith("name") &&
- (sortOption.endsWith("asc") ? "↑" : "↓")}
-
-
-
-
-
-
-
-
- - Sort by{" "} - {sortOption.startsWith("createdAt") ? "date" : "name"} ( - {sortOption.endsWith("asc") ? "ascending" : "descending"}) -
-
- {Array.from({ length: 8 }, (_, index) => (
-
- ) : savedProjects.length === 0 ? (
-
-
- ))}
-
-
-
-
-
- {sortedProjects.map((project) => (
-
- )}
-
+ p.id)} />
+
+ {isLoading || !isInitialized ? (
+
+
+ );
}
-interface ProjectCardProps {
- project: TProject;
- isSelectionMode?: boolean;
- isSelected?: boolean;
- onSelect?: (projectId: string, checked: boolean) => void;
- getProjectThumbnail: (projectId: string) => Promise
+ {projectsToDisplay.map((project) => (
+ p.id)}
+ />
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+
+ All projects
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {isSelectionMode && (
-
-
-
-
- )}
-
-
-
- onSelect?.(project.id, checked as boolean)
- }
- onClick={(e) => e.stopPropagation()}
- className="w-4 h-4"
- />
-
-
- {isLoadingThumbnail ? (
-
-
-
- ) : dynamicThumbnail ? (
-
-
-
- )}
-
-
-
-
-
- {
- e.preventDefault();
- e.stopPropagation();
- }}
- >
- {
- e.preventDefault();
- e.stopPropagation();
- setIsDropdownOpen(false);
- setIsRenameDialogOpen(true);
- }}
- >
- Rename
-
- {
- e.preventDefault();
- e.stopPropagation();
- handleDuplicateProject();
- }}
- >
- Duplicate
-
- {
- e.preventDefault();
- e.stopPropagation();
- setIsDropdownOpen(false);
- setIsDeleteDialogOpen(true);
- }}
- >
- Delete
-
-
-
- )}
-
-
- - {project.name} -
- {!isSelectionMode && ( -
-
-
-
-
+
+ );
}
-function CreateButton({ onClick }: { onClick?: () => void }) {
- return (
-
- );
+function SearchBar({
+ className,
+ collapsed,
+}: {
+ className?: string;
+ collapsed?: boolean;
+}) {
+ const { searchQuery, setSearchQuery } = useProjectsStore();
+
+ return (
+ <>
+ {collapsed ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {selectedProjectCount > 0 ?
+
+
+
+
+
+
+ ) : (
+
+
+ setSearchQuery({ query: event.target.value })}
+ size="lg"
+ className="pl-9"
+ />
+
+ )}
+
+ );
}
-function NoProjects({ onCreateProject }: { onCreateProject: () => void }) {
- return (
-
-
- );
+const PROJECT_ACTIONS = [
+ {
+ id: "duplicate",
+ label: "Duplicate",
+ icon: Copy01Icon,
+ variant: "outline" as const,
+ },
+ {
+ id: "delete",
+ label: "Delete",
+ icon: Delete02Icon,
+ variant: "destructive-foreground" as const,
+ },
+] as const;
+
+async function deleteProjects({
+ editor,
+ ids,
+}: {
+ editor: ReturnType
-
-
- No projects yet
-- Start creating your first video project. Import media, edit, and export - professional videos. -
- -
-
- );
+ await editor.project.renameProject({ id, name });
+}
+
+function ProjectActions() {
+ const editor = useEditor();
+ const { selectedProjectIds, clearSelectedProjects } = useProjectsStore();
+ const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+ const savedProjects = editor.project.getSavedProjects();
+ const selectedProjectNames = savedProjects
+ .filter((project) => selectedProjectIds.includes(project.id))
+ .map((project) => project.name);
+
+ const handleDuplicate = async () => {
+ await duplicateProjects({ editor, ids: selectedProjectIds });
+ clearSelectedProjects();
+ };
+
+ const handleDeleteClick = () => {
+ setIsDeleteDialogOpen(true);
+ };
+
+ const handleDeleteConfirm = async () => {
+ await deleteProjects({ editor, ids: selectedProjectIds });
+ clearSelectedProjects();
+ setIsDeleteDialogOpen(false);
+ };
+
+ const actionHandlers: Record
-
- No results found
-- Your search for "{searchQuery}" did not return any results. -
- -
+
+
+
+
+
+ {PROJECT_ACTIONS.map((action) => (
+
+
+ ))}
+
+
+
+
+
+ {PROJECT_ACTIONS.map((action) => (
+
+ ))}
+
+
+
+
+
+
+ {project.thumbnail ? (
+
+
+ {durationLabel && (
+
+
+ )}
+
+ {durationLabel}
+
+ )}
+ + {project.name} +
+
+
+
+
+ );
+
+ const listContent = (
+
+ {project.thumbnail ? (
+
+
+
+
+ )}
+ + {project.name} +
+ + + {durationLabel ?? "—"} + + + + {formatDate({ date: project.createdAt })} + +
+ event.preventDefault()}
+ onClick={(event) => {
+ handleCheckboxChange({
+ checked: !isSelected,
+ shiftKey: event.shiftKey,
+ });
+ }}
+ onCheckedChange={() => {}}
+ className="size-5 shrink-0"
+ />
+
+
+ {listRowContent}
+
+
+ {!isMultiSelect && (
+
+ );
+
+ const cardContent = isGridView ? gridContent : listContent;
+
+ if (!isGridView) {
+ return {listContent}
;
+ }
+
+ return (
+
+
+ {cardContent}
+
+
+ {isGridView && (
+ <>
+ event.preventDefault()}
+ onClick={(event) => {
+ handleCheckboxChange({
+ checked: !isSelected,
+ shiftKey: event.shiftKey,
+ });
+ }}
+ onCheckedChange={() => {}}
+ className={`absolute z-10 size-5 top-3 left-3 ${
+ isSelected || isDropdownOpen
+ ? "opacity-100"
+ : "opacity-0 group-hover:opacity-100"
+ }`}
+ />
+
+ {!isMultiSelect && (
+
+ );
+}
+
+function ProjectMenu({
+ isOpen,
+ onOpenChange,
+ project,
+ variant = "grid",
+}: {
+ isOpen: boolean;
+ onOpenChange: (open: boolean) => void;
+ project: TProjectMetadata;
+ variant?: "grid" | "list";
+}) {
+ const editor = useEditor();
+ const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+ const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+ const [isInfoDialogOpen, setIsInfoDialogOpen] = useState(false);
+
+ const handleMenuClick = ({
+ event,
+ }: {
+ event: MouseEvent
+ {skeletonIds.map((skeletonId) => (
+
+
+
+
+ ))}
+
+ );
+}
+
+function EmptyState() {
+ const { searchQuery, setSearchQuery } = useProjectsStore();
+ const router = useRouter();
+ const editor = useEditor();
+ const savedProjects = editor.project.getSavedProjects();
+
+ const handleCreateProject = async () => {
+ try {
+ const projectId = await editor.project.createNewProject({
+ name: "New project",
+ });
+ router.push(`/editor/${projectId}`);
+ } catch (error) {
+ toast.error("Failed to create project", {
+ description:
+ error instanceof Error ? error.message : "Please try again",
+ });
+ }
+ };
+
+ if (savedProjects.length > 0) {
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ No results found
++ Your search for "{searchQuery}" did not return any results. +
+
+
+ );
}
diff --git a/apps/web/src/app/projects/store.ts b/apps/web/src/app/projects/store.ts
new file mode 100644
index 00000000..eaf8f947
--- /dev/null
+++ b/apps/web/src/app/projects/store.ts
@@ -0,0 +1,129 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import type { TProjectSortKey } from "@/types/project";
+
+export type ProjectsViewMode = "grid" | "list";
+
+interface ProjectsState {
+ searchQuery: string;
+ sortKey: TProjectSortKey;
+ sortOrder: "asc" | "desc";
+ viewMode: ProjectsViewMode;
+ selectedProjectIds: string[];
+ lastSelectedProjectId: string | null;
+ isHydrated: boolean;
+ setIsHydrated: ({ isHydrated }: { isHydrated: boolean }) => void;
+ setSearchQuery: ({ query }: { query: string }) => void;
+ setSortKey: ({ sortKey }: { sortKey: TProjectSortKey }) => void;
+ setSortOrder: ({ sortOrder }: { sortOrder: "asc" | "desc" }) => void;
+ toggleSortOrder: () => void;
+ setViewMode: ({ viewMode }: { viewMode: ProjectsViewMode }) => void;
+ setSelectedProjects: ({ projectIds }: { projectIds: string[] }) => void;
+ clearSelectedProjects: () => void;
+ setProjectSelected: ({
+ projectId,
+ isSelected,
+ }: {
+ projectId: string;
+ isSelected: boolean;
+ }) => void;
+ selectProjectRange: ({
+ projectId,
+ allProjectIds,
+ }: {
+ projectId: string;
+ allProjectIds: string[];
+ }) => void;
+}
+
+const getNextSelectedProjectIds = ({
+ selectedProjectIds,
+ projectId,
+ isSelected,
+}: {
+ selectedProjectIds: string[];
+ projectId: string;
+ isSelected: boolean;
+}): string[] => {
+ const selectedProjectIdSet = new Set(selectedProjectIds);
+
+ if (isSelected) {
+ selectedProjectIdSet.add(projectId);
+ return Array.from(selectedProjectIdSet);
+ }
+
+ selectedProjectIdSet.delete(projectId);
+ return Array.from(selectedProjectIdSet);
+};
+
+export const useProjectsStore = create
+
+
+
+
+ No projects yet
++ Start creating your first project. Import media, edit, and export your + videos. All privately. +
+
-
-
-
-
- );
+function StatusBadge({
+ status,
+ className,
+}: {
+ status: Status;
+ className?: string;
+}) {
+ return (
+
-
-
-
-
-
-
-
+
+ );
+}
+
+function RoadmapItem({ item, index }: { item: RoadmapItem; index: number }) {
+ return (
+
-
-
-
-
-
-
- - Roadmap -
-- What's coming next for OpenCut (last updated: July 14, 2025) -
-
- {roadmapItems.map((item, index) => (
-
+ return (
+
-
- ))}
-
-
- {index + 1}.
-
-
-
-
-
-
- {item.status.text}
-
-
- {item.title}
-
- (
-
- {children}
-
- ),
- strong: ({ children }) => (
-
- {children}
-
- ),
- }}
- >
- {item.description}
-
-
-
+
+
+ {roadmapItems.map((item, index) => (
+
+
+
+ );
+}
-
+ {index + 1}
+
+ {item.title}
+
+ {item.description}
+
+
-
-
-
- Want to Help?
-- OpenCut is open source and built by the community. Every - contribution, no matter how small, helps us build the best - free video editor possible. -
-
-
-
-
-
-
-
- Report Issues
-
-
-
-
+
+ + Sponsors +
++ Support OpenCut and help us build the future of privacy-first video + editing. +
+
+ {SPONSORS.map((sponsor) => (
+
+ );
+}
+
+function SponsorCard({ sponsor }: { sponsor: Sponsor }) {
+ return (
+
+
+
+
+
+ + {sponsor.name} +
+{sponsor.description}
+
-
-
-
-
- );
+
-
-
-
-
-
-
-
-
-
-
+ return (
+
+
+
+
+ Quick summary
+
+
+
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
- - Terms of Service -
-- Fair and transparent terms for our free, open-source video - editor. -
-- Welcome to OpenCut -
-- OpenCut is a free, open-source video editor that runs in - your browser. By using our service, you agree to these - terms. We've designed these terms to be fair and protect - both you and our project. -
-- Key principle: Your content stays on your - device. We never claim ownership of your videos or projects. -
-+ You own your content, we own nothing. +
+-
+
- + Your content stays private - basic editing is local, AI features + use encrypted uploads + +
- + We never claim ownership of your content, even when processing + AI features + +
- + Free for personal and commercial use with no watermarks or + restrictions + +
- Don't use OpenCut for illegal activities or harassment +
- + Service provided "as is" - we can't guarantee perfect uptime + +
- + Open source means you can review our code and self-host if + needed + +
- + You can delete your account anytime and keep using your exported + videos + +
+ Questions? Email us at{" "} + + oss@opencut.app + +
+- Your Content, Your Rights -
-- You own everything you create. OpenCut - processes your videos locally on your device, so we never - have access to your content. We make no claims to ownership, - licensing, or rights over your videos, projects, or any - content you create using OpenCut. -
--
-
- - Your videos remain completely private and under your - control - -
- - You retain all intellectual property rights to your - content - -
- - You can export and use your content however you choose - -
- - No watermarks, no licensing restrictions from OpenCut - -
Your Content, Your Rights
++ You own everything you create. OpenCut processes + basic editing locally on your device. For AI features, content is + encrypted before upload and we cannot access your original files. We + make no claims to ownership, licensing, or rights over your videos, + projects, or any content you create using OpenCut. +
+-
+
- + Your content remains private and under your control at all times + +
- You retain all intellectual property rights to your content +
- + Even when using AI features, we cannot access your unencrypted + content + +
- You can export and use your content however you choose +
- No watermarks, no licensing restrictions from OpenCut +
- How You Can Use OpenCut -
-- OpenCut is free for personal and commercial use. You can: -
--
-
- - Create videos for personal, educational, or commercial - purposes - -
- Use OpenCut for client work and paid projects -
- Share and distribute videos created with OpenCut -
- - Modify and distribute the OpenCut software (under MIT - license) - -
- What we ask: Don't use OpenCut for illegal - activities, harassment, or creating harmful content. Be - respectful of others and follow applicable laws. -
-How You Can Use OpenCut
+OpenCut is free for personal and commercial use. You can:
+-
+
- + Create videos for personal, educational, or commercial purposes + +
- Use OpenCut for client work and paid projects +
- Share and distribute videos created with OpenCut +
- + Modify and distribute the OpenCut software (under MIT license) + +
+ What we ask: Don't use OpenCut for illegal + activities, harassment, or creating harmful content. Be respectful of + others and follow applicable laws. +
+- Account and Service -
-- To use certain features, you may create an account: -
--
-
- Provide accurate information when signing up -
- - Keep your account secure and don't share credentials - -
- You're responsible for activity under your account -
- You can delete your account at any time -
- OpenCut is provided "as is" without warranties. While we - strive for reliability, we can't guarantee uninterrupted - service. -
-+ AI Features and Data Processing +
++ OpenCut offers optional AI-powered features that require server + processing: +
+-
+
- + AI features (auto captions, content analysis, etc.) are completely + optional + +
- Your content is encrypted on your device before any upload +
- + We use zero-knowledge encryption - we cannot decrypt your content + +
- Encrypted content is deleted immediately after processing +
- + You maintain full ownership and control of your content throughout + +
+ By using AI features, you consent to the temporary, encrypted + processing of your content as described in our Privacy Policy. You can + always choose to use only local editing features. +
+- Open Source Benefits -
-- Because OpenCut is open source, you have additional rights: -
--
-
- - Review our code to see exactly how we handle your data - -
- Self-host OpenCut on your own servers -
- Modify the software to suit your needs -
- Contribute improvements back to the community -
- View our source code and license on{" "} - - GitHub - - . -
-Account and Service
+To use certain features, you may create an account:
+-
+
- Provide accurate information when signing up +
- Keep your account secure and don't share credentials +
- You're responsible for activity under your account +
- You can delete your account at any time +
+ OpenCut is provided "as is" without warranties. While we strive for + reliability, we can't guarantee uninterrupted service. +
+- Third-Party Content -
-- When using OpenCut, make sure you have the right to use any - content you import: -
--
-
- - Only upload content you own or have permission to use - -
- - Respect copyright, trademarks, and other intellectual - property - -
- - Don't use copyrighted music, images, or videos without - permission - -
- - You're responsible for any claims related to your content - -
Open Source Benefits
+Because OpenCut is open source, you have additional rights:
+-
+
- Review our code to see exactly how we handle your data +
- Self-host OpenCut on your own servers +
- Modify the software to suit your needs +
- Contribute improvements back to the community +
+ View our source code and license on{" "} + + GitHub + + . +
+- Limitations and Liability -
-- OpenCut is provided free of charge. To the extent permitted - by law: -
--
-
- We're not liable for any loss of data or content -
- - Projects are stored in your browser and may be lost if you - clear browser data - -
- We're not responsible for how you use the service -
- - Our liability is limited to the maximum extent allowed by - law - -
- Since your content stays on your device, we have no way to - recover lost projects. Consider exporting important videos - when finished editing. -
-Third-Party Content
++ When using OpenCut, make sure you have the right to use any content + you import: +
+-
+
- Only upload content you own or have permission to use +
- + Respect copyright, trademarks, and other intellectual property + +
- + Don't use copyrighted music, images, or videos without permission + +
- You're responsible for any claims related to your content +
- Service Changes -
-We may update OpenCut and these terms:
--
-
- - We'll notify you of significant changes to these terms - -
- Continued use means you accept any updates -
- - You can always self-host an older version if you prefer - -
- - Major changes will be discussed with the community on - GitHub - -
Limitations and Liability
++ OpenCut is provided free of charge. To the extent permitted by law: +
+-
+
- We're not liable for any loss of data or content +
- + Projects are stored in your browser and may be lost if you clear + browser data + +
- We're not responsible for how you use the service +
- Our liability is limited to the maximum extent allowed by law +
+ Since your content stays on your device, we have no way to recover + lost projects. Consider exporting important videos when finished + editing. +
+Termination
-- You can stop using OpenCut at any time: -
--
-
- Delete your account through your profile settings -
- Clear your browser data to remove local projects -
- - Your content remains yours even if you stop using OpenCut - -
- - We may suspend accounts for violations of these terms - -
Service Changes
+We may update OpenCut and these terms:
+-
+
- We'll notify you of significant changes to these terms +
- Continued use means you accept any updates +
- You can always self-host an older version if you prefer +
- Major changes will be discussed with the community on GitHub +
- Contact and Disputes -
-- Questions about these terms or need to report an issue? -
-- Contact us through our{" "} - - GitHub repository - - , email us at{" "} - - oss@opencut.app - - , or reach out on{" "} - - X (Twitter) - - . -
-- These terms are governed by applicable law in your - jurisdiction. We prefer to resolve disputes through friendly - discussion in our open-source community. -
-Termination
+You can stop using OpenCut at any time:
+-
+
- Delete your account through your profile settings +
- Clear your browser data to remove local projects +
- Your content remains yours even if you stop using OpenCut +
- We may suspend accounts for violations of these terms +
- Last updated: July 14, 2025 -
-Contact Us
+Questions about these terms or need to report an issue?
++ Contact us through our{" "} + + GitHub repository + + , email us at{" "} + + oss@opencut.app + + , or reach out on{" "} + + X (Twitter) + + . +
++ These terms are governed by applicable law in your jurisdiction. We + prefer to resolve disputes through friendly discussion in our + open-source community. +
++ Last updated: July 14, 2025 +
+ + ); } diff --git a/apps/web/src/app/why-not-capcut/page.tsx b/apps/web/src/app/why-not-capcut/page.tsx deleted file mode 100644 index b05860a6..00000000 --- a/apps/web/src/app/why-not-capcut/page.tsx +++ /dev/null @@ -1,191 +0,0 @@ -import { Header } from "@/components/header"; - -export default function WhyNotCapcut() { - return ( -
-
-
-
- );
-}
diff --git a/apps/web/src/components/delete-project-dialog.tsx b/apps/web/src/components/delete-project-dialog.tsx
deleted file mode 100644
index e8f8703c..00000000
--- a/apps/web/src/components/delete-project-dialog.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
-} from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
-
-export function DeleteProjectDialog({
- isOpen,
- onOpenChange,
- onConfirm,
- projectName,
-}: {
- isOpen: boolean;
- onOpenChange: (open: boolean) => void;
- onConfirm: () => void;
- projectName?: string;
-}) {
- return (
-
- );
-}
diff --git a/apps/web/src/components/editable-timecode.tsx b/apps/web/src/components/editable-timecode.tsx
new file mode 100644
index 00000000..d32f067a
--- /dev/null
+++ b/apps/web/src/components/editable-timecode.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { formatTimeCode, parseTimeCode } from "@/lib/time";
+import type { TTimeCode } from "@/types/time";
+import { cn } from "@/utils/ui";
+
+interface EditableTimecodeProps {
+ time: number;
+ duration: number;
+ format?: TTimeCode;
+ fps: number;
+ onTimeChange?: ({ time }: { time: number }) => void;
+ className?: string;
+ disabled?: boolean;
+}
+
+export function EditableTimecode({
+ time,
+ duration,
+ format = "HH:MM:SS:FF",
+ fps,
+ onTimeChange,
+ className,
+ disabled = false,
+}: EditableTimecodeProps) {
+ const [isEditing, setIsEditing] = useState(false);
+ const [inputValue, setInputValue] = useState("");
+ const [hasError, setHasError] = useState(false);
+ const inputRef = useRef
-
-
-
-
-
-
-
-
-
-
-
- - Fuck CapCut -
-- Roasting time, so get ready motherfucker. -
-
-
-
-
-
- - Seriously, what the fuck else do you want? -
-- You probably use CapCut and think your video editing is - special. You think your fucking TikTok with 47 transitions and - 12 different fonts is going to get you some viral fame. You - think loading up every goddamn effect in their library makes - your content better. Wrong, motherfucker. Let me describe what - CapCut actually gives you: -
--
-
- A paywall every time you breathe -
- Terms of service that steal your shit -
- - More "Get Pro" dialogs than a Windows 95 error message - -
- - Features that disappear behind paywalls while you're fucking - using them - -
- Bugs disguised as "premium features" -
- Well guess what, motherfucker: -
-- You. Are. Getting. Scammed. Look at this shit. It's a fucking - video editor. Why the fuck do you need to pay $20/month just - to remove a goddamn watermark? You spent hours editing your - video and they slap their logo on it like they fucking made - it. -
-
-
-
- - The "Get Pro" dialog is everywhere -
-- This motherfucking dialog pops up more than ads on a pirated - movie site. Want to add a transition? Get Pro. Want to export - without their watermark? Get Pro. Want to use more than 2 - fonts? Get fucking Pro, peasant. -
-- Did you seriously think you could edit a video without seeing - this dialog 47 times? You click one button and BAM - there it - is again, asking for your credit card like a desperate ex - asking for money. -
-
-
-
- - Everything costs money now -
-- You dumbass. You thought CapCut was free, but no. Free means - they let you open the app. Everything else costs money. Basic - shake effect? That'll be $20/month. A decent transition that - isn't "fade"? Pay up, motherfucker. -
-- Here's my favorite piece of bullshit: You import an MP3 file - - you know, AUDIO - and try to export. "Sorry, can't export - because you're using our premium extract audio feature!" -
-- - My MP3 was already fucking audio, you absolute morons. - -
-- But wait, there's more! If you drag that same MP3 to their - media panel first, then to the timeline, it magically works. - This isn't a bug, it's a fucking scam disguised as software - engineering. -
-
-
-
- - Their Terms of Service are insane -
-- Look at this shit. You upload your content and they basically - say "thanks for the free content, we own it now, but if Disney - sues anyone, that's your problem." -
-- CapCut's Terms of Service: We get full rights - to use, modify, distribute, and monetize everything you upload - - permanently and without paying you shit. But you're still - responsible if anything goes wrong. -
-- Translation: "We'll make money off your viral video, you - handle the lawsuits." Brilliant legal strategy, you fucks. -
-
-
-
- - The editor is actually good -
-- Here's the thing that makes me want to punch my monitor: the - actual video editor is fucking good. It's intuitive, powerful, - and anyone can figure it out. When it's not begging for money - every 30 seconds, it actually works well. -
-- Which makes everything else so much worse. They built - something people want to use, then turned it into a digital - slot machine. Every click might trigger a payment request. -
-
-
-
- - This is a video editor. Look at it. You've never seen one - before. -
-- Like the person who's never used software that doesn't - constantly beg for money, you have no fucking idea what a - video editor should be. All you've ever seen are predatory - apps disguised as creative tools. -
-- A real video editor lets you edit videos. It doesn't steal - your content. It doesn't pop up payment dialogs every 5 - seconds. It doesn't charge you separately for basic features - that should be free. -
-
-
- - Yes, this is fucking satire, you fuck -
-- I'm not actually saying all video editors should be basic as - shit. What I'm saying is that all the problems we have with - video editing apps are{" "} - ones they create themselves. Video editors - aren't broken by default - they edit videos, export them, and - let you use basic features without constantly begging for - money. CapCut breaks them. They turn them into payment - processors with video editing as a side feature. -
-
- "Good software gets out of your way."
-
- Some smart motherfucker who definitely wasn't working
- at CapCut
-
- Audio unavailable
-
- );
- }
-
- return (
-
- {isLoading && (
-
- );
-};
-
-export default AudioWaveform;
diff --git a/apps/web/src/components/editor/dialogs/delete-project-dialog.tsx b/apps/web/src/components/editor/dialogs/delete-project-dialog.tsx
new file mode 100644
index 00000000..0086384e
--- /dev/null
+++ b/apps/web/src/components/editor/dialogs/delete-project-dialog.tsx
@@ -0,0 +1,84 @@
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogBody,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+
+export function DeleteProjectDialog({
+ isOpen,
+ onOpenChange,
+ onConfirm,
+ projectNames,
+}: {
+ isOpen: boolean;
+ onOpenChange: (open: boolean) => void;
+ onConfirm: () => void;
+ projectNames: string[];
+}) {
+ const count = projectNames.length;
+ const isSingle = count === 1;
+ const singleName = isSingle ? projectNames[0] : null;
+
+ return (
+
+ );
+}
diff --git a/apps/web/src/components/editor/dialogs/migration-dialog.tsx b/apps/web/src/components/editor/dialogs/migration-dialog.tsx
new file mode 100644
index 00000000..4c9550c2
--- /dev/null
+++ b/apps/web/src/components/editor/dialogs/migration-dialog.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { useEditor } from "@/hooks/use-editor";
+import { Loader2 } from "lucide-react";
+
+export function MigrationDialog() {
+ const editor = useEditor();
+ const migrationState = editor.project.getMigrationState();
+
+ if (!migrationState.isMigrating) return null;
+
+ const title = migrationState.projectName
+ ? "Updating project"
+ : "Updating projects";
+ const description = migrationState.projectName
+ ? `Upgrading "${migrationState.projectName}" from v${migrationState.fromVersion} to v${migrationState.toVersion}`
+ : `Upgrading projects from v${migrationState.fromVersion} to v${migrationState.toVersion}`;
+
+ return (
+
+ );
+}
diff --git a/apps/web/src/components/editor/dialogs/project-info-dialog.tsx b/apps/web/src/components/editor/dialogs/project-info-dialog.tsx
new file mode 100644
index 00000000..7b736b23
--- /dev/null
+++ b/apps/web/src/components/editor/dialogs/project-info-dialog.tsx
@@ -0,0 +1,83 @@
+import {
+ Dialog,
+ DialogBody,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import type { TProjectMetadata } from "@/types/project";
+import { formatDate } from "@/utils/date";
+import { formatTimeCode } from "@/lib/time";
+import { Button } from "@/components/ui/button";
+
+function InfoRow({
+ label,
+ value,
+}: {
+ label: string;
+ value: string | React.ReactNode;
+}) {
+ return (
+
- Loading...
-
- )}
-
-
+ {label}
+ {value}
+
+ );
+}
+
+export function ProjectInfoDialog({
+ isOpen,
+ onOpenChange,
+ project,
+}: {
+ isOpen: boolean;
+ onOpenChange: (open: boolean) => void;
+ project: TProjectMetadata;
+}) {
+ const durationFormatted =
+ project.duration > 0
+ ? formatTimeCode({
+ timeInSeconds: project.duration,
+ format: project.duration >= 3600 ? "HH:MM:SS" : "MM:SS",
+ })
+ : "0:00";
+
+ return (
+
+ );
+}
diff --git a/apps/web/src/components/editor/dialogs/rename-project-dialog.tsx b/apps/web/src/components/editor/dialogs/rename-project-dialog.tsx
new file mode 100644
index 00000000..73024d71
--- /dev/null
+++ b/apps/web/src/components/editor/dialogs/rename-project-dialog.tsx
@@ -0,0 +1,72 @@
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogBody,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { useState } from "react";
+import { Label } from "@/components/ui/label";
+
+export function RenameProjectDialog({
+ isOpen,
+ onOpenChange,
+ onConfirm,
+ projectName,
+}: {
+ isOpen: boolean;
+ onOpenChange: (open: boolean) => void;
+ onConfirm: (newName: string) => void;
+ projectName: string;
+}) {
+ const [name, setName] = useState(projectName);
+
+ const handleOpenChange = (open: boolean) => {
+ if (open) {
+ setName(projectName);
+ }
+ onOpenChange(open);
+ };
+
+ return (
+
+ );
+}
diff --git a/apps/web/src/components/editor/dialogs/shortcuts-dialog.tsx b/apps/web/src/components/editor/dialogs/shortcuts-dialog.tsx
new file mode 100644
index 00000000..565fe705
--- /dev/null
+++ b/apps/web/src/components/editor/dialogs/shortcuts-dialog.tsx
@@ -0,0 +1,229 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import {
+ type KeyboardShortcut,
+ useKeyboardShortcutsHelp,
+} from "@/hooks/use-keyboard-shortcuts-help";
+import { useKeybindingsStore } from "@/stores/keybindings-store";
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogBody,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+
+export function ShortcutsDialog({
+ isOpen,
+ onOpenChange,
+}: {
+ isOpen: boolean;
+ onOpenChange: (open: boolean) => void;
+}) {
+ const [recordingShortcut, setRecordingShortcut] =
+ useState
+
+ );
+}
+
+function EditableShortcutKey({
+ children,
+ isRecording,
+ onStartRecording,
+}: {
+ children: React.ReactNode;
+ isRecording: boolean;
+ onStartRecording: () => void;
+}) {
+ const handleClick = (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ onStartRecording();
+ };
+
+ return (
+
+ );
+}
diff --git a/apps/web/src/components/editor/editor-header.tsx b/apps/web/src/components/editor/editor-header.tsx
index 5363d0c7..d74d78d7 100644
--- a/apps/web/src/components/editor/editor-header.tsx
+++ b/apps/web/src/components/editor/editor-header.tsx
@@ -1,130 +1,187 @@
"use client";
import { Button } from "../ui/button";
-import { ChevronDown, ArrowLeft, SquarePen, Trash } from "lucide-react";
-import { HeaderBase } from "../header-base";
-import { useProjectStore } from "@/stores/project-store";
-import { KeyboardShortcutsHelp } from "../keyboard-shortcuts-help";
+import { ChevronDown } from "lucide-react";
import { useState } from "react";
import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuSeparator,
- DropdownMenuTrigger,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import Link from "next/link";
-import { RenameProjectDialog } from "../rename-project-dialog";
-import { DeleteProjectDialog } from "../delete-project-dialog";
+import { RenameProjectDialog } from "./dialogs/rename-project-dialog";
+import { DeleteProjectDialog } from "./dialogs/delete-project-dialog";
import { useRouter } from "next/navigation";
import { FaDiscord } from "react-icons/fa6";
-import { PanelPresetSelector } from "./panel-preset-selector";
import { ExportButton } from "./export-button";
import { ThemeToggle } from "../theme-toggle";
+import { SOCIAL_LINKS } from "@/constants/site-constants";
+import { toast } from "sonner";
+import { useEditor } from "@/hooks/use-editor";
+import {
+ ArrowLeft02Icon,
+ Edit03Icon,
+ Delete02Icon,
+ CommandIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { ShortcutsDialog } from "./dialogs/shortcuts-dialog";
export function EditorHeader() {
- const { activeProject, renameProject, deleteProject } = useProjectStore();
- const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
- const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
- const router = useRouter();
+ return (
+
+ {shortcut.icon && (
+
+ {shortcut.icon}
+ )}
+ {shortcut.description}
+
+ {displayKeys.map((key: string, index: number) => (
+
+
+
+ ))}
+
+ {key.split("+").map((keyPart: string, partIndex: number) => {
+ const keyId = `${shortcut.id}-${index}-${partIndex}`;
+ return (
+ onStartRecording({ shortcut })}
+ >
+ {keyPart}
+
+ );
+ })}
+
+ {index < displayKeys.length - 1 && (
+ or
+ )}
+
+
+
+
-
-
-
-
-
-
-
-
-
- setIsRenameDialogOpen(true)}
- >
-
- setIsDeleteDialogOpen(true)}
- >
-
-
-
-
-
-
-
- );
+ const handleSaveProjectName = async (newName: string) => {
+ if (
+ activeProject &&
+ newName.trim() &&
+ newName !== activeProject.metadata.name
+ ) {
+ try {
+ await editor.project.renameProject({
+ id: activeProject.metadata.id,
+ name: newName.trim(),
+ });
+ } catch (error) {
+ toast.error("Failed to rename project", {
+ description:
+ error instanceof Error ? error.message : "Please try again",
+ });
+ } finally {
+ setOpenDialog(null);
+ }
+ }
+ };
- const rightContent = (
-
- );
+ const handleDeleteProject = async () => {
+ if (activeProject) {
+ try {
+ await editor.project.deleteProjects({
+ ids: [activeProject.metadata.id],
+ });
+ router.push("/projects");
+ } catch (error) {
+ toast.error("Failed to delete project", {
+ description:
+ error instanceof Error ? error.message : "Please try again",
+ });
+ } finally {
+ setOpenDialog(null);
+ }
+ }
+ };
- return (
-
-
+ return (
+ - {isExporting ? "Exporting project" : "Export project"} -
- -
+
- + {isExporting ? "Exporting project" : "Export project"} +
+ +
- {!isExporting && (
- <>
-
-
- )}
-
-
-
-
- setFormat(value as ExportFormat)
- }
- >
-
-
+
- )}
-
-
-
-
-
+ {!isExporting && (
+ <>
+
+
+
-
-
- )}
+
+
+ )}
- {isExporting && (
-
+
+ {
+ if (isExportFormat(value)) {
+ setFormat(value);
+ }
+ }}
+ >
+
+
-
-
- setQuality(value as ExportQuality)
- }
- >
-
-
+
+ {
+ if (isExportQuality(value)) {
+ setQuality(value);
+ }
+ }}
+ >
+
+
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
- setIncludeAudio(!!checked)
- }
- />
-
-
-
+
+ setIncludeAudio(!!checked)
+ }
+ />
+
+
+
-
+
+ )}
+
+ );
+}
+
+function isExportFormat(value: string): value is ExportFormat {
+ return EXPORT_FORMAT_VALUES.some((formatValue) => formatValue === value);
+}
-
-
-
+ {isExporting && (
+
-
-
- - {Math.round(progress * 100)}% -
-100%
-
+
+ )}
+
+
+
+
+
+
+
+ + {Math.round(progress * 100)}% +
+100%
+
-
+ );
}
diff --git a/apps/web/src/components/editor/layout-guide-overlay.tsx b/apps/web/src/components/editor/layout-guide-overlay.tsx
index ff4cde57..0f02da1c 100644
--- a/apps/web/src/components/editor/layout-guide-overlay.tsx
+++ b/apps/web/src/components/editor/layout-guide-overlay.tsx
@@ -4,24 +4,24 @@ import { useEditorStore } from "@/stores/editor-store";
import Image from "next/image";
function TikTokGuide() {
- return (
-
-
+ return (
+ Export failed
-- {error} -
-
+
- );
+
+
- Export failed
+{error}
+
-
-
-
-
+
+
+
+
-
- );
+ return (
+
+
+ );
}
export function LayoutGuideOverlay() {
- const { layoutGuide } = useEditorStore();
+ const { layoutGuide } = useEditorStore();
- if (layoutGuide.platform === null) return null;
- if (layoutGuide.platform === "tiktok") return
-
- );
-}
diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
deleted file mode 100644
index 89b53b64..00000000
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-
-import { TabBar } from "./tabbar";
-import { MediaView } from "./views/media";
-import { useMediaPanelStore, Tab } from "./store";
-import { TextView } from "./views/text";
-import { SoundsView } from "./views/sounds";
-import { StickersView } from "./views/stickers";
-import { Separator } from "@/components/ui/separator";
-import { SettingsView } from "./views/settings";
-import { Captions } from "./views/captions";
-
-export function MediaPanel() {
- const { activeTab } = useMediaPanelStore();
-
- const viewMap: Record
-
-
-
-
-
- {isProcessing && (
- - {isProcessing - ? `Processing your files (${progress}%)` - : "Drag and drop videos, photos, and audio files here"} -
-
-
- )}
-
-
-
-
- Effects view coming soon...
-
- ),
- transitions: (
-
- Transitions view coming soon...
-
- ),
- captions:
- Filters view coming soon...
-
- ),
- adjustment: (
-
- Adjustment view coming soon...
-
- ),
- settings:
-
- );
-}
diff --git a/apps/web/src/components/editor/media-panel/store.ts b/apps/web/src/components/editor/media-panel/store.ts
deleted file mode 100644
index eb645ec3..00000000
--- a/apps/web/src/components/editor/media-panel/store.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import {
- CaptionsIcon,
- ArrowLeftRightIcon,
- SparklesIcon,
- StickerIcon,
- MusicIcon,
- VideoIcon,
- BlendIcon,
- SlidersHorizontalIcon,
- LucideIcon,
- TypeIcon,
- SettingsIcon,
-} from "lucide-react";
-import { create } from "zustand";
-
-export type Tab =
- | "media"
- | "sounds"
- | "text"
- | "stickers"
- | "effects"
- | "transitions"
- | "captions"
- | "filters"
- | "adjustment"
- | "settings";
-
-export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
- media: {
- icon: VideoIcon,
- label: "Media",
- },
- sounds: {
- icon: MusicIcon,
- label: "Sounds",
- },
- text: {
- icon: TypeIcon,
- label: "Text",
- },
- stickers: {
- icon: StickerIcon,
- label: "Stickers",
- },
- effects: {
- icon: SparklesIcon,
- label: "Effects",
- },
- transitions: {
- icon: ArrowLeftRightIcon,
- label: "Transitions",
- },
- captions: {
- icon: CaptionsIcon,
- label: "Captions",
- },
- filters: {
- icon: BlendIcon,
- label: "Filters",
- },
- adjustment: {
- icon: SlidersHorizontalIcon,
- label: "Adjustment",
- },
- settings: {
- icon: SettingsIcon,
- label: "Settings",
- },
-};
-
-interface MediaPanelStore {
- activeTab: Tab;
- setActiveTab: (tab: Tab) => void;
- highlightMediaId: string | null;
- requestRevealMedia: (mediaId: string) => void;
- clearHighlight: () => void;
-}
-
-export const useMediaPanelStore = create{viewMap[activeTab]}
-
-
- );
-}
-
-function FadeOverlay({ direction, show }: { direction: "top" | "bottom", show: boolean }) {
- return (
-
- );
-}
\ No newline at end of file
diff --git a/apps/web/src/components/editor/media-panel/views/captions.tsx b/apps/web/src/components/editor/media-panel/views/captions.tsx
deleted file mode 100644
index fbe5b418..00000000
--- a/apps/web/src/components/editor/media-panel/views/captions.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { PropertyGroup } from "../../properties-panel/property-item";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
-import { Language, LanguageSelect } from "@/components/language-select";
-import { useState, useRef, useEffect } from "react";
-import { extractTimelineAudio } from "@/lib/mediabunny-utils";
-import { encryptWithRandomKey, arrayBufferToBase64 } from "@/lib/zk-encryption";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
-import { Loader2, Shield, Trash2, Upload } from "lucide-react";
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
-} from "@/components/ui/dialog";
-import { TextElement } from "@/types/timeline";
-
-export const languages: Language[] = [
- { code: "US", name: "English" },
- { code: "ES", name: "Spanish" },
- { code: "IT", name: "Italian" },
- { code: "FR", name: "French" },
- { code: "DE", name: "German" },
- { code: "PT", name: "Portuguese" },
- { code: "RU", name: "Russian" },
- { code: "JP", name: "Japanese" },
- { code: "CN", name: "Chinese" },
-];
-
-const PRIVACY_DIALOG_KEY = "opencut-transcription-privacy-accepted";
-
-export function Captions() {
- const [selectedCountry, setSelectedCountry] = useState("auto");
- const [isProcessing, setIsProcessing] = useState(false);
- const [processingStep, setProcessingStep] = useState
- {(Object.keys(tabs) as Tab[]).map((tabKey) => {
- const tab = tabs[tabKey];
- return (
-
-
- setActiveTab(tabKey)}
- key={tabKey}
- >
-
-
-
-
-
-
-
- );
- })}
-
- {tab.label}
-
-
- {error && (
-
-
-
- )}
-
-
-
-
- {error}
-
- 
-
- );
- } else if (item.type === "video") {
- if (item.thumbnailUrl) {
- preview = (
-
- 
-
- );
- } else {
- preview = (
-
-
-
- {item.duration && (
-
- {formatDuration(item.duration)}
-
- )}
-
-
- Video
- {item.duration && (
-
- {formatDuration(item.duration)}
-
- )}
-
- );
- }
- } else if (item.type === "audio") {
- preview = (
-
-
- );
- } else {
- preview = (
-
-
- );
- }
-
- previews.set(item.id, preview);
- });
-
- return previews;
- }, [filteredMediaItems]);
-
- const renderPreview = (item: MediaFile) => previewComponents.get(item.id);
-
- return (
- <>
- {/* Hidden file input for uploading media */}
-
-
-
-
-
- );
-}
-
-function GridView({
- filteredMediaItems,
- renderPreview,
- handleRemove,
- highlightedId,
- registerElement,
-}: {
- filteredMediaItems: MediaFile[];
- renderPreview: (item: MediaFile) => React.ReactNode;
- handleRemove: (e: React.MouseEvent, id: string) => Promise
- {/* Search and filter controls */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- if (sortBy === "name") {
- setSortOrder(
- sortOrder === "asc" ? "desc" : "asc"
- );
- } else {
- setSortBy("name");
- setSortOrder("asc");
- }
- }}
- >
- Name{" "}
- {sortBy === "name" &&
- (sortOrder === "asc" ? "↑" : "↓")}
-
- {
- if (sortBy === "type") {
- setSortOrder(
- sortOrder === "asc" ? "desc" : "asc"
- );
- } else {
- setSortBy("type");
- setSortOrder("asc");
- }
- }}
- >
- Type{" "}
- {sortBy === "type" &&
- (sortOrder === "asc" ? "↑" : "↓")}
-
- {
- if (sortBy === "duration") {
- setSortOrder(
- sortOrder === "asc" ? "desc" : "asc"
- );
- } else {
- setSortBy("duration");
- setSortOrder("asc");
- }
- }}
- >
- Duration{" "}
- {sortBy === "duration" &&
- (sortOrder === "asc" ? "↑" : "↓")}
-
- {
- if (sortBy === "size") {
- setSortOrder(
- sortOrder === "asc" ? "desc" : "asc"
- );
- } else {
- setSortBy("size");
- setSortOrder("asc");
- }
- }}
- >
- File Size{" "}
- {sortBy === "size" &&
- (sortOrder === "asc" ? "↑" : "↓")}
-
-
-
-
-
-
-
-
-
- - {mediaViewMode === "grid" - ? "Switch to list view" - : "Switch to grid view"} -
-- Sort by {sortBy} ( - {sortOrder === "asc" ? "ascending" : "descending"}) -
-
-
-
- {isDragOver || filteredMediaItems.length === 0 ? (
-
-
- {filteredMediaItems.map((item) => (
-
- );
-}
-
-function ListView({
- filteredMediaItems,
- renderPreview,
- handleRemove,
- highlightedId,
- registerElement,
-}: {
- filteredMediaItems: MediaFile[];
- renderPreview: (item: MediaFile) => React.ReactNode;
- handleRemove: (e: React.MouseEvent, id: string) => Promise registerElement(item.id, el)}>
-
-
- addElementAtTime(item, currentTime)
- }
- rounded={false}
- variant="card"
- isHighlighted={highlightedId === item.id}
- />
-
-
- ))}
-
- {filteredMediaItems.map((item) => (
-
- );
-}
diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
deleted file mode 100644
index be54a9c4..00000000
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ /dev/null
@@ -1,332 +0,0 @@
-"use client";
-
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
-import {
- PropertyItem,
- PropertyItemLabel,
- PropertyItemValue,
- PropertyGroup,
-} from "../../properties-panel/property-item";
-import { FPS_PRESETS } from "@/constants/timeline-constants";
-import { useProjectStore } from "@/stores/project-store";
-import type { BlurIntensity } from "@/types/project";
-import { useEditorStore } from "@/stores/editor-store";
-import { useAspectRatio } from "@/hooks/use-aspect-ratio";
-import Image from "next/image";
-import { cn } from "@/lib/utils";
-import { colors } from "@/data/colors/solid";
-import { patternCraftGradients } from "@/data/colors/pattern-craft";
-import { PipetteIcon, PlusIcon } from "lucide-react";
-import { useMemo, memo, useCallback } from "react";
-import { syntaxUIGradients } from "@/data/colors/syntax-ui";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-
-export function SettingsView() {
- return registerElement(item.id, el)}>
-
-
- addElementAtTime(item, currentTime)
- }
- variant="compact"
- isHighlighted={highlightedId === item.id}
- />
-
-
- ))}
-
-
- ),
- },
- ]}
- className="flex flex-col justify-between h-full p-0"
- />
- );
-}
-
-function ProjectInfoView() {
- const { activeProject, updateProjectFps, updateCanvasSize } =
- useProjectStore();
- const { canvasPresets } = useEditorStore();
- const { getDisplayName } = useAspectRatio();
-
- const handleAspectRatioChange = (value: string) => {
- const preset = canvasPresets.find((p) => p.name === value);
- if (preset) {
- updateCanvasSize(
- { width: preset.width, height: preset.height },
- "preset"
- );
- }
- };
-
- const handleFpsChange = (value: string) => {
- const fps = parseFloat(value);
- updateProjectFps(fps);
- };
-
- return (
-
-
-
-
-
- {/* Another UI, looks so beautiful i don't wanna remove it */}
- {/*
-
-
*/}
-
-
- Name
-
- {activeProject?.name || "Untitled project"}
-
-
-
-
- Aspect ratio
-
-
-
-
-
-
- Frame rate
-
-
-
-
-
- );
-}
-
-const BlurPreview = memo(
- ({
- blur,
- isSelected,
- onSelect,
- }: {
- blur: { label: string; value: number };
- isSelected: boolean;
- onSelect: () => void;
- }) => (
-
-
- )
-);
-
-BlurPreview.displayName = "BlurPreview";
-
-const BackgroundPreviews = memo(
- ({
- backgrounds,
- currentBackgroundColor,
- isColorBackground,
- handleColorSelect,
- useBackgroundColor = false,
- }: {
- backgrounds: string[];
- currentBackgroundColor: string;
- isColorBackground: boolean;
- handleColorSelect: (bg: string) => void;
- useBackgroundColor?: boolean;
- }) => {
- return useMemo(
- () =>
- backgrounds.map((bg, index) => (
-
-
- {blur.label}
-
-
- handleColorSelect(bg)}
- />
- )),
- [
- backgrounds,
- isColorBackground,
- currentBackgroundColor,
- handleColorSelect,
- useBackgroundColor,
- ]
- );
- }
-);
-
-BackgroundPreviews.displayName = "BackgroundPreviews";
-
-function BackgroundView() {
- const { activeProject, updateBackgroundType } = useProjectStore();
-
- const blurLevels = useMemo>(
- () => [
- { label: "Light", value: 4 },
- { label: "Medium", value: 8 },
- { label: "Heavy", value: 18 },
- ],
- []
- );
-
- const handleBlurSelect = useCallback(
- async (blurIntensity: BlurIntensity) => {
- await updateBackgroundType("blur", { blurIntensity });
- },
- [updateBackgroundType]
- );
-
- const handleColorSelect = useCallback(
- async (color: string) => {
- await updateBackgroundType("color", { backgroundColor: color });
- },
- [updateBackgroundType]
- );
-
- const currentBlurIntensity = activeProject?.blurIntensity || 8;
- const isBlurBackground = activeProject?.backgroundType === "blur";
- const currentBackgroundColor = activeProject?.backgroundColor || "#000000";
- const isColorBackground = activeProject?.backgroundType === "color";
-
- const blurPreviews = useMemo(
- () =>
- blurLevels.map((blur) => (
- handleBlurSelect(blur.value)}
- />
- )),
- [blurLevels, isBlurBackground, currentBlurIntensity, handleBlurSelect]
- );
-
- return (
- (null);
- const [audioElement, setAudioElement] = useState(
- null
- );
-
- const { scrollAreaRef, handleScroll } = useInfiniteScroll({
- onLoadMore: loadMore,
- hasMore: hasNextPage,
- isLoading: isLoadingMore || isSearching,
- });
-
- useEffect(() => {
- loadSavedSounds();
-
- if (!hasLoaded) {
- let ignore = false;
-
- const fetchTopSounds = async () => {
- try {
- if (!ignore) {
- setLoading(true);
- setError(null);
- }
-
- const response = await fetch(
- "/api/sounds/search?page_size=50&sort=downloads"
- );
-
- if (!ignore) {
- if (!response.ok) {
- throw new Error(`Failed to fetch: ${response.status}`);
- }
-
- const data = await response.json();
- setTopSoundEffects(data.results);
- setHasLoaded(true);
-
- setCurrentPage(1);
- setHasNextPage(!!data.next);
- setTotalCount(data.count);
- }
- } catch (error) {
- if (!ignore) {
- console.error("Failed to fetch top sounds:", error);
- setError(
- error instanceof Error ? error.message : "Failed to load sounds"
- );
- }
- } finally {
- if (!ignore) {
- setLoading(false);
- }
- }
- };
-
- const timeoutId = setTimeout(fetchTopSounds, 100);
-
- return () => {
- clearTimeout(timeoutId);
- ignore = true;
- };
- }
-
- if (scrollAreaRef.current && scrollPosition > 0) {
- const timeoutId = setTimeout(() => {
- scrollAreaRef.current?.scrollTo({ top: scrollPosition });
- }, 100);
-
- return () => clearTimeout(timeoutId);
- }
- }, [
- hasLoaded,
- setTopSoundEffects,
- setLoading,
- setError,
- setHasLoaded,
- setCurrentPage,
- setHasNextPage,
- setTotalCount,
- ]);
-
- const handleScrollWithPosition = (event: React.UIEvent) => {
- const { scrollTop } = event.currentTarget;
- setScrollPosition(scrollTop);
- handleScroll(event);
- };
-
- const displayedSounds = useMemo(() => {
- const sounds = searchQuery ? searchResults : topSoundEffects;
- return sounds;
- }, [searchQuery, searchResults, topSoundEffects]);
-
- const playSound = (sound: SoundEffect) => {
- if (playingId === sound.id) {
- audioElement?.pause();
- setPlayingId(null);
- return;
- }
-
- // Stop previous sound
- audioElement?.pause();
-
- if (sound.previewUrl) {
- const audio = new Audio(sound.previewUrl);
- audio.addEventListener("ended", () => {
- setPlayingId(null);
- });
- audio.addEventListener("error", (e) => {
- setPlayingId(null);
- });
- audio.play().catch((error) => {
- setPlayingId(null);
- });
-
- setAudioElement(audio);
- setPlayingId(sound.id);
- }
- };
-
- return (
- (null);
- const [audioElement, setAudioElement] = useState(
- null
- );
-
- // Clear confirmation dialog state
- const [showClearDialog, setShowClearDialog] = useState(false);
-
- // Load saved sounds when tab becomes active
- useEffect(() => {
- loadSavedSounds();
- }, [loadSavedSounds]);
-
- const playSound = (sound: SavedSound) => {
- if (playingId === sound.id) {
- audioElement?.pause();
- setPlayingId(null);
- return;
- }
-
- // Stop previous sound
- audioElement?.pause();
-
- if (sound.previewUrl) {
- const audio = new Audio(sound.previewUrl);
- audio.addEventListener("ended", () => {
- setPlayingId(null);
- });
- audio.addEventListener("error", (e) => {
- setPlayingId(null);
- });
- audio.play().catch((error) => {
- setPlayingId(null);
- });
-
- setAudioElement(audio);
- setPlayingId(sound.id);
- }
- };
-
- // Convert SavedSound to SoundEffect for compatibility with AudioItem
- const convertToSoundEffect = (savedSound: SavedSound): SoundEffect => ({
- id: savedSound.id,
- name: savedSound.name,
- description: "",
- url: "",
- previewUrl: savedSound.previewUrl,
- downloadUrl: savedSound.downloadUrl,
- duration: savedSound.duration,
- filesize: 0,
- type: "audio",
- channels: 0,
- bitrate: 0,
- bitdepth: 0,
- samplerate: 0,
- username: savedSound.username,
- tags: savedSound.tags,
- license: savedSound.license,
- created: savedSound.savedAt,
- downloads: 0,
- rating: 0,
- ratingCount: 0,
- });
-
- if (isLoadingSavedSounds) {
- return (
- {
- if (["all", "general", "brands", "emoji"].includes(v)) {
- setSelectedCategory(v as StickerCategory);
- }
- }}
- tabs={[
- {
- value: "all",
- label: "All",
- icon:
-
-
-
-
-
- );
-}
diff --git a/apps/web/src/components/editor/media-panel/views/text.tsx b/apps/web/src/components/editor/media-panel/views/text.tsx
deleted file mode 100644
index 22fc2413..00000000
--- a/apps/web/src/components/editor/media-panel/views/text.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { DraggableMediaItem } from "@/components/ui/draggable-item";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
-
-export function TextView() {
- return (
-
-
- Default text
-
- }
- dragData={{
- id: "temp-text-id",
- type: DEFAULT_TEXT_ELEMENT.type,
- name: DEFAULT_TEXT_ELEMENT.name,
- content: DEFAULT_TEXT_ELEMENT.content,
- }}
- aspectRatio={1}
- onAddToTimeline={(currentTime) =>
- useTimelineStore.getState().addElementAtTime(
- {
- ...DEFAULT_TEXT_ELEMENT,
- id: "temp-text-id",
- },
- currentTime
- )
- }
- showLabel={false}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/web/src/components/editor/media-panel/views/sounds.tsx b/apps/web/src/components/editor/media-panel/views/sounds.tsx
deleted file mode 100644
index 700eaea7..00000000
--- a/apps/web/src/components/editor/media-panel/views/sounds.tsx
+++ /dev/null
@@ -1,562 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { useState, useMemo, useEffect } from "react";
-import { Separator } from "@/components/ui/separator";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
- PlayIcon,
- PauseIcon,
- HeartIcon,
- PlusIcon,
- ListFilter,
-} from "lucide-react";
-import { useSoundsStore } from "@/stores/sounds-store";
-import { useSoundSearch } from "@/hooks/use-sound-search";
-import type { SoundEffect, SavedSound } from "@/types/sounds";
-import { Button } from "@/components/ui/button";
-import {
- DropdownMenu,
- DropdownMenuTrigger,
- DropdownMenuContent,
- DropdownMenuCheckboxItem,
-} from "@/components/ui/dropdown-menu";
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
- DialogTrigger,
-} from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
-import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
-
-export function SoundsView() {
- return (
- {blurPreviews}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-function SoundEffectsView() {
- const {
- topSoundEffects,
- isLoading,
- searchQuery,
- setSearchQuery,
- scrollPosition,
- setScrollPosition,
- loadSavedSounds,
- isSoundSaved,
- toggleSavedSound,
- showCommercialOnly,
- toggleCommercialFilter,
- hasLoaded,
- setTopSoundEffects,
- setLoading,
- setError,
- setHasLoaded,
- setCurrentPage,
- setHasNextPage,
- setTotalCount,
- } = useSoundsStore();
- const {
- results: searchResults,
- isLoading: isSearching,
- loadMore,
- hasNextPage,
- isLoadingMore,
- } = useSoundSearch(searchQuery, showCommercialOnly);
-
- // Audio playback state
- const [playingId, setPlayingId] = useState
-
- Sound effects
- Songs
- Saved
-
-
-
-
- );
-}
-
-function SavedSoundsView() {
- const {
- savedSounds,
- isLoadingSavedSounds,
- savedSoundsError,
- loadSavedSounds,
- isSoundSaved,
- toggleSavedSound,
- clearSavedSounds,
- } = useSoundsStore();
-
- // Audio playback state
- const [playingId, setPlayingId] = useState
- setSearchQuery(e.target.value)}
- showClearIcon
- onClear={() => setSearchQuery("")}
- />
-
-
-
-
-
-
- Show only commercially licensed
-
-
-
-
-
-
- {showCommercialOnly
- ? "Only showing sounds licensed for commercial use"
- : "Showing all sounds regardless of license"}
-
-
-
-
-
-
- {isLoading && !searchQuery && (
- playSound(sound)}
- isSaved={isSoundSaved(sound.id)}
- onToggleSaved={() => toggleSavedSound(sound)}
- />
- ))}
- {!isLoading && !isSearching && displayedSounds.length === 0 && (
-
-
- Loading sounds...
-
- )}
- {isSearching && searchQuery && (
- Searching...
- )}
- {displayedSounds.map((sound) => (
-
- {searchQuery ? "No sounds found" : "No sounds available"}
-
- )}
- {isLoadingMore && (
-
- Loading more sounds...
-
- )}
-
-
- );
- }
-
- if (savedSoundsError) {
- return (
-
- Loading saved sounds...
-
-
-
- );
- }
-
- if (savedSounds.length === 0) {
- return (
-
- Error: {savedSoundsError}
-
-
-
- );
- }
-
- return (
-
-
- No saved sounds
-- Click the heart icon on any sound to save it here -
-
-
- );
-}
-
-function SongsView() {
- return
-
-
- - {savedSounds.length} saved{" "} - {savedSounds.length === 1 ? "sound" : "sounds"} -
- -
-
-
-
-
- {savedSounds.map((sound) => (
- playSound(sound)}
- isSaved={isSoundSaved(sound.id)}
- onToggleSaved={() =>
- toggleSavedSound(convertToSoundEffect(sound))
- }
- />
- ))}
-
- Songs
;
-}
-
-interface AudioItemProps {
- sound: SoundEffect;
- isPlaying: boolean;
- onPlay: () => void;
- isSaved: boolean;
- onToggleSaved: () => void;
-}
-
-function AudioItem({
- sound,
- isPlaying,
- onPlay,
- isSaved,
- onToggleSaved,
-}: AudioItemProps) {
- const { addSoundToTimeline } = useSoundsStore();
-
- const handleClick = () => {
- onPlay();
- };
-
- const handleSaveClick = (e: React.MouseEvent) => {
- e.stopPropagation();
- onToggleSaved();
- };
-
- const handleAddToTimeline = async (e: React.MouseEvent) => {
- e.stopPropagation();
- await addSoundToTimeline(sound);
- };
-
- return (
-
-
- );
-}
diff --git a/apps/web/src/components/editor/media-panel/views/stickers.tsx b/apps/web/src/components/editor/media-panel/views/stickers.tsx
deleted file mode 100644
index f67450cc..00000000
--- a/apps/web/src/components/editor/media-panel/views/stickers.tsx
+++ /dev/null
@@ -1,612 +0,0 @@
-"use client";
-
-import { useEffect, useState, useMemo } from "react";
-import { useStickersStore } from "@/stores/stickers-store";
-import { useMediaStore } from "@/stores/media-store";
-import { useProjectStore } from "@/stores/project-store";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { usePlaybackStore } from "@/stores/playback-store";
-import {
- Loader2,
- Grid3X3,
- Hash,
- Smile,
- Clock,
- X,
- Sparkles,
- ArrowRight,
- StickerIcon,
-} from "lucide-react";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
-import {
- Tooltip,
- TooltipContent,
- TooltipProvider,
- TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-import {
- getIconSvgUrl,
- buildIconSvgUrl,
- ICONIFY_HOSTS,
- POPULAR_COLLECTIONS,
-} from "@/lib/iconify-api";
-import { cn } from "@/lib/utils";
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import Image from "next/image";
-import type { MediaFile } from "@/types/media";
-import { DraggableMediaItem } from "@/components/ui/draggable-item";
-import { InputWithBack } from "@/components/ui/input-with-back";
-import { StickerCategory } from "@/stores/stickers-store";
-import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
-
-export function StickersView() {
- const { selectedCategory, setSelectedCategory } = useStickersStore();
-
- return (
-
-
- {isPlaying ? (
-
-
-
-
-
- {sound.name}
- - {sound.username} - -
-
-
-
-
- {icons.map((iconName) => (
-
- );
-}
-
-function CollectionGrid({
- collections,
- onSelectCollection,
-}: {
- collections: Array<{
- prefix: string;
- name: string;
- total: number;
- category?: string;
- }>;
- onSelectCollection: (prefix: string) => void;
-}) {
- return (
-
- {collections.map((collection) => (
- onSelectCollection(collection.prefix)}
- />
- ))}
-
- );
-}
-
-function EmptyView({ message }: { message: string }) {
- return (
-
-
- );
-}
-
-function StickersContentView({ category }: { category: StickerCategory }) {
- const { activeProject } = useProjectStore();
- const { addElementAtTime } = useTimelineStore();
- const { currentTime } = usePlaybackStore();
- const { addMediaFile } = useMediaStore();
- const {
- searchQuery,
- selectedCollection,
- viewMode,
- collections,
- currentCollection,
- searchResults,
- recentStickers,
- isLoadingCollections,
- isLoadingCollection,
- isSearching,
- setSearchQuery,
- setSelectedCollection,
- loadCollections,
- searchStickers,
- addStickerToTimeline,
- clearRecentStickers,
- setSelectedCategory,
- addingSticker,
- } = useStickersStore();
-
- const [localSearchQuery, setLocalSearchQuery] = useState(searchQuery);
- const [collectionsToShow, setCollectionsToShow] = useState(20);
- const [showCollectionItems, setShowCollectionItems] = useState(false);
-
- const filteredCollections = useMemo(() => {
- if (category === "all") {
- return Object.entries(collections).map(([prefix, collection]) => ({
- prefix,
- name: collection.name,
- total: collection.total,
- category: collection.category,
- }));
- }
-
- const collectionList =
- POPULAR_COLLECTIONS[category as keyof typeof POPULAR_COLLECTIONS];
- if (!collectionList) return [];
-
- return collectionList
- .map((c) => {
- const collection = collections[c.prefix];
- return collection
- ? {
- prefix: c.prefix,
- name: c.name,
- total: collection.total,
- }
- : null;
- })
- .filter(Boolean) as Array<{
- prefix: string;
- name: string;
- total: number;
- }>;
- }, [collections, category]);
-
- const { scrollAreaRef, handleScroll } = useInfiniteScroll({
- onLoadMore: () => setCollectionsToShow((prev) => prev + 20),
- hasMore: filteredCollections.length > collectionsToShow,
- isLoading: isLoadingCollections,
- enabled: viewMode === "browse" && !selectedCollection && category === "all",
- });
-
- useEffect(() => {
- if (Object.keys(collections).length === 0) {
- loadCollections();
- }
- }, []);
-
- useEffect(() => {
- const timer = setTimeout(() => {
- if (localSearchQuery !== searchQuery) {
- setSearchQuery(localSearchQuery);
- if (localSearchQuery.trim()) {
- searchStickers(localSearchQuery);
- }
- }
- }, 500);
-
- return () => clearTimeout(timer);
- }, [localSearchQuery]);
-
- const handleAddSticker = async (iconName: string) => {
- try {
- await addStickerToTimeline(iconName);
- } catch (error) {
- console.error("Failed to add sticker:", error);
- toast.error("Failed to add sticker to timeline");
- }
- };
-
- const iconsToDisplay = useMemo(() => {
- if (viewMode === "search" && searchResults) {
- return searchResults.icons;
- }
-
- if (viewMode === "collection" && currentCollection) {
- const icons: string[] = [];
-
- if (currentCollection.uncategorized) {
- icons.push(
- ...currentCollection.uncategorized.map(
- (name) => `${currentCollection.prefix}:${name}`
- )
- );
- }
-
- if (currentCollection.categories) {
- Object.values(currentCollection.categories).forEach((categoryIcons) => {
- icons.push(
- ...categoryIcons.map(
- (name) => `${currentCollection.prefix}:${name}`
- )
- );
- });
- }
-
- return icons.slice(0, 100);
- }
-
- return [];
- }, [viewMode, searchResults, currentCollection]);
-
- const isInCollection = viewMode === "collection" && !!selectedCollection;
-
- useEffect(() => {
- if (isInCollection) {
- setShowCollectionItems(false);
- const timer = setTimeout(() => setShowCollectionItems(true), 350);
- return () => clearTimeout(timer);
- } else {
- setShowCollectionItems(false);
- }
- }, [isInCollection]);
-
- return (
-
-
- No stickers found
-{message}
-
-
- );
-}
-
-interface CollectionItemProps {
- title: string;
- subtitle: string;
- onClick: () => void;
-}
-
-function CollectionItem({ title, subtitle, onClick }: CollectionItemProps) {
- return (
-
- );
-}
-
-interface StickerItemProps {
- iconName: string;
- onAdd: (iconName: string) => void;
- isAdding?: boolean;
- capSize?: boolean;
-}
-
-function StickerItem({
- iconName,
- onAdd,
- isAdding,
- capSize = false,
-}: StickerItemProps) {
- const [imageError, setImageError] = useState(false);
- const [hostIndex, setHostIndex] = useState(0);
-
- useEffect(() => {
- setImageError(false);
- setHostIndex(0);
- }, [iconName]);
-
- const displayName = iconName.split(":")[1] || iconName;
- const collectionPrefix = iconName.split(":")[0];
-
- const preview = imageError ? (
-
- {
- if (!expanded && isInCollection) {
- setSelectedCollection(null);
- }
- }}
- placeholder={
- category === "all"
- ? "Search all stickers"
- : category === "general"
- ? "Search icons"
- : category === "brands"
- ? "Search brands"
- : "Search Emojis"
- }
- value={localSearchQuery}
- onChange={setLocalSearchQuery}
- disableAnimation={true}
- />
-
-
-
-
-
-
-
- {recentStickers.length > 0 && viewMode === "browse" && (
-
-
-
- )}
-
- {viewMode === "collection" && selectedCollection && (
-
-
-
-
-
-
-
-
-
-
-
- Clear recent stickers
-
- {isLoadingCollection ? (
-
- )}
-
- {viewMode === "search" && (
-
-
- ) : showCollectionItems ? (
-
-
- )}
-
- {isSearching ? (
-
- )}
-
- {viewMode === "browse" && !selectedCollection && (
-
-
- ) : searchResults?.icons.length ? (
- <>
-
-
- {searchResults.total} results
-
-
-
-
- ) : null}
-
- {isLoadingCollections ? (
-
- )}
-
-
- ) : (
- <>
- {category !== "all" && (
-
-
- )}
-
- {category === "all" && filteredCollections.length > 0 && (
- - Popular{" "} - {category === "general" - ? "Icon Sets" - : category === "brands" - ? "Brand Icons" - : "Emoji Sets"} -
-
-
- )}
-
- )}
-
-
- {displayName}
-
-
- ) : (
-
- {
- const next = hostIndex + 1;
- if (next < ICONIFY_HOSTS.length) {
- setHostIndex(next);
- } else {
- setImageError(true);
- }
- }}
- loading="lazy"
- unoptimized
- />
-
- );
-
- return (
-
- onAdd(iconName)}
- aspectRatio={1}
- showLabel={false}
- rounded={true}
- variant="card"
- className=""
- containerClassName="w-full"
- isDraggable={false}
- />
- {isAdding && (
-
-
-
- )}
-
-
- {displayName}
-{collectionPrefix}
-
- Next
-
- );
- case 1:
- return (
-
-
-
- Next
-
- );
- case 2:
- return (
-
-
-
- Finish
-
- );
- default:
- return null;
- }
- };
+ const renderStepContent = () => {
+ switch (step) {
+ case 0:
+ return (
+
-
-
+ Next
+
+ );
+ case 1:
+ return (
+
+
+
+ Next
+
+ );
+ case 2:
+ return (
+
+
+
+ Finish
+
+ );
+ default:
+ return null;
+ }
+ };
- return (
-
- );
+ return (
+
+ );
}
function Title({ title }: { title: string }) {
- return
+
+ {title}
; -} - -function Subtitle({ subtitle }: { subtitle: string }) { - return{subtitle}
; + return{title}
; } function Description({ description }: { description: string }) { - return ( -
-
-
- );
+ return (
+ {children}
, - a: ({ href, children }) => ( - - {children} - - ), - }} - > - {description} -
+
+
+ );
}
function NextButton({
- children,
- onClick,
+ children,
+ onClick,
}: {
- children: React.ReactNode;
- onClick: () => void;
+ children: React.ReactNode;
+ onClick: () => void;
}) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/apps/web/src/components/editor/panel-base-view.tsx b/apps/web/src/components/editor/panel-base-view.tsx
deleted file mode 100644
index 6e92c616..00000000
--- a/apps/web/src/components/editor/panel-base-view.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Separator } from "@/components/ui/separator";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { cn } from "@/lib/utils";
-
-interface PanelBaseViewProps {
- children?: React.ReactNode;
- defaultTab?: string;
- value?: string;
- onValueChange?: (value: string) => void;
- tabs?: {
- value: string;
- label: string;
- icon?: React.ReactNode;
- content: React.ReactNode;
- }[];
- className?: string;
- ref?: React.RefObject{children}
, + a: ({ href, children }) => ( + + {children} + + ), + }} + > + {description} +{children}
-
- {!tabs || tabs.length === 0 ? (
- {children}
- ) : (
-
-
- {tab.content}
-
- ))}
-
- )}
-
- );
-}
diff --git a/apps/web/src/components/editor/panel-preset-selector.tsx b/apps/web/src/components/editor/panel-preset-selector.tsx
deleted file mode 100644
index af22a171..00000000
--- a/apps/web/src/components/editor/panel-preset-selector.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-"use client";
-
-import { Button } from "../ui/button";
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuSeparator,
- DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-import { ChevronDown, RotateCcw, LayoutPanelTop } from "lucide-react";
-import { usePanelStore, type PanelPreset } from "@/stores/panel-store";
-
-const PRESET_LABELS: Record
-
- {tabs.map((tab) => (
-
-
- {tabs.map((tab) => (
-
- {tab.icon ? (
-
- {tab.icon}
-
- ) : null}
- {tab.label}
-
- ))}
-
-
-
- Panel Presets
-
-
-
-
-
-
- {PRESET_LABELS[preset]}
-
- {activePreset === preset && (
-
- )}
-
- - {PRESET_DESCRIPTIONS[preset]} -
-
+
+ ) : (
+
+
+ {preview}
+ {!isDragging && (
+
+ {shouldShowLabel && (
+
+ {name}
+
+
+ )}
+
+
+
+
+ )}
+
+ {isDraggable &&
+ isDragging &&
+ typeof document !== "undefined" &&
+ createPortal(
+
+
,
+ document.body,
+ )}
+
+ );
+}
+
+function PlusButton({
+ className,
+ onClick,
+ tooltipText,
+}: {
+ className?: string;
+ onClick?: () => void;
+ tooltipText?: string;
+}) {
+ const button = (
+
+ );
+
+ if (tooltipText) {
+ return (
+
+
+
+
+
+ {preview}
+
+ {shouldShowPlusOnDrag && (
+ {tooltipText}
+
+ Effects view coming soon...
+
+ ),
+ transitions: (
+
+ Transitions view coming soon...
+
+ ),
+ captions:
+ Filters view coming soon...
+
+ ),
+ adjustment: (
+
+ Adjustment view coming soon...
+
+ ),
+ settings:
+
+ );
+}
diff --git a/apps/web/src/components/editor/panels/assets/tabbar.tsx b/apps/web/src/components/editor/panels/assets/tabbar.tsx
new file mode 100644
index 00000000..2c950fdc
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/tabbar.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/utils/ui";
+import {
+ TAB_KEYS,
+ tabs,
+ useAssetsPanelStore,
+} from "@/stores/assets-panel-store";
+
+export function TabBar() {
+ const { activeTab, setActiveTab } = useAssetsPanelStore();
+ const scrollRef = useRef{viewMap[activeTab]}
+
+
+ );
+}
+
+function FadeOverlay({
+ direction,
+ show,
+}: {
+ direction: "top" | "bottom";
+ show: boolean;
+}) {
+ return (
+
+ );
+}
diff --git a/apps/web/src/components/editor/panels/assets/views/captions.tsx b/apps/web/src/components/editor/panels/assets/views/captions.tsx
new file mode 100644
index 00000000..306bad2a
--- /dev/null
+++ b/apps/web/src/components/editor/panels/assets/views/captions.tsx
@@ -0,0 +1,152 @@
+import { Button } from "@/components/ui/button";
+import { PropertyGroup } from "@/components/editor/panels/properties/property-item";
+import { PanelBaseView as BaseView } from "@/components/editor/panels/panel-base-view";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { useState, useRef } from "react";
+import { extractTimelineAudio } from "@/lib/media/mediabunny";
+import { useEditor } from "@/hooks/use-editor";
+import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
+import { TRANSCRIPTION_LANGUAGES } from "@/constants/transcription-constants";
+import type {
+ TranscriptionLanguage,
+ TranscriptionProgress,
+} from "@/types/transcription";
+import { transcriptionService } from "@/services/transcription";
+import { decodeAudioToFloat32 } from "@/lib/media/audio";
+import { buildCaptionChunks } from "@/lib/transcription/caption";
+import { Spinner } from "@/components/ui/spinner";
+
+export function Captions() {
+ const [selectedLanguage, setSelectedLanguage] =
+ useState
+ {TAB_KEYS.map((tabKey) => {
+ const tab = tabs[tabKey];
+ return (
+
+
+
+
+
+
+
+ );
+ })}
+
+
+
+ {tab.label}
+
+
+ {error && (
+
+
+
+ )}
+
+
+ {error}
+
+
+
+ );
+}
+
+function MediaItemWithContextMenu({
+ item,
+ children,
+ onRemove,
+}: {
+ item: MediaAsset;
+ children: React.ReactNode;
+ onRemove: ({ event, id }: { event: React.MouseEvent; id: string }) => void;
+}) {
+ return (
+
+ Assets
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ if (sortBy === key) {
+ setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+ } else {
+ setSortBy(key);
+ setSortOrder("asc");
+ }
+ }}
+ />
+ {
+ if (sortBy === key) {
+ setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+ } else {
+ setSortBy(key);
+ setSortOrder("asc");
+ }
+ }}
+ />
+ {
+ if (sortBy === key) {
+ setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+ } else {
+ setSortBy(key);
+ setSortOrder("asc");
+ }
+ }}
+ />
+ {
+ if (sortBy === key) {
+ setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+ } else {
+ setSortBy(key);
+ setSortOrder("asc");
+ }
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ + {mediaViewMode === "grid" + ? "Switch to list view" + : "Switch to grid view"} +
++ Sort by {sortBy} ( + {sortOrder === "asc" ? "ascending" : "descending"}) +
+
+
+
+ {isDragOver || filteredMediaItems.length === 0 ? (
+
+
+ {items.map((item) => (
+
+ );
+}
+
+function ListView({
+ items,
+ renderPreview,
+ onRemove,
+ onAddToTimeline,
+ highlightedId,
+ registerElement,
+}: {
+ items: MediaAsset[];
+ renderPreview: (item: MediaAsset) => React.ReactNode;
+ onRemove: ({ event, id }: { event: React.MouseEvent; id: string }) => void;
+ onAddToTimeline: ({
+ asset,
+ startTime,
+ }: {
+ asset: MediaAsset;
+ startTime: number;
+ }) => boolean;
+ highlightedId: string | null;
+ registerElement: (id: string, element: HTMLElement | null) => void;
+}) {
+ return (
+ registerElement(item.id, el)}>
+
+
+ onAddToTimeline({ asset: item, startTime: currentTime })
+ }
+ isRounded={false}
+ variant="card"
+ isHighlighted={highlightedId === item.id}
+ />
+
+
+ ))}
+
+ {items.map((item) => (
+
+ );
+}
+
+const formatDuration = ({ duration }: { duration: number }) => {
+ const min = Math.floor(duration / 60);
+ const sec = Math.floor(duration % 60);
+ return `${min}:${sec.toString().padStart(2, "0")}`;
+};
+
+function MediaDurationBadge({ duration }: { duration?: number }) {
+ if (!duration) return null;
+
+ return (
+ registerElement(item.id, el)}>
+
+
+ onAddToTimeline({ asset: item, startTime: currentTime })
+ }
+ variant="compact"
+ isHighlighted={highlightedId === item.id}
+ />
+
+
+ ))}
+
+ {formatDuration({ duration })}
+
+ );
+}
+
+function MediaDurationLabel({ duration }: { duration?: number }) {
+ if (!duration) return null;
+
+ return (
+ {formatDuration({ duration })}
+ );
+}
+
+function MediaTypePlaceholder({
+ icon,
+ label,
+ duration,
+ variant,
+}: {
+ icon: IconSvgElement;
+ label: string;
+ duration?: number;
+ variant: "muted" | "bordered";
+}) {
+ const iconClassName = cn("size-6", variant === "bordered" && "mb-1");
+
+ return (
+
+
+ );
+}
+
+function MediaPreview({
+ item,
+ variant = "grid",
+}: {
+ item: MediaAsset;
+ variant?: "grid" | "compact";
+}) {
+ const shouldShowDurationBadge = variant === "grid";
+
+ if (item.type === "image") {
+ return (
+
+
+ );
+ }
+
+ if (item.type === "video") {
+ if (item.thumbnailUrl) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ ),
+ },
+ ]}
+ className="flex h-full flex-col justify-between p-0"
+ />
+ );
+}
+
+function getCurrentCanvasSize({ activeProject }: { activeProject: TProject }) {
+ const { canvasSize } = activeProject.settings;
+
+ return {
+ width: canvasSize.width,
+ height: canvasSize.height,
+ };
+}
+
+function ProjectInfoView() {
+ const editor = useEditor();
+ const activeProject = editor.project.getActive();
+ const { canvasPresets } = useEditorStore();
+
+ const findPresetIndexByAspectRatio = ({
+ presets,
+ targetAspectRatio,
+ }: {
+ presets: Array<{ width: number; height: number }>;
+ targetAspectRatio: string;
+ }) => {
+ for (let index = 0; index < presets.length; index++) {
+ const preset = presets[index];
+ const presetAspectRatio = dimensionToAspectRatio({
+ width: preset.width,
+ height: preset.height,
+ });
+ if (presetAspectRatio === targetAspectRatio) {
+ return index;
+ }
+ }
+ return -1;
+ };
+
+ const currentCanvasSize = getCurrentCanvasSize({ activeProject });
+ const currentAspectRatio = dimensionToAspectRatio(currentCanvasSize);
+ const originalCanvasSize = activeProject.settings.originalCanvasSize ?? null;
+ const presetIndex = findPresetIndexByAspectRatio({
+ presets: canvasPresets,
+ targetAspectRatio: currentAspectRatio,
+ });
+ const originalPresetValue = "original";
+ const selectedPresetValue =
+ presetIndex !== -1 ? presetIndex.toString() : originalPresetValue;
+
+ const handleAspectRatioChange = ({ value }: { value: string }) => {
+ if (value === originalPresetValue) {
+ const canvasSize = originalCanvasSize ?? currentCanvasSize;
+ editor.project.updateSettings({
+ settings: { canvasSize },
+ });
+ return;
+ }
+ const index = parseInt(value, 10);
+ const preset = canvasPresets[index];
+ if (preset) {
+ editor.project.updateSettings({ settings: { canvasSize: preset } });
+ }
+ };
+
+ const handleFpsChange = (value: string) => {
+ const fps = parseFloat(value);
+ editor.project.updateSettings({ settings: { fps } });
+ };
+
+ return (
+
+
+ {/*
+
*/}
+
+ {/* another ui */}
+ {/*
+
+
*/}
+
+
+ Name
+ {activeProject.metadata.name}
+
+
+
+ Aspect ratio
+
+
+
+
+
+
+ Frame rate
+
+
+
+
+
+ );
+}
+
+const BlurPreview = memo(
+ ({
+ blur,
+ isSelected,
+ onSelect,
+ }: {
+ blur: { label: string; value: number };
+ isSelected: boolean;
+ onSelect: () => void;
+ }) => (
+
+ ),
+);
+
+BlurPreview.displayName = "BlurPreview";
+
+const BackgroundPreviews = memo(
+ ({
+ backgrounds,
+ currentBackgroundColor,
+ isColorBackground,
+ handleColorSelect,
+ useBackgroundColor = false,
+ }: {
+ backgrounds: string[];
+ currentBackgroundColor: string;
+ isColorBackground: boolean;
+ handleColorSelect: ({ bg }: { bg: string }) => void;
+ useBackgroundColor?: boolean;
+ }) => {
+ return useMemo(
+ () =>
+ backgrounds.map((bg, index) => (
+