remotion
Version:
Make videos programmatically
59 lines (58 loc) • 2.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Freeze = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const SequenceContext_js_1 = require("./SequenceContext.js");
const timeline_position_state_js_1 = require("./timeline-position-state.js");
const use_current_frame_js_1 = require("./use-current-frame.js");
const use_video_config_js_1 = require("./use-video-config.js");
/*
* @description Freezes its children at the specified frame when rendering videos.
* @see [Documentation](https://remotion.dev/docs/freeze)
*/
const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
var _a;
const frame = (0, use_current_frame_js_1.useCurrentFrame)();
const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
if (typeof frameToFreeze === 'undefined') {
throw new Error(`The <Freeze /> component requires a 'frame' prop, but none was passed.`);
}
if (typeof frameToFreeze !== 'number') {
throw new Error(`The 'frame' prop of <Freeze /> must be a number, but is of type ${typeof frameToFreeze}`);
}
if (Number.isNaN(frameToFreeze)) {
throw new Error(`The 'frame' prop of <Freeze /> must be a real number, but it is NaN.`);
}
if (!Number.isFinite(frameToFreeze)) {
throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`);
}
const isActive = (0, react_1.useMemo)(() => {
if (typeof active === 'boolean') {
return active;
}
if (typeof active === 'function') {
return active(frame);
}
}, [active, frame]);
const timelineContext = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
const relativeFrom = (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0;
const timelineValue = (0, react_1.useMemo)(() => {
if (!isActive) {
return timelineContext;
}
return {
...timelineContext,
playing: false,
imperativePlaying: {
current: false,
},
frame: {
[videoConfig.id]: frameToFreeze + relativeFrom,
},
};
}, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
return ((0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineValue, children: children }));
};
exports.Freeze = Freeze;