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
|
"use client";
import type { EffectElement } from "@/types/timeline";
import { getEffect } from "@/lib/effects/registry";
import { useEditor } from "@/hooks/use-editor";
import {
Section,
SectionContent,
SectionHeader,
SectionFields,
SectionTitle,
} from "./section";
import { EffectParamField } from "./effect-param-field";
export function EffectProperties({
element,
trackId,
}: {
element: EffectElement;
trackId: string;
}) {
const editor = useEditor();
const definition = getEffect({ effectType: element.effectType });
const previewParam =
({ key }: { key: string }) =>
(value: number | string | boolean) =>
editor.timeline.previewElements({
updates: [
{
trackId,
elementId: element.id,
updates: { params: { ...element.params, [key]: value } },
},
],
});
return (
<Section showTopBorder={false}>
<SectionHeader>
<SectionTitle>{definition.name}</SectionTitle>
</SectionHeader>
<SectionContent>
<SectionFields>
{definition.params.map((param) => (
<EffectParamField
key={param.key}
param={param}
value={element.params[param.key] ?? param.default}
onPreview={previewParam({ key: param.key })}
onCommit={() => editor.timeline.commitPreview()}
/>
))}
</SectionFields>
</SectionContent>
</Section>
);
}
|
