@remotion/player 4.0.289 → 4.0.291

package/dist/cjs/Player.d.ts

@@ -38,6 +38,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
     readonly showPosterWhenEnded?: boolean;
     readonly showPosterWhenUnplayed?: boolean;
     readonly showPosterWhenBuffering?: boolean;
+    readonly showPosterWhenBufferingAndPaused?: boolean;
     readonly inFrame?: number | null;
     readonly outFrame?: number | null;
     readonly initiallyShowControls?: number | boolean;

package/dist/cjs/Player.js

@@ -23,7 +23,7 @@ const componentOrNullIfLazy = (props) => {
     return null;
 };
 exports.componentOrNullIfLazy = componentOrNullIfLazy;
-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, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, ...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, showPosterWhenBufferingAndPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -159,7 +159,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }, [passedBrowserMediaControlsBehavior]);
     return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: (0, jsx_runtime_1.jsx)(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
-                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined, noSuspense: Boolean(noSuspense) }) }) }) }) }));
+                            : 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), showPosterWhenBufferingAndPaused: Boolean(showPosterWhenBufferingAndPaused), 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, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined, noSuspense: Boolean(noSuspense) }) }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /*

package/dist/cjs/PlayerUI.d.ts

@@ -35,6 +35,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly showPosterWhenEnded: boolean;
     readonly showPosterWhenUnplayed: boolean;
     readonly showPosterWhenBuffering: boolean;
+    readonly showPosterWhenBufferingAndPaused: boolean;
     readonly inFrame: number | null;
     readonly outFrame: number | null;
     readonly initiallyShowControls: number | boolean;

package/dist/cjs/PlayerUI.js

@@ -51,7 +51,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, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, browserMediaControlsBehavior, overrideInternalClassName, noSuspense, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, showPosterWhenBufferingAndPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, browserMediaControlsBehavior, overrideInternalClassName, noSuspense, }, ref) => {
     var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -426,6 +426,9 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
             showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
             showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
+            showPosterWhenBufferingAndPaused &&
+                showBufferIndicator &&
+                !player.isPlaying(),
         ].some(Boolean);
     const { left, top, width, height, ...outerWithoutScale } = outer;
     const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: [(0, jsx_runtime_1.jsxs)("div", { style: containerStyle, className: (0, player_css_classname_js_1.playerCssClassname)(overrideInternalClassName), children: [VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CurrentScaleContext.Provider, { value: currentScale, children: (0, jsx_runtime_1.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' ? ((0, jsx_runtime_1.jsx)("div", { style: {

package/dist/cjs/use-playback.js

@@ -13,7 +13,6 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const { playing, pause, emitter } = (0, use_player_js_1.usePlayer)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
-    const buffering = (0, react_1.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.
@@ -29,18 +28,6 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         videoConfig: config,
     });
     //	complete code for media session API
-    (0, react_1.useEffect)(() => {
-        const onBufferClear = context.listenForBuffering(() => {
-            buffering.current = performance.now();
-        });
-        const onResumeClear = context.listenForResume(() => {
-            buffering.current = null;
-        });
-        return () => {
-            onBufferClear.remove();
-            onResumeClear.remove();
-        };
-    }, [context]);
     (0, react_1.useEffect)(() => {
         if (!config) {
             return;
@@ -67,6 +54,9 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             cancelQueuedFrame();
         };
         const callback = () => {
+            if (hasBeenStopped) {
+                return;
+            }
             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;
@@ -92,20 +82,15 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                 emitter.dispatchEnded();
                 return;
             }
-            if (!hasBeenStopped) {
-                queueNextFrame();
-            }
+            queueNextFrame();
         };
         const queueNextFrame = () => {
-            if (buffering.current) {
+            if (context.buffering.current) {
                 const stopListening = context.listenForResume(() => {
                     stopListening.remove();
-                    if (hasBeenStopped) {
-                        return;
-                    }
                     startedTime = performance.now();
                     framesAdvanced = 0;
-                    callback();
+                    queueNextFrame();
                 });
                 return;
             }
@@ -115,10 +100,9 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                     // Note: Most likely, this will not be 1000 / fps, but the browser will throttle it to ~1/sec.
                     id: setTimeout(callback, 1000 / config.fps),
                 };
+                return;
             }
-            else {
-                reqAnimFrameCall = { type: 'raf', id: requestAnimationFrame(callback) };
-            }
+            reqAnimFrameCall = { type: 'raf', id: requestAnimationFrame(callback) };
         };
         queueNextFrame();
         const onVisibilityChange = () => {
@@ -148,7 +132,6 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         moveToBeginningWhenEnded,
         isBackgroundedRef,
         getCurrentFrame,
-        buffering,
         context,
     ]);
     (0, react_1.useEffect)(() => {

package/dist/esm/index.mjs

@@ -881,7 +881,6 @@ var usePlayback = ({
   const frame = Internals6.Timeline.useTimelinePosition();
   const { playing, pause, emitter } = usePlayer();
   const setFrame = Internals6.Timeline.useTimelineSetFrame();
-  const buffering = useRef4(null);
   const isBackgroundedRef = useIsBackgrounded();
   const lastTimeUpdateEvent = useRef4(null);
   const context = useContext4(Internals6.BufferingContextReact);
@@ -893,18 +892,6 @@ var usePlayback = ({
     playbackRate,
     videoConfig: config
   });
-  useEffect6(() => {
-    const onBufferClear = context.listenForBuffering(() => {
-      buffering.current = performance.now();
-    });
-    const onResumeClear = context.listenForResume(() => {
-      buffering.current = null;
-    });
-    return () => {
-      onBufferClear.remove();
-      onResumeClear.remove();
-    };
-  }, [context]);
   useEffect6(() => {
     if (!config) {
       return;
@@ -930,6 +917,9 @@ var usePlayback = ({
       cancelQueuedFrame();
     };
     const callback = () => {
+      if (hasBeenStopped) {
+        return;
+      }
       const time = performance.now() - startedTime;
       const actualLastFrame = outFrame ?? config.durationInFrames - 1;
       const actualFirstFrame = inFrame ?? 0;
@@ -954,20 +944,15 @@ var usePlayback = ({
         emitter.dispatchEnded();
         return;
       }
-      if (!hasBeenStopped) {
-        queueNextFrame();
-      }
+      queueNextFrame();
     };
     const queueNextFrame = () => {
-      if (buffering.current) {
+      if (context.buffering.current) {
         const stopListening = context.listenForResume(() => {
           stopListening.remove();
-          if (hasBeenStopped) {
-            return;
-          }
           startedTime = performance.now();
           framesAdvanced = 0;
-          callback();
+          queueNextFrame();
         });
         return;
       }
@@ -976,9 +961,9 @@ var usePlayback = ({
           type: "timeout",
           id: setTimeout(callback, 1000 / config.fps)
         };
-      } else {
-        reqAnimFrameCall = { type: "raf", id: requestAnimationFrame(callback) };
+        return;
       }
+      reqAnimFrameCall = { type: "raf", id: requestAnimationFrame(callback) };
     };
     queueNextFrame();
     const onVisibilityChange = () => {
@@ -1006,7 +991,6 @@ var usePlayback = ({
     moveToBeginningWhenEnded,
     isBackgroundedRef,
     getCurrentFrame,
-    buffering,
     context
   ]);
   useEffect6(() => {
@@ -2384,6 +2368,7 @@ var PlayerUI = ({
   showPosterWhenEnded,
   showPosterWhenPaused,
   showPosterWhenBuffering,
+  showPosterWhenBufferingAndPaused,
   inFrame,
   outFrame,
   initiallyShowControls,
@@ -2741,7 +2726,8 @@ var PlayerUI = ({
     showPosterWhenPaused && !player.isPlaying() && !seeking,
     showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
     showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
-    showPosterWhenBuffering && showBufferIndicator && player.isPlaying()
+    showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
+    showPosterWhenBufferingAndPaused && showBufferIndicator && !player.isPlaying()
   ].some(Boolean);
   const { left, top, width, height, ...outerWithoutScale } = outer;
   const content = /* @__PURE__ */ jsxs9(Fragment3, {
@@ -3106,6 +3092,7 @@ var PlayerFn = ({
   showPosterWhenEnded,
   showPosterWhenPaused,
   showPosterWhenBuffering,
+  showPosterWhenBufferingAndPaused,
   initialFrame,
   renderPoster,
   inFrame,
@@ -3286,6 +3273,7 @@ var PlayerFn = ({
             showPosterWhenEnded: Boolean(showPosterWhenEnded),
             showPosterWhenPaused: Boolean(showPosterWhenPaused),
             showPosterWhenBuffering: Boolean(showPosterWhenBuffering),
+            showPosterWhenBufferingAndPaused: Boolean(showPosterWhenBufferingAndPaused),
             renderPoster,
             inFrame: inFrame ?? null,
             outFrame: outFrame ?? null,

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.289",
+  "version": "4.0.291",
   "description": "React component for embedding a Remotion preview into your app",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "remotion": "4.0.289"
+    "remotion": "4.0.291"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -43,7 +43,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.289"
+    "@remotion/eslint-config-internal": "4.0.291"
   },
   "keywords": [
     "remotion",

package/dist/cjs/use-playback-new.js

@@ -1,171 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePlayback = void 0;
-/* eslint-disable @typescript-eslint/no-use-before-define */
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
-const remotion_1 = require("remotion");
-const browser_mediasession_js_1 = require("./browser-mediasession.js");
-const calculate_next_frame_js_1 = require("./calculate-next-frame.js");
-const is_backgrounded_js_1 = require("./is-backgrounded.js");
-const use_player_js_1 = require("./use-player.js");
-const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }) => {
-    const config = remotion_1.Internals.useUnsafeVideoConfig();
-    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const { playing, pause, emitter } = (0, use_player_js_1.usePlayer)();
-    const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
-    const buffering = (0, react_1.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 = (0, is_backgrounded_js_1.useIsBackgrounded)();
-    const lastTimeUpdateEvent = (0, react_1.useRef)(null);
-    const context = (0, react_1.useContext)(remotion_1.Internals.BufferingContextReact);
-    if (!context) {
-        throw new Error('Missing the buffering context. Most likely you have a Remotion version mismatch.');
-    }
-    (0, browser_mediasession_js_1.useBrowserMediaSession)({
-        browserMediaControlsBehavior,
-        playbackRate,
-        videoConfig: config,
-    });
-    //	complete code for media session API
-    (0, react_1.useEffect)(() => {
-        const onBufferClear = context.listenForBuffering(() => {
-            buffering.current = performance.now();
-        });
-        const onResumeClear = context.listenForResume(() => {
-            buffering.current = null;
-        });
-        return () => {
-            onBufferClear.remove();
-            onResumeClear.remove();
-        };
-    }, [context]);
-    (0, react_1.useEffect)(() => {
-        if (!config) {
-            return;
-        }
-        if (!playing) {
-            return;
-        }
-        let hasBeenStopped = false;
-        let reqAnimFrameCall = null;
-        let startedTime = performance.now();
-        let framesAdvanced = 0;
-        const cancelQueuedFrame = () => {
-            if (reqAnimFrameCall !== null) {
-                if (reqAnimFrameCall.type === 'raf') {
-                    cancelAnimationFrame(reqAnimFrameCall.id);
-                }
-                else {
-                    clearTimeout(reqAnimFrameCall.id);
-                }
-            }
-        };
-        const stop = () => {
-            hasBeenStopped = true;
-            cancelQueuedFrame();
-        };
-        const callback = () => {
-            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 = getCurrentFrame();
-            const { nextFrame, framesToAdvance, hasEnded } = (0, calculate_next_frame_js_1.calculateNextFrame)({
-                time,
-                currentFrame,
-                playbackSpeed: playbackRate,
-                fps: config.fps,
-                actualFirstFrame,
-                actualLastFrame,
-                framesAdvanced,
-                shouldLoop: loop,
-            });
-            framesAdvanced += framesToAdvance;
-            if (nextFrame !== getCurrentFrame() &&
-                (!hasEnded || moveToBeginningWhenEnded)) {
-                (0, react_dom_1.flushSync)(() => {
-                    setFrame((c) => ({ ...c, [config.id]: nextFrame }));
-                });
-            }
-            if (hasEnded) {
-                stop();
-                pause();
-                emitter.dispatchEnded();
-                return;
-            }
-            if (!hasBeenStopped) {
-                queueNextFrame();
-            }
-        };
-        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',
-                    // Note: Most likely, this will not be 1000 / fps, but the browser will throttle it to ~1/sec.
-                    id: setTimeout(callback, 1000 / config.fps),
-                };
-            }
-            else {
-                reqAnimFrameCall = { type: 'raf', id: requestAnimationFrame(callback) };
-            }
-        };
-        queueNextFrame();
-        const onVisibilityChange = () => {
-            if (document.visibilityState === 'visible') {
-                return;
-            }
-            // If tab goes into the background, cancel requestAnimationFrame() and update immediately.
-            // , so the transition to setTimeout() can be fulfilled.
-            cancelQueuedFrame();
-            callback();
-        };
-        window.addEventListener('visibilitychange', onVisibilityChange);
-        return () => {
-            window.removeEventListener('visibilitychange', onVisibilityChange);
-            stop();
-        };
-    }, [
-        config,
-        loop,
-        pause,
-        playing,
-        setFrame,
-        emitter,
-        playbackRate,
-        inFrame,
-        outFrame,
-        moveToBeginningWhenEnded,
-        isBackgroundedRef,
-        getCurrentFrame,
-        buffering,
-        context,
-    ]);
-    (0, react_1.useEffect)(() => {
-        const interval = setInterval(() => {
-            if (lastTimeUpdateEvent.current === getCurrentFrame()) {
-                return;
-            }
-            emitter.dispatchTimeUpdate({ frame: getCurrentFrame() });
-            lastTimeUpdateEvent.current = getCurrentFrame();
-        }, 250);
-        return () => clearInterval(interval);
-    }, [emitter, getCurrentFrame]);
-    (0, react_1.useEffect)(() => {
-        emitter.dispatchFrameUpdate({ frame });
-    }, [emitter, frame]);
-};
-exports.usePlayback = usePlayback;