@remotion/player
Version:
React component for embedding a Remotion preview into your app
59 lines (58 loc) • 3.54 kB
JavaScript
;
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, 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);