@remotion/player 4.0.110 → 4.0.112

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/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/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

@@ -5,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: {
@@ -25,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, }: {
@@ -53,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,
 };

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-playback.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
-import { useEffect, useRef } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import { Internals } from 'remotion';
 import { calculateNextFrame } from './calculate-next-frame.js';
 import { useIsBackgrounded } from './is-backgrounded.js';
@@ -9,11 +9,28 @@ export const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFr
     const frame = Internals.Timeline.useTimelinePosition();
     const { playing, pause, emitter } = usePlayer();
     const setFrame = Internals.Timeline.useTimelineSetFrame();
+    const buffering = useRef(null);
     // requestAnimationFrame() does not work if the tab is not active.
     // This means that audio will keep playing even if it has ended.
     // In that case, we use setTimeout() instead.
     const isBackgroundedRef = useIsBackgrounded();
     const lastTimeUpdateEvent = useRef(null);
+    const context = useContext(Internals.BufferingContextReact);
+    if (!context) {
+        throw new Error('Missing the buffering context. Most likely you have a Remotion version mismatch.');
+    }
+    useEffect(() => {
+        const onBufferClear = context.listenForBuffering(() => {
+            buffering.current = performance.now();
+        });
+        const onResumeClear = context.listenForResume(() => {
+            buffering.current = null;
+        });
+        return () => {
+            onBufferClear.remove();
+            onResumeClear.remove();
+        };
+    }, [context]);
     useEffect(() => {
         if (!config) {
             return;
@@ -23,7 +40,7 @@ export const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFr
         }
         let hasBeenStopped = false;
         let reqAnimFrameCall = null;
-        const startedTime = performance.now();
+        let startedTime = performance.now();
         let framesAdvanced = 0;
         const cancelQueuedFrame = () => {
             if (reqAnimFrameCall !== null) {
@@ -43,9 +60,10 @@ export const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFr
             const time = performance.now() - startedTime;
             const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
             const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
+            const currentFrame = frameRef.current;
             const { nextFrame, framesToAdvance, hasEnded } = calculateNextFrame({
                 time,
-                currentFrame: frameRef.current,
+                currentFrame,
                 playbackSpeed: playbackRate,
                 fps: config.fps,
                 actualFirstFrame,
@@ -69,6 +87,18 @@ export const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFr
             }
         };
         const queueNextFrame = () => {
+            if (buffering.current) {
+                const stopListening = context.listenForResume(() => {
+                    stopListening.remove();
+                    if (hasBeenStopped) {
+                        return;
+                    }
+                    startedTime = performance.now();
+                    framesAdvanced = 0;
+                    callback();
+                });
+                return;
+            }
             if (isBackgroundedRef.current) {
                 reqAnimFrameCall = {
                     type: 'timeout',
@@ -108,6 +138,8 @@ export const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFr
         moveToBeginningWhenEnded,
         isBackgroundedRef,
         frameRef,
+        buffering,
+        context,
     ]);
     useEffect(() => {
         const interval = setInterval(() => {

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

@@ -14,6 +14,7 @@ type UsePlayerMethods = {
     getCurrentFrame: () => number;
     isPlaying: () => boolean;
     hasPlayed: boolean;
+    isBuffering: () => boolean;
     /**
      * @deprecated Remotion internal API
      */

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

@@ -22,6 +22,11 @@ export const usePlayer = () => {
     if (!emitter) {
         throw new TypeError('Expected Player event emitter context');
     }
+    const bufferingContext = useContext(Internals.BufferingContextReact);
+    if (!bufferingContext) {
+        throw new Error('Missing the buffering context. Most likely you have a Remotion version mismatch.');
+    }
+    const { buffering } = bufferingContext;
     const seek = useCallback((newFrame) => {
         if (video === null || video === void 0 ? void 0 : video.id) {
             setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
@@ -128,6 +133,7 @@ export const usePlayer = () => {
             isFirstFrame,
             getCurrentFrame: () => frameRef.current,
             isPlaying: () => imperativePlaying.current,
+            isBuffering: () => buffering.current,
             pauseAndReturnToPlayStart,
             hasPlayed,
             remotionInternal_currentFrameRef: frameRef,
@@ -143,8 +149,9 @@ export const usePlayer = () => {
         seek,
         isFirstFrame,
         pauseAndReturnToPlayStart,
-        imperativePlaying,
         hasPlayed,
+        imperativePlaying,
+        buffering,
     ]);
     return returnValue;
 };