@remotion/player 4.0.451 → 4.0.452

package/dist/cjs/Player.js

@@ -23,7 +23,7 @@ const componentOrNullIfLazy = (props) => {
     return null;
 };
 exports.componentOrNullIfLazy = componentOrNullIfLazy;
-const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, showPosterWhenBufferingAndPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, renderCustomControls, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'interactive', volumePersistenceKey, ...componentProps }, ref) => {
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, showPosterWhenBufferingAndPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, renderCustomControls, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'playback', volumePersistenceKey, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         window.remotion_isPlayer = true;
     }

package/dist/cjs/SharedPlayerContext.js

@@ -83,6 +83,6 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
             isReadOnlyStudio: false,
         };
     }, []);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.RemotionEnvironmentContext.Provider, { value: env, children: jsx_runtime_1.jsx(remotion_1.Internals.LogLevelContext.Provider, { value: logLevelContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteTimeContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.TimelineContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PrefetchProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.DurationsContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: jsx_runtime_1.jsx(remotion_1.Internals.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Internals.RemotionEnvironmentContext.Provider, { value: env, children: jsx_runtime_1.jsx(remotion_1.Internals.LogLevelContext.Provider, { value: logLevelContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteTimeContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.TimelineContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PrefetchProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.DurationsContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.BufferingProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.SharedPlayerContexts = SharedPlayerContexts;

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+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 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) {
+        return false;
+    }
+    remotion_1.Internals.Log.verbose({ logLevel, tag: 'audio-scheduling' }, 'Anchor changed from %s to %s with shift %s', audioSyncAnchor.value, newAnchor, shift);
+    audioSyncAnchor.value = newAnchor;
+    return true;
+};
+exports.setGlobalTimeAnchor = setGlobalTimeAnchor;

package/dist/cjs/use-playback.js

@@ -1,24 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePlayback = void 0;
-/* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const react_2 = require("react");
 const remotion_1 = require("remotion");
 const browser_mediasession_js_1 = require("./browser-mediasession.js");
 const calculate_next_frame_js_1 = require("./calculate-next-frame.js");
 const is_backgrounded_js_1 = require("./is-backgrounded.js");
+const set_global_time_anchor_js_1 = require("./set-global-time-anchor.js");
 const use_player_js_1 = require("./use-player.js");
 const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const { playing, pause, emitter, isPlaying } = (0, use_player_js_1.usePlayer)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
+    const sharedAudioContext = (0, react_2.useContext)(remotion_1.Internals.SharedAudioContext);
+    const logLevel = remotion_1.Internals.useLogLevel();
+    const timelineContext = remotion_1.Internals.useTimelineContext();
     // requestAnimationFrame() does not work if the tab is not active.
     // This means that audio will keep playing even if it has ended.
     // In that case, we use setTimeout() instead.
     const isBackgroundedRef = (0, is_backgrounded_js_1.useIsBackgrounded)();
-    const lastTimeUpdateEvent = (0, react_1.useRef)(null);
-    const context = (0, react_1.useContext)(remotion_1.Internals.BufferingContextReact);
+    const lastTimeUpdateTimestamp = (0, react_2.useRef)(0);
+    const context = (0, react_2.useContext)(remotion_1.Internals.BufferingContextReact);
     if (!context) {
         throw new Error('Missing the buffering context. Most likely you have a Remotion version mismatch.');
     }
@@ -27,12 +32,40 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         playbackRate,
         videoConfig: config,
     });
-    //	complete code for media session API
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
+        if (!sharedAudioContext) {
+            return;
+        }
+        if (!sharedAudioContext.audioContext) {
+            return;
+        }
+        if (!config) {
+            return;
+        }
+        const changed = (0, set_global_time_anchor_js_1.setGlobalTimeAnchor)({
+            audioContext: sharedAudioContext.audioContext,
+            audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+            absoluteTimeInSeconds: frame / config.fps,
+            globalPlaybackRate: timelineContext.playbackRate,
+            logLevel,
+        });
+        if (changed) {
+            sharedAudioContext.audioSyncAnchorEmitter.dispatch('changed');
+        }
+    }, [
+        config,
+        frame,
+        logLevel,
+        sharedAudioContext,
+        timelineContext.playbackRate,
+    ]);
+    (0, react_2.useEffect)(() => {
+        var _a;
         if (!config) {
             return;
         }
         if (!playing) {
+            (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext);
             return;
         }
         let hasBeenStopped = false;
@@ -54,12 +87,15 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             cancelQueuedFrame();
         };
         const callback = () => {
+            var _a, _b;
             if (hasBeenStopped) {
                 return;
             }
             if (!isPlaying()) {
+                (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext);
                 return;
             }
+            (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.resume) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
             const time = performance.now() - startedTime;
             const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
             const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
@@ -88,7 +124,36 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             queueNextFrame();
         };
         const queueNextFrame = () => {
+            var _a, _b;
+            var _c;
+            const getIsResumingAudioContext = (_c = (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.getIsResumingAudioContext) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext)) !== null && _c !== void 0 ? _c : null;
+            if (getIsResumingAudioContext !== null) {
+                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: timelineContext.playbackRate,
+                        logLevel,
+                    });
+                    startedTime = performance.now();
+                    framesAdvanced = 0;
+                    queueNextFrame();
+                });
+                return;
+            }
             if (context.buffering.current) {
+                (_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();
@@ -137,18 +202,25 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         getCurrentFrame,
         context,
         isPlaying,
+        sharedAudioContext,
+        timelineContext.playbackRate,
+        logLevel,
     ]);
-    (0, react_1.useEffect)(() => {
-        const interval = setInterval(() => {
-            if (lastTimeUpdateEvent.current === getCurrentFrame()) {
-                return;
-            }
-            emitter.dispatchTimeUpdate({ frame: getCurrentFrame() });
-            lastTimeUpdateEvent.current = getCurrentFrame();
-        }, 250);
-        return () => clearInterval(interval);
-    }, [emitter, getCurrentFrame]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
+        const now = performance.now();
+        const timeSinceLastUpdate = now - lastTimeUpdateTimestamp.current;
+        if (timeSinceLastUpdate >= 250) {
+            emitter.dispatchTimeUpdate({ frame });
+            lastTimeUpdateTimestamp.current = now;
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            emitter.dispatchTimeUpdate({ frame });
+            lastTimeUpdateTimestamp.current = performance.now();
+        }, 250 - timeSinceLastUpdate);
+        return () => clearTimeout(timeoutId);
+    }, [emitter, frame]);
+    (0, react_2.useEffect)(() => {
         emitter.dispatchFrameUpdate({ frame });
     }, [emitter, frame]);
 };

package/dist/cjs/use-player.js

@@ -13,6 +13,7 @@ const usePlayer = () => {
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext);
+    const audioTagsContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioTagsContext);
     const { audioAndVideoTags } = remotion_1.Internals.useTimelineContext();
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
@@ -38,7 +39,6 @@ const usePlayer = () => {
         emitter.dispatchSeek(newFrame);
     }, [emitter, setTimelinePosition, video === null || video === void 0 ? void 0 : video.id]);
     const play = (0, react_1.useCallback)((e) => {
-        var _a;
         if (imperativePlaying.current) {
             return;
         }
@@ -46,12 +46,12 @@ const usePlayer = () => {
         if (isLastFrame) {
             seek(0);
         }
-        (_a = audioContext === null || audioContext === void 0 ? void 0 : audioContext.audioContext) === null || _a === void 0 ? void 0 : _a.resume();
+        audioContext === null || audioContext === void 0 ? void 0 : audioContext.resume();
         /**
          * Play silent audio tags to warm them up for autoplay
          */
-        if (audioContext && audioContext.numberOfAudioTags > 0 && e) {
-            audioContext.playAllAudios();
+        if (audioTagsContext && audioTagsContext.numberOfAudioTags > 0 && e) {
+            audioTagsContext.playAllAudios();
         }
         /**
          * Play audios and videos directly here so they can benefit from
@@ -66,18 +66,18 @@ const usePlayer = () => {
         imperativePlaying,
         isLastFrame,
         audioContext,
+        audioTagsContext,
         setPlaying,
         emitter,
         seek,
         audioAndVideoTags,
     ]);
     const pause = (0, react_1.useCallback)(() => {
-        var _a;
         if (imperativePlaying.current) {
             imperativePlaying.current = false;
             setPlaying(false);
             emitter.dispatchPause();
-            (_a = audioContext === null || audioContext === void 0 ? void 0 : audioContext.audioContext) === null || _a === void 0 ? void 0 : _a.suspend();
+            audioContext === null || audioContext === void 0 ? void 0 : audioContext.suspend();
         }
     }, [emitter, imperativePlaying, setPlaying, audioContext]);
     const pauseAndReturnToPlayStart = (0, react_1.useCallback)(() => {

package/dist/cjs/utils/validate-playbackrate.js

@@ -5,11 +5,11 @@ const validatePlaybackRate = (playbackRate) => {
     if (playbackRate === undefined) {
         return;
     }
-    if (playbackRate > 4) {
-        throw new Error(`The highest possible playback rate is 4. You passed: ${playbackRate}`);
+    if (playbackRate > 10) {
+        throw new Error(`The highest possible playback rate is 10. You passed: ${playbackRate}`);
     }
-    if (playbackRate < -4) {
-        throw new Error(`The lowest possible playback rate is -4. You passed: ${playbackRate}`);
+    if (playbackRate < -10) {
+        throw new Error(`The lowest possible playback rate is -10. You passed: ${playbackRate}`);
     }
     if (playbackRate === 0) {
         throw new Error(`A playback rate of 0 is not supported.`);

package/dist/esm/index.mjs

@@ -552,8 +552,9 @@ 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 Internals6 } from "remotion";
+import { Internals as Internals7 } from "remotion";
 
 // src/browser-mediasession.ts
 import { useEffect as useEffect3, useRef as useRef3 } from "react";
@@ -569,6 +570,7 @@ var usePlayer = () => {
   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);
   frameRef.current = frame;
@@ -601,9 +603,9 @@ var usePlayer = () => {
     if (isLastFrame) {
       seek(0);
     }
-    audioContext?.audioContext?.resume();
-    if (audioContext && audioContext.numberOfAudioTags > 0 && e) {
-      audioContext.playAllAudios();
+    audioContext?.resume();
+    if (audioTagsContext && audioTagsContext.numberOfAudioTags > 0 && e) {
+      audioTagsContext.playAllAudios();
     }
     audioAndVideoTags.current.forEach((a) => a.play("player play() was called and playing audio from a click"));
     imperativePlaying.current = true;
@@ -614,6 +616,7 @@ var usePlayer = () => {
     imperativePlaying,
     isLastFrame,
     audioContext,
+    audioTagsContext,
     setPlaying,
     emitter,
     seek,
@@ -624,7 +627,7 @@ var usePlayer = () => {
       imperativePlaying.current = false;
       setPlaying(false);
       emitter.dispatchPause();
-      audioContext?.audioContext?.suspend();
+      audioContext?.suspend();
     }
   }, [emitter, imperativePlaying, setPlaying, audioContext]);
   const pauseAndReturnToPlayStart = useCallback2(() => {
@@ -901,6 +904,29 @@ var useIsBackgrounded = () => {
   return isBackgrounded;
 };
 
+// src/set-global-time-anchor.ts
+import { Internals as Internals6 } from "remotion";
+var ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
+var setGlobalTimeAnchor = ({
+  audioContext,
+  audioSyncAnchor,
+  absoluteTimeInSeconds,
+  globalPlaybackRate,
+  logLevel
+}) => {
+  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) {
+    return false;
+  }
+  Internals6.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
+  audioSyncAnchor.value = newAnchor;
+  return true;
+};
+
 // src/use-playback.ts
 var usePlayback = ({
   loop,
@@ -911,13 +937,16 @@ var usePlayback = ({
   browserMediaControlsBehavior,
   getCurrentFrame
 }) => {
-  const config = Internals6.useUnsafeVideoConfig();
-  const frame = Internals6.Timeline.useTimelinePosition();
+  const config = Internals7.useUnsafeVideoConfig();
+  const frame = Internals7.Timeline.useTimelinePosition();
   const { playing, pause, emitter, isPlaying } = usePlayer();
-  const setFrame = Internals6.Timeline.useTimelineSetFrame();
+  const setFrame = Internals7.Timeline.useTimelineSetFrame();
+  const sharedAudioContext = useContext4(Internals7.SharedAudioContext);
+  const logLevel = Internals7.useLogLevel();
+  const timelineContext = Internals7.useTimelineContext();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateEvent = useRef5(null);
-  const context = useContext4(Internals6.BufferingContextReact);
+  const lastTimeUpdateTimestamp = useRef5(0);
+  const context = useContext4(Internals7.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -926,11 +955,39 @@ var usePlayback = ({
     playbackRate,
     videoConfig: config
   });
+  useLayoutEffect2(() => {
+    if (!sharedAudioContext) {
+      return;
+    }
+    if (!sharedAudioContext.audioContext) {
+      return;
+    }
+    if (!config) {
+      return;
+    }
+    const changed = setGlobalTimeAnchor({
+      audioContext: sharedAudioContext.audioContext,
+      audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+      absoluteTimeInSeconds: frame / config.fps,
+      globalPlaybackRate: timelineContext.playbackRate,
+      logLevel
+    });
+    if (changed) {
+      sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
+    }
+  }, [
+    config,
+    frame,
+    logLevel,
+    sharedAudioContext,
+    timelineContext.playbackRate
+  ]);
   useEffect5(() => {
     if (!config) {
       return;
     }
     if (!playing) {
+      sharedAudioContext?.suspend?.();
       return;
     }
     let hasBeenStopped = false;
@@ -955,8 +1012,10 @@ var usePlayback = ({
         return;
       }
       if (!isPlaying()) {
+        sharedAudioContext?.suspend?.();
         return;
       }
+      sharedAudioContext?.resume?.();
       const time = performance.now() - startedTime;
       const actualLastFrame = outFrame ?? config.durationInFrames - 1;
       const actualFirstFrame = inFrame ?? 0;
@@ -984,7 +1043,30 @@ var usePlayback = ({
       queueNextFrame();
     };
     const queueNextFrame = () => {
+      const getIsResumingAudioContext = sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
+      if (getIsResumingAudioContext !== null) {
+        getIsResumingAudioContext.then(() => {
+          if (!sharedAudioContext?.audioContext) {
+            return;
+          }
+          if (!sharedAudioContext.audioSyncAnchor) {
+            return;
+          }
+          setGlobalTimeAnchor({
+            audioContext: sharedAudioContext.audioContext,
+            audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+            absoluteTimeInSeconds: getCurrentFrame() / config.fps,
+            globalPlaybackRate: timelineContext.playbackRate,
+            logLevel
+          });
+          startedTime = performance.now();
+          framesAdvanced = 0;
+          queueNextFrame();
+        });
+        return;
+      }
       if (context.buffering.current) {
+        sharedAudioContext?.suspend?.();
         const stopListening = context.listenForResume(() => {
           stopListening.remove();
           startedTime = performance.now();
@@ -1029,18 +1111,25 @@ var usePlayback = ({
     isBackgroundedRef,
     getCurrentFrame,
     context,
-    isPlaying
+    isPlaying,
+    sharedAudioContext,
+    timelineContext.playbackRate,
+    logLevel
   ]);
   useEffect5(() => {
-    const interval = setInterval(() => {
-      if (lastTimeUpdateEvent.current === getCurrentFrame()) {
-        return;
-      }
-      emitter.dispatchTimeUpdate({ frame: getCurrentFrame() });
-      lastTimeUpdateEvent.current = getCurrentFrame();
-    }, 250);
-    return () => clearInterval(interval);
-  }, [emitter, getCurrentFrame]);
+    const now = performance.now();
+    const timeSinceLastUpdate = now - lastTimeUpdateTimestamp.current;
+    if (timeSinceLastUpdate >= 250) {
+      emitter.dispatchTimeUpdate({ frame });
+      lastTimeUpdateTimestamp.current = now;
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      emitter.dispatchTimeUpdate({ frame });
+      lastTimeUpdateTimestamp.current = performance.now();
+    }, 250 - timeSinceLastUpdate);
+    return () => clearTimeout(timeoutId);
+  }, [emitter, frame]);
   useEffect5(() => {
     emitter.dispatchFrameUpdate({ frame });
   }, [emitter, frame]);
@@ -1174,12 +1263,12 @@ import {
   forwardRef as forwardRef2,
   useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo14,
   useRef as useRef12,
   useState as useState13
 } from "react";
-import { Composition, Internals as Internals15 } from "remotion";
+import { Composition, Internals as Internals16 } from "remotion";
 
 // src/player-css-classname.ts
 var playerCssClassname = (override) => {
@@ -1198,7 +1287,7 @@ import React10, {
   useRef as useRef11,
   useState as useState11
 } from "react";
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 
 // src/error-boundary.tsx
 import React3 from "react";
@@ -1341,7 +1430,7 @@ 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 Internals7 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 
 // src/render-volume-slider.tsx
 import React5, { useCallback as useCallback4, useMemo as useMemo3, useState as useState5 } from "react";
@@ -1455,8 +1544,8 @@ 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] = Internals7.useMediaMutedState();
-  const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
+  const [mediaMuted, setMediaMuted] = Internals8.useMediaMutedState();
+  const [mediaVolume, setMediaVolume] = Internals8.useMediaVolumeState();
   const [focused, setFocused] = useState6(false);
   const parentDivRef = useRef6(null);
   const inputRef = useRef6(null);
@@ -1517,7 +1606,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 && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
+    return (focused || hover) && !mediaMuted && !Internals8.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
       onBlur: () => setFocused(false),
@@ -1545,7 +1634,7 @@ 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 Internals8 } from "remotion";
+import { Internals as Internals9 } from "remotion";
 
 // src/utils/use-component-visible.ts
 import { useEffect as useEffect8, useRef as useRef7, useState as useState7 } from "react";
@@ -1637,7 +1726,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
   }, rate);
 };
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-  const { setPlaybackRate, playbackRate } = Internals8.useTimelineContext();
+  const { setPlaybackRate, playbackRate } = Internals9.useTimelineContext();
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
   useEffect9(() => {
     const listener = (e) => {
@@ -1739,7 +1828,7 @@ var button = {
 };
 var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
-  const { playbackRate } = Internals8.useTimelineContext();
+  const { playbackRate } = Internals9.useTimelineContext();
   const onClick = useCallback6((e) => {
     e.stopPropagation();
     e.preventDefault();
@@ -1772,7 +1861,7 @@ 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 Internals9, interpolate } from "remotion";
+import { Internals as Internals10, interpolate } from "remotion";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
   const pos = clientX;
@@ -1816,7 +1905,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     shouldApplyCssTransforms: true
   });
   const { seek, play, pause, playing } = usePlayer();
-  const frame = Internals9.Timeline.useTimelinePosition();
+  const frame = Internals10.Timeline.useTimelinePosition();
   const [dragging, setDragging] = useState9({
     dragging: false
   });
@@ -1929,7 +2018,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
 
 // src/PlayerTimeLabel.tsx
 import { useMemo as useMemo7 } from "react";
-import { Internals as Internals10 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 
 // src/format-time.ts
 var formatTime = (timeInSeconds) => {
@@ -1941,7 +2030,7 @@ var formatTime = (timeInSeconds) => {
 // src/PlayerTimeLabel.tsx
 import { jsxs as jsxs7 } from "react/jsx-runtime";
 var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
-  const frame = Internals10.Timeline.useTimelinePosition();
+  const frame = Internals11.Timeline.useTimelinePosition();
   const timeLabel = useMemo7(() => {
     return {
       color: "white",
@@ -2429,8 +2518,8 @@ var PlayerUI = ({
   overrideInternalClassName,
   noSuspense
 }, ref) => {
-  const config = Internals11.useUnsafeVideoConfig();
-  const video = Internals11.useVideo();
+  const config = Internals12.useUnsafeVideoConfig();
+  const video = Internals12.useVideo();
   const container = useRef11(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
@@ -2550,8 +2639,8 @@ var PlayerUI = ({
     }
     player.emitter.dispatchScaleChange(scale);
   }, [player.emitter, scale]);
-  const { setMediaVolume, setMediaMuted } = useContext5(Internals11.SetMediaVolumeContext);
-  const { mediaMuted, mediaVolume } = useContext5(Internals11.MediaVolumeContext);
+  const { setMediaVolume, setMediaMuted } = useContext5(Internals12.SetMediaVolumeContext);
+  const { mediaMuted, mediaVolume } = useContext5(Internals12.MediaVolumeContext);
   useEffect12(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
@@ -2786,7 +2875,7 @@ var PlayerUI = ({
               VideoComponent ? /* @__PURE__ */ jsx12(ErrorBoundary, {
                 onError,
                 errorFallback,
-                children: /* @__PURE__ */ jsx12(Internals11.CurrentScaleContext.Provider, {
+                children: /* @__PURE__ */ jsx12(Internals12.CurrentScaleContext.Provider, {
                   value: currentScale,
                   children: /* @__PURE__ */ jsx12(VideoComponent, {
                     ...video?.props ?? {},
@@ -2869,10 +2958,10 @@ var PlayerUI_default = forwardRef(PlayerUI);
 
 // src/SharedPlayerContext.tsx
 import { useCallback as useCallback12, useMemo as useMemo13, useState as useState12 } from "react";
-import { Internals as Internals13 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 
 // src/volume-persistence.ts
-import { Internals as Internals12 } from "remotion";
+import { Internals as Internals13 } from "remotion";
 var DEFAULT_VOLUME_PERSISTENCE_KEY = "remotion.volumePreference";
 var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   if (typeof window === "undefined") {
@@ -2881,7 +2970,7 @@ var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   try {
     window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTENCE_KEY, String(volume));
   } catch (e) {
-    Internals12.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
+    Internals13.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
   }
 };
 var getPreferredVolume = (volumePersistenceKey) => {
@@ -2991,29 +3080,31 @@ var SharedPlayerContexts = ({
       isReadOnlyStudio: false
     };
   }, []);
-  return /* @__PURE__ */ jsx13(Internals13.RemotionEnvironmentContext.Provider, {
+  return /* @__PURE__ */ jsx13(Internals14.RemotionEnvironmentContext.Provider, {
     value: env,
-    children: /* @__PURE__ */ jsx13(Internals13.LogLevelContext.Provider, {
+    children: /* @__PURE__ */ jsx13(Internals14.LogLevelContext.Provider, {
       value: logLevelContext,
-      children: /* @__PURE__ */ jsx13(Internals13.CanUseRemotionHooksProvider, {
-        children: /* @__PURE__ */ jsx13(Internals13.AbsoluteTimeContext.Provider, {
+      children: /* @__PURE__ */ jsx13(Internals14.CanUseRemotionHooksProvider, {
+        children: /* @__PURE__ */ jsx13(Internals14.AbsoluteTimeContext.Provider, {
           value: timelineContext,
-          children: /* @__PURE__ */ jsx13(Internals13.TimelineContext.Provider, {
+          children: /* @__PURE__ */ jsx13(Internals14.TimelineContext.Provider, {
             value: timelineContext,
-            children: /* @__PURE__ */ jsx13(Internals13.CompositionManager.Provider, {
+            children: /* @__PURE__ */ jsx13(Internals14.CompositionManager.Provider, {
               value: compositionManagerContext,
-              children: /* @__PURE__ */ jsx13(Internals13.PrefetchProvider, {
-                children: /* @__PURE__ */ jsx13(Internals13.DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx13(Internals13.MediaVolumeContext.Provider, {
+              children: /* @__PURE__ */ jsx13(Internals14.PrefetchProvider, {
+                children: /* @__PURE__ */ jsx13(Internals14.DurationsContextProvider, {
+                  children: /* @__PURE__ */ jsx13(Internals14.MediaVolumeContext.Provider, {
                     value: mediaVolumeContextValue,
-                    children: /* @__PURE__ */ jsx13(Internals13.SetMediaVolumeContext.Provider, {
+                    children: /* @__PURE__ */ jsx13(Internals14.SetMediaVolumeContext.Provider, {
                       value: setMediaVolumeContextValue,
-                      children: /* @__PURE__ */ jsx13(Internals13.SharedAudioContextProvider, {
-                        numberOfAudioTags: numberOfSharedAudioTags,
-                        audioLatencyHint,
-                        audioEnabled,
-                        children: /* @__PURE__ */ jsx13(Internals13.BufferingProvider, {
-                          children
+                      children: /* @__PURE__ */ jsx13(Internals14.BufferingProvider, {
+                        children: /* @__PURE__ */ jsx13(Internals14.SharedAudioContextProvider, {
+                          audioLatencyHint,
+                          audioEnabled,
+                          children: /* @__PURE__ */ jsx13(Internals14.SharedAudioTagsContextProvider, {
+                            numberOfAudioTags: numberOfSharedAudioTags,
+                            children
+                          })
                         })
                       })
                     })
@@ -3029,7 +3120,7 @@ var SharedPlayerContexts = ({
 };
 
 // src/use-remotion-license-acknowledge.ts
-import { Internals as Internals14 } from "remotion";
+import { Internals as Internals15 } from "remotion";
 var warningShown = false;
 var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
   if (acknowledge) {
@@ -3039,7 +3130,7 @@ var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
     return;
   }
   warningShown = true;
-  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.");
+  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.");
 };
 
 // src/utils/validate-in-out-frame.ts
@@ -3121,11 +3212,11 @@ var validatePlaybackRate = (playbackRate) => {
   if (playbackRate === undefined) {
     return;
   }
-  if (playbackRate > 4) {
-    throw new Error(`The highest possible playback rate is 4. You passed: ${playbackRate}`);
+  if (playbackRate > 10) {
+    throw new Error(`The highest possible playback rate is 10. You passed: ${playbackRate}`);
   }
-  if (playbackRate < -4) {
-    throw new Error(`The lowest possible playback rate is -4. You passed: ${playbackRate}`);
+  if (playbackRate < -10) {
+    throw new Error(`The lowest possible playback rate is -10. You passed: ${playbackRate}`);
   }
   if (playbackRate === 0) {
     throw new Error(`A playback rate of 0 is not supported.`);
@@ -3195,7 +3286,7 @@ var PlayerFn = ({
   logLevel = "info",
   noSuspense,
   acknowledgeRemotionLicense,
-  audioLatencyHint = "interactive",
+  audioLatencyHint = "playback",
   volumePersistenceKey,
   ...componentProps
 }, ref) => {
@@ -3213,7 +3304,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 = Internals15.useLazyComponent({
+  const component = Internals16.useLazyComponent({
     compProps: componentProps,
     componentName: "Player",
     noSuspense: Boolean(noSuspense)
@@ -3280,7 +3371,7 @@ var PlayerFn = ({
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
   useState13(() => {
-    Internals15.playbackLogging({
+    Internals16.playbackLogging({
       logLevel,
       message: `[player] Mounting <Player>. User agent = ${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
       tag: "player",
@@ -3307,8 +3398,8 @@ var PlayerFn = ({
     };
   }, [setFrame]);
   if (typeof window !== "undefined") {
-    useLayoutEffect2(() => {
-      Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
+    useLayoutEffect3(() => {
+      Internals16.CSSUtils.injectCSS(Internals16.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
   const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
@@ -3317,7 +3408,7 @@ var PlayerFn = ({
       mode: "prevent-media-session"
     };
   }, [passedBrowserMediaControlsBehavior]);
-  return /* @__PURE__ */ jsx14(Internals15.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx14(Internals16.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
       component,
@@ -3332,7 +3423,7 @@ var PlayerFn = ({
       volumePersistenceKey,
       inputProps: actualInputProps,
       audioEnabled: true,
-      children: /* @__PURE__ */ jsx14(Internals15.SetTimelineContext.Provider, {
+      children: /* @__PURE__ */ jsx14(Internals16.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
         children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {
           currentPlaybackRate,
@@ -3388,12 +3479,12 @@ var Player = forward(PlayerFn);
 import {
   forwardRef as forwardRef4,
   useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect as useLayoutEffect3,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo17,
   useRef as useRef14,
   useState as useState14
 } from "react";
-import { Internals as Internals17, random as random2 } from "remotion";
+import { Internals as Internals18, random as random2 } from "remotion";
 
 // src/ThumbnailUI.tsx
 import React13, {
@@ -3404,7 +3495,7 @@ import React13, {
   useMemo as useMemo16,
   useRef as useRef13
 } from "react";
-import { Internals as Internals16 } from "remotion";
+import { Internals as Internals17 } from "remotion";
 
 // src/use-thumbnail.ts
 import { useContext as useContext6, useMemo as useMemo15 } from "react";
@@ -3438,8 +3529,8 @@ var ThumbnailUI = ({
   noSuspense,
   overrideInternalClassName
 }, ref) => {
-  const config = Internals16.useUnsafeVideoConfig();
-  const video = Internals16.useVideo();
+  const config = Internals17.useUnsafeVideoConfig();
+  const video = Internals17.useVideo();
   const container = useRef13(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
@@ -3514,7 +3605,7 @@ var ThumbnailUI = ({
       children: VideoComponent ? /* @__PURE__ */ jsx15(ErrorBoundary, {
         onError,
         errorFallback,
-        children: /* @__PURE__ */ jsx15(Internals16.CurrentScaleContext.Provider, {
+        children: /* @__PURE__ */ jsx15(Internals17.CurrentScaleContext.Provider, {
           value: currentScaleContext,
           children: /* @__PURE__ */ jsx15(VideoComponent, {
             ...video?.props ?? {},
@@ -3564,7 +3655,7 @@ var ThumbnailFn = ({
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
-    useLayoutEffect3(() => {
+    useLayoutEffect4(() => {
       window.remotion_isPlayer = true;
     }, []);
   }
@@ -3589,7 +3680,7 @@ var ThumbnailFn = ({
     return value;
   }, [frameToDisplay, thumbnailId]);
   useImperativeHandle4(ref, () => rootRef.current, []);
-  const Component = Internals17.useLazyComponent({
+  const Component = Internals18.useLazyComponent({
     compProps: componentProps,
     componentName: "Thumbnail",
     noSuspense: Boolean(noSuspense)
@@ -3598,7 +3689,7 @@ var ThumbnailFn = ({
   const passedInputProps = useMemo17(() => {
     return inputProps ?? {};
   }, [inputProps]);
-  return /* @__PURE__ */ jsx16(Internals17.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx16(Internals18.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
       timelineContext: timelineState,
       component: Component,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.451",
+	"version": "4.0.452",
 	"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.451"
+		"remotion": "4.0.452"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -50,7 +50,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.451",
+		"@remotion/eslint-config-internal": "4.0.452",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},