init commit

remotion/node_modules/@remotion/player/dist/cjs/Player.js

@@ -0,0 +1,166 @@
+"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);