@remotion/player 4.1.0-alpha10 → 4.1.0-alpha12

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/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/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Internals, random } from 'remotion';
+import { ICON_SIZE, VolumeOffIcon, VolumeOnIcon } from './icons.js';
+import { useHoverState } from './use-hover-state.js';
+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);
+    // Need to import it from React to fix React 17 ESM support.
+    const randomId = 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    typeof React.useId === 'undefined' ? 'volume-slider' : React.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',
+            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/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Size } from './utils/use-element-size.js';
+export declare const Checkmark: () => JSX.Element;
+export declare const playerButtonStyle: React.CSSProperties;
+export declare const PlaybackrateControl: React.FC<{
+    playbackRates: number[];
+    canvasSize: Size;
+}>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { Internals } from 'remotion';
+import useComponentVisible from './utils/use-component-visible.js';
+// To align
+const BOTTOM = 35;
+// Arbitrary to clamp the height of the popup
+const THRESHOLD = 70;
+const rateDiv = {
+    height: 30,
+    paddingRight: 15,
+    paddingLeft: 12,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const checkmarkContainer = {
+    width: 22,
+    display: 'flex',
+    alignItems: 'center',
+};
+const checkmarkStyle = {
+    width: 14,
+    height: 14,
+    color: 'black',
+};
+export const Checkmark = () => (_jsx("svg", { viewBox: "0 0 512 512", style: checkmarkStyle, children: _jsx("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
+const PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
+    const { setPlaybackRate, playbackRate } = useContext(Internals.Timeline.TimelineContext);
+    const [keyboardSelectedRate, setKeyboardSelectedRate] = useState(playbackRate);
+    useEffect(() => {
+        const listener = (e) => {
+            e.preventDefault();
+            if (e.key === 'ArrowUp') {
+                const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
+                if (currentIndex === 0) {
+                    return;
+                }
+                if (currentIndex === -1) {
+                    setKeyboardSelectedRate(playbackRates[0]);
+                }
+                else {
+                    setKeyboardSelectedRate(playbackRates[currentIndex - 1]);
+                }
+            }
+            else if (e.key === 'ArrowDown') {
+                const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
+                if (currentIndex === playbackRates.length - 1) {
+                    return;
+                }
+                if (currentIndex === -1) {
+                    setKeyboardSelectedRate(playbackRates[playbackRates.length - 1]);
+                }
+                else {
+                    setKeyboardSelectedRate(playbackRates[currentIndex + 1]);
+                }
+            }
+            else if (e.key === 'Enter') {
+                setPlaybackRate(keyboardSelectedRate);
+                setIsComponentVisible(false);
+            }
+        };
+        window.addEventListener('keydown', listener);
+        return () => {
+            window.removeEventListener('keydown', listener);
+        };
+    }, [
+        playbackRates,
+        keyboardSelectedRate,
+        setPlaybackRate,
+        setIsComponentVisible,
+    ]);
+    const onSelect = useCallback((rate) => {
+        setPlaybackRate(rate);
+        setIsComponentVisible(false);
+    }, [setIsComponentVisible, setPlaybackRate]);
+    const playbackPopup = useMemo(() => {
+        return {
+            position: 'absolute',
+            right: 0,
+            width: 125,
+            maxHeight: canvasSize.height - THRESHOLD - BOTTOM,
+            bottom: 35,
+            background: '#fff',
+            borderRadius: 4,
+            overflow: 'auto',
+            color: 'black',
+            textAlign: 'left',
+        };
+    }, [canvasSize.height]);
+    return (_jsx("div", { style: playbackPopup, children: playbackRates.map((rate) => {
+            return (_jsx(PlaybackrateOption, { selectedRate: playbackRate, onSelect: onSelect, rate: rate, keyboardSelectedRate: keyboardSelectedRate }, rate));
+        }) }));
+};
+const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
+    const onClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onSelect(rate);
+    }, [onSelect, rate]);
+    const [hovered, setHovered] = useState(false);
+    const onMouseEnter = useCallback(() => {
+        setHovered(true);
+    }, []);
+    const onMouseLeave = useCallback(() => {
+        setHovered(false);
+    }, []);
+    const actualStyle = useMemo(() => {
+        return {
+            ...rateDiv,
+            backgroundColor: hovered || keyboardSelectedRate === rate ? '#eee' : 'transparent',
+        };
+    }, [hovered, keyboardSelectedRate, rate]);
+    return (_jsxs("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: 0, style: actualStyle, onClick: onClick, children: [_jsx("div", { style: checkmarkContainer, children: rate === selectedRate ? _jsx(Checkmark, {}) : null }), rate.toFixed(1), "x"] }, rate));
+};
+const label = {
+    fontSize: 13,
+    fontWeight: 'bold',
+    color: 'white',
+    border: '2px solid white',
+    borderRadius: 20,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+};
+export const playerButtonStyle = {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 6,
+    paddingBottom: 6,
+    height: 37,
+    display: 'inline-flex',
+    marginBottom: 0,
+    marginTop: 0,
+    alignItems: 'center',
+};
+const button = {
+    ...playerButtonStyle,
+    position: 'relative',
+};
+export const PlaybackrateControl = ({ playbackRates, canvasSize }) => {
+    const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
+    const { playbackRate } = useContext(Internals.Timeline.TimelineContext);
+    const onClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setIsComponentVisible(!isComponentVisible);
+    }, [isComponentVisible, setIsComponentVisible]);
+    return (_jsx("div", { ref: ref, children: _jsxs("button", { type: "button", "aria-label": "Change playback rate", style: button, onClick: onClick, children: [_jsxs("div", { style: label, children: [playbackRate, "x"] }), isComponentVisible && (_jsx(PlaybackPopup, { canvasSize: canvasSize, playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.d.ts

@@ -0,0 +1,52 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { CompProps } from 'remotion';
+import type { AnyZodObject } from 'zod';
+import type { PlayerRef } from './player-methods.js';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
+import type { RenderLoading, RenderPoster } from './PlayerUI.js';
+import type { PropsIfHasProps } from './utils/props-if-has-props.js';
+export type ErrorFallback = (info: {
+    error: Error;
+}) => React.ReactNode;
+export type PlayerProps<Schema extends AnyZodObject, Props> = {
+    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;
+    alwaysShowControls?: boolean;
+    schema?: Schema;
+    initiallyMuted?: boolean;
+    showPlaybackRateControl?: boolean | number[];
+} & CompProps<Props> & PropsIfHasProps<Schema, Props>;
+export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Vite, Next.js) to display a Remotion video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/player)
+ */
+export declare const Player: <Schema extends AnyZodObject, Props>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.js

@@ -0,0 +1,151 @@
+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.js';
+import { PlayerEmitter } from './event-emitter.js';
+import { PLAYER_CSS_CLASSNAME } from './player-css-classname.js';
+import PlayerUI from './PlayerUI.js';
+import { PLAYER_COMP_ID, SharedPlayerContexts } from './SharedPlayerContext.js';
+import { validateInOutFrames } from './utils/validate-in-out-frame.js';
+import { validateInitialFrame } from './utils/validate-initial-frame.js';
+import { validatePlaybackRate } from './utils/validate-playbackrate.js';
+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, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, ...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(() => ({
+        [PLAYER_COMP_ID]: 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);
+    const [currentPlaybackRate, setCurrentPlaybackRate] = 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`);
+    }
+    Internals.validateDimension(compositionHeight, 'compositionHeight', 'of the <Player /> component');
+    Internals.validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
+    Internals.validateDurationInFrames(durationInFrames, {
+        component: 'of the <Player/> component',
+        allowFloats: false,
+    });
+    Internals.validateFps(fps, 'as a prop of the <Player/> component', false);
+    Internals.validateDefaultAndInputProps(inputProps, 'inputProps', null);
+    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(currentPlaybackRate);
+    useEffect(() => {
+        emitter.dispatchRateChange(currentPlaybackRate);
+    }, [emitter, currentPlaybackRate]);
+    useEffect(() => {
+        setCurrentPlaybackRate(playbackRate);
+    }, [playbackRate]);
+    useImperativeHandle(ref, () => rootRef.current, []);
+    const timelineContextValue = useMemo(() => {
+        return {
+            frame,
+            playing,
+            rootId,
+            shouldRegisterSequences: false,
+            playbackRate: currentPlaybackRate,
+            imperativePlaying,
+            setPlaybackRate: (rate) => {
+                setCurrentPlaybackRate(rate);
+            },
+            audioAndVideoTags,
+        };
+    }, [frame, currentPlaybackRate, 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'));
+        }, []);
+    }
+    const actualInputProps = useMemo(() => inputProps !== null && inputProps !== void 0 ? inputProps : {}, [inputProps]);
+    return (_jsx(Internals.IsPlayerContextProvider, { children: _jsx(SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: actualInputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, 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: currentPlaybackRate, 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, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl }) }) }) }) }));
+};
+const forward = forwardRef;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Vite, Next.js) to display a Remotion video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/player)
+ */
+export const Player = forward(PlayerFn);

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.d.ts

@@ -0,0 +1,42 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import React from 'react';
+import type { usePlayer } from './use-player.js';
+import type { Size } from './utils/use-element-size.js';
+export type RenderPlayPauseButton = (props: {
+    playing: boolean;
+}) => ReactNode;
+export type RenderFullscreenButton = (props: {
+    isFullscreen: boolean;
+}) => ReactNode;
+declare global {
+    interface Document {
+        webkitFullscreenEnabled?: boolean;
+        webkitFullscreenElement?: Element;
+        webkitExitFullscreen?: Document['exitFullscreen'];
+    }
+    interface HTMLDivElement {
+        webkitRequestFullScreen: HTMLDivElement['requestFullscreen'];
+    }
+}
+export declare const Controls: React.FC<{
+    fps: number;
+    durationInFrames: number;
+    showVolumeControls: boolean;
+    player: ReturnType<typeof usePlayer>;
+    onFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
+    isFullscreen: boolean;
+    allowFullscreen: boolean;
+    onExitFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
+    spaceKeyToPlayOrPause: boolean;
+    onSeekEnd: () => void;
+    onSeekStart: () => void;
+    inFrame: number | null;
+    outFrame: number | null;
+    initiallyShowControls: number | boolean;
+    canvasSize: Size | null;
+    renderPlayPauseButton: RenderPlayPauseButton | null;
+    renderFullscreenButton: RenderFullscreenButton | null;
+    alwaysShowControls: boolean;
+    showPlaybackRateControl: boolean | number[];
+    containerRef: React.RefObject<HTMLDivElement>;
+}>;