remotion 4.0.486 → 4.0.487

package/dist/cjs/HtmlInCanvas.js

@@ -104,8 +104,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             ref(node);
         }
         else if (ref) {
-            ref.current =
-                node;
+            ref.current = node;
         }
     }, [ref]);
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
@@ -319,8 +318,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
             ref(node);
         }
         else if (ref) {
-            ref.current =
-                node;
+            ref.current = node;
         }
     }, [ref]);
     return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));

package/dist/cjs/Still.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Still = void 0;
 const react_1 = __importDefault(require("react"));
 const Composition_js_1 = require("./Composition.js");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 /*
  * @description A `<Still />` is a `<Composition />` that is only 1 frame long.
  * @see [Documentation](https://www.remotion.dev/docs/still)
@@ -20,3 +21,4 @@ const Still = (props) => {
     return react_1.default.createElement(Composition_js_1.Composition, newProps);
 };
 exports.Still = Still;
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Still);

package/dist/cjs/TimelineContext.d.ts

@@ -1,12 +1,12 @@
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 import React from 'react';
 import { type PlayableMediaTag } from './timeline-position-state';
 export type TimelineContextValue = {
     frame: Record<string, number>;
     playing: boolean;
     rootId: string;
-    imperativePlaying: MutableRefObject<boolean>;
-    audioAndVideoTags: MutableRefObject<PlayableMediaTag[]>;
+    imperativePlaying: RefObject<boolean>;
+    audioAndVideoTags: RefObject<PlayableMediaTag[]>;
 };
 export type PlaybackRateContextValue = {
     playbackRate: number;

package/dist/cjs/buffering.d.ts

@@ -17,7 +17,7 @@ type BufferManager = {
     addBlock: AddBlock;
     listenForBuffering: ListenForBuffering;
     listenForResume: ListenForResume;
-    buffering: React.MutableRefObject<boolean>;
+    buffering: React.RefObject<boolean>;
 };
 export declare const BufferingContextReact: React.Context<BufferManager | null>;
 export declare const BufferingProvider: React.FC<{

package/dist/cjs/buffering.js

@@ -90,7 +90,11 @@ const useBufferManager = (logLevel, mountTime) => {
         if (rendering) {
             return;
         }
-        if (blocks.length > 0) {
+        // Only fire on the `false -> true` transition: adding a block while
+        // already buffering (e.g. a second media element starts loading) must
+        // not re-dispatch `waiting` to listeners.
+        if (blocks.length > 0 && !buffering.current) {
+            buffering.current = true;
             onBufferingCallbacks.forEach((c) => c());
             (0, playback_logging_1.playbackLogging)({
                 logLevel,
@@ -110,7 +114,11 @@ const useBufferManager = (logLevel, mountTime) => {
             if (rendering) {
                 return;
             }
-            if (blocks.length === 0) {
+            // Only fire on the `true -> false` transition: the initial mount and
+            // a block that was added and removed within the same commit must not
+            // dispatch `resume` to listeners.
+            if (blocks.length === 0 && buffering.current) {
+                buffering.current = false;
                 onResumeCallbacks.forEach((c) => c());
                 (0, playback_logging_1.playbackLogging)({
                     logLevel,
@@ -145,11 +153,11 @@ const useIsPlayerBuffering = (bufferManager) => {
         const onResume = () => {
             setIsBuffering(false);
         };
-        bufferManager.listenForBuffering(onBuffer);
-        bufferManager.listenForResume(onResume);
+        const buffer = bufferManager.listenForBuffering(onBuffer);
+        const resume = bufferManager.listenForResume(onResume);
         return () => {
-            bufferManager.listenForBuffering(() => undefined);
-            bufferManager.listenForResume(() => undefined);
+            buffer.remove();
+            resume.remove();
         };
     }, [bufferManager]);
     return isBuffering;

package/dist/cjs/get-media-sync-action.d.ts

@@ -0,0 +1,44 @@
+export type MediaSyncAction = {
+    type: 'seek-due-to-shift';
+    shouldBeTime: number;
+    why: string;
+    bufferUntilFirstFrame: boolean;
+    playReason: string | null;
+    warnAboutNonSeekable: boolean;
+} | {
+    type: 'seek-if-not-playing';
+    shouldBeTime: number;
+    why: string | null;
+} | {
+    type: 'play-and-seek';
+    shouldBeTime: number;
+    why: string | null;
+    playReason: string;
+    bufferUntilFirstFrame: boolean;
+} | {
+    type: 'none';
+};
+export type GetMediaSyncActionInput = {
+    duration: number;
+    currentTime: number;
+    paused: boolean;
+    ended: boolean;
+    desiredUnclampedTime: number;
+    mediaTagTime: number;
+    mediaTagLastUpdate: number;
+    rvcTime: number | null;
+    rvcLastUpdate: number | null;
+    isVariableFpsVideo: boolean;
+    acceptableTimeShift: number;
+    lastSeekDueToShift: number | null;
+    playing: boolean;
+    playbackRate: number;
+    mediaTagBufferingOrStalled: boolean;
+    playerBuffering: boolean;
+    absoluteFrame: number;
+    onlyWarnForMediaSeekingError: boolean;
+    isPremounting: boolean;
+    isPostmounting: boolean;
+    pauseWhenBuffering: boolean;
+};
+export declare const getMediaSyncAction: (input: GetMediaSyncActionInput) => MediaSyncAction;

package/dist/cjs/get-media-sync-action.js

@@ -0,0 +1,78 @@
+"use strict";
+// Pure decision logic for `useMediaPlayback`.
+//
+// Every frame, the media element's clock has to be reconciled with the
+// timeline clock. This function takes a snapshot of the relevant state and
+// decides *what* should happen (seek / play / buffer / nothing). The effect in
+// `use-media-playback.ts` is responsible for actually executing the returned
+// action. Keeping the decision separate makes the branch ordering testable
+// without a DOM or a real media element.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMediaSyncAction = void 0;
+const getMediaSyncAction = (input) => {
+    const { duration, currentTime, paused, ended, desiredUnclampedTime, mediaTagTime, mediaTagLastUpdate, rvcTime, rvcLastUpdate, isVariableFpsVideo, acceptableTimeShift, lastSeekDueToShift, playing, playbackRate, mediaTagBufferingOrStalled, playerBuffering, absoluteFrame, onlyWarnForMediaSeekingError, isPremounting, isPostmounting, pauseWhenBuffering, } = input;
+    const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
+        ? Math.min(duration, desiredUnclampedTime)
+        : desiredUnclampedTime;
+    const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
+    const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
+    const mostRecentTimeshift = rvcLastUpdate && rvcTime > mediaTagLastUpdate
+        ? timeShiftRvcTag
+        : timeShiftMediaTag;
+    const timeShift = timeShiftRvcTag && !isVariableFpsVideo
+        ? mostRecentTimeshift
+        : timeShiftMediaTag;
+    if (timeShift > acceptableTimeShift && lastSeekDueToShift !== shouldBeTime) {
+        // If scrubbing around, adjust timing
+        // or if time shift is bigger than 0.45sec
+        return {
+            type: 'seek-due-to-shift',
+            shouldBeTime,
+            why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ', isVariableFpsVideo = true' : ''}, isPremounting = ${isPremounting}, isPostmounting = ${isPostmounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
+            bufferUntilFirstFrame: playing && playbackRate > 0,
+            playReason: playing && paused
+                ? 'player is playing but media tag is paused, and just seeked'
+                : null,
+            warnAboutNonSeekable: !onlyWarnForMediaSeekingError,
+        };
+    }
+    const seekThreshold = playing ? 0.15 : 0.01;
+    // Only perform a seek if the time is not already the same.
+    // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
+    // therefore a threshold is allowed.
+    // Refer to the https://github.com/remotion-dev/video-buffering-example
+    // which is fixed by only seeking conditionally.
+    const makesSenseToSeek = Math.abs(currentTime - shouldBeTime) > seekThreshold;
+    const isSomethingElseBuffering = playerBuffering && !mediaTagBufferingOrStalled;
+    if (!playing || isSomethingElseBuffering) {
+        return {
+            type: 'seek-if-not-playing',
+            shouldBeTime,
+            why: makesSenseToSeek
+                ? `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})`
+                : null,
+        };
+    }
+    if (!playing || playerBuffering) {
+        return { type: 'none' };
+    }
+    // We now assured we are in playing state and not buffering
+    const pausedCondition = paused && !ended;
+    const firstFrameCondition = absoluteFrame === 0;
+    if (pausedCondition || firstFrameCondition) {
+        const reason = pausedCondition
+            ? 'media tag is paused'
+            : 'absolute frame is 0';
+        return {
+            type: 'play-and-seek',
+            shouldBeTime,
+            why: makesSenseToSeek
+                ? `is over timeshift threshold (threshold = ${seekThreshold}) and ${reason}`
+                : null,
+            playReason: `player is playing and ${reason}`,
+            bufferUntilFirstFrame: !isVariableFpsVideo && playbackRate > 0,
+        };
+    }
+    return { type: 'none' };
+};
+exports.getMediaSyncAction = getMediaSyncAction;

package/dist/cjs/internals.d.ts

@@ -694,7 +694,7 @@ export declare const Internals: {
         listenForResume: (callback: () => void) => {
             remove: () => void;
         };
-        buffering: import("react").MutableRefObject<boolean>;
+        buffering: import("react").RefObject<boolean>;
     } | null>;
     readonly getComponentsToAddStacksTo: () => unknown[];
     readonly CurrentScaleContext: import("react").Context<import("./use-current-scale.js").CurrentScaleContextType | null>;
@@ -823,7 +823,7 @@ export declare const Internals: {
         listenForResume: (callback: () => void) => {
             remove: () => void;
         };
-        buffering: import("react").MutableRefObject<boolean>;
+        buffering: import("react").RefObject<boolean>;
     }) => boolean;
     readonly TimelinePosition: typeof TimelinePosition;
     readonly DelayRenderContextType: import("react").Context<import("./delay-render.js").DelayRenderScope | null>;

package/dist/cjs/timeline-position-state.d.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 import { type PlaybackRateContextValue, type TimelineContextValue } from './TimelineContext.js';
 export type PlayableMediaTag = {
     play: (reason: string) => void;
@@ -17,7 +17,7 @@ export declare const useTimelineSetFrame: () => (u: import("react").SetStateActi
 type PlayingReturnType = readonly [
     boolean,
     (u: React.SetStateAction<boolean>) => void,
-    MutableRefObject<boolean>
+    RefObject<boolean>
 ];
 export declare const usePlayingState: () => PlayingReturnType;
 export {};

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

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const buffer_until_first_frame_js_1 = require("./buffer-until-first-frame.js");
 const buffering_js_1 = require("./buffering.js");
+const get_media_sync_action_js_1 = require("./get-media-sync-action.js");
 const log_level_context_js_1 = require("./log-level-context.js");
 const log_js_1 = require("./log.js");
 const media_tag_current_time_timestamp_js_1 = require("./media-tag-current-time-timestamp.js");
@@ -144,7 +145,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     }, [mediaRef, playbackRate, preservePitch]);
     (0, react_1.useEffect)(() => {
         var _a, _b;
-        var _c;
+        var _c, _d;
         const tagName = mediaType === 'audio' ? '<Html5Audio>' : '<Html5Video>';
         if (!mediaRef.current) {
             throw new Error(`No ${mediaType} ref found`);
@@ -152,107 +153,94 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (!src) {
             throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
         }
-        const { duration } = mediaRef.current;
-        const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
-            ? Math.min(duration, desiredUnclampedTime)
-            : desiredUnclampedTime;
-        const mediaTagTime = mediaTagCurrentTime.current.time;
-        const rvcTime = (_c = (_a = rvcCurrentTime.current) === null || _a === void 0 ? void 0 : _a.time) !== null && _c !== void 0 ? _c : null;
-        const isVariableFpsVideo = isVariableFpsVideoMap.current[src];
-        const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
-        const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
-        const mostRecentTimeshift = ((_b = rvcCurrentTime.current) === null || _b === void 0 ? void 0 : _b.lastUpdate) &&
-            rvcCurrentTime.current.time > mediaTagCurrentTime.current.lastUpdate
-            ? timeShiftRvcTag
-            : timeShiftMediaTag;
-        const timeShift = timeShiftRvcTag && !isVariableFpsVideo
-            ? mostRecentTimeshift
-            : timeShiftMediaTag;
-        if (timeShift > acceptableTimeShiftButLessThanDuration &&
-            lastSeekDueToShift.current !== shouldBeTime) {
-            // If scrubbing around, adjust timing
-            // or if time shift is bigger than 0.45sec
+        const { current } = mediaRef;
+        const action = (0, get_media_sync_action_js_1.getMediaSyncAction)({
+            duration: current.duration,
+            currentTime: current.currentTime,
+            paused: current.paused,
+            ended: current.ended,
+            desiredUnclampedTime,
+            mediaTagTime: mediaTagCurrentTime.current.time,
+            mediaTagLastUpdate: mediaTagCurrentTime.current.lastUpdate,
+            rvcTime: (_c = (_a = rvcCurrentTime.current) === null || _a === void 0 ? void 0 : _a.time) !== null && _c !== void 0 ? _c : null,
+            rvcLastUpdate: (_d = (_b = rvcCurrentTime.current) === null || _b === void 0 ? void 0 : _b.lastUpdate) !== null && _d !== void 0 ? _d : null,
+            isVariableFpsVideo: Boolean(isVariableFpsVideoMap.current[src]),
+            acceptableTimeShift: acceptableTimeShiftButLessThanDuration,
+            lastSeekDueToShift: lastSeekDueToShift.current,
+            playing,
+            playbackRate,
+            mediaTagBufferingOrStalled: isMediaTagBuffering || isBuffering(),
+            playerBuffering: buffering.buffering.current,
+            absoluteFrame,
+            onlyWarnForMediaSeekingError,
+            isPremounting,
+            isPostmounting,
+            pauseWhenBuffering,
+        });
+        if (action.type === 'none') {
+            return;
+        }
+        if (action.type === 'seek-due-to-shift') {
             lastSeek.current = (0, seek_js_1.seek)({
-                mediaRef: mediaRef.current,
-                time: shouldBeTime,
+                mediaRef: current,
+                time: action.shouldBeTime,
                 logLevel,
-                why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ', isVariableFpsVideo = true' : ''}, isPremounting = ${isPremounting}, isPostmounting = ${isPostmounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
+                why: action.why,
                 mountTime,
             });
             lastSeekDueToShift.current = lastSeek.current;
-            if (playing) {
-                if (playbackRate > 0) {
-                    bufferUntilFirstFrame(shouldBeTime);
-                }
-                if (mediaRef.current.paused) {
-                    (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)({
-                        mediaRef,
-                        mediaType,
-                        onAutoPlayError,
-                        logLevel,
-                        mountTime,
-                        reason: 'player is playing but media tag is paused, and just seeked',
-                        isPlayer: env.isPlayer,
-                    });
-                }
+            if (action.bufferUntilFirstFrame) {
+                bufferUntilFirstFrame(action.shouldBeTime);
             }
-            if (!onlyWarnForMediaSeekingError) {
-                (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
-            }
-            return;
-        }
-        const seekThreshold = playing ? 0.15 : 0.01;
-        // Only perform a seek if the time is not already the same.
-        // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
-        // therefore a threshold is allowed.
-        // Refer to the https://github.com/remotion-dev/video-buffering-example
-        // which is fixed by only seeking conditionally.
-        const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > seekThreshold;
-        const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
-        const isSomethingElseBuffering = buffering.buffering.current && !isMediaTagBufferingOrStalled;
-        if (!playing || isSomethingElseBuffering) {
-            if (makesSenseToSeek) {
-                lastSeek.current = (0, seek_js_1.seek)({
-                    mediaRef: mediaRef.current,
-                    time: shouldBeTime,
+            if (action.playReason !== null) {
+                (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)({
+                    mediaRef,
+                    mediaType,
+                    onAutoPlayError,
                     logLevel,
-                    why: `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})`,
                     mountTime,
+                    reason: action.playReason,
+                    isPlayer: env.isPlayer,
                 });
             }
+            if (action.warnAboutNonSeekable) {
+                (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(current, 'console-error');
+            }
             return;
         }
-        if (!playing || buffering.buffering.current) {
-            return;
-        }
-        // We now assured we are in playing state and not buffering
-        const pausedCondition = mediaRef.current.paused && !mediaRef.current.ended;
-        const firstFrameCondition = absoluteFrame === 0;
-        if (pausedCondition || firstFrameCondition) {
-            const reason = pausedCondition
-                ? 'media tag is paused'
-                : 'absolute frame is 0';
-            if (makesSenseToSeek) {
+        if (action.type === 'seek-if-not-playing') {
+            if (action.why !== null) {
                 lastSeek.current = (0, seek_js_1.seek)({
-                    mediaRef: mediaRef.current,
-                    time: shouldBeTime,
+                    mediaRef: current,
+                    time: action.shouldBeTime,
                     logLevel,
-                    why: `is over timeshift threshold (threshold = ${seekThreshold}) and ${reason}`,
+                    why: action.why,
                     mountTime,
                 });
             }
-            (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)({
-                mediaRef,
-                mediaType,
-                onAutoPlayError,
+            return;
+        }
+        // action.type === 'play-and-seek'
+        if (action.why !== null) {
+            lastSeek.current = (0, seek_js_1.seek)({
+                mediaRef: current,
+                time: action.shouldBeTime,
                 logLevel,
+                why: action.why,
                 mountTime,
-                reason: `player is playing and ${reason}`,
-                isPlayer: env.isPlayer,
             });
-            if (!isVariableFpsVideo && playbackRate > 0) {
-                bufferUntilFirstFrame(shouldBeTime);
-            }
+        }
+        (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)({
+            mediaRef,
+            mediaType,
+            onAutoPlayError,
+            logLevel,
+            mountTime,
+            reason: action.playReason,
+            isPlayer: env.isPlayer,
+        });
+        if (action.bufferUntilFirstFrame) {
+            bufferUntilFirstFrame(action.shouldBeTime);
         }
     }, [
         absoluteFrame,

package/dist/cjs/use-request-video-callback-time.d.ts

@@ -2,7 +2,7 @@ import type { RefObject } from 'react';
 export declare const useRequestVideoCallbackTime: ({ mediaRef, mediaType, lastSeek, onVariableFpsVideoDetected, }: {
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement | null>;
     mediaType: "audio" | "video";
-    lastSeek: import("react").MutableRefObject<number | null>;
+    lastSeek: RefObject<number | null>;
     onVariableFpsVideoDetected: () => void;
 }) => RefObject<{
     time: number;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.486";
+export declare const VERSION = "4.0.487";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.486';
+exports.VERSION = '4.0.487';

package/dist/cjs/wrap-remotion-context.d.ts

@@ -39,7 +39,7 @@ export declare function useRemotionContexts(): {
         listenForResume: (callback: () => void) => {
             remove: () => void;
         };
-        buffering: React.MutableRefObject<boolean>;
+        buffering: React.RefObject<boolean>;
     } | null;
     logLevelContext: import("./log-level-context.js").LoggingContextValue;
 };

package/dist/esm/index.mjs

@@ -1291,7 +1291,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.486";
+var VERSION = "4.0.487";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -7458,7 +7458,8 @@ var useBufferManager = (logLevel, mountTime) => {
     if (rendering) {
       return;
     }
-    if (blocks.length > 0) {
+    if (blocks.length > 0 && !buffering.current) {
+      buffering.current = true;
       onBufferingCallbacks.forEach((c2) => c2());
       playbackLogging({
         logLevel,
@@ -7473,7 +7474,8 @@ var useBufferManager = (logLevel, mountTime) => {
       if (rendering) {
         return;
       }
-      if (blocks.length === 0) {
+      if (blocks.length === 0 && buffering.current) {
+        buffering.current = false;
         onResumeCallbacks.forEach((c2) => c2());
         playbackLogging({
           logLevel,
@@ -7506,15 +7508,11 @@ var useIsPlayerBuffering = (bufferManager) => {
     const onResume = () => {
       setIsBuffering(false);
     };
-    bufferManager.listenForBuffering(onBuffer);
-    bufferManager.listenForResume(onResume);
+    const buffer = bufferManager.listenForBuffering(onBuffer);
+    const resume = bufferManager.listenForResume(onResume);
     return () => {
-      bufferManager.listenForBuffering(() => {
-        return;
-      });
-      bufferManager.listenForResume(() => {
-        return;
-      });
+      buffer.remove();
+      resume.remove();
     };
   }, [bufferManager]);
   return isBuffering;
@@ -7643,6 +7641,74 @@ var useBufferUntilFirstFrame = ({
   }, [bufferUntilFirstFrame]);
 };
 
+// src/get-media-sync-action.ts
+var getMediaSyncAction = (input) => {
+  const {
+    duration,
+    currentTime,
+    paused,
+    ended,
+    desiredUnclampedTime,
+    mediaTagTime,
+    mediaTagLastUpdate,
+    rvcTime,
+    rvcLastUpdate,
+    isVariableFpsVideo,
+    acceptableTimeShift,
+    lastSeekDueToShift,
+    playing,
+    playbackRate,
+    mediaTagBufferingOrStalled,
+    playerBuffering,
+    absoluteFrame,
+    onlyWarnForMediaSeekingError,
+    isPremounting,
+    isPostmounting,
+    pauseWhenBuffering
+  } = input;
+  const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration) ? Math.min(duration, desiredUnclampedTime) : desiredUnclampedTime;
+  const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
+  const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
+  const mostRecentTimeshift = rvcLastUpdate && rvcTime > mediaTagLastUpdate ? timeShiftRvcTag : timeShiftMediaTag;
+  const timeShift = timeShiftRvcTag && !isVariableFpsVideo ? mostRecentTimeshift : timeShiftMediaTag;
+  if (timeShift > acceptableTimeShift && lastSeekDueToShift !== shouldBeTime) {
+    return {
+      type: "seek-due-to-shift",
+      shouldBeTime,
+      why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ", isVariableFpsVideo = true" : ""}, isPremounting = ${isPremounting}, isPostmounting = ${isPostmounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
+      bufferUntilFirstFrame: playing && playbackRate > 0,
+      playReason: playing && paused ? "player is playing but media tag is paused, and just seeked" : null,
+      warnAboutNonSeekable: !onlyWarnForMediaSeekingError
+    };
+  }
+  const seekThreshold = playing ? 0.15 : 0.01;
+  const makesSenseToSeek = Math.abs(currentTime - shouldBeTime) > seekThreshold;
+  const isSomethingElseBuffering = playerBuffering && !mediaTagBufferingOrStalled;
+  if (!playing || isSomethingElseBuffering) {
+    return {
+      type: "seek-if-not-playing",
+      shouldBeTime,
+      why: makesSenseToSeek ? `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})` : null
+    };
+  }
+  if (!playing || playerBuffering) {
+    return { type: "none" };
+  }
+  const pausedCondition = paused && !ended;
+  const firstFrameCondition = absoluteFrame === 0;
+  if (pausedCondition || firstFrameCondition) {
+    const reason = pausedCondition ? "media tag is paused" : "absolute frame is 0";
+    return {
+      type: "play-and-seek",
+      shouldBeTime,
+      why: makesSenseToSeek ? `is over timeshift threshold (threshold = ${seekThreshold}) and ${reason}` : null,
+      playReason: `player is playing and ${reason}`,
+      bufferUntilFirstFrame: !isVariableFpsVideo && playbackRate > 0
+    };
+  }
+  return { type: "none" };
+};
+
 // src/media-tag-current-time-timestamp.ts
 import React21 from "react";
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
@@ -8078,89 +8144,93 @@ var useMediaPlayback = ({
     if (!src) {
       throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
     }
-    const { duration } = mediaRef.current;
-    const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration) ? Math.min(duration, desiredUnclampedTime) : desiredUnclampedTime;
-    const mediaTagTime = mediaTagCurrentTime.current.time;
-    const rvcTime = rvcCurrentTime.current?.time ?? null;
-    const isVariableFpsVideo = isVariableFpsVideoMap.current[src];
-    const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
-    const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
-    const mostRecentTimeshift = rvcCurrentTime.current?.lastUpdate && rvcCurrentTime.current.time > mediaTagCurrentTime.current.lastUpdate ? timeShiftRvcTag : timeShiftMediaTag;
-    const timeShift = timeShiftRvcTag && !isVariableFpsVideo ? mostRecentTimeshift : timeShiftMediaTag;
-    if (timeShift > acceptableTimeShiftButLessThanDuration && lastSeekDueToShift.current !== shouldBeTime) {
+    const { current } = mediaRef;
+    const action = getMediaSyncAction({
+      duration: current.duration,
+      currentTime: current.currentTime,
+      paused: current.paused,
+      ended: current.ended,
+      desiredUnclampedTime,
+      mediaTagTime: mediaTagCurrentTime.current.time,
+      mediaTagLastUpdate: mediaTagCurrentTime.current.lastUpdate,
+      rvcTime: rvcCurrentTime.current?.time ?? null,
+      rvcLastUpdate: rvcCurrentTime.current?.lastUpdate ?? null,
+      isVariableFpsVideo: Boolean(isVariableFpsVideoMap.current[src]),
+      acceptableTimeShift: acceptableTimeShiftButLessThanDuration,
+      lastSeekDueToShift: lastSeekDueToShift.current,
+      playing,
+      playbackRate,
+      mediaTagBufferingOrStalled: isMediaTagBuffering || isBuffering(),
+      playerBuffering: buffering.buffering.current,
+      absoluteFrame,
+      onlyWarnForMediaSeekingError,
+      isPremounting,
+      isPostmounting,
+      pauseWhenBuffering
+    });
+    if (action.type === "none") {
+      return;
+    }
+    if (action.type === "seek-due-to-shift") {
       lastSeek.current = seek({
-        mediaRef: mediaRef.current,
-        time: shouldBeTime,
+        mediaRef: current,
+        time: action.shouldBeTime,
         logLevel,
-        why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ", isVariableFpsVideo = true" : ""}, isPremounting = ${isPremounting}, isPostmounting = ${isPostmounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
+        why: action.why,
         mountTime
       });
       lastSeekDueToShift.current = lastSeek.current;
-      if (playing) {
-        if (playbackRate > 0) {
-          bufferUntilFirstFrame(shouldBeTime);
-        }
-        if (mediaRef.current.paused) {
-          playAndHandleNotAllowedError({
-            mediaRef,
-            mediaType,
-            onAutoPlayError,
-            logLevel,
-            mountTime,
-            reason: "player is playing but media tag is paused, and just seeked",
-            isPlayer: env.isPlayer
-          });
-        }
+      if (action.bufferUntilFirstFrame) {
+        bufferUntilFirstFrame(action.shouldBeTime);
       }
-      if (!onlyWarnForMediaSeekingError) {
-        warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? "console-warning" : "console-error");
-      }
-      return;
-    }
-    const seekThreshold = playing ? 0.15 : 0.01;
-    const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > seekThreshold;
-    const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
-    const isSomethingElseBuffering = buffering.buffering.current && !isMediaTagBufferingOrStalled;
-    if (!playing || isSomethingElseBuffering) {
-      if (makesSenseToSeek) {
-        lastSeek.current = seek({
-          mediaRef: mediaRef.current,
-          time: shouldBeTime,
+      if (action.playReason !== null) {
+        playAndHandleNotAllowedError({
+          mediaRef,
+          mediaType,
+          onAutoPlayError,
           logLevel,
-          why: `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})`,
-          mountTime
+          mountTime,
+          reason: action.playReason,
+          isPlayer: env.isPlayer
         });
       }
+      if (action.warnAboutNonSeekable) {
+        warnAboutNonSeekableMedia(current, "console-error");
+      }
       return;
     }
-    if (!playing || buffering.buffering.current) {
-      return;
-    }
-    const pausedCondition = mediaRef.current.paused && !mediaRef.current.ended;
-    const firstFrameCondition = absoluteFrame === 0;
-    if (pausedCondition || firstFrameCondition) {
-      const reason = pausedCondition ? "media tag is paused" : "absolute frame is 0";
-      if (makesSenseToSeek) {
+    if (action.type === "seek-if-not-playing") {
+      if (action.why !== null) {
         lastSeek.current = seek({
-          mediaRef: mediaRef.current,
-          time: shouldBeTime,
+          mediaRef: current,
+          time: action.shouldBeTime,
           logLevel,
-          why: `is over timeshift threshold (threshold = ${seekThreshold}) and ${reason}`,
+          why: action.why,
           mountTime
         });
       }
-      playAndHandleNotAllowedError({
-        mediaRef,
-        mediaType,
-        onAutoPlayError,
+      return;
+    }
+    if (action.why !== null) {
+      lastSeek.current = seek({
+        mediaRef: current,
+        time: action.shouldBeTime,
         logLevel,
-        mountTime,
-        reason: `player is playing and ${reason}`,
-        isPlayer: env.isPlayer
+        why: action.why,
+        mountTime
       });
-      if (!isVariableFpsVideo && playbackRate > 0) {
-        bufferUntilFirstFrame(shouldBeTime);
-      }
+    }
+    playAndHandleNotAllowedError({
+      mediaRef,
+      mediaType,
+      onAutoPlayError,
+      logLevel,
+      mountTime,
+      reason: action.playReason,
+      isPlayer: env.isPlayer
+    });
+    if (action.bufferUntilFirstFrame) {
+      bufferUntilFirstFrame(action.shouldBeTime);
     }
   }, [
     absoluteFrame,
@@ -12009,6 +12079,7 @@ var Still = (props2) => {
   };
   return React42.createElement(Composition, newProps);
 };
+addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
 import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
 

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.486";
+var VERSION = "4.0.487";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.486",
+	"version": "4.0.487",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.486",
+		"@remotion/eslint-config-internal": "4.0.487",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},