remotion
Version:
Make videos programmatically
72 lines (71 loc) • 3.16 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 TimelineContext_js_1 = require("./TimelineContext.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, timeline_position_state_js_1.useTimelineContext)();
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]);
const newSequenceContext = (0, react_1.useMemo)(() => {
if (!sequenceContext) {
return null;
}
if (!isActive) {
return sequenceContext;
}
return {
...sequenceContext,
cumulatedFrom: 0,
};
}, [sequenceContext, isActive]);
return ((0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContext.Provider, { value: timelineValue, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: newSequenceContext, children: children }) }));
};
exports.Freeze = Freeze;