remotion
Version:
Make videos programmatically
47 lines (46 loc) • 3.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.OffthreadVideo = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Sequence_js_1 = require("../Sequence.js");
const get_remotion_environment_js_1 = require("../get-remotion-environment.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 OffthreadVideoForRendering_js_1 = require("./OffthreadVideoForRendering.js");
const VideoForPreview_js_1 = require("./VideoForPreview.js");
/*
* @description This method imports and displays a video, similar to <Video />. During rendering, it extracts the exact frame from the video and displays it in an <img> tag
* @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
*/
const OffthreadVideo = (props) => {
// Should only destruct `startFrom` and `endAt` from props,
// rest gets drilled down
const { startFrom, endAt, trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, ...otherProps } = props;
const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
const onDuration = (0, react_1.useCallback)(() => undefined, []);
if (typeof props.src !== 'string') {
throw new TypeError(`The \`<OffthreadVideo>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
}
if (props.imageFormat) {
throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
}
(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 (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.OffthreadVideo, { pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...otherProps }) }));
}
(0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
if (environment.isRendering) {
return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { ...otherProps });
}
const { transparent, toneMapped, onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, crossOrigin: crossOrigin, ...propsForPreview }));
};
exports.OffthreadVideo = OffthreadVideo;