59 lines
3.5 KiB
JavaScript
59 lines
3.5 KiB
JavaScript
"use strict";
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.Thumbnail = void 0;
|
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
const react_1 = require("react");
|
|
const remotion_1 = require("remotion");
|
|
const emitter_context_js_1 = require("./emitter-context.js");
|
|
const event_emitter_js_1 = require("./event-emitter.js");
|
|
const SharedPlayerContext_js_1 = require("./SharedPlayerContext.js");
|
|
const ThumbnailUI_js_1 = __importDefault(require("./ThumbnailUI.js"));
|
|
const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, overflowVisible = false, overrideInternalClassName, logLevel = 'info', noSuspense, ...componentProps }, ref) => {
|
|
if (typeof window !== 'undefined') {
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
(0, react_1.useLayoutEffect)(() => {
|
|
window.remotion_isPlayer = true;
|
|
}, []);
|
|
}
|
|
const [thumbnailId] = (0, react_1.useState)(() => String((0, remotion_1.random)(null)));
|
|
const rootRef = (0, react_1.useRef)(null);
|
|
const timelineState = (0, react_1.useMemo)(() => {
|
|
const value = {
|
|
playing: false,
|
|
frame: {
|
|
[SharedPlayerContext_js_1.PLAYER_COMP_ID]: frameToDisplay,
|
|
},
|
|
rootId: thumbnailId,
|
|
imperativePlaying: {
|
|
current: false,
|
|
},
|
|
playbackRate: 1,
|
|
setPlaybackRate: () => {
|
|
throw new Error('thumbnail');
|
|
},
|
|
audioAndVideoTags: { current: [] },
|
|
};
|
|
return value;
|
|
}, [frameToDisplay, thumbnailId]);
|
|
(0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
|
|
const Component = remotion_1.Internals.useLazyComponent({
|
|
compProps: componentProps,
|
|
componentName: 'Thumbnail',
|
|
noSuspense: Boolean(noSuspense),
|
|
});
|
|
const [emitter] = (0, react_1.useState)(() => new event_emitter_js_1.ThumbnailEmitter());
|
|
const passedInputProps = (0, react_1.useMemo)(() => {
|
|
return inputProps !== null && inputProps !== void 0 ? inputProps : {};
|
|
}, [inputProps]);
|
|
return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, logLevel: logLevel, audioLatencyHint: "playback", inputProps: passedInputProps, audioEnabled: false, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible, overrideInternalClassName: overrideInternalClassName, noSuspense: Boolean(noSuspense) }) }) }) }));
|
|
};
|
|
const forward = react_1.forwardRef;
|
|
/*
|
|
* @description A component which can be rendered in a regular React App (for example: for example: Next.JS, Vite.js, Create React App) to display a single frame of a video.
|
|
* @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
|
|
*/
|
|
exports.Thumbnail = forward(ThumbnailFn);
|