remotion
Version:
Make videos programmatically
76 lines (75 loc) • 5.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Video = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/* eslint-disable @typescript-eslint/no-use-before-define */
const react_1 = require("react");
const Sequence_js_1 = require("../Sequence.js");
const absolute_src_js_1 = require("../absolute-src.js");
const calculate_loop_js_1 = require("../calculate-loop.js");
const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
const get_remotion_environment_js_1 = require("../get-remotion-environment.js");
const index_js_1 = require("../loop/index.js");
const prefetch_js_1 = require("../prefetch.js");
const use_video_config_js_1 = require("../use-video-config.js");
const validate_media_props_js_1 = require("../validate-media-props.js");
const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
const VideoForPreview_js_1 = require("./VideoForPreview.js");
const VideoForRendering_js_1 = require("./VideoForRendering.js");
const duration_state_js_1 = require("./duration-state.js");
const VideoForwardingFunction = (props, ref) => {
var _a, _b;
const { startFrom, endAt, trimBefore, trimAfter, name, pauseWhenBuffering, stack, _remotionInternalNativeLoopPassed, showInTimeline, onAutoPlayError, ...otherProps } = props;
const { loop, ...propsOtherThanLoop } = props;
const { fps } = (0, use_video_config_js_1.useVideoConfig)();
const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
const { durations, setDurations } = (0, react_1.useContext)(duration_state_js_1.DurationsContext);
if (typeof ref === 'string') {
throw new Error('string refs are not supported');
}
if (typeof props.src !== 'string') {
throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
}
const preloadedSrc = (0, prefetch_js_1.usePreload)(props.src);
const onDuration = (0, react_1.useCallback)((src, durationInSeconds) => {
setDurations({ type: 'got-duration', durationInSeconds, src });
}, [setDurations]);
const onVideoFrame = (0, react_1.useCallback)(() => { }, []);
const durationFetched = (_a = durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)]) !== null && _a !== void 0 ? _a : durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)];
(0, validate_start_from_props_js_1.validateMediaTrimProps)({ startFrom, endAt, trimBefore, trimAfter });
const { trimBeforeValue, trimAfterValue } = (0, validate_start_from_props_js_1.resolveTrimProps)({
startFrom,
endAt,
trimBefore,
trimAfter,
});
if (loop && durationFetched !== undefined) {
if (!Number.isFinite(durationFetched)) {
return ((0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
}
const mediaDuration = durationFetched * fps;
return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { durationInFrames: (0, calculate_loop_js_1.calculateLoopDuration)({
endAt: trimAfterValue !== null && trimAfterValue !== void 0 ? trimAfterValue : undefined,
mediaDuration,
playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
startFrom: trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : undefined,
}), layout: "none", name: name, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
}
if (typeof trimBeforeValue !== 'undefined' ||
typeof trimAfterValue !== 'undefined') {
return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: (0, jsx_runtime_1.jsx)(exports.Video, { pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps, ref: ref }) }));
}
(0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
if (environment.isRendering) {
return ((0, jsx_runtime_1.jsx)(VideoForRendering_js_1.VideoForRendering, { onDuration: onDuration, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, ...otherProps, ref: ref }));
}
return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onVideoFrame: null,
// Proposal: Make this default to true in v5
pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined }));
};
/*
* @description Wraps the native `<video>` element to include video in your component that is synchronized with Remotion's time.
* @see [Documentation](https://www.remotion.dev/docs/video)
*/
exports.Video = (0, react_1.forwardRef)(VideoForwardingFunction);
(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Video);