remotion
Version:
Make videos programmatically
91 lines (90 loc) • 4.24 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Loop = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const Sequence_js_1 = require("../Sequence.js");
const use_current_frame_js_1 = require("../use-current-frame.js");
const use_video_config_js_1 = require("../use-video-config.js");
const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
const LoopContext = (0, react_1.createContext)(null);
const useLoop = () => {
return react_1.default.useContext(LoopContext);
};
/*
* @description This component allows you to quickly lay out an animation so it repeats itself.
* @see [Documentation](https://remotion.dev/docs/loop)
*/
const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
const currentFrame = (0, use_current_frame_js_1.useCurrentFrame)();
const { durationInFrames: compDuration } = (0, use_video_config_js_1.useVideoConfig)();
(0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, {
component: 'of the <Loop /> component',
allowFloats: true,
});
if (typeof times !== 'number') {
throw new TypeError(`You passed to "times" an argument of type ${typeof times}, but it must be a number.`);
}
if (times !== Infinity && times % 1 !== 0) {
throw new TypeError(`The "times" prop of a loop must be an integer, but got ${times}.`);
}
if (times < 0) {
throw new TypeError(`The "times" prop of a loop must be at least 0, but got ${times}`);
}
const maxTimes = Math.ceil(compDuration / durationInFrames);
const actualTimes = Math.min(maxTimes, times);
const style = props.layout === 'none' ? undefined : props.style;
const maxFrame = durationInFrames * (actualTimes - 1);
const iteration = Math.floor(currentFrame / durationInFrames);
const start = iteration * durationInFrames;
const from = Math.min(start, maxFrame);
const loopDisplay = (0, react_1.useMemo)(() => {
return {
numberOfTimes: actualTimes,
startOffset: -from,
durationInFrames,
};
}, [actualTimes, durationInFrames, from]);
const loopContext = (0, react_1.useMemo)(() => {
return {
iteration: Math.floor(currentFrame / durationInFrames),
durationInFrames,
};
}, [currentFrame, durationInFrames]);
return ((0, jsx_runtime_1.jsx)(LoopContext.Provider, { value: loopContext, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, children: children }) }));
};
exports.Loop = Loop;
exports.Loop.useLoop = useLoop;