@remotion/player 4.0.109 → 4.0.111

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+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';
+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]);
+    useEffect(() => {
+        const clear1 = bufferManager.listenForBuffering(() => {
+            bufferManager.buffering.current = true;
+            emitter.dispatchWaiting({});
+        });
+        const clear2 = bufferManager.listenForResume(() => {
+            bufferManager.buffering.current = false;
+            emitter.dispatchResume({});
+        });
+        return () => {
+            clear1.remove();
+            clear2.remove();
+        };
+    }, [bufferManager, emitter]);
+    return (_jsx(PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
+};

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

@@ -34,6 +34,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props> = {
     showPosterWhenPaused?: boolean;
     showPosterWhenEnded?: boolean;
     showPosterWhenUnplayed?: boolean;
+    showPosterWhenBuffering?: boolean;
     inFrame?: number | null;
     outFrame?: number | null;
     initiallyShowControls?: number | boolean;
@@ -44,6 +45,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props> = {
     initiallyMuted?: boolean;
     showPlaybackRateControl?: boolean | number[];
     posterFillMode?: PosterFillMode;
+    bufferStateDelayInMilliseconds?: number;
 } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
 export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;
 /**

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

@@ -1,8 +1,7 @@
 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 { PlayerEmitterProvider } from './EmitterProvider.js';
 import { PLAYER_CSS_CLASSNAME } from './player-css-classname.js';
 import PlayerUI from './PlayerUI.js';
 import { PLAYER_COMP_ID, SharedPlayerContexts } from './SharedPlayerContext.js';
@@ -16,7 +15,7 @@ export const componentOrNullIfLazy = (props) => {
     }
     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, posterFillMode = 'player-size', ...componentProps }, ref) => {
+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, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useLayoutEffect(() => {
@@ -42,7 +41,6 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }));
     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);
@@ -102,9 +100,6 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
     }
     validatePlaybackRate(currentPlaybackRate);
-    useEffect(() => {
-        emitter.dispatchRateChange(currentPlaybackRate);
-    }, [emitter, currentPlaybackRate]);
     useEffect(() => {
         setCurrentPlaybackRate(playbackRate);
     }, [playbackRate]);
@@ -136,9 +131,9 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         }, []);
     }
     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(PlayerEventEmitterContext.Provider, { value: emitter, 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'
+    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), 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 }) }) }) }) }));
+                            : 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 }) }) }) }) }));
 };
 const forward = forwardRef;
 /**

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

@@ -4,7 +4,8 @@ import type { usePlayer } from './use-player.js';
 import type { Size } from './utils/use-element-size.js';
 export type RenderPlayPauseButton = (props: {
     playing: boolean;
-}) => ReactNode;
+    isBuffering: boolean;
+}) => ReactNode | null;
 export type RenderFullscreenButton = (props: {
     isFullscreen: boolean;
 }) => ReactNode;
@@ -39,4 +40,5 @@ export declare const Controls: React.FC<{
     alwaysShowControls: boolean;
     showPlaybackRateControl: boolean | number[];
     containerRef: React.RefObject<HTMLDivElement>;
+    buffering: boolean;
 }>;

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Internals } from 'remotion';
+import { DefaultPlayPauseButton } from './DefaultPlayPauseButton.js';
 import { formatTime } from './format-time.js';
-import { FullscreenIcon, PauseIcon, PlayIcon } from './icons.js';
+import { FullscreenIcon } from './icons.js';
 import { MediaVolumeSlider } from './MediaVolumeSlider.js';
 import { PlaybackrateControl, playerButtonStyle } from './PlaybackrateControl.js';
 import { PlayerSeekBar } from './PlayerSeekBar.js';
@@ -60,9 +61,8 @@ const flex1 = {
     flex: 1,
 };
 const fullscreen = {};
-const PlayPauseButton = ({ playing }) => playing ? _jsx(PauseIcon, {}) : _jsx(PlayIcon, {});
-export const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, }) => {
-    var _a;
+export const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, }) => {
+    var _a, _b;
     const playButtonRef = useRef(null);
     const frame = Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = useState(false);
@@ -153,7 +153,10 @@ export const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolu
         }
         return null;
     }, [showPlaybackRateControl]);
-    return (_jsxs("div", { style: containerCss, children: [_jsxs("div", { 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(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ 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
+    return (_jsxs("div", { style: containerCss, children: [_jsxs("div", { 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.js

@@ -51,16 +51,14 @@ export const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFram
     const [dragging, setDragging] = useState({
         dragging: false,
     });
-    const left = size ? size.left : null;
     const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
     const onPointerDown = useCallback((e) => {
-        if (left === null) {
-            throw new Error('Player has no size');
-        }
+        var _a;
         if (e.button !== 0) {
             return;
         }
-        const _frame = getFrameFromX(e.clientX - left, durationInFrames, width);
+        const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
+        const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, width);
         pause();
         seek(_frame);
         setDragging({
@@ -68,7 +66,7 @@ export const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFram
             wasPlaying: playing,
         });
         onSeekStart();
-    }, [left, durationInFrames, width, pause, seek, playing, onSeekStart]);
+    }, [durationInFrames, width, pause, seek, playing, onSeekStart]);
     const onPointerMove = useCallback((e) => {
         var _a;
         if (!size) {
@@ -77,7 +75,8 @@ export const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFram
         if (!dragging.dragging) {
             return;
         }
-        const _frame = getFrameFromX(e.clientX - ((_a = size === null || size === void 0 ? void 0 : size.left) !== null && _a !== void 0 ? _a : 0), durationInFrames, size.width);
+        const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
+        const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
         seek(_frame);
     }, [dragging.dragging, durationInFrames, seek, size]);
     const onPointerUp = useCallback(() => {

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

@@ -7,6 +7,7 @@ export type ErrorFallback = (info: {
 export type RenderLoading = (canvas: {
     height: number;
     width: number;
+    isBuffering: boolean;
 }) => React.ReactNode;
 export type RenderPoster = RenderLoading;
 export type PosterFillMode = 'player-size' | 'composition-size';
@@ -30,6 +31,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     showPosterWhenPaused: boolean;
     showPosterWhenEnded: boolean;
     showPosterWhenUnplayed: boolean;
+    showPosterWhenBuffering: boolean;
     inFrame: number | null;
     outFrame: number | null;
     initiallyShowControls: number | boolean;
@@ -38,5 +40,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     alwaysShowControls: boolean;
     showPlaybackRateControl: boolean | number[];
     posterFillMode: PosterFillMode;
+    bufferStateDelayInMilliseconds: number;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

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

@@ -15,7 +15,7 @@ if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
-const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, showPlaybackRateControl, posterFillMode, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, }, ref) => {
     var _a, _b, _c;
     const config = Internals.useUnsafeVideoConfig();
     const video = Internals.useVideo();
@@ -151,6 +151,44 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             isMuted,
         });
     }, [player.emitter, isMuted]);
+    const [showBufferIndicator, setShowBufferState] = useState(false);
+    useEffect(() => {
+        let timeout = null;
+        let stopped = false;
+        const onBuffer = () => {
+            requestAnimationFrame(() => {
+                if (bufferStateDelayInMilliseconds === 0) {
+                    setShowBufferState(true);
+                }
+                else {
+                    timeout = setTimeout(() => {
+                        if (!stopped) {
+                            setShowBufferState(true);
+                        }
+                    }, bufferStateDelayInMilliseconds);
+                }
+            });
+        };
+        const onResume = () => {
+            requestAnimationFrame(() => {
+                setShowBufferState(false);
+                if (timeout) {
+                    clearTimeout(timeout);
+                }
+            });
+        };
+        player.emitter.addEventListener('waiting', onBuffer);
+        player.emitter.addEventListener('resume', onResume);
+        return () => {
+            player.emitter.removeEventListener('waiting', onBuffer);
+            player.emitter.removeEventListener('resume', onResume);
+            setShowBufferState(false);
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+            stopped = true;
+        };
+    }, [bufferStateDelayInMilliseconds, player.emitter]);
     useImperativeHandle(ref, () => {
         const methods = {
             play: player.play,
@@ -278,9 +316,16 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             ? renderLoading({
                 height: outerStyle.height,
                 width: outerStyle.width,
+                isBuffering: showBufferIndicator,
             })
             : null;
-    }, [outerStyle.height, outerStyle.width, renderLoading]);
+    }, [outerStyle.height, outerStyle.width, renderLoading, showBufferIndicator]);
+    const currentScale = useMemo(() => {
+        return {
+            type: 'scale',
+            scale,
+        };
+    }, [scale]);
     if (!config) {
         return null;
     }
@@ -292,6 +337,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             width: posterFillMode === 'player-size'
                 ? outerStyle.width
                 : config.width,
+            isBuffering: showBufferIndicator,
         })
         : null;
     if (poster === undefined) {
@@ -302,13 +348,14 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             showPosterWhenPaused && !player.isPlaying() && !seeking,
             showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
             showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
+            showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
         ].some(Boolean);
     const { left, top, width, height, ...outerWithoutScale } = outer;
-    const content = (_jsxs(_Fragment, { children: [_jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: _jsxs("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: [VideoComponent ? (_jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: _jsx(Internals.ClipComposition, { children: _jsx(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.props) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) })) : null, shouldShowPoster && posterFillMode === 'composition-size' ? (_jsx("div", { style: {
+    const content = (_jsxs(_Fragment, { children: [_jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: _jsxs("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: [VideoComponent ? (_jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: _jsx(Internals.ClipComposition, { children: _jsx(Internals.CurrentScaleContext.Provider, { value: currentScale, children: _jsx(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.props) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) }) })) : null, shouldShowPoster && posterFillMode === 'composition-size' ? (_jsx("div", { style: {
                                 ...outerWithoutScale,
                                 width: config.width,
                                 height: config.height,
-                            }, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), shouldShowPoster && posterFillMode === 'player-size' ? (_jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (_jsx(Controls, { fps: config.fps, durationInFrames: config.durationInFrames, player: player, containerRef: container, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl })) : null] }));
+                            }, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), shouldShowPoster && posterFillMode === 'player-size' ? (_jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (_jsx(Controls, { fps: config.fps, durationInFrames: config.durationInFrames, player: player, containerRef: container, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, buffering: showBufferIndicator })) : null] }));
     if (IS_NODE && !doesReactVersionSupportSuspense) {
         return (_jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

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

@@ -51,5 +51,5 @@ export const SharedPlayerContexts = ({ children, timelineContext, fps, compositi
             setMediaVolume: setMediaVolumeAndPersist,
         };
     }, [setMediaVolumeAndPersist]);
-    return (_jsx(Internals.CanUseRemotionHooksProvider, { children: _jsx(Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: _jsx(Internals.CompositionManager.Provider, { value: compositionManagerContext, children: _jsx(Internals.ResolveCompositionConfig, { children: _jsx(Internals.PrefetchProvider, { children: _jsx(Internals.DurationsContextProvider, { children: _jsx(Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: _jsx(Internals.NativeLayersProvider, { children: _jsx(Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: _jsx(Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, component: component, children: children }) }) }) }) }) }) }) }) }) }));
+    return (_jsx(Internals.CanUseRemotionHooksProvider, { children: _jsx(Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: _jsx(Internals.CompositionManager.Provider, { value: compositionManagerContext, children: _jsx(Internals.ResolveCompositionConfig, { children: _jsx(Internals.PrefetchProvider, { children: _jsx(Internals.DurationsContextProvider, { children: _jsx(Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: _jsx(Internals.NativeLayersProvider, { children: _jsx(Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: _jsx(Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, component: component, children: _jsx(Internals.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }));
 };

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

@@ -67,13 +67,20 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
             ? renderLoading({
                 height: outerStyle.height,
                 width: outerStyle.width,
+                isBuffering: false,
             })
             : null;
     }, [outerStyle.height, outerStyle.width, renderLoading]);
+    const currentScaleContext = useMemo(() => {
+        return {
+            type: 'scale',
+            scale,
+        };
+    }, [scale]);
     if (!config) {
         return null;
     }
-    const content = (_jsx("div", { style: outer, children: _jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (_jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: _jsx(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.props) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : null }) }));
+    const content = (_jsx("div", { style: outer, children: _jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (_jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: _jsx(Internals.CurrentScaleContext.Provider, { value: currentScaleContext, children: _jsx(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.props) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) })) : null }) }));
     if (IS_NODE && !doesReactVersionSupportSuspense) {
         return (_jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.d.ts

@@ -1,12 +1,5 @@
-import type { VideoConfig } from 'remotion';
-import type { PreviewSize } from './utils/preview-size.js';
+import type { PreviewSize, VideoConfig } from 'remotion';
 import type { Size } from './utils/use-element-size.js';
-export declare const calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
-    previewSize: PreviewSize['size'];
-    compositionWidth: number;
-    compositionHeight: number;
-    canvasSize: Size;
-}) => number;
 type Layout = {
     centerX: number;
     centerY: number;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.js

@@ -1,12 +1,7 @@
+import { Internals } from 'remotion';
 import { calculatePlayerSize } from './utils/calculate-player-size.js';
-export const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
-    const heightRatio = canvasSize.height / compositionHeight;
-    const widthRatio = canvasSize.width / compositionWidth;
-    const ratio = Math.min(heightRatio, widthRatio);
-    return previewSize === 'auto' ? ratio : Number(previewSize);
-};
 export const calculateCanvasTransformation = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
-    const scale = calculateScale({
+    const scale = Internals.calculateScale({
         canvasSize,
         compositionHeight,
         compositionWidth,

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/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/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.d.ts

@@ -25,6 +25,8 @@ type FullscreenChangeEventPayload = {
 type MuteChangeEventPayload = {
     isMuted: boolean;
 };
+type WaitingEventPayload = {};
+type ResumeEventPayload = {};
 type PlayerStateEventMap = {
     seeked: SeekPayload;
     pause: undefined;
@@ -38,6 +40,8 @@ type PlayerStateEventMap = {
     frameupdate: FrameUpdateEventPayload;
     fullscreenchange: FullscreenChangeEventPayload;
     mutechange: MuteChangeEventPayload;
+    waiting: WaitingEventPayload;
+    resume: ResumeEventPayload;
 };
 type ThumbnailStateEventMap = {
     error: ErrorPayload;
@@ -70,6 +74,8 @@ export declare class PlayerEmitter {
     dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
     dispatchFullscreenChange(event: FullscreenChangeEventPayload): void;
     dispatchMuteChange(event: MuteChangeEventPayload): void;
+    dispatchWaiting(event: WaitingEventPayload): void;
+    dispatchResume(event: ResumeEventPayload): void;
 }
 export declare class ThumbnailEmitter {
     listeners: ThumbnailListeners;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.js

@@ -13,6 +13,8 @@ export class PlayerEmitter {
             fullscreenchange: [],
             volumechange: [],
             mutechange: [],
+            waiting: [],
+            resume: [],
         };
     }
     addEventListener(name, callback) {
@@ -72,6 +74,12 @@ export class PlayerEmitter {
     dispatchMuteChange(event) {
         this.dispatchEvent('mutechange', event);
     }
+    dispatchWaiting(event) {
+        this.dispatchEvent('waiting', event);
+    }
+    dispatchResume(event) {
+        this.dispatchEvent('resume', event);
+    }
 }
 export class ThumbnailEmitter {
     constructor() {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ICON_SIZE = 25;
 export const fullscreenIconSize = 16;
 export const PlayIcon = () => {
-    return (_jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z", fill: "white", stroke: "white", strokeWidth: "6.25", strokeLinejoin: "round" }) }));
+    return (_jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z", fill: "white", stroke: "white", strokeWidth: "6.25", strokeLinejoin: "round" }) }));
 };
 export const PauseIcon = () => {
     return (_jsxs("svg", { viewBox: "0 0 100 100", width: ICON_SIZE, height: ICON_SIZE, children: [_jsx("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), _jsx("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })] }));

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
 import { PlayerEmitter } from './event-emitter.js';
 export { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods.js';
@@ -6,7 +5,6 @@ export { Player, PlayerProps } from './Player.js';
 export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls.js';
 export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI.js';
 export { Thumbnail } from './Thumbnail.js';
-export { PreviewSize, Translation } from './utils/preview-size.js';
 export { Size } from './utils/use-element-size.js';
 export type { CallbackListener, PlayerEventTypes as EventTypes };
 export declare const PlayerInternals: {
@@ -26,6 +24,7 @@ export declare const PlayerInternals: {
         getCurrentFrame: () => number;
         isPlaying: () => boolean;
         hasPlayed: boolean;
+        isBuffering: () => boolean;
         remotionInternal_currentFrameRef: import("react").MutableRefObject<number>;
     };
     usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, }: {
@@ -54,10 +53,11 @@ export declare const PlayerInternals: {
     };
     useHoverState: (ref: import("react").RefObject<HTMLDivElement>) => boolean;
     updateAllElementsSizes: () => void;
-    calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
-        previewSize: number | "auto";
-        compositionWidth: number;
-        compositionHeight: number;
-        canvasSize: import("./utils/use-element-size.js").Size;
-    }) => number;
+    PlayerEmitterProvider: import("react").FC<{
+        children: import("react").ReactNode;
+        currentPlaybackRate: number | null;
+    }>;
+    BufferingIndicator: import("react").FC<{
+        type: "player" | "studio";
+    }>;
 };

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

@@ -1,5 +1,7 @@
-import { calculateCanvasTransformation, calculateScale, } from './calculate-scale.js';
+import { BufferingIndicator } from './BufferingIndicator.js';
+import { calculateCanvasTransformation } from './calculate-scale.js';
 import { PlayerEventEmitterContext } from './emitter-context.js';
+import { PlayerEmitterProvider } from './EmitterProvider.js';
 import { PlayerEmitter } from './event-emitter.js';
 import { useHoverState } from './use-hover-state.js';
 import { usePlayback } from './use-playback.js';
@@ -16,5 +18,6 @@ export const PlayerInternals = {
     calculateCanvasTransformation,
     useHoverState,
     updateAllElementsSizes,
-    calculateScale,
+    PlayerEmitterProvider,
+    BufferingIndicator,
 };