@remotion/player
Version:
React component for embedding a Remotion preview into your app
170 lines (169 loc) • 13.1 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Player = exports.componentOrNullIfLazy = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const EmitterProvider_js_1 = require("./EmitterProvider.js");
const PlayerUI_js_1 = __importDefault(require("./PlayerUI.js"));
const SharedPlayerContext_js_1 = require("./SharedPlayerContext.js");
const player_css_classname_js_1 = require("./player-css-classname.js");
const use_remotion_license_acknowledge_js_1 = require("./use-remotion-license-acknowledge.js");
const validate_in_out_frame_js_1 = require("./utils/validate-in-out-frame.js");
const validate_initial_frame_js_1 = require("./utils/validate-initial-frame.js");
const validate_playbackrate_js_1 = require("./utils/validate-playbackrate.js");
const validate_js_1 = require("./validate.js");
const componentOrNullIfLazy = (props) => {
if ('component' in props) {
return props.component;
}
return null;
};
exports.componentOrNullIfLazy = componentOrNullIfLazy;
const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, ...componentProps }, ref) => {
if (typeof window !== 'undefined') {
// eslint-disable-next-line react-hooks/rules-of-hooks
(0, react_1.useLayoutEffect)(() => {
window.remotion_isPlayer = true;
}, []);
}
// @ts-expect-error
if (componentProps.defaultProps !== undefined) {
throw new Error('The <Player /> component does not accept `defaultProps`, but some were passed. Use `inputProps` instead.');
}
const componentForValidation = (0, exports.componentOrNullIfLazy)(componentProps);
// @ts-expect-error
if ((componentForValidation === null || componentForValidation === void 0 ? void 0 : componentForValidation.type) === remotion_1.Composition) {
throw new TypeError(`'component' should not be an instance of <Composition/>. Pass the React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
}
if (componentForValidation === remotion_1.Composition) {
throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
}
(0, react_1.useState)(() => (0, use_remotion_license_acknowledge_js_1.acknowledgeRemotionLicenseMessage)(Boolean(acknowledgeRemotionLicense), logLevel));
const component = remotion_1.Internals.useLazyComponent({
compProps: componentProps,
componentName: 'Player',
noSuspense: Boolean(noSuspense),
});
(0, validate_initial_frame_js_1.validateInitialFrame)({ initialFrame, durationInFrames });
const [frame, setFrame] = (0, react_1.useState)(() => ({
[SharedPlayerContext_js_1.PLAYER_COMP_ID]: initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0,
}));
const [playing, setPlaying] = (0, react_1.useState)(false);
const [rootId] = (0, react_1.useState)('player-comp');
const rootRef = (0, react_1.useRef)(null);
const audioAndVideoTags = (0, react_1.useRef)([]);
const imperativePlaying = (0, react_1.useRef)(false);
const [currentPlaybackRate, setCurrentPlaybackRate] = (0, react_1.useState)(playbackRate);
if (typeof compositionHeight !== 'number') {
throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
}
if (typeof compositionWidth !== 'number') {
throw new TypeError(`'compositionWidth' must be a number but got '${typeof compositionWidth}' instead`);
}
(0, validate_js_1.validateDimension)(compositionHeight, 'compositionHeight', 'of the <Player /> component');
(0, validate_js_1.validateDimension)(compositionWidth, 'compositionWidth', 'of the <Player /> component');
(0, validate_js_1.validateDurationInFrames)(durationInFrames, {
component: 'of the <Player/> component',
allowFloats: false,
});
(0, validate_js_1.validateFps)(fps, 'as a prop of the <Player/> component', false);
(0, validate_js_1.validateDefaultAndInputProps)(inputProps, 'inputProps', null);
(0, validate_in_out_frame_js_1.validateInOutFrames)({
durationInFrames,
inFrame,
outFrame,
});
if (typeof controls !== 'boolean' && typeof controls !== 'undefined') {
throw new TypeError(`'controls' must be a boolean or undefined but got '${typeof controls}' instead`);
}
if (typeof autoPlay !== 'boolean' && typeof autoPlay !== 'undefined') {
throw new TypeError(`'autoPlay' must be a boolean or undefined but got '${typeof autoPlay}' instead`);
}
if (typeof loop !== 'boolean' && typeof loop !== 'undefined') {
throw new TypeError(`'loop' must be a boolean or undefined but got '${typeof loop}' instead`);
}
if (typeof doubleClickToFullscreen !== 'boolean' &&
typeof doubleClickToFullscreen !== 'undefined') {
throw new TypeError(`'doubleClickToFullscreen' must be a boolean or undefined but got '${typeof doubleClickToFullscreen}' instead`);
}
if (typeof showVolumeControls !== 'boolean' &&
typeof showVolumeControls !== 'undefined') {
throw new TypeError(`'showVolumeControls' must be a boolean or undefined but got '${typeof showVolumeControls}' instead`);
}
if (typeof allowFullscreen !== 'boolean' &&
typeof allowFullscreen !== 'undefined') {
throw new TypeError(`'allowFullscreen' must be a boolean or undefined but got '${typeof allowFullscreen}' instead`);
}
if (typeof clickToPlay !== 'boolean' && typeof clickToPlay !== 'undefined') {
throw new TypeError(`'clickToPlay' must be a boolean or undefined but got '${typeof clickToPlay}' instead`);
}
if (typeof spaceKeyToPlayOrPause !== 'boolean' &&
typeof spaceKeyToPlayOrPause !== 'undefined') {
throw new TypeError(`'spaceKeyToPlayOrPause' must be a boolean or undefined but got '${typeof spaceKeyToPlayOrPause}' instead`);
}
if (typeof numberOfSharedAudioTags !== 'number' ||
numberOfSharedAudioTags % 1 !== 0 ||
!Number.isFinite(numberOfSharedAudioTags) ||
Number.isNaN(numberOfSharedAudioTags) ||
numberOfSharedAudioTags < 0) {
throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
}
(0, validate_playbackrate_js_1.validatePlaybackRate)(currentPlaybackRate);
(0, react_1.useEffect)(() => {
setCurrentPlaybackRate(playbackRate);
}, [playbackRate]);
(0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
(0, react_1.useState)(() => {
remotion_1.Internals.playbackLogging({
logLevel,
message: `[player] Mounting <Player>. User agent = ${typeof navigator === 'undefined' ? 'server' : navigator.userAgent}`,
tag: 'player',
mountTime: Date.now(),
});
});
const timelineContextValue = (0, react_1.useMemo)(() => {
return {
frame,
playing,
rootId,
playbackRate: currentPlaybackRate,
imperativePlaying,
setPlaybackRate: (rate) => {
setCurrentPlaybackRate(rate);
},
audioAndVideoTags,
};
}, [frame, currentPlaybackRate, playing, rootId]);
const setTimelineContextValue = (0, react_1.useMemo)(() => {
return {
setFrame,
setPlaying,
};
}, [setFrame]);
if (typeof window !== 'undefined') {
// eslint-disable-next-line react-hooks/rules-of-hooks
(0, react_1.useLayoutEffect)(() => {
// Inject CSS only on client, and also only after the Player has hydrated
remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(`.${(0, player_css_classname_js_1.playerCssClassname)(overrideInternalClassName)}`, '#fff'));
}, [overrideInternalClassName]);
}
const actualInputProps = (0, react_1.useMemo)(() => inputProps !== null && inputProps !== void 0 ? inputProps : {}, [inputProps]);
const browserMediaControlsBehavior = (0, react_1.useMemo)(() => {
return (passedBrowserMediaControlsBehavior !== null && passedBrowserMediaControlsBehavior !== void 0 ? passedBrowserMediaControlsBehavior : {
mode: 'prevent-media-session',
});
}, [passedBrowserMediaControlsBehavior]);
return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: (0, jsx_runtime_1.jsx)(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
? clickToPlay
: Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined, noSuspense: Boolean(noSuspense) }) }) }) }) }));
};
const forward = react_1.forwardRef;
/*
* @description A component which can be rendered in a regular React App to display a Remotion video.
* @see [Documentation](https://www.remotion.dev/docs/player/player)
*/
exports.Player = forward(PlayerFn);