remotion
Version:
Make videos programmatically
183 lines (182 loc) • 9.47 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Sequence = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/* eslint-disable @typescript-eslint/no-use-before-define */
const react_1 = require("react");
const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
const SequenceContext_js_1 = require("./SequenceContext.js");
const SequenceManager_js_1 = require("./SequenceManager.js");
const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
const nonce_js_1 = require("./nonce.js");
const timeline_position_state_js_1 = require("./timeline-position-state.js");
const use_video_config_js_1 = require("./use-video-config.js");
const freeze_js_1 = require("./freeze.js");
const use_current_frame_1 = require("./use-current-frame");
const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, ...other }, ref) => {
var _a;
const { layout = 'absolute-fill' } = other;
const [id] = (0, react_1.useState)(() => String(Math.random()));
const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
const { rootId } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
const cumulatedFrom = parentSequence
? parentSequence.cumulatedFrom + parentSequence.relativeFrom
: 0;
const nonce = (0, nonce_js_1.useNonce)();
if (layout !== 'absolute-fill' && layout !== 'none') {
throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
}
// @ts-expect-error
if (layout === 'none' && typeof other.style !== 'undefined') {
throw new TypeError('If layout="none", you may not pass a style.');
}
if (typeof durationInFrames !== 'number') {
throw new TypeError(`You passed to durationInFrames an argument of type ${typeof durationInFrames}, but it must be a number.`);
}
if (durationInFrames <= 0) {
throw new TypeError(`durationInFrames must be positive, but got ${durationInFrames}`);
}
if (typeof from !== 'number') {
throw new TypeError(`You passed to the "from" props of your <Sequence> an argument of type ${typeof from}, but it must be a number.`);
}
if (!Number.isFinite(from)) {
throw new TypeError(`The "from" prop of a sequence must be finite, but got ${from}.`);
}
const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
const parentSequenceDuration = parentSequence
? Math.min(parentSequence.durationInFrames - from, durationInFrames)
: durationInFrames;
const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
const premounting = (0, react_1.useMemo)(() => {
// || is intentional, ?? would not trigger on `false`
return ((parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting) ||
Boolean(other._remotionInternalIsPremounting));
}, [other._remotionInternalIsPremounting, parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting]);
const contextValue = (0, react_1.useMemo)(() => {
var _a, _b, _c;
return {
cumulatedFrom,
relativeFrom: from,
durationInFrames: actualDurationInFrames,
parentFrom: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0,
id,
height: (_b = height !== null && height !== void 0 ? height : parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.height) !== null && _b !== void 0 ? _b : null,
width: (_c = width !== null && width !== void 0 ? width : parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.width) !== null && _c !== void 0 ? _c : null,
premounting,
};
}, [
cumulatedFrom,
from,
actualDurationInFrames,
parentSequence,
id,
height,
width,
premounting,
]);
const timelineClipName = (0, react_1.useMemo)(() => {
return name !== null && name !== void 0 ? name : '';
}, [name]);
(0, react_1.useEffect)(() => {
var _a;
if (!(0, get_remotion_environment_js_1.getRemotionEnvironment)().isStudio) {
return;
}
registerSequence({
from,
duration: actualDurationInFrames,
id,
displayName: timelineClipName,
parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
type: 'sequence',
rootId,
showInTimeline,
nonce,
loopDisplay,
stack: stack !== null && stack !== void 0 ? stack : null,
premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
});
return () => {
unregisterSequence(id);
};
}, [
durationInFrames,
id,
name,
registerSequence,
timelineClipName,
unregisterSequence,
parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id,
actualDurationInFrames,
rootId,
from,
showInTimeline,
nonce,
loopDisplay,
stack,
premountDisplay,
]);
// Ceil to support floats
// https://github.com/remotion-dev/remotion/issues/2958
const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
const content = absoluteFrame < cumulatedFrom + from
? null
: absoluteFrame > endThreshold
? null
: children;
const styleIfThere = other.layout === 'none' ? undefined : other.style;
const defaultStyle = (0, react_1.useMemo)(() => {
return {
flexDirection: undefined,
...(width ? { width } : {}),
...(height ? { height } : {}),
...(styleIfThere !== null && styleIfThere !== void 0 ? styleIfThere : {}),
};
}, [height, styleIfThere, width]);
if (ref !== null && layout === 'none') {
throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
}
const isSequenceHidden = (_a = hidden[id]) !== null && _a !== void 0 ? _a : false;
if (isSequenceHidden) {
return null;
}
return ((0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: content === null ? null : other.layout === 'none' ? (content) : ((0, jsx_runtime_1.jsx)(AbsoluteFill_js_1.AbsoluteFill, { ref: ref, style: defaultStyle, className: other.className, children: content })) }));
};
const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
const PremountedSequenceRefForwardingFunction = (props, ref) => {
const frame = (0, use_current_frame_1.useCurrentFrame)();
if (props.layout === 'none') {
throw new Error('`<Sequence>` with `premountFor` prop does not support layout="none"');
}
const { style: passedStyle, from = 0, premountFor = 0, styleWhilePremounted, ...otherProps } = props;
const premountingActive = frame < from && frame >= from - premountFor;
const style = (0, react_1.useMemo)(() => {
var _a;
return {
...passedStyle,
opacity: premountingActive ? 0 : 1,
pointerEvents: premountingActive
? 'none'
: ((_a = passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.pointerEvents) !== null && _a !== void 0 ? _a : undefined),
...(premountingActive ? styleWhilePremounted : {}),
};
}, [passedStyle, premountingActive, styleWhilePremounted]);
return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: from, active: premountingActive, children: (0, jsx_runtime_1.jsx)(exports.Sequence, { ref: ref, from: from, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalIsPremounting: premountingActive, ...otherProps }) }));
};
const PremountedSequence = (0, react_1.forwardRef)(PremountedSequenceRefForwardingFunction);
const SequenceRefForwardingFunction = (props, ref) => {
if (props.layout !== 'none' &&
props.premountFor &&
!(0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
return (0, jsx_runtime_1.jsx)(PremountedSequence, { ...props, ref: ref });
}
return (0, jsx_runtime_1.jsx)(RegularSequence, { ...props, ref: ref });
};
/*
* @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
* @see [Documentation](https://www.remotion.dev/docs/sequence)
*/
exports.Sequence = (0, react_1.forwardRef)(SequenceRefForwardingFunction);