167 lines
13 KiB
JavaScript
167 lines
13 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.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, showPosterWhenBufferingAndPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, renderCustomControls, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'interactive', volumePersistenceKey, ...componentProps }, ref) => {
|
|
if (typeof window !== 'undefined') {
|
|
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, audioLatencyHint: audioLatencyHint, volumePersistenceKey: volumePersistenceKey, inputProps: actualInputProps, audioEnabled: true, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.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), showPosterWhenBufferingAndPaused: Boolean(showPosterWhenBufferingAndPaused), 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, renderCustomControls: renderCustomControls !== null && renderCustomControls !== void 0 ? renderCustomControls : 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);
|