@remotion/player 4.0.172 → 4.0.174

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

@@ -1,156 +0,0 @@
-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 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 isFocused = keyboardSelectedRate === rate;
-    const actualStyle = useMemo(() => {
-        return {
-            ...rateDiv,
-            backgroundColor: hovered || isFocused ? '#eee' : 'transparent',
-        };
-    }, [hovered, isFocused]);
-    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 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 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((prevIsComponentVisible) => !prevIsComponentVisible);
-    }, [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

@@ -1,59 +0,0 @@
-import type { ComponentType } from 'react';
-import React from 'react';
-import type { CompProps } from 'remotion';
-import type { AnyZodObject } from 'zod';
-import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
-import type { PosterFillMode, RenderLoading, RenderPoster } from './PlayerUI.js';
-import type { PlayerRef } from './player-methods.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> = {
-    readonly durationInFrames: number;
-    readonly compositionWidth: number;
-    readonly compositionHeight: number;
-    readonly fps: number;
-    readonly showVolumeControls?: boolean;
-    readonly controls?: boolean;
-    readonly errorFallback?: ErrorFallback;
-    readonly style?: React.CSSProperties;
-    readonly loop?: boolean;
-    readonly autoPlay?: boolean;
-    readonly allowFullscreen?: boolean;
-    readonly clickToPlay?: boolean;
-    readonly doubleClickToFullscreen?: boolean;
-    readonly spaceKeyToPlayOrPause?: boolean;
-    readonly numberOfSharedAudioTags?: number;
-    readonly playbackRate?: number;
-    readonly renderLoading?: RenderLoading;
-    readonly moveToBeginningWhenEnded?: boolean;
-    readonly className?: string;
-    readonly initialFrame?: number;
-    readonly renderPoster?: RenderPoster;
-    readonly showPosterWhenPaused?: boolean;
-    readonly showPosterWhenEnded?: boolean;
-    readonly showPosterWhenUnplayed?: boolean;
-    readonly showPosterWhenBuffering?: boolean;
-    readonly inFrame?: number | null;
-    readonly outFrame?: number | null;
-    readonly initiallyShowControls?: number | boolean;
-    readonly renderPlayPauseButton?: RenderPlayPauseButton;
-    readonly renderFullscreenButton?: RenderFullscreenButton;
-    readonly alwaysShowControls?: boolean;
-    readonly schema?: Schema;
-    readonly initiallyMuted?: boolean;
-    readonly showPlaybackRateControl?: boolean | number[];
-    readonly posterFillMode?: PosterFillMode;
-    readonly bufferStateDelayInMilliseconds?: number;
-    readonly hideControlsWhenPointerDoesntMove?: boolean | number;
-} & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;
-/**
- * @description Creates and renders a customizable video player with various interactive controls for a React application.
- * @see [Documentation](https://remotion.dev/docs/player/api)
- * @param {PlayerProps<Schema, Props>} props The properties for configuring the player, including video specifics and UI controls.
- * @param {MutableRefObject<PlayerRef>} ref Reference to the player for controlling playback, volume, and other aspects.
- * @returns {JSX.Element} The rendered video player component.
- */
-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

@@ -1,146 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { Composition, Internals } from 'remotion';
-import { PlayerEmitterProvider } from './EmitterProvider.js';
-import PlayerUI from './PlayerUI.js';
-import { PLAYER_COMP_ID, SharedPlayerContexts } from './SharedPlayerContext.js';
-import { PLAYER_CSS_CLASSNAME } from './player-css-classname.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';
-import { validateDefaultAndInputProps, validateDimension, validateDurationInFrames, validateFps, } from './validate.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, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, ...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 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`);
-    }
-    validateDimension(compositionHeight, 'compositionHeight', 'of the <Player /> component');
-    validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
-    validateDurationInFrames(durationInFrames, {
-        component: 'of the <Player/> component',
-        allowFloats: false,
-    });
-    validateFps(fps, 'as a prop of the <Player/> component', false);
-    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(() => {
-        setCurrentPlaybackRate(playbackRate);
-    }, [playbackRate]);
-    useImperativeHandle(ref, () => rootRef.current, []);
-    const timelineContextValue = useMemo(() => {
-        return {
-            frame,
-            playing,
-            rootId,
-            playbackRate: currentPlaybackRate,
-            imperativePlaying,
-            setPlaybackRate: (rate) => {
-                setCurrentPlaybackRate(rate);
-            },
-            audioAndVideoTags,
-        };
-    }, [frame, currentPlaybackRate, playing, rootId]);
-    const setTimelineContextValue = useMemo(() => {
-        return {
-            setFrame,
-            setPlaying,
-        };
-    }, [setFrame]);
-    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.makeDefaultPreviewCSS(`.${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, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, children: _jsx(Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: _jsx(PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: _jsx(PlayerUI, { 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, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove }) }) }) }) }));
-};
-const forward = forwardRef;
-/**
- * @description Creates and renders a customizable video player with various interactive controls for a React application.
- * @see [Documentation](https://remotion.dev/docs/player/api)
- * @param {PlayerProps<Schema, Props>} props The properties for configuring the player, including video specifics and UI controls.
- * @param {MutableRefObject<PlayerRef>} ref Reference to the player for controlling playback, volume, and other aspects.
- * @returns {JSX.Element} The rendered video player component.
- */
-export const Player = forward(PlayerFn);

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

@@ -1,47 +0,0 @@
-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;
-    isBuffering: boolean;
-}) => ReactNode | null;
-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<{
-    readonly fps: number;
-    readonly durationInFrames: number;
-    readonly showVolumeControls: boolean;
-    readonly player: ReturnType<typeof usePlayer>;
-    readonly onFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
-    readonly isFullscreen: boolean;
-    readonly allowFullscreen: boolean;
-    readonly onExitFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
-    readonly spaceKeyToPlayOrPause: boolean;
-    readonly onSeekEnd: () => void;
-    readonly onSeekStart: () => void;
-    readonly inFrame: number | null;
-    readonly outFrame: number | null;
-    readonly initiallyShowControls: number | boolean;
-    readonly canvasSize: Size | null;
-    readonly renderPlayPauseButton: RenderPlayPauseButton | null;
-    readonly renderFullscreenButton: RenderFullscreenButton | null;
-    readonly alwaysShowControls: boolean;
-    readonly showPlaybackRateControl: boolean | number[];
-    readonly containerRef: React.RefObject<HTMLDivElement>;
-    readonly buffering: boolean;
-    readonly hideControlsWhenPointerDoesntMove: boolean | number;
-    readonly onPointerUp: React.PointerEventHandler<HTMLDivElement> | undefined;
-    readonly onDoubleClick: MouseEventHandler<HTMLDivElement> | undefined;
-}>;

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

@@ -1,176 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Internals } from 'remotion';
-import { DefaultPlayPauseButton } from './DefaultPlayPauseButton.js';
-import { MediaVolumeSlider } from './MediaVolumeSlider.js';
-import { PlaybackrateControl, playerButtonStyle } from './PlaybackrateControl.js';
-import { PlayerSeekBar } from './PlayerSeekBar.js';
-import { formatTime } from './format-time.js';
-import { FullscreenIcon } from './icons.js';
-import { useHoverState } from './use-hover-state.js';
-import { X_PADDING, useVideoControlsResize, } from './use-video-controls-resize.js';
-const gradientSteps = [
-    0, 0.013, 0.049, 0.104, 0.175, 0.259, 0.352, 0.45, 0.55, 0.648, 0.741, 0.825,
-    0.896, 0.951, 0.987,
-];
-const gradientOpacities = [
-    0, 8.1, 15.5, 22.5, 29, 35.3, 41.2, 47.1, 52.9, 58.8, 64.7, 71, 77.5, 84.5,
-    91.9,
-];
-const globalGradientOpacity = 1 / 0.7;
-const containerStyle = {
-    boxSizing: 'border-box',
-    position: 'absolute',
-    bottom: 0,
-    width: '100%',
-    paddingTop: 40,
-    paddingBottom: 10,
-    backgroundImage: `linear-gradient(to bottom,${gradientSteps
-        .map((g, i) => {
-        return `hsla(0, 0%, 0%, ${g}) ${gradientOpacities[i] * globalGradientOpacity}%`;
-    })
-        .join(', ')}, hsl(0, 0%, 0%) 100%)`,
-    backgroundSize: 'auto 145px',
-    display: 'flex',
-    paddingRight: X_PADDING,
-    paddingLeft: X_PADDING,
-    flexDirection: 'column',
-    transition: 'opacity 0.3s',
-};
-const controlsRow = {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    userSelect: 'none',
-};
-const leftPartStyle = {
-    display: 'flex',
-    flexDirection: 'row',
-    userSelect: 'none',
-    alignItems: 'center',
-};
-const xSpacer = {
-    width: 12,
-};
-const ySpacer = {
-    height: 8,
-};
-const flex1 = {
-    flex: 1,
-};
-const fullscreen = {};
-export const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerUp, onDoubleClick, }) => {
-    var _a, _b;
-    const playButtonRef = useRef(null);
-    const frame = Internals.Timeline.useTimelinePosition();
-    const [supportsFullscreen, setSupportsFullscreen] = useState(false);
-    const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
-    const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
-        allowFullscreen,
-        playerWidth: (_a = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _a !== void 0 ? _a : 0,
-    });
-    const [shouldShowInitially, setInitiallyShowControls] = useState(() => {
-        if (typeof initiallyShowControls === 'boolean') {
-            return initiallyShowControls;
-        }
-        if (typeof initiallyShowControls === 'number') {
-            if (initiallyShowControls % 1 !== 0) {
-                throw new Error('initiallyShowControls must be an integer or a boolean');
-            }
-            if (Number.isNaN(initiallyShowControls)) {
-                throw new Error('initiallyShowControls must not be NaN');
-            }
-            if (!Number.isFinite(initiallyShowControls)) {
-                throw new Error('initiallyShowControls must be finite');
-            }
-            if (initiallyShowControls <= 0) {
-                throw new Error('initiallyShowControls must be a positive integer');
-            }
-            return initiallyShowControls;
-        }
-        throw new TypeError('initiallyShowControls must be a number or a boolean');
-    });
-    const containerCss = useMemo(() => {
-        // Hide if playing and mouse outside
-        const shouldShow = hovered || !player.playing || shouldShowInitially || alwaysShowControls;
-        return {
-            ...containerStyle,
-            opacity: Number(shouldShow),
-        };
-    }, [hovered, shouldShowInitially, player.playing, alwaysShowControls]);
-    useEffect(() => {
-        if (playButtonRef.current && spaceKeyToPlayOrPause) {
-            // This switches focus to play button when player.playing flag changes
-            playButtonRef.current.focus({
-                preventScroll: true,
-            });
-        }
-    }, [player.playing, spaceKeyToPlayOrPause]);
-    useEffect(() => {
-        var _a;
-        // Must be handled client-side to avoid SSR hydration mismatch
-        setSupportsFullscreen((_a = (typeof document !== 'undefined' &&
-            (document.fullscreenEnabled || document.webkitFullscreenEnabled))) !== null && _a !== void 0 ? _a : false);
-    }, []);
-    useEffect(() => {
-        if (shouldShowInitially === false) {
-            return;
-        }
-        const time = shouldShowInitially === true ? 2000 : shouldShowInitially;
-        const timeout = setTimeout(() => {
-            setInitiallyShowControls(false);
-        }, time);
-        return () => {
-            clearInterval(timeout);
-        };
-    }, [shouldShowInitially]);
-    const timeLabel = useMemo(() => {
-        return {
-            color: 'white',
-            fontFamily: 'sans-serif',
-            fontSize: 14,
-            maxWidth: maxTimeLabelWidth === null ? undefined : maxTimeLabelWidth,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-        };
-    }, [maxTimeLabelWidth]);
-    const playbackRates = useMemo(() => {
-        if (showPlaybackRateControl === true) {
-            return [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3];
-        }
-        if (Array.isArray(showPlaybackRateControl)) {
-            for (const rate of showPlaybackRateControl) {
-                if (typeof rate !== 'number') {
-                    throw new Error('Every item in showPlaybackRateControl must be a number');
-                }
-                if (rate <= 0) {
-                    throw new Error('Every item in showPlaybackRateControl must be positive');
-                }
-            }
-            return showPlaybackRateControl;
-        }
-        return null;
-    }, [showPlaybackRateControl]);
-    const ref = useRef(null);
-    const flexRef = useRef(null);
-    const onPointerUpIfContainer = useCallback((e) => {
-        // Only if pressing the container
-        if (e.target === ref.current || e.target === flexRef.current) {
-            onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
-        }
-    }, [onPointerUp]);
-    const onDoubleClickIfContainer = useCallback((e) => {
-        // Only if pressing the container
-        if (e.target === ref.current || e.target === flexRef.current) {
-            onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
-        }
-    }, [onDoubleClick]);
-    return (_jsxs("div", { ref: ref, style: containerCss, onPointerUp: onPointerUpIfContainer, onDoubleClick: onDoubleClickIfContainer, children: [_jsxs("div", { ref: flexRef, style: controlsRow, children: [_jsxs("div", { style: leftPartStyle, children: [_jsx("button", { ref: playButtonRef, type: "button", style: playerButtonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? (_jsx(DefaultPlayPauseButton, { buffering: buffering, playing: player.playing })) : ((_b = renderPlayPauseButton({
-                                    playing: player.playing,
-                                    isBuffering: buffering,
-                                })) !== null && _b !== void 0 ? _b : (_jsx(DefaultPlayPauseButton, { buffering: buffering, playing: player.playing }))) }), showVolumeControls ? (_jsxs(_Fragment, { children: [_jsx("div", { style: xSpacer }), _jsx(MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, _jsx("div", { style: xSpacer }), _jsxs("div", { style: timeLabel, children: [formatTime(frame / fps), " / ", formatTime(durationInFrames / fps)] }), _jsx("div", { style: xSpacer })] }), _jsx("div", { style: flex1 }), playbackRates && canvasSize && (_jsx(PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? (_jsx("div", { style: xSpacer })) : null, _jsx("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? (_jsx("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: playerButtonStyle, onClick: isFullscreen
-                                ? onExitFullscreenButtonClick
-                                : onFullscreenButtonClick, children: renderFullscreenButton === null ? (_jsx(FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), _jsx("div", { style: ySpacer }), _jsx(PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
-};

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export declare const PlayerSeekBar: React.FC<{
-    durationInFrames: number;
-    onSeekStart: () => void;
-    onSeekEnd: () => void;
-    inFrame: number | null;
-    outFrame: number | null;
-}>;