mirror of
https://github.com/OpenCut-app/OpenCut.git
synced 2026-07-13 21:52:53 +02:00
109 lines
2.8 KiB
TypeScript
109 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useParams } from "next/navigation";
|
|
import {
|
|
ResizablePanelGroup,
|
|
ResizablePanel,
|
|
ResizableHandle,
|
|
} from "@/components/ui/resizable";
|
|
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/panels/preview";
|
|
import { EditorHeader } from "@/components/editor/editor-header";
|
|
import { EditorProvider } from "@/components/providers/editor-provider";
|
|
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 params = useParams();
|
|
const projectId = params.project_id as string;
|
|
|
|
return (
|
|
<EditorProvider projectId={projectId}>
|
|
<div className="bg-background flex h-screen w-screen flex-col overflow-hidden">
|
|
<EditorHeader />
|
|
<div className="min-h-0 min-w-0 flex-1">
|
|
<EditorLayout />
|
|
</div>
|
|
<Onboarding />
|
|
<MigrationDialog />
|
|
</div>
|
|
</EditorProvider>
|
|
);
|
|
}
|
|
|
|
function EditorLayout() {
|
|
const { panels, setPanel } = usePanelStore();
|
|
|
|
return (
|
|
<ResizablePanelGroup
|
|
direction="vertical"
|
|
className="size-full gap-[0.18rem]"
|
|
onLayout={(sizes) => {
|
|
setPanel("mainContent", sizes[0] ?? panels.mainContent);
|
|
setPanel("timeline", sizes[1] ?? panels.timeline);
|
|
}}
|
|
>
|
|
<ResizablePanel
|
|
defaultSize={panels.mainContent}
|
|
minSize={30}
|
|
maxSize={85}
|
|
className="min-h-0"
|
|
>
|
|
<ResizablePanelGroup
|
|
direction="horizontal"
|
|
className="size-full gap-[0.19rem] px-3"
|
|
onLayout={(sizes) => {
|
|
setPanel("tools", sizes[0] ?? panels.tools);
|
|
setPanel("preview", sizes[1] ?? panels.preview);
|
|
setPanel("properties", sizes[2] ?? panels.properties);
|
|
}}
|
|
>
|
|
<ResizablePanel
|
|
defaultSize={panels.tools}
|
|
minSize={15}
|
|
maxSize={40}
|
|
className="min-w-0 rounded-sm"
|
|
>
|
|
<AssetsPanel />
|
|
</ResizablePanel>
|
|
|
|
<ResizableHandle withHandle />
|
|
|
|
<ResizablePanel
|
|
defaultSize={panels.preview}
|
|
minSize={30}
|
|
className="min-h-0 min-w-0 flex-1"
|
|
>
|
|
<PreviewPanel />
|
|
</ResizablePanel>
|
|
|
|
<ResizableHandle withHandle />
|
|
|
|
<ResizablePanel
|
|
defaultSize={panels.properties}
|
|
minSize={15}
|
|
maxSize={40}
|
|
className="min-w-0 rounded-sm"
|
|
>
|
|
<PropertiesPanel />
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
</ResizablePanel>
|
|
|
|
<ResizableHandle withHandle />
|
|
|
|
<ResizablePanel
|
|
defaultSize={panels.timeline}
|
|
minSize={15}
|
|
maxSize={70}
|
|
className="min-h-0 px-3 pb-3"
|
|
>
|
|
<Timeline />
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
);
|
|
}
|