@remotion/player 4.0.505 → 4.0.506

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,7 +25,8 @@ 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 logLevel = remotion_1.Internals.useLogLevel();

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;

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

@@ -0,0 +1,221 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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)();
+    const video = remotion_1.Internals.useVideo();
+    const config = remotion_1.Internals.useUnsafeVideoConfig();
+    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) {
+            return ((_a = fallbackFrame.current) !== null && _a !== void 0 ? _a : (typeof window === 'undefined'
+                ? 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
+            ? 0
+            : remotion_1.Internals.Timeline.getFrameForComposition(video.id));
+        return remotion_1.Internals.Timeline.clampFrameToCompositionRange(unclamped, video.durationInFrames);
+    }, [environment.isPlayer, timelineImperativeContext, 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,
+                    [video.id]: frameToSeekTo,
+                };
+            }
+            setTimelinePosition((currentFrames) => currentFrames[video.id] === frameToSeekTo
+                ? currentFrames
+                : { ...currentFrames, [video.id]: frameToSeekTo });
+        }
+        emitter.dispatchSeek(frameToSeekTo);
+    }, [
+        config,
+        emitter,
+        setTimelinePosition,
+        timelineImperativeContext,
+        video === null || video === void 0 ? void 0 : video.id,
+    ]);
+    const play = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (timelineImperativeContext.imperativePlaying.current) {
+            return;
+        }
+        const lastFrameForPlayback = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+        if (getCurrentFrame() === lastFrameForPlayback) {
+            seek(0);
+        }
+        audioContext === null || audioContext === void 0 ? void 0 : audioContext.resume();
+        /**
+         * Play silent audio tags to warm them up for autoplay
+         */
+        if (audioTagsContext && audioTagsContext.numberOfAudioTags > 0 && e) {
+            audioTagsContext.playAllAudios();
+        }
+        /**
+         * 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;
+        setPlaying(true);
+        playStart.current = getCurrentFrame();
+        emitter.dispatchPlay();
+    }, [
+        audioContext,
+        audioTagsContext,
+        config === null || config === void 0 ? void 0 : config.durationInFrames,
+        emitter,
+        getCurrentFrame,
+        seek,
+        setPlaying,
+        timelineImperativeContext,
+    ]);
+    const pause = (0, react_1.useCallback)(() => {
+        if (timelineImperativeContext.imperativePlaying.current) {
+            timelineImperativeContext.imperativePlaying.current = false;
+            setPlaying(false);
+            emitter.dispatchPause();
+            audioContext === null || audioContext === void 0 ? void 0 : audioContext.suspend();
+        }
+    }, [audioContext, emitter, setPlaying, timelineImperativeContext]);
+    const pauseAndReturnToPlayStart = (0, react_1.useCallback)(() => {
+        if (timelineImperativeContext.imperativePlaying.current) {
+            timelineImperativeContext.imperativePlaying.current = false;
+            fallbackFrame.current = playStart.current;
+            if (config) {
+                timelineImperativeContext.frameRef.current = {
+                    ...timelineImperativeContext.frameRef.current,
+                    [config.id]: playStart.current,
+                };
+                setTimelinePosition((currentFrames) => ({
+                    ...currentFrames,
+                    [config.id]: playStart.current,
+                }));
+                setPlaying(false);
+                emitter.dispatchPause();
+            }
+        }
+    }, [
+        config,
+        emitter,
+        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;
+    const frameBack = (0, react_1.useCallback)((frames) => {
+        var _a, _b;
+        if (!videoId) {
+            return null;
+        }
+        if (timelineImperativeContext.imperativePlaying.current) {
+            return;
+        }
+        const previousFrame = (_b = (_a = timelineImperativeContext.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,
+            [videoId]: newFrame,
+        };
+        setFrame((currentFrames) => currentFrames[videoId] === newFrame
+            ? currentFrames
+            : { ...currentFrames, [videoId]: newFrame });
+    }, [setFrame, timelineImperativeContext, videoId]);
+    const frameForward = (0, react_1.useCallback)((frames) => {
+        var _a, _b;
+        if (!videoId) {
+            return null;
+        }
+        if (timelineImperativeContext.imperativePlaying.current) {
+            return;
+        }
+        const previousFrame = (_b = (_a = timelineImperativeContext.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,
+            [videoId]: newFrame,
+        };
+        setFrame((currentFrames) => currentFrames[videoId] === newFrame
+            ? currentFrames
+            : { ...currentFrames, [videoId]: newFrame });
+    }, [lastFrame, setFrame, timelineImperativeContext, videoId]);
+    const toggle = (0, react_1.useCallback)((e) => {
+        if (timelineImperativeContext.imperativePlaying.current) {
+            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]);
+    return (0, react_1.useMemo)(() => {
+        return {
+            frameBack,
+            frameForward,
+            emitter,
+            play,
+            pause,
+            seek,
+            getCurrentFrame,
+            isPlaying,
+            isBuffering,
+            pauseAndReturnToPlayStart,
+            toggle,
+        };
+    }, [
+        emitter,
+        frameBack,
+        frameForward,
+        getCurrentFrame,
+        isBuffering,
+        isPlaying,
+        pause,
+        pauseAndReturnToPlayStart,
+        play,
+        seek,
+        toggle,
+    ]);
+};
+exports.usePlayerMethods = usePlayerMethods;