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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import type { ElementType } from "react";
import { create } from "zustand";
import { persist } from "zustand/middleware";
import {
ArrowRightDoubleIcon,
ClosedCaptionIcon,
Folder03Icon,
Happy01Icon,
HeadphonesIcon,
MagicWand05Icon,
TextIcon,
Settings01Icon,
SlidersHorizontalIcon,
ColorsIcon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react";
export const TAB_KEYS = [
"media",
"sounds",
"text",
"stickers",
"effects",
"transitions",
"captions",
"filters",
"adjustment",
"settings",
] as const;
export type Tab = (typeof TAB_KEYS)[number];
const createHugeiconsIcon =
({ icon }: { icon: IconSvgElement }) =>
({ className }: { className?: string }) => (
<HugeiconsIcon icon={icon} className={className} />
);
export const tabs = {
media: {
icon: createHugeiconsIcon({ icon: Folder03Icon }),
label: "Media",
},
sounds: {
icon: createHugeiconsIcon({ icon: HeadphonesIcon }),
label: "Sounds",
},
text: {
icon: createHugeiconsIcon({ icon: TextIcon }),
label: "Text",
},
stickers: {
icon: createHugeiconsIcon({ icon: Happy01Icon }),
label: "Stickers",
},
effects: {
icon: createHugeiconsIcon({ icon: MagicWand05Icon }),
label: "Effects",
},
transitions: {
icon: createHugeiconsIcon({ icon: ArrowRightDoubleIcon }),
label: "Transitions",
},
captions: {
icon: createHugeiconsIcon({ icon: ClosedCaptionIcon }),
label: "Captions",
},
filters: {
icon: createHugeiconsIcon({ icon: ColorsIcon }),
label: "Filters",
},
adjustment: {
icon: createHugeiconsIcon({ icon: SlidersHorizontalIcon }),
label: "Adjustment",
},
settings: {
icon: createHugeiconsIcon({ icon: Settings01Icon }),
label: "Settings",
},
} satisfies Record<
Tab,
{ icon: ElementType<{ className?: string }>; label: string }
>;
export type MediaViewMode = "grid" | "list";
export type MediaSortKey = "name" | "type" | "duration" | "size";
export type MediaSortOrder = "asc" | "desc";
interface AssetsPanelStore {
activeTab: Tab;
setActiveTab: (tab: Tab) => void;
highlightMediaId: string | null;
requestRevealMedia: (mediaId: string) => void;
clearHighlight: () => void;
/* Media */
mediaViewMode: MediaViewMode;
setMediaViewMode: (mode: MediaViewMode) => void;
mediaSortBy: MediaSortKey;
mediaSortOrder: MediaSortOrder;
setMediaSort: (key: MediaSortKey, order: MediaSortOrder) => void;
}
export const useAssetsPanelStore = create<AssetsPanelStore>()(
persist(
(set) => ({
activeTab: "media",
setActiveTab: (tab) => set({ activeTab: tab }),
highlightMediaId: null,
requestRevealMedia: (mediaId) =>
set({ activeTab: "media", highlightMediaId: mediaId }),
clearHighlight: () => set({ highlightMediaId: null }),
mediaViewMode: "grid",
setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
mediaSortBy: "name",
mediaSortOrder: "asc",
setMediaSort: (key, order) =>
set({ mediaSortBy: key, mediaSortOrder: order }),
}),
{
name: "assets-panel",
partialize: (state) => ({
mediaViewMode: state.mediaViewMode,
mediaSortBy: state.mediaSortBy,
mediaSortOrder: state.mediaSortOrder,
}),
},
),
);
|
