@remotion/player
Version:
React component for embedding a Remotion preview into your app
49 lines (48 loc) • 2.69 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
import { Internals, random } from 'remotion';
import { ThumbnailEmitterContext } from './emitter-context.js';
import { ThumbnailEmitter } from './event-emitter.js';
import { PLAYER_COMP_ID, SharedPlayerContexts } from './SharedPlayerContext.js';
import ThumbnailUI from './ThumbnailUI.js';
const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, ...componentProps }, ref) => {
if (typeof window !== 'undefined') {
// eslint-disable-next-line react-hooks/rules-of-hooks
useLayoutEffect(() => {
window.remotion_isPlayer = true;
}, []);
}
const [thumbnailId] = useState(() => String(random(null)));
const rootRef = useRef(null);
const timelineState = useMemo(() => {
const value = {
playing: false,
frame: {
[PLAYER_COMP_ID]: frameToDisplay,
},
rootId: thumbnailId,
imperativePlaying: {
current: false,
},
playbackRate: 1,
setPlaybackRate: () => {
throw new Error('thumbnail');
},
audioAndVideoTags: { current: [] },
};
return value;
}, [frameToDisplay, thumbnailId]);
useImperativeHandle(ref, () => rootRef.current, []);
const Component = Internals.useLazyComponent(componentProps);
const [emitter] = useState(() => new ThumbnailEmitter());
const passedInputProps = useMemo(() => {
return inputProps !== null && inputProps !== void 0 ? inputProps : {};
}, [inputProps]);
return (_jsx(Internals.IsPlayerContextProvider, { children: _jsx(SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, children: _jsx(ThumbnailEmitterContext.Provider, { value: emitter, children: _jsx(ThumbnailUI, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }) }));
};
const forward = forwardRef;
/**
* @description A component which can be rendered in a regular React App (for example: Next.js, Vite) to display a single frame of a video.
* @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
*/
export const Thumbnail = forward(ThumbnailFn);