1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
"use client";
import { useEffect } from "react";
import {
ResizablePanelGroup,
ResizablePanel,
ResizableHandle,
} from "../../components/ui/resizable";
import { MediaPanel } from "../../components/editor/media-panel";
import { PropertiesPanel } from "../../components/editor/properties-panel";
import { Timeline } from "../../components/editor/timeline";
import { PreviewPanel } from "../../components/editor/preview-panel";
import { EditorHeader } from "@/components/editor-header";
import { usePanelStore } from "@/stores/panel-store";
import { useProjectStore } from "@/stores/project-store";
import { EditorProvider } from "@/components/editor-provider";
import { usePlaybackControls } from "@/hooks/use-playback-controls";
export default function Editor() {
const {
toolsPanel,
previewPanel,
propertiesPanel,
mainContent,
timeline,
setToolsPanel,
setPreviewPanel,
setPropertiesPanel,
setMainContent,
setTimeline,
} = usePanelStore();
const { activeProject, createNewProject } = useProjectStore();
usePlaybackControls();
useEffect(() => {
if (!activeProject) {
createNewProject("Untitled Project");
}
}, [activeProject, createNewProject]);
return (
<EditorProvider>
<div className="h-screen w-screen flex flex-col bg-background">
<EditorHeader />
<ResizablePanelGroup direction="vertical">
<ResizablePanel
defaultSize={mainContent}
minSize={30}
onResize={setMainContent}
>
{/* Main content area */}
<ResizablePanelGroup direction="horizontal">
{/* Tools Panel */}
<ResizablePanel
defaultSize={toolsPanel}
minSize={15}
onResize={setToolsPanel}
>
<MediaPanel />
</ResizablePanel>
<ResizableHandle withHandle />
{/* Preview Area */}
<ResizablePanel
defaultSize={previewPanel}
onResize={setPreviewPanel}
>
<PreviewPanel />
</ResizablePanel>
<ResizableHandle withHandle />
{/* Properties Panel */}
<ResizablePanel
defaultSize={propertiesPanel}
minSize={15}
onResize={setPropertiesPanel}
>
<PropertiesPanel />
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
<ResizableHandle withHandle />
{/* Timeline */}
<ResizablePanel
defaultSize={timeline}
minSize={15}
onResize={setTimeline}
>
<Timeline />
</ResizablePanel>
</ResizablePanelGroup>
</div>
</EditorProvider>
);
}
|
