- 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) => (
+