@remotion/player 4.0.505 → 4.0.507

package/dist/cjs/EmitterProvider.js

@@ -6,6 +6,7 @@ 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());
@@ -19,6 +20,6 @@ const PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
         }
     }, [emitter, currentPlaybackRate]);
     (0, use_buffer_state_emitter_js_1.useBufferStateEmitter)(emitter);
-    return (jsx_runtime_1.jsx(emitter_context_js_1.PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
+    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 }) }));
 };
 exports.PlayerEmitterProvider = PlayerEmitterProvider;

package/dist/cjs/PlayerSeekBar.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const use_hover_state_js_1 = require("./use-hover-state.js");
-const use_player_js_1 = require("./use-player.js");
+const use_player_methods_js_1 = require("./use-player-methods.js");
 const use_element_size_js_1 = require("./utils/use-element-size.js");
 const getFrameFromX = (clientX, durationInFrames, width) => {
     const pos = clientX;
@@ -49,7 +49,7 @@ const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outF
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
-    const { seek, play, pause, playing } = (0, use_player_js_1.usePlayer)();
+    const { seek, play, pause, isPlaying } = (0, use_player_methods_js_1.usePlayerMethods)();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,
@@ -62,14 +62,15 @@ const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outF
         }
         const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
         const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, width);
+        const wasPlaying = isPlaying();
         pause();
         seek(_frame);
         setDragging({
             dragging: true,
-            wasPlaying: playing,
+            wasPlaying,
         });
         onSeekStart();
-    }, [durationInFrames, width, pause, seek, playing, onSeekStart]);
+    }, [durationInFrames, width, isPlaying, pause, seek, onSeekStart]);
     const onPointerMove = (0, react_1.useCallback)((e) => {
         var _a;
         if (!size) {

package/dist/cjs/PlayerUI.js

@@ -42,7 +42,7 @@ const license_blacklist_js_1 = require("./license-blacklist.js");
 const player_css_classname_js_1 = require("./player-css-classname.js");
 const PlayerControls_js_1 = require("./PlayerControls.js");
 const use_playback_js_1 = require("./use-playback.js");
-const use_player_js_1 = require("./use-player.js");
+const use_player_methods_js_1 = require("./use-player-methods.js");
 const is_node_js_1 = require("./utils/is-node.js");
 const use_click_prevention_on_double_click_js_1 = require("./utils/use-click-prevention-on-double-click.js");
 const use_element_size_js_1 = require("./utils/use-element-size.js");
@@ -64,6 +64,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const [shouldAutoplay, setShouldAutoPlay] = (0, react_1.useState)(autoPlay);
     const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(() => false);
     const [seeking, setSeeking] = (0, react_1.useState)(false);
+    const [hasPlayed, setHasPlayed] = (0, react_1.useState)(false);
     const supportsFullScreen = (0, react_1.useMemo)(() => {
         if (typeof document === 'undefined') {
             return false;
@@ -72,8 +73,16 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             // @ts-expect-error Types not defined
             document.webkitFullscreenEnabled);
     }, []);
-    const player = (0, use_player_js_1.usePlayer)();
-    const playerToggle = player.toggle;
+    const player = (0, use_player_methods_js_1.usePlayerMethods)();
+    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
+    const play = (0, react_1.useCallback)((e) => {
+        if (player.isPlaying()) {
+            return;
+        }
+        setHasPlayed(true);
+        player.play(e);
+    }, [player]);
     const { playerMuted, mediaVolume } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     (0, react_1.useEffect)(() => {
         player.emitter.dispatchVolumeChange(mediaVolume);
@@ -95,11 +104,11 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         muted: isMuted,
     });
     (0, react_1.useEffect)(() => {
-        if (hasPausedToResume && !player.playing) {
+        if (hasPausedToResume && !playing) {
             setHasPausedToResume(false);
-            player.play();
+            play();
         }
-    }, [hasPausedToResume, player]);
+    }, [hasPausedToResume, play, playing]);
     (0, react_1.useEffect)(() => {
         const { current } = container;
         if (!current) {
@@ -119,8 +128,13 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         };
     }, []);
     const toggle = (0, react_1.useCallback)((e) => {
-        playerToggle(e);
-    }, [playerToggle]);
+        if (player.isPlaying()) {
+            player.pause();
+        }
+        else {
+            play(e);
+        }
+    }, [play, player]);
     const requestFullscreen = (0, react_1.useCallback)(() => {
         if (!allowFullscreen) {
             throw new Error('allowFullscreen is false');
@@ -244,7 +258,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     }, [bufferStateDelayInMilliseconds, player.emitter]);
     (0, react_1.useImperativeHandle)(ref, () => {
         const methods = {
-            play: player.play,
+            play,
             pause: () => {
                 // If, after .seek()-ing, the player was explicitly paused, we don't resume
                 setHasPausedToResume(false);
@@ -318,6 +332,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         isMuted,
         mediaVolume,
         player,
+        play,
         requestFullscreen,
         setPlayerMuted,
         setMediaVolume,
@@ -384,10 +399,10 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const { handlePointerDown, handleDoubleClick } = (0, use_click_prevention_on_double_click_js_1.useClickPreventionOnDoubleClick)(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
     (0, react_1.useEffect)(() => {
         if (shouldAutoplay) {
-            player.play();
+            play();
             setShouldAutoPlay(false);
         }
-    }, [shouldAutoplay, player]);
+    }, [play, shouldAutoplay]);
     const loadingMarkup = (0, react_1.useMemo)(() => {
         return renderLoading
             ? renderLoading({
@@ -423,8 +438,10 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const shouldShowPoster = poster &&
         [
             showPosterWhenPaused && !player.isPlaying() && !seeking,
-            showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
-            showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
+            showPosterWhenEnded &&
+                frame === durationInFrames - 1 &&
+                !player.isPlaying(),
+            showPosterWhenUnplayed && !hasPlayed && !player.isPlaying(),
             showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
             showPosterWhenBufferingAndPaused &&
                 showBufferIndicator &&
@@ -438,7 +455,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
                                     width: config.width,
                                     height: config.height,
                                 }, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }), jsx_runtime_1.jsx(license_blacklist_js_1.RenderWarningIfBlacklist, {})
-                ] }), shouldShowPoster && posterFillMode === 'player-size' ? (jsx_runtime_1.jsx("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (jsx_runtime_1.jsx(PlayerControls_js_1.Controls, { fps: config.fps, playing: player.playing, toggle: player.toggle, durationInFrames: config.durationInFrames, 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, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, onPointerDown: clickToPlay
+                ] }), shouldShowPoster && posterFillMode === 'player-size' ? (jsx_runtime_1.jsx("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (jsx_runtime_1.jsx(PlayerControls_js_1.Controls, { fps: config.fps, playing: playing, toggle: toggle, durationInFrames: config.durationInFrames, 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, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, onPointerDown: clickToPlay
                     ? handlePointerDown
                     : undefined, renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, renderCustomControls: renderCustomControls })) : null] }));
     if (noSuspense || (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense)) {

package/dist/cjs/SharedPlayerContext.js

@@ -4,6 +4,7 @@ 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, }) => {
@@ -92,6 +93,15 @@ const SharedPlayerContexts = ({ children, timelineContext, playbackRateContext,
             isReadOnlyStudio: false,
         };
     }, []);
-    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, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    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, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.SharedPlayerContexts = SharedPlayerContexts;

package/dist/cjs/Thumbnail.js

@@ -19,16 +19,16 @@ 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 timelineState = (0, react_1.useMemo)(() => {
         const value = {
             playing: false,
             frame: {
                 [SharedPlayerContext_js_1.PLAYER_COMP_ID]: frameToDisplay,
             },
-            imperativePlaying: {
-                current: false,
-            },
-            audioAndVideoTags: { current: [] },
+            imperativePlaying,
+            audioAndVideoTags,
         };
         return value;
     }, [frameToDisplay]);

package/dist/cjs/browser-mediasession.js

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBrowserMediaSession = void 0;
 const react_1 = require("react");
-const use_player_js_1 = require("./use-player.js");
+const remotion_1 = require("remotion");
+const use_player_methods_js_1 = require("./use-player-methods.js");
 const useBrowserMediaSession = ({ browserMediaControlsBehavior, videoConfig, playbackRate, }) => {
-    const { playing, pause, play, emitter, getCurrentFrame, seek } = (0, use_player_js_1.usePlayer)();
+    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    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) {

package/dist/cjs/index.d.ts

@@ -15,23 +15,7 @@ export type { CallbackListener, PlayerEventTypes as EventTypes };
 export declare const PlayerInternals: {
     PlayerEventEmitterContext: import("react").Context<PlayerEmitter | undefined>;
     PlayerEmitter: typeof PlayerEmitter;
-    usePlayer: () => {
-        frameBack: (frames: number) => void;
-        frameForward: (frames: number) => void;
-        isLastFrame: boolean;
-        isFirstFrame: boolean;
-        emitter: PlayerEmitter;
-        playing: boolean;
-        play: (e?: PointerEvent | import("react").SyntheticEvent<Element, Event> | undefined) => void;
-        pause: () => void;
-        pauseAndReturnToPlayStart: () => void;
-        seek: (newFrame: number) => void;
-        getCurrentFrame: () => number;
-        isPlaying: () => boolean;
-        hasPlayed: boolean;
-        isBuffering: () => boolean;
-        toggle: (e?: PointerEvent | import("react").SyntheticEvent<Element, Event> | undefined) => void;
-    };
+    usePlayerMethods: () => import("./use-player-methods.js").UsePlayerMethods;
     usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, muted, }: {
         loop: boolean;
         playbackRate: number;

package/dist/cjs/index.js

@@ -9,7 +9,7 @@ const EmitterProvider_js_1 = require("./EmitterProvider.js");
 const event_emitter_js_1 = require("./event-emitter.js");
 const use_hover_state_js_1 = require("./use-hover-state.js");
 const use_playback_js_1 = require("./use-playback.js");
-const use_player_js_1 = require("./use-player.js");
+const use_player_methods_js_1 = require("./use-player-methods.js");
 const use_element_size_js_1 = require("./utils/use-element-size.js");
 const Player_js_1 = require("./Player.js");
 Object.defineProperty(exports, "Player", { enumerable: true, get: function () { return Player_js_1.Player; } });
@@ -18,7 +18,7 @@ Object.defineProperty(exports, "Thumbnail", { enumerable: true, get: function ()
 exports.PlayerInternals = {
     PlayerEventEmitterContext: emitter_context_js_1.PlayerEventEmitterContext,
     PlayerEmitter: event_emitter_js_1.PlayerEmitter,
-    usePlayer: use_player_js_1.usePlayer,
+    usePlayerMethods: use_player_methods_js_1.usePlayerMethods,
     usePlayback: use_playback_js_1.usePlayback,
     useElementSize: use_element_size_js_1.useElementSize,
     calculateCanvasTransformation: calculate_scale_js_1.calculateCanvasTransformation,

package/dist/cjs/timeline-imperative-context.d.ts

@@ -0,0 +1,11 @@
+import type { Context } from 'react';
+import React from 'react';
+import type { TimelineImperativeContextValue } from 'remotion';
+export declare const getTimelineImperativeContext: () => Context<TimelineImperativeContextValue | null>;
+export declare const CoreTimelineImperativeContextProvider: React.FC<{
+    readonly children: React.ReactNode;
+    readonly value: TimelineImperativeContextValue;
+}>;
+export declare const TimelineImperativeCompatibilityProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/cjs/timeline-imperative-context.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineImperativeCompatibilityProvider = exports.CoreTimelineImperativeContextProvider = exports.getTimelineImperativeContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const PlayerTimelineImperativeContext = react_1.default.createContext(null);
+const getCoreTimelineImperativeContext = () => {
+    return remotion_1.Internals.TimelineImperativeContext;
+};
+const getTimelineImperativeContext = () => {
+    var _a;
+    return (_a = getCoreTimelineImperativeContext()) !== null && _a !== void 0 ? _a : PlayerTimelineImperativeContext;
+};
+exports.getTimelineImperativeContext = getTimelineImperativeContext;
+const CoreTimelineImperativeContextProvider = ({ children, value }) => {
+    const TimelineImperativeContext = getCoreTimelineImperativeContext();
+    if (!TimelineImperativeContext) {
+        return children;
+    }
+    return (jsx_runtime_1.jsx(TimelineImperativeContext.Provider, { value: value, children: children }));
+};
+exports.CoreTimelineImperativeContextProvider = CoreTimelineImperativeContextProvider;
+const LegacyTimelineImperativeContextProvider = ({ children }) => {
+    const timelineContext = remotion_1.Internals.Timeline.useTimelineContext();
+    const frameRef = (0, react_1.useRef)(timelineContext.frame);
+    frameRef.current = timelineContext.frame;
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            frameRef,
+            imperativePlaying: timelineContext.imperativePlaying,
+            audioAndVideoTags: timelineContext.audioAndVideoTags,
+        };
+    }, [timelineContext.audioAndVideoTags, timelineContext.imperativePlaying]);
+    return (jsx_runtime_1.jsx(PlayerTimelineImperativeContext.Provider, { value: value, children: children }));
+};
+const TimelineImperativeCompatibilityProvider = ({ children }) => {
+    if (getCoreTimelineImperativeContext()) {
+        return children;
+    }
+    return (jsx_runtime_1.jsx(LegacyTimelineImperativeContextProvider, { children: children }));
+};
+exports.TimelineImperativeCompatibilityProvider = TimelineImperativeCompatibilityProvider;

package/dist/cjs/use-playback.js

@@ -9,7 +9,7 @@ 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 set_global_time_anchor_js_1 = require("./set-global-time-anchor.js");
-const use_player_js_1 = require("./use-player.js");
+const use_player_methods_js_1 = require("./use-player-methods.js");
 const shouldForceAnchorChange = (newState) => {
     if (newState === 'suspended' || newState === 'running-to-suspended') {
         return true;
@@ -25,9 +25,11 @@ 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, pause, emitter, isPlaying } = (0, use_player_js_1.usePlayer)();
+    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    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 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.
@@ -118,6 +120,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             return;
         }
         let hasBeenStopped = false;
+        let audioContextFailed = false;
         let reqAnimFrameCall = null;
         let startedTime = performance.now();
         let framesAdvanced = 0;
@@ -144,7 +147,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 && !context.buffering.current) {
+            if (!muted && !audioContextFailed && !context.buffering.current) {
                 (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.resume) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
             }
             const time = performance.now() - startedTime;
@@ -178,9 +181,22 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         const queueNextFrame = () => {
             var _a, _b;
             var _c;
-            const getIsResumingAudioContext = (_c = (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.getIsResumingAudioContext) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext)) !== null && _c !== void 0 ? _c : null;
+            if (hasBeenStopped) {
+                return;
+            }
+            const getIsResumingAudioContext = audioContextFailed
+                ? null
+                : ((_c = (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.getIsResumingAudioContext) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext)) !== null && _c !== void 0 ? _c : null);
             if (getIsResumingAudioContext !== null && !muted) {
-                getIsResumingAudioContext.then(() => {
+                getIsResumingAudioContext.then((result) => {
+                    if (hasBeenStopped) {
+                        return;
+                    }
+                    if (result === 'failed') {
+                        audioContextFailed = true;
+                        sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend();
+                        setPlayerMuted(true);
+                    }
                     startedTime = performance.now();
                     framesAdvanced = 0;
                     queueNextFrame();
@@ -188,7 +204,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                 return;
             }
             if (context.buffering.current) {
-                if (!muted) {
+                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(() => {
@@ -240,6 +256,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         context,
         isPlaying,
         sharedAudioContext,
+        setPlayerMuted,
         logLevel,
         muted,
     ]);

package/dist/cjs/use-player-methods.d.ts

@@ -0,0 +1,16 @@
+import type { SyntheticEvent } from 'react';
+import type { PlayerEmitter } from './event-emitter.js';
+export type UsePlayerMethods = {
+    frameBack: (frames: number) => void;
+    frameForward: (frames: number) => void;
+    emitter: PlayerEmitter;
+    play: (e?: SyntheticEvent | PointerEvent) => void;
+    pause: () => void;
+    pauseAndReturnToPlayStart: () => void;
+    seek: (newFrame: number) => void;
+    getCurrentFrame: () => number;
+    isPlaying: () => boolean;
+    isBuffering: () => boolean;
+    toggle: (e?: SyntheticEvent | PointerEvent) => void;
+};
+export declare const usePlayerMethods: () => UsePlayerMethods;