@remotion/player 4.0.459 → 4.0.461

package/dist/cjs/index.d.ts

@@ -39,7 +39,7 @@ export declare const PlayerInternals: {
         inFrame: number | null;
         outFrame: number | null;
         browserMediaControlsBehavior: import("./browser-mediasession.js").BrowserMediaControlsBehavior;
-        getCurrentFrame: import("./use-frame-imperative.js").GetCurrentFrame;
+        getCurrentFrame: () => number;
         muted: boolean;
     }) => void;
     useElementSize: (ref: import("react").RefObject<HTMLElement | null>, options: {
@@ -67,5 +67,4 @@ export declare const PlayerInternals: {
     BufferingIndicator: import("react").FC<{
         readonly type: "player" | "studio";
     }>;
-    useFrameImperative: () => import("./use-frame-imperative.js").GetCurrentFrame;
 };

package/dist/cjs/index.js

@@ -7,7 +7,6 @@ const calculate_scale_js_1 = require("./calculate-scale.js");
 const emitter_context_js_1 = require("./emitter-context.js");
 const EmitterProvider_js_1 = require("./EmitterProvider.js");
 const event_emitter_js_1 = require("./event-emitter.js");
-const use_frame_imperative_js_1 = require("./use-frame-imperative.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");
@@ -27,5 +26,4 @@ exports.PlayerInternals = {
     updateAllElementsSizes: use_element_size_js_1.updateAllElementsSizes,
     PlayerEmitterProvider: EmitterProvider_js_1.PlayerEmitterProvider,
     BufferingIndicator: BufferingIndicator_js_1.BufferingIndicator,
-    useFrameImperative: use_frame_imperative_js_1.useFrameImperative,
 };

package/dist/cjs/set-global-time-anchor.d.ts

@@ -1,5 +1,5 @@
 export declare const ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
-export declare const setGlobalTimeAnchor: ({ audioContext, audioSyncAnchor, absoluteTimeInSeconds, globalPlaybackRate, logLevel, }: {
+export declare const setGlobalTimeAnchor: ({ audioContext, audioSyncAnchor, absoluteTimeInSeconds, globalPlaybackRate, logLevel, force, }: {
     audioContext: AudioContext;
     audioSyncAnchor: {
         value: number;
@@ -7,4 +7,5 @@ export declare const setGlobalTimeAnchor: ({ audioContext, audioSyncAnchor, abso
     absoluteTimeInSeconds: number;
     globalPlaybackRate: number;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    force: boolean;
 }) => boolean;

package/dist/cjs/set-global-time-anchor.js

@@ -3,17 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setGlobalTimeAnchor = exports.ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = void 0;
 const remotion_1 = require("remotion");
 exports.ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
-const setGlobalTimeAnchor = ({ audioContext, audioSyncAnchor, absoluteTimeInSeconds, globalPlaybackRate, logLevel, }) => {
+const setGlobalTimeAnchor = ({ audioContext, audioSyncAnchor, absoluteTimeInSeconds, globalPlaybackRate, logLevel, force, }) => {
     const newAnchor = audioContext.currentTime - absoluteTimeInSeconds / globalPlaybackRate;
     const shift = (newAnchor - audioSyncAnchor.value) * globalPlaybackRate;
     const { outputLatency } = audioContext;
     const safeOutputLatency = outputLatency === 0 ? 0.3 : outputLatency;
     const latency = audioContext.baseLatency + safeOutputLatency;
     // Skip small shifts to avoid audio glitches from frame-quantized re-anchoring
-    if (Math.abs(shift) < exports.ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency) {
+    if (Math.abs(shift) < exports.ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency && !force) {
         return false;
     }
-    remotion_1.Internals.Log.verbose({ logLevel, tag: 'audio-scheduling' }, 'Anchor changed from %s to %s with shift %s', audioSyncAnchor.value, newAnchor, shift);
+    remotion_1.Internals.Log.verbose({ logLevel, tag: 'audio-scheduling' }, 'Anchor ' +
+        (force ? 'forcibly ' : '') +
+        'changed from %s to %s with shift %s', audioSyncAnchor.value, newAnchor, shift);
     audioSyncAnchor.value = newAnchor;
     return true;
 };

package/dist/cjs/use-playback.d.ts

@@ -1,5 +1,4 @@
 import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
-import type { GetCurrentFrame } from './use-frame-imperative.js';
 export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, muted, }: {
     loop: boolean;
     playbackRate: number;
@@ -7,6 +6,6 @@ export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnde
     inFrame: number | null;
     outFrame: number | null;
     browserMediaControlsBehavior: BrowserMediaControlsBehavior;
-    getCurrentFrame: GetCurrentFrame;
+    getCurrentFrame: () => number;
     muted: boolean;
 }) => void;

package/dist/cjs/use-playback.js

@@ -31,6 +31,8 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         playbackRate,
         videoConfig: config,
     });
+    // Update time anchor when seeking:
+    // If the user clicked on a different time in the timeline, we need to re-sync the anchor
     (0, react_1.useLayoutEffect)(() => {
         if (!sharedAudioContext) {
             return;
@@ -41,17 +43,58 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         if (!config) {
             return;
         }
+        if (muted) {
+            return;
+        }
         const changed = (0, set_global_time_anchor_js_1.setGlobalTimeAnchor)({
             audioContext: sharedAudioContext.audioContext,
             audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
             absoluteTimeInSeconds: frame / config.fps,
             globalPlaybackRate: playbackRate,
             logLevel,
+            force: false,
         });
         if (changed) {
             sharedAudioContext.audioSyncAnchorEmitter.dispatch('changed');
         }
-    }, [config, frame, logLevel, playbackRate, sharedAudioContext]);
+    }, [config, frame, logLevel, playbackRate, sharedAudioContext, muted]);
+    // When the audio context is suspended, we use the opportunity to
+    // re-anchor the time to be exact.
+    (0, react_1.useLayoutEffect)(() => {
+        const audioContext = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.audioContext;
+        if (!audioContext) {
+            return;
+        }
+        if (!config) {
+            return;
+        }
+        if (muted) {
+            return;
+        }
+        const callback = () => {
+            if (audioContext.state !== 'running') {
+                (0, set_global_time_anchor_js_1.setGlobalTimeAnchor)({
+                    audioContext,
+                    audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+                    absoluteTimeInSeconds: getCurrentFrame() / config.fps,
+                    globalPlaybackRate: playbackRate,
+                    logLevel,
+                    force: true,
+                });
+            }
+        };
+        audioContext === null || audioContext === void 0 ? void 0 : audioContext.addEventListener('statechange', callback);
+        return () => {
+            audioContext === null || audioContext === void 0 ? void 0 : audioContext.removeEventListener('statechange', callback);
+        };
+    }, [
+        config,
+        getCurrentFrame,
+        logLevel,
+        muted,
+        playbackRate,
+        sharedAudioContext,
+    ]);
     (0, react_2.useEffect)(() => {
         var _a;
         if (!config) {
@@ -88,7 +131,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) {
+            if (!muted && !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;
@@ -107,7 +150,8 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             });
             framesAdvanced += framesToAdvance;
             if (nextFrame !== getCurrentFrame() &&
-                (!hasEnded || moveToBeginningWhenEnded)) {
+                (!hasEnded || moveToBeginningWhenEnded) &&
+                !context.buffering.current) {
                 setFrame((c) => ({ ...c, [config.id]: nextFrame }));
             }
             if (hasEnded) {
@@ -124,31 +168,16 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             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 (getIsResumingAudioContext !== null && !muted) {
                 getIsResumingAudioContext.then(() => {
-                    if (!(sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.audioContext)) {
-                        return;
-                    }
-                    if (!sharedAudioContext.audioSyncAnchor) {
-                        return;
-                    }
-                    // set it here and DON'T propagate an event
-                    // the useLayoutEffect above is supposed to handle a user seek,
-                    // this is a natural wait for the audio playback to start.
-                    // we don't wanna destroy the iterators.
-                    (0, set_global_time_anchor_js_1.setGlobalTimeAnchor)({
-                        audioContext: sharedAudioContext.audioContext,
-                        audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
-                        absoluteTimeInSeconds: getCurrentFrame() / config.fps,
-                        globalPlaybackRate: playbackRate,
-                        logLevel,
-                    });
                     startedTime = performance.now();
                     framesAdvanced = 0;
                     queueNextFrame();
                 });
                 return;
             }
-            if (context.buffering.current && !muted) {
-                (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
+            if (context.buffering.current) {
+                if (!muted) {
+                    (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
+                }
                 const stopListening = context.listenForResume(() => {
                     stopListening.remove();
                     startedTime = performance.now();

package/dist/esm/index.mjs

@@ -495,19 +495,6 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   });
 };
 
-// src/use-frame-imperative.ts
-import { useCallback, useRef } from "react";
-import { Internals as Internals4 } from "remotion";
-var useFrameImperative = () => {
-  const frame = Internals4.Timeline.useTimelinePosition();
-  const frameRef = useRef(frame);
-  frameRef.current = frame;
-  const getCurrentFrame = useCallback(() => {
-    return frameRef.current;
-  }, []);
-  return getCurrentFrame;
-};
-
 // src/use-hover-state.ts
 import { useEffect as useEffect2, useState as useState2 } from "react";
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
@@ -553,29 +540,29 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 
 // src/use-playback.ts
 import { useLayoutEffect as useLayoutEffect2 } from "react";
-import { useContext as useContext4, useEffect as useEffect5, useRef as useRef5 } from "react";
-import { Internals as Internals7 } from "remotion";
+import { useContext as useContext4, useEffect as useEffect5, useRef as useRef4 } from "react";
+import { Internals as Internals6 } from "remotion";
 
 // src/browser-mediasession.ts
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
 
 // src/use-player.ts
-import { useCallback as useCallback2, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3 } from "react";
-import { Internals as Internals5 } from "remotion";
+import { useCallback, useContext as useContext3, useMemo, useRef, useState as useState3 } from "react";
+import { Internals as Internals4 } from "remotion";
 var usePlayer = () => {
-  const [playing, setPlaying, imperativePlaying] = Internals5.Timeline.usePlayingState();
+  const [playing, setPlaying, imperativePlaying] = Internals4.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState3(false);
-  const frame = Internals5.Timeline.useTimelinePosition();
-  const playStart = useRef2(frame);
-  const setFrame = Internals5.Timeline.useTimelineSetFrame();
-  const setTimelinePosition = Internals5.Timeline.useTimelineSetFrame();
-  const audioContext = useContext3(Internals5.SharedAudioContext);
-  const audioTagsContext = useContext3(Internals5.SharedAudioTagsContext);
-  const { audioAndVideoTags } = Internals5.useTimelineContext();
-  const frameRef = useRef2(frame);
+  const frame = Internals4.Timeline.useTimelinePosition();
+  const playStart = useRef(frame);
+  const setFrame = Internals4.Timeline.useTimelineSetFrame();
+  const setTimelinePosition = Internals4.Timeline.useTimelineSetFrame();
+  const audioContext = useContext3(Internals4.SharedAudioContext);
+  const audioTagsContext = useContext3(Internals4.SharedAudioTagsContext);
+  const { audioAndVideoTags } = Internals4.useTimelineContext();
+  const frameRef = useRef(frame);
   frameRef.current = frame;
-  const video = Internals5.useVideo();
-  const config = Internals5.useUnsafeVideoConfig();
+  const video = Internals4.useVideo();
+  const config = Internals4.useUnsafeVideoConfig();
   const emitter = useContext3(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
@@ -583,19 +570,19 @@ var usePlayer = () => {
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext3(Internals5.BufferingContextReact);
+  const bufferingContext = useContext3(Internals4.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
   const { buffering } = bufferingContext;
-  const seek = useCallback2((newFrame) => {
+  const seek = useCallback((newFrame) => {
     if (video?.id) {
       setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
     }
     frameRef.current = newFrame;
     emitter.dispatchSeek(newFrame);
   }, [emitter, setTimelinePosition, video?.id]);
-  const play = useCallback2((e) => {
+  const play = useCallback((e) => {
     if (imperativePlaying.current) {
       return;
     }
@@ -622,7 +609,7 @@ var usePlayer = () => {
     seek,
     audioAndVideoTags
   ]);
-  const pause = useCallback2(() => {
+  const pause = useCallback(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       setPlaying(false);
@@ -630,7 +617,7 @@ var usePlayer = () => {
       audioContext?.suspend();
     }
   }, [emitter, imperativePlaying, setPlaying, audioContext]);
-  const pauseAndReturnToPlayStart = useCallback2(() => {
+  const pauseAndReturnToPlayStart = useCallback(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       frameRef.current = playStart.current;
@@ -645,7 +632,7 @@ var usePlayer = () => {
     }
   }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
   const videoId = video?.id;
-  const frameBack = useCallback2((frames) => {
+  const frameBack = useCallback((frames) => {
     if (!videoId) {
       return null;
     }
@@ -664,7 +651,7 @@ var usePlayer = () => {
       };
     });
   }, [imperativePlaying, setFrame, videoId]);
-  const frameForward = useCallback2((frames) => {
+  const frameForward = useCallback((frames) => {
     if (!videoId) {
       return null;
     }
@@ -683,20 +670,20 @@ var usePlayer = () => {
       };
     });
   }, [videoId, imperativePlaying, lastFrame, setFrame]);
-  const toggle = useCallback2((e) => {
+  const toggle = useCallback((e) => {
     if (imperativePlaying.current) {
       pause();
     } else {
       play(e);
     }
   }, [imperativePlaying, pause, play]);
-  const isPlaying = useCallback2(() => {
+  const isPlaying = useCallback(() => {
     return imperativePlaying.current;
   }, [imperativePlaying]);
-  const getCurrentFrame = useCallback2(() => {
+  const getCurrentFrame = useCallback(() => {
     return frameRef.current;
   }, [frameRef]);
-  const isBuffering = useCallback2(() => {
+  const isBuffering = useCallback(() => {
     return buffering.current;
   }, [buffering]);
   const returnValue = useMemo(() => {
@@ -744,7 +731,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek } = usePlayer();
-  const hasEverPlayed = useRef3(false);
+  const hasEverPlayed = useRef2(false);
   useEffect3(() => {
     if (playing) {
       hasEverPlayed.current = true;
@@ -883,7 +870,7 @@ var calculateNextFrame = ({
 };
 
 // src/is-backgrounded.ts
-import { useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
 var getIsBackgrounded = () => {
   if (typeof document === "undefined") {
     return false;
@@ -891,7 +878,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef4(getIsBackgrounded());
+  const isBackgrounded = useRef3(getIsBackgrounded());
   useEffect4(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -905,24 +892,25 @@ var useIsBackgrounded = () => {
 };
 
 // src/set-global-time-anchor.ts
-import { Internals as Internals6 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 var ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
 var setGlobalTimeAnchor = ({
   audioContext,
   audioSyncAnchor,
   absoluteTimeInSeconds,
   globalPlaybackRate,
-  logLevel
+  logLevel,
+  force
 }) => {
   const newAnchor = audioContext.currentTime - absoluteTimeInSeconds / globalPlaybackRate;
   const shift = (newAnchor - audioSyncAnchor.value) * globalPlaybackRate;
   const { outputLatency } = audioContext;
   const safeOutputLatency = outputLatency === 0 ? 0.3 : outputLatency;
   const latency = audioContext.baseLatency + safeOutputLatency;
-  if (Math.abs(shift) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency) {
+  if (Math.abs(shift) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency && !force) {
     return false;
   }
-  Internals6.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
+  Internals5.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
   audioSyncAnchor.value = newAnchor;
   return true;
 };
@@ -938,15 +926,15 @@ var usePlayback = ({
   getCurrentFrame,
   muted
 }) => {
-  const config = Internals7.useUnsafeVideoConfig();
-  const frame = Internals7.Timeline.useTimelinePosition();
+  const config = Internals6.useUnsafeVideoConfig();
+  const frame = Internals6.Timeline.useTimelinePosition();
   const { playing, pause, emitter, isPlaying } = usePlayer();
-  const setFrame = Internals7.Timeline.useTimelineSetFrame();
-  const sharedAudioContext = useContext4(Internals7.SharedAudioContext);
-  const logLevel = Internals7.useLogLevel();
+  const setFrame = Internals6.Timeline.useTimelineSetFrame();
+  const sharedAudioContext = useContext4(Internals6.SharedAudioContext);
+  const logLevel = Internals6.useLogLevel();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateTimestamp = useRef5(0);
-  const context = useContext4(Internals7.BufferingContextReact);
+  const lastTimeUpdateTimestamp = useRef4(0);
+  const context = useContext4(Internals6.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -965,17 +953,56 @@ var usePlayback = ({
     if (!config) {
       return;
     }
+    if (muted) {
+      return;
+    }
     const changed = setGlobalTimeAnchor({
       audioContext: sharedAudioContext.audioContext,
       audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
       absoluteTimeInSeconds: frame / config.fps,
       globalPlaybackRate: playbackRate,
-      logLevel
+      logLevel,
+      force: false
     });
     if (changed) {
       sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
     }
-  }, [config, frame, logLevel, playbackRate, sharedAudioContext]);
+  }, [config, frame, logLevel, playbackRate, sharedAudioContext, muted]);
+  useLayoutEffect2(() => {
+    const audioContext = sharedAudioContext?.audioContext;
+    if (!audioContext) {
+      return;
+    }
+    if (!config) {
+      return;
+    }
+    if (muted) {
+      return;
+    }
+    const callback = () => {
+      if (audioContext.state !== "running") {
+        setGlobalTimeAnchor({
+          audioContext,
+          audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+          absoluteTimeInSeconds: getCurrentFrame() / config.fps,
+          globalPlaybackRate: playbackRate,
+          logLevel,
+          force: true
+        });
+      }
+    };
+    audioContext?.addEventListener("statechange", callback);
+    return () => {
+      audioContext?.removeEventListener("statechange", callback);
+    };
+  }, [
+    config,
+    getCurrentFrame,
+    logLevel,
+    muted,
+    playbackRate,
+    sharedAudioContext
+  ]);
   useEffect5(() => {
     if (!config) {
       return;
@@ -1009,7 +1036,7 @@ var usePlayback = ({
         sharedAudioContext?.suspend?.();
         return;
       }
-      if (!muted) {
+      if (!muted && !context.buffering.current) {
         sharedAudioContext?.resume?.();
       }
       const time = performance.now() - startedTime;
@@ -1027,7 +1054,7 @@ var usePlayback = ({
         shouldLoop: loop
       });
       framesAdvanced += framesToAdvance;
-      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded)) {
+      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded) && !context.buffering.current) {
         setFrame((c) => ({ ...c, [config.id]: nextFrame }));
       }
       if (hasEnded) {
@@ -1042,27 +1069,16 @@ var usePlayback = ({
       const getIsResumingAudioContext = sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
       if (getIsResumingAudioContext !== null && !muted) {
         getIsResumingAudioContext.then(() => {
-          if (!sharedAudioContext?.audioContext) {
-            return;
-          }
-          if (!sharedAudioContext.audioSyncAnchor) {
-            return;
-          }
-          setGlobalTimeAnchor({
-            audioContext: sharedAudioContext.audioContext,
-            audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
-            absoluteTimeInSeconds: getCurrentFrame() / config.fps,
-            globalPlaybackRate: playbackRate,
-            logLevel
-          });
           startedTime = performance.now();
           framesAdvanced = 0;
           queueNextFrame();
         });
         return;
       }
-      if (context.buffering.current && !muted) {
-        sharedAudioContext?.suspend?.();
+      if (context.buffering.current) {
+        if (!muted) {
+          sharedAudioContext?.suspend?.();
+        }
         const stopListening = context.listenForResume(() => {
           stopListening.remove();
           startedTime = performance.now();
@@ -1132,7 +1148,7 @@ var usePlayback = ({
 };
 
 // src/utils/use-element-size.ts
-import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
 var elementSizeHooks = [];
 var updateAllElementsSizes = () => {
   for (const listener of elementSizeHooks) {
@@ -1192,7 +1208,7 @@ var useElementSize = (ref, options) => {
       });
     });
   }, [options.shouldApplyCssTransforms]);
-  const updateSize = useCallback3(() => {
+  const updateSize = useCallback2(() => {
     if (!ref.current) {
       return;
     }
@@ -1262,10 +1278,10 @@ import {
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo14,
-  useRef as useRef12,
+  useRef as useRef11,
   useState as useState13
 } from "react";
-import { Composition, Internals as Internals16 } from "remotion";
+import { Composition, Internals as Internals15 } from "remotion";
 
 // src/player-css-classname.ts
 var playerCssClassname = (override) => {
@@ -1276,15 +1292,15 @@ var playerCssClassname = (override) => {
 import React10, {
   Suspense,
   forwardRef,
-  useCallback as useCallback11,
+  useCallback as useCallback10,
   useContext as useContext5,
   useEffect as useEffect12,
   useImperativeHandle,
   useMemo as useMemo12,
-  useRef as useRef11,
+  useRef as useRef10,
   useState as useState11
 } from "react";
-import { Internals as Internals12 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 
 // src/error-boundary.tsx
 import React3 from "react";
@@ -1409,7 +1425,7 @@ var RenderWarningIfBlacklist = () => {
 };
 
 // src/PlayerControls.tsx
-import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef9, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef8, useState as useState10 } from "react";
 
 // src/DefaultPlayPauseButton.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -1426,11 +1442,11 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
 };
 
 // src/MediaVolumeSlider.tsx
-import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef6, useState as useState6 } from "react";
-import { Internals as Internals8 } from "remotion";
+import { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import { Internals as Internals7 } from "remotion";
 
 // src/render-volume-slider.tsx
-import React5, { useCallback as useCallback4, useMemo as useMemo3, useState as useState5 } from "react";
+import React5, { useCallback as useCallback3, useMemo as useMemo3, useState as useState5 } from "react";
 import { random } from "remotion";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var KNOB_SIZE = 12;
@@ -1464,7 +1480,7 @@ var DefaultVolumeSlider = ({
   }, [isVertical]);
   const randomId = typeof React5.useId === "undefined" ? "volume-slider" : React5.useId();
   const [randomClass] = useState5(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
-  const onVolumeChange = useCallback4((e) => {
+  const onVolumeChange = useCallback3((e) => {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
   const inputStyle = useMemo3(() => {
@@ -1541,13 +1557,13 @@ var renderDefaultVolumeSlider = (props) => {
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var VOLUME_SLIDER_WIDTH = 100;
 var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
-  const [mediaMuted, setMediaMuted] = Internals8.useMediaMutedState();
-  const [mediaVolume, setMediaVolume] = Internals8.useMediaVolumeState();
+  const [mediaMuted, setMediaMuted] = Internals7.useMediaMutedState();
+  const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
   const [focused, setFocused] = useState6(false);
-  const parentDivRef = useRef6(null);
-  const inputRef = useRef6(null);
+  const parentDivRef = useRef5(null);
+  const inputRef = useRef5(null);
   const hover = useHoverState(parentDivRef, false);
-  const onBlur = useCallback5(() => {
+  const onBlur = useCallback4(() => {
     setTimeout(() => {
       if (inputRef.current && document.activeElement !== inputRef.current) {
         setFocused(false);
@@ -1555,7 +1571,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     }, 10);
   }, []);
   const isVolume0 = mediaVolume === 0;
-  const onClick = useCallback5(() => {
+  const onClick = useCallback4(() => {
     if (isVolume0) {
       setMediaVolume(1);
       setMediaMuted(false);
@@ -1586,7 +1602,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       padding: 0
     };
   }, []);
-  const renderDefaultMuteButton = useCallback5(({ muted, volume }) => {
+  const renderDefaultMuteButton = useCallback4(({ muted, volume }) => {
     const isMutedOrZero = muted || volume === 0;
     return /* @__PURE__ */ jsx8("button", {
       "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
@@ -1603,7 +1619,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     return renderMuteButton ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
   }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
   const volumeSlider = useMemo4(() => {
-    return (focused || hover) && !mediaMuted && !Internals8.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
+    return (focused || hover) && !mediaMuted && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
       onBlur: () => setFocused(false),
@@ -1630,14 +1646,14 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 };
 
 // src/PlaybackrateControl.tsx
-import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo5, useState as useState8 } from "react";
-import { Internals as Internals9 } from "remotion";
+import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo5, useState as useState8 } from "react";
+import { Internals as Internals8 } from "remotion";
 
 // src/utils/use-component-visible.ts
-import { useEffect as useEffect8, useRef as useRef7, useState as useState7 } from "react";
+import { useEffect as useEffect8, useRef as useRef6, useState as useState7 } from "react";
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
-  const ref = useRef7(null);
+  const ref = useRef6(null);
   useEffect8(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -1687,16 +1703,16 @@ var formatPlaybackRate = (rate) => {
   return str.includes(".") ? str : str + ".0";
 };
 var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
-  const onClick = useCallback6((e) => {
+  const onClick = useCallback5((e) => {
     e.stopPropagation();
     e.preventDefault();
     onSelect(rate);
   }, [onSelect, rate]);
   const [hovered, setHovered] = useState8(false);
-  const onMouseEnter = useCallback6(() => {
+  const onMouseEnter = useCallback5(() => {
     setHovered(true);
   }, []);
-  const onMouseLeave = useCallback6(() => {
+  const onMouseLeave = useCallback5(() => {
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
@@ -1723,7 +1739,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
   }, rate);
 };
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-  const { setPlaybackRate, playbackRate } = Internals9.usePlaybackRate();
+  const { setPlaybackRate, playbackRate } = Internals8.usePlaybackRate();
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
   useEffect9(() => {
     const listener = (e) => {
@@ -1763,7 +1779,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate,
     setIsComponentVisible
   ]);
-  const onSelect = useCallback6((rate) => {
+  const onSelect = useCallback5((rate) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
@@ -1825,8 +1841,8 @@ var button = {
 };
 var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
-  const { playbackRate } = Internals9.usePlaybackRate();
-  const onClick = useCallback6((e) => {
+  const { playbackRate } = Internals8.usePlaybackRate();
+  const onClick = useCallback5((e) => {
     e.stopPropagation();
     e.preventDefault();
     setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
@@ -1857,8 +1873,8 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef8, useState as useState9 } from "react";
-import { Internals as Internals10, interpolate } from "remotion";
+import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
+import { Internals as Internals9, interpolate } from "remotion";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
   const pos = clientX;
@@ -1895,19 +1911,19 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef8(null);
+  const containerRef = useRef7(null);
   const barHovered = useHoverState(containerRef, false);
   const size = useElementSize(containerRef, {
     triggerOnWindowResize: true,
     shouldApplyCssTransforms: true
   });
   const { seek, play, pause, playing } = usePlayer();
-  const frame = Internals10.Timeline.useTimelinePosition();
+  const frame = Internals9.Timeline.useTimelinePosition();
   const [dragging, setDragging] = useState9({
     dragging: false
   });
   const width = size?.width ?? 0;
-  const onPointerDown = useCallback7((e) => {
+  const onPointerDown = useCallback6((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -1921,7 +1937,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     });
     onSeekStart();
   }, [durationInFrames, width, pause, seek, playing, onSeekStart]);
-  const onPointerMove = useCallback7((e) => {
+  const onPointerMove = useCallback6((e) => {
     if (!size) {
       throw new Error("Player has no size");
     }
@@ -1932,7 +1948,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
     seek(_frame);
   }, [dragging.dragging, durationInFrames, seek, size]);
-  const onPointerUp = useCallback7(() => {
+  const onPointerUp = useCallback6(() => {
     setDragging({
       dragging: false
     });
@@ -2015,7 +2031,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
 
 // src/PlayerTimeLabel.tsx
 import { useMemo as useMemo7 } from "react";
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals10 } from "remotion";
 
 // src/format-time.ts
 var formatTime = (timeInSeconds) => {
@@ -2027,7 +2043,7 @@ var formatTime = (timeInSeconds) => {
 // src/PlayerTimeLabel.tsx
 import { jsxs as jsxs7 } from "react/jsx-runtime";
 var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
-  const frame = Internals11.Timeline.useTimelinePosition();
+  const frame = Internals10.Timeline.useTimelinePosition();
   const timeLabel = useMemo7(() => {
     return {
       color: "white",
@@ -2187,7 +2203,7 @@ var Controls = ({
   toggle,
   renderCustomControls
 }) => {
-  const playButtonRef = useRef9(null);
+  const playButtonRef = useRef8(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -2262,14 +2278,14 @@ var Controls = ({
     return null;
   }, [showPlaybackRateControl]);
   const customControlsElement = renderCustomControls ? renderCustomControls() : null;
-  const ref = useRef9(null);
-  const flexRef = useRef9(null);
-  const onPointerDownIfContainer = useCallback8((e) => {
+  const ref = useRef8(null);
+  const flexRef = useRef8(null);
+  const onPointerDownIfContainer = useCallback7((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
     }
   }, [onPointerDown]);
-  const onDoubleClickIfContainer = useCallback8((e) => {
+  const onDoubleClickIfContainer = useCallback7((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onDoubleClick?.(e);
     }
@@ -2377,7 +2393,7 @@ var Controls = ({
 var IS_NODE = typeof document === "undefined";
 
 // src/utils/use-click-prevention-on-double-click.ts
-import { useCallback as useCallback10, useMemo as useMemo11 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo11 } from "react";
 
 // src/utils/cancellable-promise.ts
 var cancellablePromise = (promise) => {
@@ -2405,16 +2421,16 @@ var cancellablePromise = (promise) => {
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 
 // src/utils/use-cancellable-promises.ts
-import { useCallback as useCallback9, useMemo as useMemo10, useRef as useRef10 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo10, useRef as useRef9 } from "react";
 var useCancellablePromises = () => {
-  const pendingPromises = useRef10([]);
-  const appendPendingPromise = useCallback9((promise) => {
+  const pendingPromises = useRef9([]);
+  const appendPendingPromise = useCallback8((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
-  const removePendingPromise = useCallback9((promise) => {
+  const removePendingPromise = useCallback8((promise) => {
     pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
   }, []);
-  const clearPendingPromises = useCallback9(() => pendingPromises.current.map((p) => p.cancel()), []);
+  const clearPendingPromises = useCallback8(() => pendingPromises.current.map((p) => p.cancel()), []);
   const api = useMemo10(() => ({
     appendPendingPromise,
     removePendingPromise,
@@ -2426,7 +2442,7 @@ var useCancellablePromises = () => {
 // src/utils/use-click-prevention-on-double-click.ts
 var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
   const api = useCancellablePromises();
-  const handleClick = useCallback10(async (e) => {
+  const handleClick = useCallback9(async (e) => {
     if (e instanceof PointerEvent ? e.pointerType === "touch" : e.nativeEvent.pointerType === "touch") {
       onClick(e);
       return;
@@ -2446,14 +2462,14 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
       }
     }
   }, [api, onClick]);
-  const handlePointerDown = useCallback10(() => {
+  const handlePointerDown = useCallback9(() => {
     document.addEventListener("pointerup", (newEvt) => {
       handleClick(newEvt);
     }, {
       once: true
     });
   }, [handleClick]);
-  const handleDoubleClick = useCallback10(() => {
+  const handleDoubleClick = useCallback9(() => {
     api.clearPendingPromises();
     onDoubleClick();
   }, [api, onDoubleClick]);
@@ -2515,9 +2531,9 @@ var PlayerUI = ({
   overrideInternalClassName,
   noSuspense
 }, ref) => {
-  const config = Internals12.useUnsafeVideoConfig();
-  const video = Internals12.useVideo();
-  const container = useRef11(null);
+  const config = Internals11.useUnsafeVideoConfig();
+  const video = Internals11.useVideo();
+  const container = useRef10(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -2534,7 +2550,7 @@ var PlayerUI = ({
   }, []);
   const player = usePlayer();
   const playerToggle = player.toggle;
-  const { mediaMuted, mediaVolume } = useContext5(Internals12.MediaVolumeContext);
+  const { mediaMuted, mediaVolume } = useContext5(Internals11.MediaVolumeContext);
   useEffect12(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
@@ -2576,10 +2592,10 @@ var PlayerUI = ({
       document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
     };
   }, []);
-  const toggle = useCallback11((e) => {
+  const toggle = useCallback10((e) => {
     playerToggle(e);
   }, [playerToggle]);
-  const requestFullscreen = useCallback11(() => {
+  const requestFullscreen = useCallback10(() => {
     if (!allowFullscreen) {
       throw new Error("allowFullscreen is false");
     }
@@ -2595,7 +2611,7 @@ var PlayerUI = ({
       container.current.requestFullscreen();
     }
   }, [allowFullscreen, supportsFullScreen]);
-  const exitFullscreen = useCallback11(() => {
+  const exitFullscreen = useCallback10(() => {
     if (document.webkitExitFullscreen) {
       document.webkitExitFullscreen();
     } else {
@@ -2639,7 +2655,7 @@ var PlayerUI = ({
     });
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef11(false);
+  const initialScaleIgnored = useRef10(false);
   useEffect12(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
@@ -2647,7 +2663,7 @@ var PlayerUI = ({
     }
     player.emitter.dispatchScaleChange(scale);
   }, [player.emitter, scale]);
-  const { setMediaVolume, setMediaMuted } = useContext5(Internals12.SetMediaVolumeContext);
+  const { setMediaVolume, setMediaMuted } = useContext5(Internals11.SetMediaVolumeContext);
   const [showBufferIndicator, setShowBufferState] = useState11(false);
   useEffect12(() => {
     let timeout = null;
@@ -2788,32 +2804,32 @@ var PlayerUI = ({
   }, [config, layout, overflowVisible, scale]);
   const playerPause = player.pause;
   const playerDispatchError = player.emitter.dispatchError;
-  const onError = useCallback11((error) => {
+  const onError = useCallback10((error) => {
     playerPause();
     playerDispatchError(error);
   }, [playerDispatchError, playerPause]);
-  const onFullscreenButtonClick = useCallback11((e) => {
+  const onFullscreenButtonClick = useCallback10((e) => {
     e.stopPropagation();
     requestFullscreen();
   }, [requestFullscreen]);
-  const onExitFullscreenButtonClick = useCallback11((e) => {
+  const onExitFullscreenButtonClick = useCallback10((e) => {
     e.stopPropagation();
     exitFullscreen();
   }, [exitFullscreen]);
-  const onSingleClick = useCallback11((e) => {
+  const onSingleClick = useCallback10((e) => {
     const rightClick = e instanceof MouseEvent ? e.button === 2 : e.nativeEvent.button;
     if (rightClick) {
       return;
     }
     toggle(e);
   }, [toggle]);
-  const onSeekStart = useCallback11(() => {
+  const onSeekStart = useCallback10(() => {
     setSeeking(true);
   }, []);
-  const onSeekEnd = useCallback11(() => {
+  const onSeekEnd = useCallback10(() => {
     setSeeking(false);
   }, []);
-  const onDoubleClick = useCallback11(() => {
+  const onDoubleClick = useCallback10(() => {
     if (isFullscreen) {
       exitFullscreen();
     } else {
@@ -2873,7 +2889,7 @@ var PlayerUI = ({
               VideoComponent ? /* @__PURE__ */ jsx12(ErrorBoundary, {
                 onError,
                 errorFallback,
-                children: /* @__PURE__ */ jsx12(Internals12.CurrentScaleContext.Provider, {
+                children: /* @__PURE__ */ jsx12(Internals11.CurrentScaleContext.Provider, {
                   value: currentScale,
                   children: /* @__PURE__ */ jsx12(VideoComponent, {
                     ...video?.props ?? {},
@@ -2955,11 +2971,11 @@ var PlayerUI = ({
 var PlayerUI_default = forwardRef(PlayerUI);
 
 // src/SharedPlayerContext.tsx
-import { useCallback as useCallback12, useMemo as useMemo13, useState as useState12 } from "react";
-import { Internals as Internals14 } from "remotion";
+import { useCallback as useCallback11, useMemo as useMemo13, useState as useState12 } from "react";
+import { Internals as Internals13 } from "remotion";
 
 // src/volume-persistence.ts
-import { Internals as Internals13 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 var DEFAULT_VOLUME_PERSISTENCE_KEY = "remotion.volumePreference";
 var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   if (typeof window === "undefined") {
@@ -2968,7 +2984,7 @@ var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   try {
     window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTENCE_KEY, String(volume));
   } catch (e) {
-    Internals13.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
+    Internals12.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
   }
 };
 var getPreferredVolume = (volumePersistenceKey) => {
@@ -3056,7 +3072,7 @@ var SharedPlayerContexts = ({
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeAndPersist = useCallback12((vol) => {
+  const setMediaVolumeAndPersist = useCallback11((vol) => {
     setMediaVolume(vol);
     if (persistVolumeToStorage) {
       persistVolume(vol, logLevel, volumePersistenceKey ?? null);
@@ -3083,30 +3099,30 @@ var SharedPlayerContexts = ({
       isReadOnlyStudio: false
     };
   }, []);
-  return /* @__PURE__ */ jsx13(Internals14.RemotionEnvironmentContext.Provider, {
+  return /* @__PURE__ */ jsx13(Internals13.RemotionEnvironmentContext.Provider, {
     value: env,
-    children: /* @__PURE__ */ jsx13(Internals14.LogLevelContext.Provider, {
+    children: /* @__PURE__ */ jsx13(Internals13.LogLevelContext.Provider, {
       value: logLevelContext,
-      children: /* @__PURE__ */ jsx13(Internals14.CanUseRemotionHooksProvider, {
-        children: /* @__PURE__ */ jsx13(Internals14.AbsoluteTimeContext.Provider, {
+      children: /* @__PURE__ */ jsx13(Internals13.CanUseRemotionHooksProvider, {
+        children: /* @__PURE__ */ jsx13(Internals13.AbsoluteTimeContext.Provider, {
           value: timelineContext,
-          children: /* @__PURE__ */ jsx13(Internals14.PlaybackRateContext.Provider, {
+          children: /* @__PURE__ */ jsx13(Internals13.PlaybackRateContext.Provider, {
             value: playbackRateContext,
-            children: /* @__PURE__ */ jsx13(Internals14.TimelineContext.Provider, {
+            children: /* @__PURE__ */ jsx13(Internals13.TimelineContext.Provider, {
               value: timelineContext,
-              children: /* @__PURE__ */ jsx13(Internals14.CompositionManager.Provider, {
+              children: /* @__PURE__ */ jsx13(Internals13.CompositionManager.Provider, {
                 value: compositionManagerContext,
-                children: /* @__PURE__ */ jsx13(Internals14.PrefetchProvider, {
-                  children: /* @__PURE__ */ jsx13(Internals14.DurationsContextProvider, {
-                    children: /* @__PURE__ */ jsx13(Internals14.MediaVolumeContext.Provider, {
+                children: /* @__PURE__ */ jsx13(Internals13.PrefetchProvider, {
+                  children: /* @__PURE__ */ jsx13(Internals13.DurationsContextProvider, {
+                    children: /* @__PURE__ */ jsx13(Internals13.MediaVolumeContext.Provider, {
                       value: mediaVolumeContextValue,
-                      children: /* @__PURE__ */ jsx13(Internals14.SetMediaVolumeContext.Provider, {
+                      children: /* @__PURE__ */ jsx13(Internals13.SetMediaVolumeContext.Provider, {
                         value: setMediaVolumeContextValue,
-                        children: /* @__PURE__ */ jsx13(Internals14.BufferingProvider, {
-                          children: /* @__PURE__ */ jsx13(Internals14.SharedAudioContextProvider, {
+                        children: /* @__PURE__ */ jsx13(Internals13.BufferingProvider, {
+                          children: /* @__PURE__ */ jsx13(Internals13.SharedAudioContextProvider, {
                             audioLatencyHint,
                             audioEnabled,
-                            children: /* @__PURE__ */ jsx13(Internals14.SharedAudioTagsContextProvider, {
+                            children: /* @__PURE__ */ jsx13(Internals13.SharedAudioTagsContextProvider, {
                               numberOfAudioTags: numberOfSharedAudioTags,
                               children
                             })
@@ -3126,7 +3142,7 @@ var SharedPlayerContexts = ({
 };
 
 // src/use-remotion-license-acknowledge.ts
-import { Internals as Internals15 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 var warningShown = false;
 var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
   if (acknowledge) {
@@ -3136,7 +3152,7 @@ var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
     return;
   }
   warningShown = true;
-  Internals15.Log.warn({ logLevel, tag: null }, "Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license\nPass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear.");
+  Internals14.Log.warn({ logLevel, tag: null }, "Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license\nPass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear.");
 };
 
 // src/utils/validate-in-out-frame.ts
@@ -3311,7 +3327,7 @@ var PlayerFn = ({
     throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
   }
   useState13(() => acknowledgeRemotionLicenseMessage(Boolean(acknowledgeRemotionLicense), logLevel));
-  const component = Internals16.useLazyComponent({
+  const component = Internals15.useLazyComponent({
     compProps: componentProps,
     componentName: "Player",
     noSuspense: Boolean(noSuspense)
@@ -3322,9 +3338,9 @@ var PlayerFn = ({
   }));
   const [playing, setPlaying] = useState13(false);
   const [rootId] = useState13("player-comp");
-  const rootRef = useRef12(null);
-  const audioAndVideoTags = useRef12([]);
-  const imperativePlaying = useRef12(false);
+  const rootRef = useRef11(null);
+  const audioAndVideoTags = useRef11([]);
+  const imperativePlaying = useRef11(false);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState13(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -3384,7 +3400,7 @@ var PlayerFn = ({
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
   useState13(() => {
-    Internals16.playbackLogging({
+    Internals15.playbackLogging({
       logLevel,
       message: `[player] Mounting <Player>. User agent = ${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
       tag: "player",
@@ -3414,7 +3430,7 @@ var PlayerFn = ({
   }, [setFrame]);
   if (typeof window !== "undefined") {
     useLayoutEffect3(() => {
-      Internals16.CSSUtils.injectCSS(Internals16.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
+      Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
   const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
@@ -3423,7 +3439,7 @@ var PlayerFn = ({
       mode: "prevent-media-session"
     };
   }, [passedBrowserMediaControlsBehavior]);
-  return /* @__PURE__ */ jsx14(Internals16.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx14(Internals15.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
       playbackRateContext: playbackRateContextValue,
@@ -3440,7 +3456,7 @@ var PlayerFn = ({
       initialVolume,
       inputProps: actualInputProps,
       audioEnabled: true,
-      children: /* @__PURE__ */ jsx14(Internals16.SetTimelineContext.Provider, {
+      children: /* @__PURE__ */ jsx14(Internals15.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
         children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {
           currentPlaybackRate,
@@ -3498,21 +3514,21 @@ import {
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo17,
-  useRef as useRef14,
+  useRef as useRef13,
   useState as useState14
 } from "react";
-import { Internals as Internals18, random as random2 } from "remotion";
+import { Internals as Internals17, random as random2 } from "remotion";
 
 // src/ThumbnailUI.tsx
 import React13, {
   forwardRef as forwardRef3,
   Suspense as Suspense2,
-  useCallback as useCallback13,
+  useCallback as useCallback12,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo16,
-  useRef as useRef13
+  useRef as useRef12
 } from "react";
-import { Internals as Internals17 } from "remotion";
+import { Internals as Internals16 } from "remotion";
 
 // src/use-thumbnail.ts
 import { useContext as useContext6, useMemo as useMemo15 } from "react";
@@ -3546,9 +3562,9 @@ var ThumbnailUI = ({
   noSuspense,
   overrideInternalClassName
 }, ref) => {
-  const config = Internals17.useUnsafeVideoConfig();
-  const video = Internals17.useVideo();
-  const container = useRef13(null);
+  const config = Internals16.useUnsafeVideoConfig();
+  const video = Internals16.useVideo();
+  const container = useRef12(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -3595,7 +3611,7 @@ var ThumbnailUI = ({
       overflowVisible
     });
   }, [config, layout, overflowVisible, scale]);
-  const onError = useCallback13((error) => {
+  const onError = useCallback12((error) => {
     thumbnail.emitter.dispatchError(error);
   }, [thumbnail.emitter]);
   const loadingMarkup = useMemo16(() => {
@@ -3622,7 +3638,7 @@ var ThumbnailUI = ({
       children: VideoComponent ? /* @__PURE__ */ jsx15(ErrorBoundary, {
         onError,
         errorFallback,
-        children: /* @__PURE__ */ jsx15(Internals17.CurrentScaleContext.Provider, {
+        children: /* @__PURE__ */ jsx15(Internals16.CurrentScaleContext.Provider, {
           value: currentScaleContext,
           children: /* @__PURE__ */ jsx15(VideoComponent, {
             ...video?.props ?? {},
@@ -3677,7 +3693,7 @@ var ThumbnailFn = ({
     }, []);
   }
   const [thumbnailId] = useState14(() => String(random2(null)));
-  const rootRef = useRef14(null);
+  const rootRef = useRef13(null);
   const timelineState = useMemo17(() => {
     const value = {
       playing: false,
@@ -3701,7 +3717,7 @@ var ThumbnailFn = ({
     };
   }, []);
   useImperativeHandle4(ref, () => rootRef.current, []);
-  const Component = Internals18.useLazyComponent({
+  const Component = Internals17.useLazyComponent({
     compProps: componentProps,
     componentName: "Thumbnail",
     noSuspense: Boolean(noSuspense)
@@ -3710,7 +3726,7 @@ var ThumbnailFn = ({
   const passedInputProps = useMemo17(() => {
     return inputProps ?? {};
   }, [inputProps]);
-  return /* @__PURE__ */ jsx16(Internals18.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx16(Internals17.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
       timelineContext: timelineState,
       playbackRateContext,
@@ -3756,8 +3772,7 @@ var PlayerInternals = {
   useHoverState,
   updateAllElementsSizes,
   PlayerEmitterProvider,
-  BufferingIndicator,
-  useFrameImperative
+  BufferingIndicator
 };
 export {
   Thumbnail,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.459",
+	"version": "4.0.461",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -36,7 +36,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.459"
+		"remotion": "4.0.461"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -45,12 +45,12 @@
 	"devDependencies": {
 		"@testing-library/react": "16.1.0",
 		"@happy-dom/global-registrator": "14.5.1",
-		"csstype": "^3.1.1",
+		"csstype": "3.2.3",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.459",
+		"@remotion/eslint-config-internal": "4.0.461",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},