@remotion/player 4.0.179 → 4.0.181

package/dist/cjs/Player.d.ts

@@ -9,7 +9,7 @@ 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> = {
+export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     readonly durationInFrames: number;
     readonly compositionWidth: number;
     readonly compositionHeight: number;
@@ -49,6 +49,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props> = {
     readonly hideControlsWhenPointerDoesntMove?: boolean | number;
     readonly overflowVisible?: boolean;
 } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
+export type PlayerPropsWithoutZod<Props extends Record<string, unknown>> = PlayerProps<AnyZodObject, 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.
@@ -57,4 +58,4 @@ export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) =>
  * @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;
+export declare const Player: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;

package/dist/cjs/PlayerControls.d.ts

@@ -9,16 +9,6 @@ export type RenderPlayPauseButton = (props: {
 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;

package/dist/cjs/PlayerControls.js

@@ -117,7 +117,9 @@ const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeContr
         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);
+            (document.fullscreenEnabled ||
+                // @ts-expect-error Types not defined
+                document.webkitFullscreenEnabled))) !== null && _a !== void 0 ? _a : false);
     }, []);
     (0, react_1.useEffect)(() => {
         if (shouldShowInitially === false) {

package/dist/cjs/PlayerUI.js

@@ -57,7 +57,9 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         if (typeof document === 'undefined') {
             return false;
         }
-        return Boolean(document.fullscreenEnabled || document.webkitFullscreenEnabled);
+        return Boolean(document.fullscreenEnabled ||
+            // @ts-expect-error Types not defined
+            document.webkitFullscreenEnabled);
     }, []);
     const player = (0, use_player_js_1.usePlayer)();
     (0, use_playback_js_1.usePlayback)({
@@ -81,6 +83,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         }
         const onFullscreenChange = () => {
             setIsFullscreen(document.fullscreenElement === current ||
+                // @ts-expect-error Types not defined
                 document.webkitFullscreenElement === current);
         };
         document.addEventListener('fullscreenchange', onFullscreenChange);
@@ -108,7 +111,9 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         if (!container.current) {
             throw new Error('No player ref found');
         }
+        // @ts-expect-error Types not defined
         if (container.current.webkitRequestFullScreen) {
+            // @ts-expect-error Types not defined
             container.current.webkitRequestFullScreen();
         }
         else {
@@ -116,7 +121,9 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         }
     }, [allowFullscreen, supportsFullScreen]);
     const exitFullscreen = (0, react_1.useCallback)(() => {
+        // @ts-expect-error Types not defined
         if (document.webkitExitFullscreen) {
+            // @ts-expect-error Types not defined
             document.webkitExitFullscreen();
         }
         else {
@@ -130,7 +137,11 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         }
         const fullscreenChange = () => {
             var _a;
-            const element = (_a = document.webkitFullscreenElement) !== null && _a !== void 0 ? _a : document.fullscreenElement;
+            const element = 
+            // @ts-expect-error Types not defined
+            (_a = document.webkitFullscreenElement) !== null && _a !== void 0 ? _a : 
+            // defined
+            document.fullscreenElement;
             if (element && element === container.current) {
                 player.emitter.dispatchFullscreenChange({
                     isFullscreen: true,

package/dist/cjs/Thumbnail.d.ts

@@ -4,21 +4,21 @@ import type { AnyZodObject } from 'zod';
 import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
-type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = PropsIfHasProps<Schema, Props> & CompProps<Props> & {
-    frameToDisplay: number;
-    style?: CSSProperties;
-    durationInFrames: number;
-    compositionWidth: number;
-    compositionHeight: number;
-    fps: number;
-    overflowVisible?: boolean;
-    errorFallback?: ErrorFallback;
-    renderLoading?: RenderLoading;
-    className?: string;
+export type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = PropsIfHasProps<Schema, Props> & CompProps<Props> & {
+    readonly frameToDisplay: number;
+    readonly style?: CSSProperties;
+    readonly durationInFrames: number;
+    readonly compositionWidth: number;
+    readonly compositionHeight: number;
+    readonly fps: number;
+    readonly overflowVisible?: boolean;
+    readonly errorFallback?: ErrorFallback;
+    readonly renderLoading?: RenderLoading;
+    readonly className?: string;
 };
+export type ThumbnailPropsWithoutZod<Props extends Record<string, unknown>> = ThumbnailProps<AnyZodObject, Props>;
 /**
  * @description A component which can be rendered in a regular React App (for example: Next.js, Vite) to display a single frame of a video.
  * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
  */
 export declare const Thumbnail: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: ThumbnailProps<Schema, Props> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
-export {};

package/dist/cjs/error-boundary.d.ts

@@ -15,5 +15,5 @@ export declare class ErrorBoundary extends React.Component<{
         hasError: Error;
     };
     componentDidCatch(error: Error): void;
-    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }

package/dist/cjs/index.d.ts

@@ -3,10 +3,11 @@ import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
 import { PlayerEmitter } from './event-emitter.js';
 export type { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods.js';
 export { Player } from './Player.js';
-export type { PlayerProps } from './Player.js';
+export type { PlayerProps, PlayerPropsWithoutZod } from './Player.js';
 export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls.js';
 export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI.js';
 export { Thumbnail } from './Thumbnail.js';
+export type { ThumbnailProps, ThumbnailPropsWithoutZod } from './Thumbnail.js';
 export type { Size } from './utils/use-element-size.js';
 export type { CallbackListener, PlayerEventTypes as EventTypes };
 export declare const PlayerInternals: {

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.179",
+  "version": "4.0.181",
   "description": "React component for embedding a Remotion preview into your app",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "remotion": "4.0.179"
+    "remotion": "4.0.181"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const bufferingIndicatorStrokeWidth = 3;
-export declare const BufferingIndicator: React.FC<{
-    type: 'player' | 'studio';
-}>;

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

@@ -1,38 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ICON_SIZE } from './icons.js';
-const className = '__remotion_buffering_indicator';
-const remotionBufferingAnimation = '__remotion_buffering_animation';
-export const bufferingIndicatorStrokeWidth = 3;
-const playerStyle = {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    overflow: 'hidden',
-    lineHeight: 'normal',
-    fontSize: 'inherit',
-};
-const studioStyle = {
-    width: 14,
-    height: 14,
-    overflow: 'hidden',
-    lineHeight: 'normal',
-    fontSize: 'inherit',
-};
-export const BufferingIndicator = ({ type }) => {
-    const style = type === 'player' ? playerStyle : studioStyle;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { type: "text/css", children: `
-				@keyframes ${remotionBufferingAnimation} {
-          0% {
-            rotate: 0deg;
-          }
-          100% {
-            rotate: 360deg;
-          }
-        }
-        
-        .${className} {
-            animation: ${remotionBufferingAnimation} 1s linear infinite;
-        }        
-			` }), _jsx("div", { style: style, children: _jsx("svg", { viewBox: type === 'player' ? '0 0 22 22' : '0 0 18 18', style: style, className: className, children: _jsx("path", { d: type === 'player'
-                            ? 'M 11 4 A 7 7 0 0 1 15.1145 16.66312'
-                            : 'M 9 2 A 7 7 0 0 1 13.1145 14.66312', stroke: "white", strokeLinecap: "round", fill: "none", strokeWidth: 3 }) }) })] }));
-};

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const DefaultPlayPauseButton: React.FC<{
-    playing: boolean;
-    buffering: boolean;
-}>;

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

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BufferingIndicator } from './BufferingIndicator.js';
-import { PauseIcon, PlayIcon } from './icons.js';
-export const DefaultPlayPauseButton = ({ playing, buffering }) => {
-    if (playing && buffering) {
-        return _jsx(BufferingIndicator, { type: "player" });
-    }
-    if (playing) {
-        return _jsx(PauseIcon, {});
-    }
-    return _jsx(PlayIcon, {});
-};

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const PlayerEmitterProvider: React.FC<{
-    children: React.ReactNode;
-    currentPlaybackRate: number | null;
-}>;

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

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useState } from 'react';
-import { Internals } from 'remotion';
-import { PlayerEventEmitterContext } from './emitter-context.js';
-import { PlayerEmitter } from './event-emitter.js';
-import { useBufferStateEmitter } from './use-buffer-state-emitter.js';
-export const PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-    const [emitter] = useState(() => new PlayerEmitter());
-    const bufferManager = useContext(Internals.BufferingContextReact);
-    if (!bufferManager) {
-        throw new Error('BufferingContextReact not found');
-    }
-    useEffect(() => {
-        if (currentPlaybackRate) {
-            emitter.dispatchRateChange(currentPlaybackRate);
-        }
-    }, [emitter, currentPlaybackRate]);
-    useBufferStateEmitter(emitter);
-    return (_jsx(PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
-};

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

@@ -1,5 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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, false);
-    // 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 = useCallback((e) => {
-        setMediaVolume(parseFloat(e.target.value));
-    }, [setMediaVolume]);
-    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 isVolume0 = mediaVolume === 0;
-    const onClick = useCallback(() => {
-        if (isVolume0) {
-            setMediaVolume(1);
-            setMediaMuted(false);
-            return;
-        }
-        setMediaMuted((mute) => !mute);
-    }, [isVolume0, 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 sliderContainer = useMemo(() => {
-        const paddingLeft = 5;
-        const common = {
-            paddingLeft,
-            height: ICON_SIZE,
-            width: VOLUME_SLIDER_WIDTH,
-        };
-        if (displayVerticalVolumeSlider) {
-            return {
-                ...common,
-                position: 'absolute',
-                transform: `rotate(-90deg) translateX(${VOLUME_SLIDER_WIDTH / 2 + ICON_SIZE / 2}px)`,
-            };
-        }
-        return {
-            ...common,
-        };
-    }, [displayVerticalVolumeSlider]);
-    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,
-                bottom: ICON_SIZE + VOLUME_SLIDER_WIDTH / 2,
-            };
-        }
-        return commonStyle;
-    }, [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 && !Internals.isIosSafari() ? (_jsx("div", { style: sliderContainer, children: _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

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { Size } from './utils/use-element-size.js';
-export declare const Checkmark: () => import("react/jsx-runtime.js").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

@@ -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,56 +0,0 @@
-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 { PosterFillMode, 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;
-    showPosterWhenBuffering?: boolean;
-    inFrame?: number | null;
-    outFrame?: number | null;
-    initiallyShowControls?: number | boolean;
-    renderPlayPauseButton?: RenderPlayPauseButton;
-    renderFullscreenButton?: RenderFullscreenButton;
-    alwaysShowControls?: boolean;
-    schema?: Schema;
-    initiallyMuted?: boolean;
-    showPlaybackRateControl?: boolean | number[];
-    posterFillMode?: PosterFillMode;
-    bufferStateDelayInMilliseconds?: number;
-    hideControlsWhenPointerDoesntMove?: 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;