@remotion/player 4.0.110 → 4.0.112

package/dist/esm/index.mjs

@@ -1,9 +1,84 @@
 "use client";
-import React, { useState, useEffect, useRef, useContext, useCallback, useMemo, forwardRef, useImperativeHandle, Suspense, useLayoutEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Internals, random, interpolate, Composition } from 'remotion';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useState, useContext, useEffect, useRef, useCallback, useMemo, forwardRef, useImperativeHandle, Suspense, useLayoutEffect } from 'react';
 import { NoReactInternals } from 'remotion/no-react';
 
+const ICON_SIZE = 25;
+const fullscreenIconSize = 16;
+const PlayIcon = () => {
+    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" }) }));
+};
+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" })] }));
+};
+const FullscreenIcon = ({ isFullscreen, }) => {
+    const strokeWidth = 6;
+    const viewSize = 32;
+    const out = isFullscreen ? 0 : strokeWidth / 2;
+    const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
+    const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
+    return (jsxs("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: fullscreenIconSize, width: fullscreenIconSize, children: [jsx("path", { d: `
+				M ${out} ${inset}
+				L ${middleInset} ${middleInset}
+				L ${inset} ${out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: `
+				M ${viewSize - out} ${inset}
+				L ${viewSize - middleInset} ${middleInset}
+				L ${viewSize - inset} ${out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: `
+				M ${out} ${viewSize - inset}
+				L ${middleInset} ${viewSize - middleInset}
+				L ${inset} ${viewSize - out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: `
+				M ${viewSize - out} ${viewSize - inset}
+				L ${viewSize - middleInset} ${viewSize - middleInset}
+				L ${viewSize - inset} ${viewSize - out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })] }));
+};
+const VolumeOffIcon = () => {
+    return (jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", children: jsx("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "#fff" }) }));
+};
+const VolumeOnIcon = () => {
+    return (jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", children: jsx("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }) }));
+};
+
+const className = '__remotion_buffering_indicator';
+const remotionBufferingAnimation = '__remotion_buffering_animation';
+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',
+};
+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 }) }) })] }));
+};
+
 const calculatePlayerSize = ({ currentSize, width, height, compositionWidth, compositionHeight, }) => {
     if (width !== undefined && height === undefined) {
         return {
@@ -29,14 +104,8 @@ const calculatePlayerSize = ({ currentSize, width, height, compositionWidth, com
     };
 };
 
-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);
-};
 const calculateCanvasTransformation = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
-    const scale = calculateScale({
+    const scale = Internals.calculateScale({
         canvasSize,
         compositionHeight,
         compositionWidth,
@@ -124,6 +193,8 @@ class PlayerEmitter {
             fullscreenchange: [],
             volumechange: [],
             mutechange: [],
+            waiting: [],
+            resume: [],
         };
     }
     addEventListener(name, callback) {
@@ -183,6 +254,12 @@ class PlayerEmitter {
     dispatchMuteChange(event) {
         this.dispatchEvent('mutechange', event);
     }
+    dispatchWaiting(event) {
+        this.dispatchEvent('waiting', event);
+    }
+    dispatchResume(event) {
+        this.dispatchEvent('resume', event);
+    }
 }
 class ThumbnailEmitter {
     constructor() {
@@ -208,6 +285,34 @@ class ThumbnailEmitter {
     }
 }
 
+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 }));
+};
+
 const useHoverState = (ref) => {
     const [hovered, stetHovered] = useState(false);
     useEffect(() => {
@@ -297,6 +402,11 @@ 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 }));
@@ -403,6 +513,7 @@ const usePlayer = () => {
             isFirstFrame,
             getCurrentFrame: () => frameRef.current,
             isPlaying: () => imperativePlaying.current,
+            isBuffering: () => buffering.current,
             pauseAndReturnToPlayStart,
             hasPlayed,
             remotionInternal_currentFrameRef: frameRef,
@@ -418,8 +529,9 @@ const usePlayer = () => {
         seek,
         isFirstFrame,
         pauseAndReturnToPlayStart,
-        imperativePlaying,
         hasPlayed,
+        imperativePlaying,
+        buffering,
     ]);
     return returnValue;
 };
@@ -430,11 +542,28 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
     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;
@@ -444,7 +573,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         }
         let hasBeenStopped = false;
         let reqAnimFrameCall = null;
-        const startedTime = performance.now();
+        let startedTime = performance.now();
         let framesAdvanced = 0;
         const cancelQueuedFrame = () => {
             if (reqAnimFrameCall !== null) {
@@ -464,9 +593,10 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             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,
@@ -490,6 +620,18 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             }
         };
         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',
@@ -529,6 +671,8 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         moveToBeginningWhenEnded,
         isBackgroundedRef,
         frameRef,
+        buffering,
+        context,
     ]);
     useEffect(() => {
         const interval = setInterval(() => {
@@ -705,51 +849,22 @@ class ErrorBoundary extends React.Component {
     }
 }
 
+const DefaultPlayPauseButton = ({ playing, buffering }) => {
+    if (playing && buffering) {
+        return jsx(BufferingIndicator, { type: "player" });
+    }
+    if (playing) {
+        return jsx(PauseIcon, {});
+    }
+    return jsx(PlayIcon, {});
+};
+
 const formatTime = (timeInSeconds) => {
     const minutes = Math.floor(timeInSeconds / 60);
     const seconds = Math.floor(timeInSeconds - minutes * 60);
     return `${String(minutes)}:${String(seconds).padStart(2, '0')}`;
 };
 
-const ICON_SIZE = 25;
-const fullscreenIconSize = 16;
-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" }) }));
-};
-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" })] }));
-};
-const FullscreenIcon = ({ isFullscreen, }) => {
-    const strokeWidth = 6;
-    const viewSize = 32;
-    const out = isFullscreen ? 0 : strokeWidth / 2;
-    const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
-    const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
-    return (jsxs("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: fullscreenIconSize, width: fullscreenIconSize, children: [jsx("path", { d: `
-				M ${out} ${inset}
-				L ${middleInset} ${middleInset}
-				L ${inset} ${out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: `
-				M ${viewSize - out} ${inset}
-				L ${viewSize - middleInset} ${middleInset}
-				L ${viewSize - inset} ${out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: `
-				M ${out} ${viewSize - inset}
-				L ${middleInset} ${viewSize - middleInset}
-				L ${inset} ${viewSize - out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: `
-				M ${viewSize - out} ${viewSize - inset}
-				L ${viewSize - middleInset} ${viewSize - middleInset}
-				L ${viewSize - inset} ${viewSize - out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })] }));
-};
-const VolumeOffIcon = () => {
-    return (jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", children: jsx("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "#fff" }) }));
-};
-const VolumeOnIcon = () => {
-    return (jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", children: jsx("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }) }));
-};
-
 const BAR_HEIGHT$1 = 5;
 const KNOB_SIZE$1 = 12;
 const VOLUME_SLIDER_WIDTH = 100;
@@ -1271,9 +1386,8 @@ const flex1 = {
     flex: 1,
 };
 const fullscreen = {};
-const PlayPauseButton = ({ playing }) => playing ? jsx(PauseIcon, {}) : jsx(PlayIcon, {});
-const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, }) => {
-    var _a;
+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);
@@ -1364,7 +1478,10 @@ const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeContr
         }
         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 })] }));
 };
@@ -1457,7 +1574,7 @@ if (reactVersion$1 === '0') {
     throw new Error(`Version ${reactVersion$1} of "react" is not supported by Remotion`);
 }
 const doesReactVersionSupportSuspense$1 = parseInt(reactVersion$1, 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();
@@ -1593,6 +1710,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,
@@ -1720,9 +1875,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;
     }
@@ -1734,6 +1896,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             width: posterFillMode === 'player-size'
                 ? outerStyle.width
                 : config.width,
+            isBuffering: showBufferIndicator,
         })
         : null;
     if (poster === undefined) {
@@ -1744,13 +1907,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$1) {
         return (jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
     }
@@ -1822,7 +1986,7 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
             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 }) }) }) }) }) }) }) }) }) }) }));
 };
 
 const validateSingleFrame = (frame, variableName) => {
@@ -1926,7 +2090,7 @@ 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(() => {
@@ -1952,7 +2116,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);
@@ -2012,9 +2175,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]);
@@ -2046,9 +2206,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$1, { 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$1, { 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$1 = forwardRef;
 /**
@@ -2130,13 +2290,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 }));
     }
@@ -2195,7 +2362,8 @@ const PlayerInternals = {
     calculateCanvasTransformation,
     useHoverState,
     updateAllElementsSizes,
-    calculateScale,
+    PlayerEmitterProvider,
+    BufferingIndicator,
 };
 
 export { Player, PlayerInternals, Thumbnail };

package/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/player",
-  "version": "4.0.110",
+  "version": "4.0.112",
   "description": "Remotion Player",
   "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.110"
+    "remotion": "4.0.112"
   },
   "peerDependencies": {
     "react": ">=16.8.0",