1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.Composition = exports.Folder = void 0;
|
4 | const jsx_runtime_1 = require("react/jsx-runtime");
|
5 | const react_1 = require("react");
|
6 | const CompositionManager_1 = require("./CompositionManager");
|
7 | const nonce_1 = require("./nonce");
|
8 | const truthy_1 = require("./truthy");
|
9 | const use_lazy_component_1 = require("./use-lazy-component");
|
10 | const validate_composition_id_1 = require("./validation/validate-composition-id");
|
11 | const validate_dimensions_1 = require("./validation/validate-dimensions");
|
12 | const validate_duration_in_frames_1 = require("./validation/validate-duration-in-frames");
|
13 | const validate_folder_name_1 = require("./validation/validate-folder-name");
|
14 | const validate_fps_1 = require("./validation/validate-fps");
|
15 | const FolderContext = (0, react_1.createContext)({
|
16 | folderName: null,
|
17 | parentName: null,
|
18 | });
|
19 | const Folder = ({ name, children, }) => {
|
20 | const parent = (0, react_1.useContext)(FolderContext);
|
21 | const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
|
22 | (0, validate_folder_name_1.validateFolderName)(name);
|
23 | const parentNameArr = [parent.parentName, parent.folderName].filter(truthy_1.truthy);
|
24 | const parentName = parentNameArr.length === 0 ? null : parentNameArr.join('/');
|
25 | const value = (0, react_1.useMemo)(() => {
|
26 | return {
|
27 | folderName: name,
|
28 | parentName,
|
29 | };
|
30 | }, [name, parentName]);
|
31 | (0, react_1.useEffect)(() => {
|
32 | registerFolder(name, parentName);
|
33 | return () => {
|
34 | unregisterFolder(name, parentName);
|
35 | };
|
36 | }, [name, parent.folderName, parentName, registerFolder, unregisterFolder]);
|
37 | return ((0, jsx_runtime_1.jsx)(FolderContext.Provider, { value: value, children: children }, void 0));
|
38 | };
|
39 | exports.Folder = Folder;
|
40 | const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }) => {
|
41 | const { registerComposition, unregisterComposition } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
|
42 | const lazy = (0, use_lazy_component_1.useLazyComponent)(compProps);
|
43 | const nonce = (0, nonce_1.useNonce)();
|
44 | const { folderName, parentName } = (0, react_1.useContext)(FolderContext);
|
45 | (0, react_1.useEffect)(() => {
|
46 |
|
47 | if (!id) {
|
48 | throw new Error('No id for composition passed.');
|
49 | }
|
50 | (0, validate_composition_id_1.validateCompositionId)(id);
|
51 | (0, validate_dimensions_1.validateDimension)(width, 'width', 'of the <Composition/> component');
|
52 | (0, validate_dimensions_1.validateDimension)(height, 'height', 'of the <Composition/> component');
|
53 | (0, validate_duration_in_frames_1.validateDurationInFrames)(durationInFrames, 'of the <Composition/> component');
|
54 | (0, validate_fps_1.validateFps)(fps, 'as a prop of the <Composition/> component');
|
55 | registerComposition({
|
56 | durationInFrames,
|
57 | fps,
|
58 | height,
|
59 | width,
|
60 | id,
|
61 | folderName,
|
62 | component: lazy,
|
63 | defaultProps,
|
64 | nonce,
|
65 | parentFolderName: parentName,
|
66 | });
|
67 | return () => {
|
68 | unregisterComposition(id);
|
69 | };
|
70 | }, [
|
71 | durationInFrames,
|
72 | fps,
|
73 | height,
|
74 | lazy,
|
75 | id,
|
76 | folderName,
|
77 | defaultProps,
|
78 | registerComposition,
|
79 | unregisterComposition,
|
80 | width,
|
81 | nonce,
|
82 | parentName,
|
83 | ]);
|
84 | return null;
|
85 | };
|
86 | exports.Composition = Composition;
|