1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.Sequence = exports.SequenceContext = 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 get_timeline_clip_name_1 = require("../get-timeline-clip-name");
|
8 | const nonce_1 = require("../nonce");
|
9 | const timeline_position_state_1 = require("../timeline-position-state");
|
10 | const use_frame_1 = require("../use-frame");
|
11 | const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
|
12 | exports.SequenceContext = (0, react_1.createContext)(null);
|
13 | const Sequence = ({ from, durationInFrames = Infinity, children, name, layout = 'absolute-fill', showInTimeline = true, showLoopTimesInTimeline, }) => {
|
14 | const [id] = (0, react_1.useState)(() => String(Math.random()));
|
15 | const parentSequence = (0, react_1.useContext)(exports.SequenceContext);
|
16 | const { rootId } = (0, react_1.useContext)(timeline_position_state_1.TimelineContext);
|
17 | const cumulatedFrom = parentSequence
|
18 | ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
|
19 | : 0;
|
20 | const actualFrom = cumulatedFrom + from;
|
21 | const nonce = (0, nonce_1.useNonce)();
|
22 | if (layout !== 'absolute-fill' && layout !== 'none') {
|
23 | throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
|
24 | }
|
25 | if (typeof durationInFrames !== 'number') {
|
26 | throw new TypeError(`You passed to durationInFrames an argument of type ${typeof durationInFrames}, but it must be a number.`);
|
27 | }
|
28 | if (durationInFrames <= 0) {
|
29 | throw new TypeError(`durationInFrames must be positive, but got ${durationInFrames}`);
|
30 | }
|
31 |
|
32 | if (durationInFrames % 1 !== 0 && Number.isFinite(durationInFrames)) {
|
33 | throw new TypeError(`The "durationInFrames" of a sequence must be an integer, but got ${durationInFrames}.`);
|
34 | }
|
35 | if (typeof from !== 'number') {
|
36 | throw new TypeError(`You passed to the "from" props of your <Sequence> an argument of type ${typeof from}, but it must be a number.`);
|
37 | }
|
38 | if (from % 1 !== 0) {
|
39 | throw new TypeError(`The "from" prop of a sequence must be an integer, but got ${from}.`);
|
40 | }
|
41 | const absoluteFrame = (0, use_frame_1.useAbsoluteCurrentFrame)();
|
42 | const unsafeVideoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
|
43 | const compositionDuration = unsafeVideoConfig
|
44 | ? unsafeVideoConfig.durationInFrames
|
45 | : 0;
|
46 | const actualDurationInFrames = Math.min(compositionDuration - from, parentSequence
|
47 | ? Math.min(parentSequence.durationInFrames +
|
48 | (parentSequence.cumulatedFrom + parentSequence.relativeFrom) -
|
49 | actualFrom, durationInFrames)
|
50 | : durationInFrames);
|
51 | const { registerSequence, unregisterSequence } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
|
52 | const contextValue = (0, react_1.useMemo)(() => {
|
53 | var _a;
|
54 | return {
|
55 | cumulatedFrom,
|
56 | relativeFrom: from,
|
57 | durationInFrames: actualDurationInFrames,
|
58 | parentFrom: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0,
|
59 | id,
|
60 | };
|
61 | }, [
|
62 | cumulatedFrom,
|
63 | from,
|
64 | actualDurationInFrames,
|
65 | parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom,
|
66 | id,
|
67 | ]);
|
68 | const timelineClipName = (0, react_1.useMemo)(() => {
|
69 | return name !== null && name !== void 0 ? name : (0, get_timeline_clip_name_1.getTimelineClipName)(children);
|
70 | }, [children, name]);
|
71 | (0, react_1.useEffect)(() => {
|
72 | var _a;
|
73 | registerSequence({
|
74 | from,
|
75 | duration: actualDurationInFrames,
|
76 | id,
|
77 | displayName: timelineClipName,
|
78 | parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
|
79 | type: 'sequence',
|
80 | rootId,
|
81 | showInTimeline,
|
82 | nonce,
|
83 | showLoopTimesInTimeline,
|
84 | });
|
85 | return () => {
|
86 | unregisterSequence(id);
|
87 | };
|
88 | }, [
|
89 | durationInFrames,
|
90 | actualFrom,
|
91 | id,
|
92 | name,
|
93 | registerSequence,
|
94 | timelineClipName,
|
95 | unregisterSequence,
|
96 | parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id,
|
97 | actualDurationInFrames,
|
98 | rootId,
|
99 | from,
|
100 | showInTimeline,
|
101 | nonce,
|
102 | showLoopTimesInTimeline,
|
103 | ]);
|
104 | const endThreshold = (() => {
|
105 | return actualFrom + durationInFrames - 1;
|
106 | })();
|
107 | const content = absoluteFrame < actualFrom
|
108 | ? null
|
109 | : absoluteFrame > endThreshold
|
110 | ? null
|
111 | : children;
|
112 | return ((0, jsx_runtime_1.jsx)(exports.SequenceContext.Provider, Object.assign({ value: contextValue }, { children: content === null ? null : layout === 'absolute-fill' ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
|
113 | position: 'absolute',
|
114 | display: 'flex',
|
115 | width: '100%',
|
116 | height: '100%',
|
117 | top: 0,
|
118 | bottom: 0,
|
119 | left: 0,
|
120 | right: 0,
|
121 | } }, { children: content }), void 0)) : (content) }), void 0));
|
122 | };
|
123 | exports.Sequence = Sequence;
|
124 |
|
\ | No newline at end of file |