@remotion/player 3.3.36 → 3.3.38

package/dist/cjs/utils/use-cancellable-promises.d.ts

@@ -0,0 +1,7 @@
+import type { CancellablePromise } from './cancellable-promise';
+declare const useCancellablePromises: () => {
+    appendPendingPromise: (promise: CancellablePromise) => void;
+    removePendingPromise: (promise: CancellablePromise) => void;
+    clearPendingPromises: () => void[];
+};
+export { useCancellablePromises };

package/dist/cjs/utils/use-cancellable-promises.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCancellablePromises = void 0;
+const react_1 = require("react");
+const useCancellablePromises = () => {
+    const pendingPromises = (0, react_1.useRef)([]);
+    const appendPendingPromise = (0, react_1.useCallback)((promise) => {
+        pendingPromises.current = [...pendingPromises.current, promise];
+    }, []);
+    const removePendingPromise = (0, react_1.useCallback)((promise) => {
+        pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
+    }, []);
+    const clearPendingPromises = (0, react_1.useCallback)(() => pendingPromises.current.map((p) => p.cancel()), []);
+    const api = (0, react_1.useMemo)(() => ({
+        appendPendingPromise,
+        removePendingPromise,
+        clearPendingPromises,
+    }), [appendPendingPromise, clearPendingPromises, removePendingPromise]);
+    return api;
+};
+exports.useCancellablePromises = useCancellablePromises;

package/dist/cjs/utils/use-click-prevention-on-double-click.d.ts

@@ -0,0 +1,3 @@
+import type { SyntheticEvent } from 'react';
+declare const useClickPreventionOnDoubleClick: (onClick: (e: SyntheticEvent) => void, onDoubleClick: () => void, doubleClickToFullscreen: boolean) => [(e: SyntheticEvent) => void, () => void];
+export { useClickPreventionOnDoubleClick };

package/dist/cjs/utils/use-click-prevention-on-double-click.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClickPreventionOnDoubleClick = void 0;
+const react_1 = require("react");
+const cancellable_promise_1 = require("./cancellable-promise");
+const delay_1 = require("./delay");
+const use_cancellable_promises_1 = require("./use-cancellable-promises");
+const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
+    const api = (0, use_cancellable_promises_1.useCancellablePromises)();
+    const handleClick = (0, react_1.useCallback)(async (e) => {
+        api.clearPendingPromises();
+        const waitForClick = (0, cancellable_promise_1.cancellablePromise)((0, delay_1.delay)(200));
+        api.appendPendingPromise(waitForClick);
+        try {
+            await waitForClick.promise;
+            api.removePendingPromise(waitForClick);
+            onClick(e);
+        }
+        catch (errorInfo) {
+            const info = errorInfo;
+            api.removePendingPromise(waitForClick);
+            if (!info.isCanceled) {
+                throw info.error;
+            }
+        }
+    }, [api, onClick]);
+    const handleDoubleClick = (0, react_1.useCallback)(() => {
+        api.clearPendingPromises();
+        onDoubleClick();
+    }, [api, onDoubleClick]);
+    const returnValue = (0, react_1.useMemo)(() => {
+        if (!doubleClickToFullscreen) {
+            return [onClick, onDoubleClick];
+        }
+        return [handleClick, handleDoubleClick];
+    }, [
+        doubleClickToFullscreen,
+        handleClick,
+        handleDoubleClick,
+        onClick,
+        onDoubleClick,
+    ]);
+    return returnValue;
+};
+exports.useClickPreventionOnDoubleClick = useClickPreventionOnDoubleClick;

package/dist/cjs/utils/use-element-size.d.ts

@@ -0,0 +1,16 @@
+export declare type Size = {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    windowSize: {
+        width: number;
+        height: number;
+    };
+    refresh: () => void;
+};
+export declare const updateAllElementsSizes: () => void;
+export declare const useElementSize: (ref: React.RefObject<HTMLElement>, options: {
+    triggerOnWindowResize: boolean;
+    shouldApplyCssTransforms: boolean;
+}) => Size | null;

package/dist/cjs/utils/use-element-size.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementSize = exports.updateAllElementsSizes = void 0;
+const react_1 = require("react");
+let elementSizeHooks = [];
+const updateAllElementsSizes = () => {
+    for (const listener of elementSizeHooks) {
+        listener();
+    }
+};
+exports.updateAllElementsSizes = updateAllElementsSizes;
+const useElementSize = (ref, options) => {
+    const [size, setSize] = (0, react_1.useState)(null);
+    const observer = (0, react_1.useMemo)(() => {
+        if (typeof ResizeObserver === 'undefined') {
+            return null;
+        }
+        return new ResizeObserver((entries) => {
+            // The contentRect returns the width without any `scale()`'s being applied. The height is wrong
+            const { contentRect } = entries[0];
+            // The clientRect returns the size with `scale()` being applied.
+            const newSize = entries[0].target.getClientRects();
+            if (!newSize || !newSize[0]) {
+                setSize(null);
+                return;
+            }
+            const probableCssParentScale = newSize[0].width / contentRect.width;
+            const width = options.shouldApplyCssTransforms
+                ? newSize[0].width
+                : newSize[0].width * (1 / probableCssParentScale);
+            const height = options.shouldApplyCssTransforms
+                ? newSize[0].height
+                : newSize[0].height * (1 / probableCssParentScale);
+            setSize({
+                width,
+                height,
+                left: newSize[0].x,
+                top: newSize[0].y,
+                windowSize: {
+                    height: window.innerHeight,
+                    width: window.innerWidth,
+                },
+            });
+        });
+    }, [options.shouldApplyCssTransforms]);
+    const updateSize = (0, react_1.useCallback)(() => {
+        if (!ref.current) {
+            return;
+        }
+        const rect = ref.current.getClientRects();
+        if (!rect[0]) {
+            setSize(null);
+            return;
+        }
+        setSize({
+            width: rect[0].width,
+            height: rect[0].height,
+            left: rect[0].x,
+            top: rect[0].y,
+            windowSize: {
+                height: window.innerHeight,
+                width: window.innerWidth,
+            },
+        });
+    }, [ref]);
+    (0, react_1.useEffect)(() => {
+        if (!observer) {
+            return;
+        }
+        updateSize();
+        const { current } = ref;
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            if (current) {
+                observer.unobserve(current);
+            }
+        };
+    }, [observer, ref, updateSize]);
+    (0, react_1.useEffect)(() => {
+        if (!options.triggerOnWindowResize) {
+            return;
+        }
+        window.addEventListener('resize', updateSize);
+        return () => {
+            window.removeEventListener('resize', updateSize);
+        };
+    }, [options.triggerOnWindowResize, updateSize]);
+    (0, react_1.useEffect)(() => {
+        elementSizeHooks.push(updateSize);
+        return () => {
+            elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
+        };
+    }, [updateSize]);
+    return size ? { ...size, refresh: updateSize } : null;
+};
+exports.useElementSize = useElementSize;

package/dist/cjs/utils/validate-in-out-frame.d.ts

@@ -0,0 +1,6 @@
+export declare const validateSingleFrame: (frame: unknown, variableName: string) => number | null;
+export declare const validateInOutFrames: ({ inFrame, durationInFrames, outFrame, }: {
+    inFrame: unknown;
+    outFrame: unknown;
+    durationInFrames: number;
+}) => void;

package/dist/cjs/utils/validate-in-out-frame.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateInOutFrames = exports.validateSingleFrame = void 0;
+const validateSingleFrame = (frame, variableName) => {
+    if (typeof frame === 'undefined' || frame === null) {
+        return frame !== null && frame !== void 0 ? frame : null;
+    }
+    if (typeof frame !== 'number') {
+        throw new TypeError(`"${variableName}" must be a number, but is ${JSON.stringify(frame)}`);
+    }
+    if (Number.isNaN(frame)) {
+        throw new TypeError(`"${variableName}" must not be NaN, but is ${JSON.stringify(frame)}`);
+    }
+    if (!Number.isFinite(frame)) {
+        throw new TypeError(`"${variableName}" must be finite, but is ${JSON.stringify(frame)}`);
+    }
+    if (frame % 1 !== 0) {
+        throw new TypeError(`"${variableName}" must be an integer, but is ${JSON.stringify(frame)}`);
+    }
+    return frame;
+};
+exports.validateSingleFrame = validateSingleFrame;
+const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
+    const validatedInFrame = (0, exports.validateSingleFrame)(inFrame, 'inFrame');
+    const validatedOutFrame = (0, exports.validateSingleFrame)(outFrame, 'outFrame');
+    if (validatedInFrame === null && validatedOutFrame === null) {
+        return;
+    }
+    // Must not be over the duration
+    if (validatedInFrame !== null && validatedInFrame > durationInFrames - 1) {
+        throw new Error('inFrame must be less than (durationInFrames - 1), but is ' +
+            validatedInFrame);
+    }
+    if (validatedOutFrame !== null && validatedOutFrame > durationInFrames - 1) {
+        throw new Error('outFrame must be less than (durationInFrames - 1), but is ' +
+            validatedOutFrame);
+    }
+    // Must not be under 0
+    if (validatedInFrame !== null && validatedInFrame < 0) {
+        throw new Error('inFrame must be greater than 0, but is ' + validatedInFrame);
+    }
+    if (validatedOutFrame !== null && validatedOutFrame <= 0) {
+        throw new Error(`outFrame must be greater than 0, but is ${validatedOutFrame}. If you want to render a single frame, use <Thumbnail /> instead.`);
+    }
+    if (validatedOutFrame !== null &&
+        validatedInFrame !== null &&
+        validatedOutFrame <= validatedInFrame) {
+        throw new Error('outFrame must be greater than inFrame, but is ' +
+            validatedOutFrame +
+            ' <= ' +
+            validatedInFrame);
+    }
+};
+exports.validateInOutFrames = validateInOutFrames;

package/dist/cjs/utils/validate-initial-frame.d.ts

@@ -0,0 +1,4 @@
+export declare const validateInitialFrame: ({ initialFrame, durationInFrames, }: {
+    initialFrame: unknown;
+    durationInFrames: unknown;
+}) => void;

package/dist/cjs/utils/validate-initial-frame.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateInitialFrame = void 0;
+const validateInitialFrame = ({ initialFrame, durationInFrames, }) => {
+    if (typeof durationInFrames !== 'number') {
+        throw new Error(`\`durationInFrames\` must be a number, but is ${JSON.stringify(durationInFrames)}`);
+    }
+    if (typeof initialFrame === 'undefined') {
+        return;
+    }
+    if (typeof initialFrame !== 'number') {
+        throw new Error(`\`initialFrame\` must be a number, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (Number.isNaN(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is NaN`);
+    }
+    if (!Number.isFinite(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is Infinity`);
+    }
+    if (initialFrame % 1 !== 0) {
+        throw new Error(`\`initialFrame\` must be an integer, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (initialFrame > durationInFrames - 1) {
+        throw new Error(`\`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(initialFrame)}`);
+    }
+};
+exports.validateInitialFrame = validateInitialFrame;

package/dist/cjs/utils/validate-playbackrate.d.ts

@@ -0,0 +1 @@
+export declare const validatePlaybackRate: (playbackRate: number | undefined) => void;

package/dist/cjs/utils/validate-playbackrate.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatePlaybackRate = void 0;
+const validatePlaybackRate = (playbackRate) => {
+    if (playbackRate === undefined) {
+        return;
+    }
+    if (playbackRate > 4) {
+        throw new Error(`The highest possible playback rate is 4. You passed: ${playbackRate}`);
+    }
+    if (playbackRate < -4) {
+        throw new Error(`The lowest possible playback rate is -4. You passed: ${playbackRate}`);
+    }
+    if (playbackRate === 0) {
+        throw new Error(`A playback rate of 0 is not supported.`);
+    }
+};
+exports.validatePlaybackRate = validatePlaybackRate;

package/dist/cjs/volume-persistance.d.ts

@@ -0,0 +1,2 @@
+export declare const persistVolume: (volume: number) => void;
+export declare const getPreferredVolume: () => number;

package/dist/cjs/volume-persistance.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPreferredVolume = exports.persistVolume = void 0;
+const VOLUME_PERSISTANCE_KEY = 'remotion.volumePreference';
+const persistVolume = (volume) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    window.localStorage.setItem(VOLUME_PERSISTANCE_KEY, String(volume));
+};
+exports.persistVolume = persistVolume;
+const getPreferredVolume = () => {
+    if (typeof window === 'undefined') {
+        return 1;
+    }
+    const val = window.localStorage.getItem(VOLUME_PERSISTANCE_KEY);
+    return val ? Number(val) : 1;
+};
+exports.getPreferredVolume = getPreferredVolume;

package/dist/esm/MediaVolumeSlider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const VOLUME_SLIDER_WIDTH = 100;
+export declare const MediaVolumeSlider: React.FC<{
+    displayVerticalVolumeSlider: Boolean;
+}>;

package/dist/esm/MediaVolumeSlider.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import { Internals, random } from 'remotion';
+import { ICON_SIZE, VolumeOffIcon, VolumeOnIcon } from './icons';
+import { useHoverState } from './use-hover-state';
+const BAR_HEIGHT = 5;
+const KNOB_SIZE = 12;
+export const VOLUME_SLIDER_WIDTH = 100;
+export const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
+    const [mediaMuted, setMediaMuted] = Internals.useMediaMutedState();
+    const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
+    const [focused, setFocused] = useState(false);
+    const parentDivRef = useRef(null);
+    const inputRef = useRef(null);
+    const hover = useHoverState(parentDivRef);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const randomId = typeof useId === 'undefined' ? 'volume-slider' : useId();
+    const [randomClass] = useState(() => `__remotion-volume-slider-${random(randomId)}`.replace('.', ''));
+    const isMutedOrZero = mediaMuted || mediaVolume === 0;
+    const onVolumeChange = (e) => {
+        setMediaVolume(parseFloat(e.target.value));
+    };
+    const onBlur = () => {
+        setTimeout(() => {
+            // We need a small delay to check which element was focused next,
+            // and if it wasn't the volume slider, we hide it
+            if (document.activeElement !== inputRef.current) {
+                setFocused(false);
+            }
+        }, 10);
+    };
+    const onClick = useCallback(() => {
+        if (mediaVolume === 0) {
+            setMediaVolume(1);
+            setMediaMuted(false);
+            return;
+        }
+        setMediaMuted((mute) => !mute);
+    }, [mediaVolume, setMediaMuted, setMediaVolume]);
+    const parentDivStyle = useMemo(() => {
+        return {
+            display: 'inline-flex',
+            background: 'none',
+            border: 'none',
+            padding: '6px',
+            justifyContent: 'center',
+            alignItems: 'center',
+            touchAction: 'none',
+            ...(displayVerticalVolumeSlider && { position: 'relative' }),
+        };
+    }, [displayVerticalVolumeSlider]);
+    const volumeContainer = useMemo(() => {
+        return {
+            display: 'inline',
+            width: ICON_SIZE,
+            height: ICON_SIZE,
+            cursor: 'pointer',
+            appearance: 'none',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+        };
+    }, []);
+    const inputStyle = useMemo(() => {
+        const commonStyle = {
+            WebkitAppearance: 'none',
+            backgroundColor: 'rgba(255, 255, 255, 0.5)',
+            borderRadius: BAR_HEIGHT / 2,
+            cursor: 'pointer',
+            height: BAR_HEIGHT,
+            width: VOLUME_SLIDER_WIDTH,
+            backgroundImage: `linear-gradient(
+				to right,
+				white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
+			)`,
+        };
+        if (displayVerticalVolumeSlider) {
+            return {
+                ...commonStyle,
+                transform: `rotate(-90deg)`,
+                position: 'absolute',
+                bottom: ICON_SIZE + VOLUME_SLIDER_WIDTH / 2 + 5,
+            };
+        }
+        return {
+            ...commonStyle,
+            marginLeft: 5,
+        };
+    }, [displayVerticalVolumeSlider, mediaVolume]);
+    const sliderStyle = `
+	.${randomClass}::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+
+	.${randomClass}::-moz-range-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+`;
+    return (_jsxs("div", { ref: parentDivRef, style: parentDivStyle, children: [_jsx("style", { 
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: {
+                    __html: sliderStyle,
+                } }), _jsx("button", { "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, onBlur: onBlur, onFocus: () => setFocused(true), style: volumeContainer, type: "button", children: isMutedOrZero ? _jsx(VolumeOffIcon, {}) : _jsx(VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted ? (_jsx("input", { ref: inputRef, "aria-label": "Change volume", className: randomClass, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume, style: inputStyle })) : null] }));
+};

package/dist/esm/Player.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { CompProps } from 'remotion';
+import type { PlayerRef } from './player-methods';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls';
+import type { RenderLoading, RenderPoster } from './PlayerUI';
+import type { PropsIfHasProps } from './utils/props-if-has-props';
+export declare type ErrorFallback = (info: {
+    error: Error;
+}) => React.ReactNode;
+export declare type PlayerProps<T> = {
+    durationInFrames: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    fps: number;
+    showVolumeControls?: boolean;
+    controls?: boolean;
+    errorFallback?: ErrorFallback;
+    style?: React.CSSProperties;
+    loop?: boolean;
+    autoPlay?: boolean;
+    allowFullscreen?: boolean;
+    clickToPlay?: boolean;
+    doubleClickToFullscreen?: boolean;
+    spaceKeyToPlayOrPause?: boolean;
+    numberOfSharedAudioTags?: number;
+    playbackRate?: number;
+    renderLoading?: RenderLoading;
+    moveToBeginningWhenEnded?: boolean;
+    className?: string;
+    initialFrame?: number;
+    renderPoster?: RenderPoster;
+    showPosterWhenPaused?: boolean;
+    showPosterWhenEnded?: boolean;
+    showPosterWhenUnplayed?: boolean;
+    inFrame?: number | null;
+    outFrame?: number | null;
+    initiallyShowControls?: number | boolean;
+    renderPlayPauseButton?: RenderPlayPauseButton;
+    renderFullscreenButton?: RenderFullscreenButton;
+} & PropsIfHasProps<T> & CompProps<T>;
+export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
+export declare const Player: <T>(props: PlayerProps<T> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;

package/dist/esm/Player.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Composition, Internals } from 'remotion';
+import { PlayerEventEmitterContext } from './emitter-context';
+import { PlayerEmitter } from './event-emitter';
+import { PLAYER_CSS_CLASSNAME } from './player-css-classname';
+import PlayerUI from './PlayerUI';
+import { SharedPlayerContexts } from './SharedPlayerContext';
+import { validateInOutFrames } from './utils/validate-in-out-frame';
+import { validateInitialFrame } from './utils/validate-initial-frame';
+import { validatePlaybackRate } from './utils/validate-playbackrate';
+export const componentOrNullIfLazy = (props) => {
+    if ('component' in props) {
+        return props.component;
+    }
+    return null;
+};
+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, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, ...componentProps }, ref) => {
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        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 = componentOrNullIfLazy(componentProps);
+    // @ts-expect-error
+    if ((componentForValidation === null || componentForValidation === void 0 ? void 0 : componentForValidation.type) === 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 === 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.`);
+    }
+    const component = Internals.useLazyComponent(componentProps);
+    validateInitialFrame({ initialFrame, durationInFrames });
+    const [frame, setFrame] = useState(() => initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0);
+    const [playing, setPlaying] = useState(false);
+    const [rootId] = useState('player-comp');
+    const [emitter] = useState(() => new PlayerEmitter());
+    const rootRef = useRef(null);
+    const audioAndVideoTags = useRef([]);
+    const imperativePlaying = useRef(false);
+    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`);
+    }
+    Internals.validateDimension(compositionHeight, 'compositionHeight', 'of the <Player /> component');
+    Internals.validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
+    Internals.validateDurationInFrames(durationInFrames, 'of the <Player/> component');
+    Internals.validateFps(fps, 'as a prop of the <Player/> component', false);
+    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`);
+    }
+    validatePlaybackRate(playbackRate);
+    useEffect(() => {
+        emitter.dispatchRatechange(playbackRate);
+    }, [emitter, playbackRate]);
+    useImperativeHandle(ref, () => rootRef.current, []);
+    const timelineContextValue = useMemo(() => {
+        return {
+            frame,
+            playing,
+            rootId,
+            shouldRegisterSequences: false,
+            playbackRate,
+            imperativePlaying,
+            setPlaybackRate: () => {
+                throw new Error('playback rate');
+            },
+            audioAndVideoTags,
+        };
+    }, [frame, playbackRate, playing, rootId]);
+    const setTimelineContextValue = useMemo(() => {
+        return {
+            setFrame,
+            setPlaying,
+        };
+    }, [setFrame]);
+    const passedInputProps = useMemo(() => {
+        return inputProps !== null && inputProps !== void 0 ? inputProps : {};
+    }, [inputProps]);
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useLayoutEffect(() => {
+            // Inject CSS only on client, and also only after the Player has hydrated
+            Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultCSS(`.${PLAYER_CSS_CLASSNAME}`, '#fff'));
+        }, []);
+    }
+    return (_jsx(Internals.IsPlayerContextProvider, { children: _jsx(SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, children: _jsx(Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: _jsx(PlayerEventEmitterContext.Provider, { value: emitter, children: _jsx(PlayerUI, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
+                            ? clickToPlay
+                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), 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 }) }) }) }) }));
+};
+const forward = forwardRef;
+export const Player = forward(PlayerFn);