@remotion/player 4.0.519 → 4.0.520

package/dist/cjs/EmitterProvider.js

@@ -3,23 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlayerEmitterProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const emitter_context_js_1 = require("./emitter-context.js");
 const event_emitter_js_1 = require("./event-emitter.js");
-const timeline_imperative_context_js_1 = require("./timeline-imperative-context.js");
 const use_buffer_state_emitter_js_1 = require("./use-buffer-state-emitter.js");
 const PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
     const [emitter] = (0, react_1.useState)(() => new event_emitter_js_1.PlayerEmitter());
-    const bufferManager = (0, react_1.useContext)(remotion_1.Internals.BufferingContextReact);
-    if (!bufferManager) {
-        throw new Error('BufferingContextReact not found');
-    }
     (0, react_1.useEffect)(() => {
         if (currentPlaybackRate) {
             emitter.dispatchRateChange(currentPlaybackRate);
         }
     }, [emitter, currentPlaybackRate]);
     (0, use_buffer_state_emitter_js_1.useBufferStateEmitter)(emitter);
-    return (jsx_runtime_1.jsx(timeline_imperative_context_js_1.TimelineImperativeCompatibilityProvider, { children: jsx_runtime_1.jsx(emitter_context_js_1.PlayerEventEmitterContext.Provider, { value: emitter, children: children }) }));
+    return (jsx_runtime_1.jsx(emitter_context_js_1.PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
 };
 exports.PlayerEmitterProvider = PlayerEmitterProvider;

package/dist/cjs/Player.js

@@ -91,10 +91,14 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const [frame, setFrame] = (0, react_1.useState)(() => ({
         [SharedPlayerContext_js_1.PLAYER_COMP_ID]: initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0,
     }));
-    const [playing, setPlaying] = (0, react_1.useState)(false);
+    const frameRef = (0, react_1.useRef)(frame);
+    frameRef.current = frame;
     const rootRef = (0, react_1.useRef)(null);
     const audioAndVideoTags = (0, react_1.useRef)([]);
-    const imperativePlaying = (0, react_1.useRef)(false);
+    const playingStore = (0, react_1.useMemo)(() => remotion_1.Internals.createRuntimeValueStore({ playing: false }), []);
+    const bufferingStore = (0, react_1.useMemo)(() => remotion_1.Internals.createRuntimeValueStore({ buffering: false }), []);
+    const readIsPlaying = (0, react_1.useCallback)(() => playingStore.store.getSnapshot().playing, [playingStore]);
+    const readIsBuffering = (0, react_1.useCallback)(() => bufferingStore.store.getSnapshot().buffering, [bufferingStore]);
     const [currentPlaybackRate, setCurrentPlaybackRate] = (0, react_1.useState)(playbackRate);
     if (typeof compositionHeight !== 'number') {
         throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -184,11 +188,10 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const timelineContextValue = (0, react_1.useMemo)(() => {
         return {
             frame,
-            playing,
-            imperativePlaying,
+            isPlaying: readIsPlaying,
             audioAndVideoTags,
         };
-    }, [frame, playing]);
+    }, [frame, readIsPlaying]);
     const playbackRateContextValue = (0, react_1.useMemo)(() => {
         return {
             playbackRate: currentPlaybackRate,
@@ -198,9 +201,33 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const setTimelineContextValue = (0, react_1.useMemo)(() => {
         return {
             setFrame,
-            setPlaying,
+            setPlaying: (updater) => {
+                const current = playingStore.store.getSnapshot().playing;
+                const next = typeof updater === 'function' ? updater(current) : updater;
+                if (current !== next) {
+                    playingStore.setSnapshot({ playing: next });
+                }
+            },
+            setBuffering: (buffering) => {
+                if (readIsBuffering() !== buffering) {
+                    bufferingStore.setSnapshot({ buffering });
+                }
+            },
+            subscribePlaying: playingStore.store.subscribe,
+            subscribeBuffering: bufferingStore.store.subscribe,
+            isPlaying: readIsPlaying,
+            isBuffering: readIsBuffering,
+            frameRef,
+            audioAndVideoTags,
         };
-    }, [setFrame]);
+    }, [
+        bufferingStore,
+        setFrame,
+        frameRef,
+        playingStore,
+        readIsBuffering,
+        readIsPlaying,
+    ]);
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -214,7 +241,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             mode: 'prevent-media-session',
         });
     }, [passedBrowserMediaControlsBehavior]);
-    const player = (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, playbackRateContext: playbackRateContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, audioLatencyHint: audioLatencyHint, sampleRate: sampleRate, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, volumePersistenceKey: volumePersistenceKey, initialVolume: initialVolume, inputProps: actualInputProps, audioEnabled: true, children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx_runtime_1.jsx(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: 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'
+    const player = (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, playbackRateContext: playbackRateContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, audioLatencyHint: audioLatencyHint, sampleRate: sampleRate, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, volumePersistenceKey: volumePersistenceKey, initialVolume: initialVolume, inputProps: actualInputProps, audioEnabled: true, children: jsx_runtime_1.jsx(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: 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), 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, renderCustomControls: renderCustomControls !== null && renderCustomControls !== void 0 ? renderCustomControls : 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) }) }) }) }) }));
     if (!onTimelineSequenceChange) {

package/dist/cjs/PlayerUI.js

@@ -74,7 +74,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             document.webkitFullscreenEnabled);
     }, []);
     const player = (0, use_player_methods_js_1.usePlayerMethods)();
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const playing = remotion_1.Internals.usePlaying();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const play = (0, react_1.useCallback)((e) => {
         if (player.isPlaying()) {
@@ -437,15 +437,11 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     }
     const shouldShowPoster = poster &&
         [
-            showPosterWhenPaused && !player.isPlaying() && !seeking,
-            showPosterWhenEnded &&
-                frame === durationInFrames - 1 &&
-                !player.isPlaying(),
-            showPosterWhenUnplayed && !hasPlayed && !player.isPlaying(),
-            showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
-            showPosterWhenBufferingAndPaused &&
-                showBufferIndicator &&
-                !player.isPlaying(),
+            showPosterWhenPaused && !playing && !seeking,
+            showPosterWhenEnded && frame === durationInFrames - 1 && !playing,
+            showPosterWhenUnplayed && !hasPlayed && !playing,
+            showPosterWhenBuffering && showBufferIndicator && playing,
+            showPosterWhenBufferingAndPaused && showBufferIndicator && !playing,
         ].some(Boolean);
     const { left, top, width, height, ...outerWithoutScale } = outer;
     const content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/cjs/SharedPlayerContext.js

@@ -4,7 +4,6 @@ exports.SharedPlayerContexts = exports.PLAYER_COMP_ID = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const timeline_imperative_context_js_1 = require("./timeline-imperative-context.js");
 const volume_persistence_js_1 = require("./volume-persistence.js");
 exports.PLAYER_COMP_ID = 'player-comp';
 const SharedPlayerContexts = ({ children, timelineContext, playbackRateContext, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, logLevel, audioLatencyHint, sampleRate, volumePersistenceKey, initialVolume, inputProps, audioEnabled, _experimentalKeepAudioContextAlive, }) => {
@@ -19,7 +18,7 @@ const SharedPlayerContexts = ({ children, timelineContext, playbackRateContext,
                     width: compositionWidth,
                     fps,
                     id: exports.PLAYER_COMP_ID,
-                    nonce: [[0, 777]],
+                    order: null,
                     folderName: null,
                     parentFolderName: null,
                     schema: null,
@@ -94,15 +93,6 @@ const SharedPlayerContexts = ({ children, timelineContext, playbackRateContext,
             isReadOnlyStudio: false,
         };
     }, []);
-    const frameRef = (0, react_1.useRef)(timelineContext.frame);
-    frameRef.current = timelineContext.frame;
-    const timelineImperativeContextValue = (0, react_1.useMemo)(() => {
-        return {
-            frameRef,
-            imperativePlaying: timelineContext.imperativePlaying,
-            audioAndVideoTags: timelineContext.audioAndVideoTags,
-        };
-    }, [timelineContext.audioAndVideoTags, timelineContext.imperativePlaying]);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.RemotionEnvironmentContext.Provider, { value: env, children: jsx_runtime_1.jsx(remotion_1.Internals.LogLevelContext.Provider, { value: logLevelContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteTimeContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PlaybackRateContext.Provider, { value: playbackRateContext, children: jsx_runtime_1.jsx(timeline_imperative_context_js_1.CoreTimelineImperativeContextProvider, { value: timelineImperativeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.TimelineContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PrefetchProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.DurationsContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.BufferingProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: shouldCreateAudioContext, previewSampleRate: sampleRate, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Internals.RemotionEnvironmentContext.Provider, { value: env, children: jsx_runtime_1.jsx(remotion_1.Internals.LogLevelContext.Provider, { value: logLevelContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteTimeContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PlaybackRateContext.Provider, { value: playbackRateContext, children: jsx_runtime_1.jsx(remotion_1.Internals.TimelineContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PrefetchProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.DurationsContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.BufferingProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: shouldCreateAudioContext, previewSampleRate: sampleRate, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.SharedPlayerContexts = SharedPlayerContexts;

package/dist/cjs/Thumbnail.js

@@ -19,15 +19,14 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
         }, []);
     }
     const rootRef = (0, react_1.useRef)(null);
-    const imperativePlaying = (0, react_1.useRef)(false);
     const audioAndVideoTags = (0, react_1.useRef)([]);
+    const bufferingStore = (0, react_1.useMemo)(() => remotion_1.Internals.createRuntimeValueStore({ buffering: false }), []);
     const timelineState = (0, react_1.useMemo)(() => {
         const value = {
-            playing: false,
+            isPlaying: () => false,
             frame: {
                 [SharedPlayerContext_js_1.PLAYER_COMP_ID]: frameToDisplay,
             },
-            imperativePlaying,
             audioAndVideoTags,
         };
         return value;
@@ -40,6 +39,25 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
             },
         };
     }, []);
+    const frameRef = (0, react_1.useRef)(timelineState.frame);
+    frameRef.current = timelineState.frame;
+    const setTimelineContext = (0, react_1.useMemo)(() => {
+        return {
+            setFrame: () => undefined,
+            setPlaying: () => undefined,
+            setBuffering: (buffering) => {
+                if (bufferingStore.store.getSnapshot().buffering !== buffering) {
+                    bufferingStore.setSnapshot({ buffering });
+                }
+            },
+            subscribePlaying: () => () => undefined,
+            subscribeBuffering: bufferingStore.store.subscribe,
+            isPlaying: () => false,
+            isBuffering: () => bufferingStore.store.getSnapshot().buffering,
+            frameRef,
+            audioAndVideoTags,
+        };
+    }, [bufferingStore]);
     (0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
     const Component = remotion_1.Internals.useLazyComponent({
         compProps: componentProps,
@@ -50,7 +68,7 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, playbackRateContext: playbackRateContext, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, logLevel: logLevel, audioLatencyHint: "playback", sampleRate: 48000, inputProps: passedInputProps, audioEnabled: false, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsx(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: jsx_runtime_1.jsx(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible, overrideInternalClassName: overrideInternalClassName, noSuspense: Boolean(noSuspense) }) }) }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContext, children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, playbackRateContext: playbackRateContext, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, logLevel: logLevel, audioLatencyHint: "playback", sampleRate: 48000, inputProps: passedInputProps, audioEnabled: false, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsx(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: jsx_runtime_1.jsx(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible, overrideInternalClassName: overrideInternalClassName, noSuspense: Boolean(noSuspense) }) }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /*

package/dist/cjs/browser-mediasession.js

@@ -5,15 +5,13 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const use_player_methods_js_1 = require("./use-player-methods.js");
 const useBrowserMediaSession = ({ browserMediaControlsBehavior, videoConfig, playbackRate, }) => {
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const playing = remotion_1.Internals.usePlaying();
     const { pause, play, emitter, getCurrentFrame, seek } = (0, use_player_methods_js_1.usePlayerMethods)();
     const hasEverPlayed = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
         if (playing) {
             hasEverPlayed.current = true;
         }
-    }, [playing]);
-    (0, react_1.useEffect)(() => {
         if (!navigator.mediaSession) {
             return;
         }

package/dist/cjs/use-buffer-state-emitter.js

@@ -4,23 +4,16 @@ exports.useBufferStateEmitter = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const useBufferStateEmitter = (emitter) => {
-    const bufferManager = (0, react_1.useContext)(remotion_1.Internals.BufferingContextReact);
-    if (!bufferManager) {
-        throw new Error('BufferingContextReact not found');
-    }
+    const { subscribeBuffering } = (0, react_1.useContext)(remotion_1.Internals.SetTimelineContext);
     (0, react_1.useLayoutEffect)(() => {
-        const clear1 = bufferManager.listenForBuffering(() => {
-            bufferManager.buffering.current = true;
-            emitter.dispatchWaiting({});
+        return subscribeBuffering((state) => {
+            if (state.buffering) {
+                emitter.dispatchWaiting({});
+            }
+            else {
+                emitter.dispatchResume({});
+            }
         });
-        const clear2 = bufferManager.listenForResume(() => {
-            bufferManager.buffering.current = false;
-            emitter.dispatchResume({});
-        });
-        return () => {
-            clear1.remove();
-            clear2.remove();
-        };
-    }, [bufferManager, emitter]);
+    }, [emitter, subscribeBuffering]);
 };
 exports.useBufferStateEmitter = useBufferStateEmitter;

package/dist/cjs/use-playback.js

@@ -25,21 +25,18 @@ const shouldForceAnchorChange = (newState) => {
 const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, muted, }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const playing = remotion_1.Internals.usePlaying();
     const { pause, emitter, isPlaying } = (0, use_player_methods_js_1.usePlayerMethods)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const sharedAudioContext = (0, react_2.useContext)(remotion_1.Internals.SharedAudioContext);
     const { setPlayerMuted } = (0, react_2.useContext)(remotion_1.Internals.SetMediaVolumeContext);
+    const { isBuffering, subscribeBuffering } = (0, react_2.useContext)(remotion_1.Internals.SetTimelineContext);
     const logLevel = remotion_1.Internals.useLogLevel();
     // 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 lastTimeUpdateTimestamp = (0, react_2.useRef)(0);
-    const context = (0, react_2.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,
@@ -170,7 +167,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                 (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext);
                 return;
             }
-            if (!muted && !audioContextFailed && !context.buffering.current) {
+            if (!muted && !audioContextFailed && !isBuffering()) {
                 (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.resume) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
             }
             const time = performance.now() - startedTime;
@@ -190,7 +187,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             framesAdvanced += framesToAdvance;
             if (nextFrame !== getCurrentFrame() &&
                 (!hasEnded || moveToBeginningWhenEnded) &&
-                !context.buffering.current) {
+                !isBuffering()) {
                 setFrame((c) => ({ ...c, [config.id]: nextFrame }));
             }
             if (hasEnded) {
@@ -226,12 +223,15 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                 });
                 return;
             }
-            if (context.buffering.current) {
+            if (isBuffering()) {
                 if (!muted && !audioContextFailed) {
                     (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
                 }
-                const stopListening = context.listenForResume(() => {
-                    stopListening.remove();
+                const unsubscribe = subscribeBuffering((state) => {
+                    if (state.buffering) {
+                        return;
+                    }
+                    unsubscribe();
                     if (!muted &&
                         !audioContextFailed &&
                         (sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext._experimentalKeepAudioContextAlive)) {
@@ -281,10 +281,11 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         moveToBeginningWhenEnded,
         isBackgroundedRef,
         getCurrentFrame,
-        context,
+        isBuffering,
         isPlaying,
         sharedAudioContext,
         setPlayerMuted,
+        subscribeBuffering,
         logLevel,
         muted,
     ]);

package/dist/cjs/use-player-methods.js

@@ -4,13 +4,11 @@ exports.usePlayerMethods = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const emitter_context_js_1 = require("./emitter-context.js");
-const timeline_imperative_context_js_1 = require("./timeline-imperative-context.js");
 const usePlayerMethods = () => {
     var _a;
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame();
-    const { setPlaying } = (0, react_1.useContext)(remotion_1.Internals.SetTimelineContext);
-    const timelineImperativeContext = (0, react_1.useContext)((0, timeline_imperative_context_js_1.getTimelineImperativeContext)());
+    const { setPlaying, frameRef, audioAndVideoTags, isPlaying: readIsPlaying, isBuffering, } = (0, react_1.useContext)(remotion_1.Internals.SetTimelineContext);
     const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext);
     const audioTagsContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioTagsContext);
     const environment = (0, remotion_1.useRemotionEnvironment)();
@@ -19,16 +17,9 @@ const usePlayerMethods = () => {
     const emitter = (0, react_1.useContext)(emitter_context_js_1.PlayerEventEmitterContext);
     const playStart = (0, react_1.useRef)(0);
     const fallbackFrame = (0, react_1.useRef)(null);
-    if (!timelineImperativeContext) {
-        throw new Error('Timeline imperative context is not available. This hook must be used inside a <Player> or the Remotion Studio.');
-    }
     if (!emitter) {
         throw new TypeError('Expected Player event emitter context');
     }
-    const bufferingContext = (0, react_1.useContext)(remotion_1.Internals.BufferingContextReact);
-    if (!bufferingContext) {
-        throw new Error('Missing the buffering context. Most likely you have a Remotion version mismatch.');
-    }
     const getCurrentFrame = (0, react_1.useCallback)(() => {
         var _a, _b, _c;
         if (!video) {
@@ -36,20 +27,20 @@ const usePlayerMethods = () => {
                 ? 0
                 : ((_b = window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0)));
         }
-        const unclamped = (_c = timelineImperativeContext.frameRef.current[video.id]) !== null && _c !== void 0 ? _c : (environment.isPlayer
+        const unclamped = (_c = frameRef.current[video.id]) !== null && _c !== void 0 ? _c : (environment.isPlayer
             ? 0
             : remotion_1.Internals.Timeline.getFrameForComposition(video.id));
         return remotion_1.Internals.Timeline.clampFrameToCompositionRange(unclamped, video.durationInFrames);
-    }, [environment.isPlayer, timelineImperativeContext, video]);
+    }, [environment.isPlayer, frameRef, video]);
     const seek = (0, react_1.useCallback)((newFrame) => {
         const frameToSeekTo = config
             ? remotion_1.Internals.TimelinePosition.clampFrameToCompositionRange(newFrame, config.durationInFrames)
             : Math.max(0, newFrame);
         fallbackFrame.current = frameToSeekTo;
         if (video === null || video === void 0 ? void 0 : video.id) {
-            if (timelineImperativeContext.frameRef.current[video.id] !== frameToSeekTo) {
-                timelineImperativeContext.frameRef.current = {
-                    ...timelineImperativeContext.frameRef.current,
+            if (frameRef.current[video.id] !== frameToSeekTo) {
+                frameRef.current = {
+                    ...frameRef.current,
                     [video.id]: frameToSeekTo,
                 };
             }
@@ -58,16 +49,10 @@ const usePlayerMethods = () => {
                 : { ...currentFrames, [video.id]: frameToSeekTo });
         }
         emitter.dispatchSeek(frameToSeekTo);
-    }, [
-        config,
-        emitter,
-        setTimelinePosition,
-        timelineImperativeContext,
-        video === null || video === void 0 ? void 0 : video.id,
-    ]);
+    }, [config, emitter, frameRef, setTimelinePosition, video === null || video === void 0 ? void 0 : video.id]);
     const play = (0, react_1.useCallback)((e) => {
         var _a;
-        if (timelineImperativeContext.imperativePlaying.current) {
+        if (readIsPlaying()) {
             return;
         }
         const lastFrameForPlayback = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
@@ -85,52 +70,51 @@ const usePlayerMethods = () => {
          * Play audios and videos directly here so they can benefit from
          * being triggered by a click
          */
-        timelineImperativeContext.audioAndVideoTags.current.forEach((tag) => tag.play('player play() was called and playing audio from a click'));
-        timelineImperativeContext.imperativePlaying.current = true;
+        audioAndVideoTags.current.forEach((tag) => tag.play('player play() was called and playing audio from a click'));
         setPlaying(true);
         playStart.current = getCurrentFrame();
         emitter.dispatchPlay();
     }, [
+        audioAndVideoTags,
         audioContext,
         audioTagsContext,
         config === null || config === void 0 ? void 0 : config.durationInFrames,
         emitter,
         getCurrentFrame,
+        readIsPlaying,
         seek,
         setPlaying,
-        timelineImperativeContext,
     ]);
     const pause = (0, react_1.useCallback)(() => {
-        if (timelineImperativeContext.imperativePlaying.current) {
-            timelineImperativeContext.imperativePlaying.current = false;
+        if (readIsPlaying()) {
             setPlaying(false);
             emitter.dispatchPause();
             audioContext === null || audioContext === void 0 ? void 0 : audioContext.suspend();
         }
-    }, [audioContext, emitter, setPlaying, timelineImperativeContext]);
+    }, [audioContext, emitter, readIsPlaying, setPlaying]);
     const pauseAndReturnToPlayStart = (0, react_1.useCallback)(() => {
-        if (timelineImperativeContext.imperativePlaying.current) {
-            timelineImperativeContext.imperativePlaying.current = false;
+        if (readIsPlaying()) {
+            setPlaying(false);
             fallbackFrame.current = playStart.current;
             if (config) {
-                timelineImperativeContext.frameRef.current = {
-                    ...timelineImperativeContext.frameRef.current,
+                frameRef.current = {
+                    ...frameRef.current,
                     [config.id]: playStart.current,
                 };
                 setTimelinePosition((currentFrames) => ({
                     ...currentFrames,
                     [config.id]: playStart.current,
                 }));
-                setPlaying(false);
                 emitter.dispatchPause();
             }
         }
     }, [
         config,
         emitter,
+        frameRef,
+        readIsPlaying,
         setPlaying,
         setTimelinePosition,
-        timelineImperativeContext,
     ]);
     const videoId = video === null || video === void 0 ? void 0 : video.id;
     const lastFrame = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
@@ -139,57 +123,51 @@ const usePlayerMethods = () => {
         if (!videoId) {
             return null;
         }
-        if (timelineImperativeContext.imperativePlaying.current) {
+        if (readIsPlaying()) {
             return;
         }
-        const previousFrame = (_b = (_a = timelineImperativeContext.frameRef.current[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
+        const previousFrame = (_b = (_a = frameRef.current[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
         const newFrame = Math.max(0, previousFrame - frames);
         if (previousFrame === newFrame) {
             return;
         }
-        timelineImperativeContext.frameRef.current = {
-            ...timelineImperativeContext.frameRef.current,
+        frameRef.current = {
+            ...frameRef.current,
             [videoId]: newFrame,
         };
         setFrame((currentFrames) => currentFrames[videoId] === newFrame
             ? currentFrames
             : { ...currentFrames, [videoId]: newFrame });
-    }, [setFrame, timelineImperativeContext, videoId]);
+    }, [frameRef, readIsPlaying, setFrame, videoId]);
     const frameForward = (0, react_1.useCallback)((frames) => {
         var _a, _b;
         if (!videoId) {
             return null;
         }
-        if (timelineImperativeContext.imperativePlaying.current) {
+        if (readIsPlaying()) {
             return;
         }
-        const previousFrame = (_b = (_a = timelineImperativeContext.frameRef.current[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
+        const previousFrame = (_b = (_a = frameRef.current[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
         const newFrame = Math.min(lastFrame, previousFrame + frames);
         if (previousFrame === newFrame) {
             return;
         }
-        timelineImperativeContext.frameRef.current = {
-            ...timelineImperativeContext.frameRef.current,
+        frameRef.current = {
+            ...frameRef.current,
             [videoId]: newFrame,
         };
         setFrame((currentFrames) => currentFrames[videoId] === newFrame
             ? currentFrames
             : { ...currentFrames, [videoId]: newFrame });
-    }, [lastFrame, setFrame, timelineImperativeContext, videoId]);
+    }, [frameRef, lastFrame, readIsPlaying, setFrame, videoId]);
     const toggle = (0, react_1.useCallback)((e) => {
-        if (timelineImperativeContext.imperativePlaying.current) {
+        if (readIsPlaying()) {
             pause();
         }
         else {
             play(e);
         }
-    }, [pause, play, timelineImperativeContext]);
-    const isPlaying = (0, react_1.useCallback)(() => {
-        return timelineImperativeContext.imperativePlaying.current;
-    }, [timelineImperativeContext]);
-    const isBuffering = (0, react_1.useCallback)(() => {
-        return bufferingContext.buffering.current;
-    }, [bufferingContext.buffering]);
+    }, [pause, play, readIsPlaying]);
     return (0, react_1.useMemo)(() => {
         return {
             frameBack,
@@ -199,7 +177,7 @@ const usePlayerMethods = () => {
             pause,
             seek,
             getCurrentFrame,
-            isPlaying,
+            isPlaying: readIsPlaying,
             isBuffering,
             pauseAndReturnToPlayStart,
             toggle,
@@ -209,11 +187,11 @@ const usePlayerMethods = () => {
         frameBack,
         frameForward,
         getCurrentFrame,
-        isBuffering,
-        isPlaying,
+        readIsPlaying,
         pause,
         pauseAndReturnToPlayStart,
         play,
+        isBuffering,
         seek,
         toggle,
     ]);