@remotion/player 4.0.519 → 4.0.520

package/dist/esm/index.mjs

@@ -353,8 +353,7 @@ var PlayerEventEmitterContext = React.createContext(undefined);
 var ThumbnailEmitterContext = React.createContext(undefined);
 
 // src/EmitterProvider.tsx
-import { useContext as useContext2, useEffect, useState } from "react";
-import { Internals as Internals4 } from "remotion";
+import { useEffect, useState } from "react";
 
 // src/event-emitter.ts
 class PlayerEmitter {
@@ -469,101 +468,41 @@ class ThumbnailEmitter {
   };
 }
 
-// src/timeline-imperative-context.tsx
-import React2, { useMemo, useRef } from "react";
-import { Internals as Internals2 } from "remotion";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var PlayerTimelineImperativeContext = React2.createContext(null);
-var getCoreTimelineImperativeContext = () => {
-  return Internals2.TimelineImperativeContext;
-};
-var getTimelineImperativeContext = () => {
-  return getCoreTimelineImperativeContext() ?? PlayerTimelineImperativeContext;
-};
-var CoreTimelineImperativeContextProvider = ({ children, value }) => {
-  const TimelineImperativeContext = getCoreTimelineImperativeContext();
-  if (!TimelineImperativeContext) {
-    return children;
-  }
-  return /* @__PURE__ */ jsx3(TimelineImperativeContext.Provider, {
-    value,
-    children
-  });
-};
-var LegacyTimelineImperativeContextProvider = ({ children }) => {
-  const timelineContext = Internals2.Timeline.useTimelineContext();
-  const frameRef = useRef(timelineContext.frame);
-  frameRef.current = timelineContext.frame;
-  const value = useMemo(() => {
-    return {
-      frameRef,
-      imperativePlaying: timelineContext.imperativePlaying,
-      audioAndVideoTags: timelineContext.audioAndVideoTags
-    };
-  }, [timelineContext.audioAndVideoTags, timelineContext.imperativePlaying]);
-  return /* @__PURE__ */ jsx3(PlayerTimelineImperativeContext.Provider, {
-    value,
-    children
-  });
-};
-var TimelineImperativeCompatibilityProvider = ({ children }) => {
-  if (getCoreTimelineImperativeContext()) {
-    return children;
-  }
-  return /* @__PURE__ */ jsx3(LegacyTimelineImperativeContextProvider, {
-    children
-  });
-};
-
 // src/use-buffer-state-emitter.ts
 import { useContext, useLayoutEffect } from "react";
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals2 } from "remotion";
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext(Internals3.BufferingContextReact);
-  if (!bufferManager) {
-    throw new Error("BufferingContextReact not found");
-  }
+  const { subscribeBuffering } = useContext(Internals2.SetTimelineContext);
   useLayoutEffect(() => {
-    const clear1 = bufferManager.listenForBuffering(() => {
-      bufferManager.buffering.current = true;
-      emitter.dispatchWaiting({});
-    });
-    const clear2 = bufferManager.listenForResume(() => {
-      bufferManager.buffering.current = false;
-      emitter.dispatchResume({});
+    return subscribeBuffering((state) => {
+      if (state.buffering) {
+        emitter.dispatchWaiting({});
+      } else {
+        emitter.dispatchResume({});
+      }
     });
-    return () => {
-      clear1.remove();
-      clear2.remove();
-    };
-  }, [bufferManager, emitter]);
+  }, [emitter, subscribeBuffering]);
 };
 
 // src/EmitterProvider.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   const [emitter] = useState(() => new PlayerEmitter);
-  const bufferManager = useContext2(Internals4.BufferingContextReact);
-  if (!bufferManager) {
-    throw new Error("BufferingContextReact not found");
-  }
   useEffect(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
   }, [emitter, currentPlaybackRate]);
   useBufferStateEmitter(emitter);
-  return /* @__PURE__ */ jsx4(TimelineImperativeCompatibilityProvider, {
-    children: /* @__PURE__ */ jsx4(PlayerEventEmitterContext.Provider, {
-      value: emitter,
-      children
-    })
+  return /* @__PURE__ */ jsx3(PlayerEventEmitterContext.Provider, {
+    value: emitter,
+    children
   });
 };
 
 // src/timeline-sequence-observer-context.ts
-import React4 from "react";
-var TimelineSequenceObserverContext = React4.createContext(null);
+import React3 from "react";
+var TimelineSequenceObserverContext = React3.createContext(null);
 
 // src/use-hover-state.ts
 import { useEffect as useEffect2, useState as useState2 } from "react";
@@ -610,68 +549,60 @@ 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 Internals8 } from "remotion";
+import { useContext as useContext3, 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 { Internals as Internals6 } from "remotion";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { Internals as Internals4 } from "remotion";
 
 // src/use-player-methods.ts
-import { useCallback, useContext as useContext3, useMemo as useMemo2, useRef as useRef2 } from "react";
-import { Internals as Internals5, useRemotionEnvironment } from "remotion";
+import { useCallback, useContext as useContext2, useMemo, useRef } from "react";
+import { Internals as Internals3, useRemotionEnvironment } from "remotion";
 var usePlayerMethods = () => {
-  const setFrame = Internals5.Timeline.useTimelineSetFrame();
-  const setTimelinePosition = Internals5.Timeline.useTimelineSetFrame();
-  const { setPlaying } = useContext3(Internals5.SetTimelineContext);
-  const timelineImperativeContext = useContext3(getTimelineImperativeContext());
-  const audioContext = useContext3(Internals5.SharedAudioContext);
-  const audioTagsContext = useContext3(Internals5.SharedAudioTagsContext);
+  const setFrame = Internals3.Timeline.useTimelineSetFrame();
+  const setTimelinePosition = Internals3.Timeline.useTimelineSetFrame();
+  const {
+    setPlaying,
+    frameRef,
+    audioAndVideoTags,
+    isPlaying: readIsPlaying,
+    isBuffering
+  } = useContext2(Internals3.SetTimelineContext);
+  const audioContext = useContext2(Internals3.SharedAudioContext);
+  const audioTagsContext = useContext2(Internals3.SharedAudioTagsContext);
   const environment = useRemotionEnvironment();
-  const video = Internals5.useVideo();
-  const config = Internals5.useUnsafeVideoConfig();
-  const emitter = useContext3(PlayerEventEmitterContext);
-  const playStart = useRef2(0);
-  const fallbackFrame = useRef2(null);
-  if (!timelineImperativeContext) {
-    throw new Error("Timeline imperative context is not available. This hook must be used inside a <Player> or the Remotion Studio.");
-  }
+  const video = Internals3.useVideo();
+  const config = Internals3.useUnsafeVideoConfig();
+  const emitter = useContext2(PlayerEventEmitterContext);
+  const playStart = useRef(0);
+  const fallbackFrame = useRef(null);
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext3(Internals5.BufferingContextReact);
-  if (!bufferingContext) {
-    throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
-  }
   const getCurrentFrame = useCallback(() => {
     if (!video) {
       return fallbackFrame.current ?? (typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0);
     }
-    const unclamped = timelineImperativeContext.frameRef.current[video.id] ?? (environment.isPlayer ? 0 : Internals5.Timeline.getFrameForComposition(video.id));
-    return Internals5.Timeline.clampFrameToCompositionRange(unclamped, video.durationInFrames);
-  }, [environment.isPlayer, timelineImperativeContext, video]);
+    const unclamped = frameRef.current[video.id] ?? (environment.isPlayer ? 0 : Internals3.Timeline.getFrameForComposition(video.id));
+    return Internals3.Timeline.clampFrameToCompositionRange(unclamped, video.durationInFrames);
+  }, [environment.isPlayer, frameRef, video]);
   const seek = useCallback((newFrame) => {
-    const frameToSeekTo = config ? Internals5.TimelinePosition.clampFrameToCompositionRange(newFrame, config.durationInFrames) : Math.max(0, newFrame);
+    const frameToSeekTo = config ? Internals3.TimelinePosition.clampFrameToCompositionRange(newFrame, config.durationInFrames) : Math.max(0, newFrame);
     fallbackFrame.current = frameToSeekTo;
     if (video?.id) {
-      if (timelineImperativeContext.frameRef.current[video.id] !== frameToSeekTo) {
-        timelineImperativeContext.frameRef.current = {
-          ...timelineImperativeContext.frameRef.current,
+      if (frameRef.current[video.id] !== frameToSeekTo) {
+        frameRef.current = {
+          ...frameRef.current,
           [video.id]: frameToSeekTo
         };
       }
       setTimelinePosition((currentFrames) => currentFrames[video.id] === frameToSeekTo ? currentFrames : { ...currentFrames, [video.id]: frameToSeekTo });
     }
     emitter.dispatchSeek(frameToSeekTo);
-  }, [
-    config,
-    emitter,
-    setTimelinePosition,
-    timelineImperativeContext,
-    video?.id
-  ]);
+  }, [config, emitter, frameRef, setTimelinePosition, video?.id]);
   const play = useCallback((e) => {
-    if (timelineImperativeContext.imperativePlaying.current) {
+    if (readIsPlaying()) {
       return;
     }
     const lastFrameForPlayback = (config?.durationInFrames ?? 1) - 1;
@@ -682,52 +613,51 @@ var usePlayerMethods = () => {
     if (audioTagsContext && audioTagsContext.numberOfAudioTags > 0 && e) {
       audioTagsContext.playAllAudios();
     }
-    timelineImperativeContext.audioAndVideoTags.current.forEach((tag) => tag.play("player play() was called and playing audio from a click"));
-    timelineImperativeContext.imperativePlaying.current = true;
+    audioAndVideoTags.current.forEach((tag) => tag.play("player play() was called and playing audio from a click"));
     setPlaying(true);
     playStart.current = getCurrentFrame();
     emitter.dispatchPlay();
   }, [
+    audioAndVideoTags,
     audioContext,
     audioTagsContext,
     config?.durationInFrames,
     emitter,
     getCurrentFrame,
+    readIsPlaying,
     seek,
-    setPlaying,
-    timelineImperativeContext
+    setPlaying
   ]);
   const pause = useCallback(() => {
-    if (timelineImperativeContext.imperativePlaying.current) {
-      timelineImperativeContext.imperativePlaying.current = false;
+    if (readIsPlaying()) {
       setPlaying(false);
       emitter.dispatchPause();
       audioContext?.suspend();
     }
-  }, [audioContext, emitter, setPlaying, timelineImperativeContext]);
+  }, [audioContext, emitter, readIsPlaying, setPlaying]);
   const pauseAndReturnToPlayStart = useCallback(() => {
-    if (timelineImperativeContext.imperativePlaying.current) {
-      timelineImperativeContext.imperativePlaying.current = false;
+    if (readIsPlaying()) {
+      setPlaying(false);
       fallbackFrame.current = playStart.current;
       if (config) {
-        timelineImperativeContext.frameRef.current = {
-          ...timelineImperativeContext.frameRef.current,
+        frameRef.current = {
+          ...frameRef.current,
           [config.id]: playStart.current
         };
         setTimelinePosition((currentFrames) => ({
           ...currentFrames,
           [config.id]: playStart.current
         }));
-        setPlaying(false);
         emitter.dispatchPause();
       }
     }
   }, [
     config,
     emitter,
+    frameRef,
+    readIsPlaying,
     setPlaying,
-    setTimelinePosition,
-    timelineImperativeContext
+    setTimelinePosition
   ]);
   const videoId = video?.id;
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
@@ -735,52 +665,46 @@ var usePlayerMethods = () => {
     if (!videoId) {
       return null;
     }
-    if (timelineImperativeContext.imperativePlaying.current) {
+    if (readIsPlaying()) {
       return;
     }
-    const previousFrame = timelineImperativeContext.frameRef.current[videoId] ?? window.remotion_initialFrame ?? 0;
+    const previousFrame = frameRef.current[videoId] ?? window.remotion_initialFrame ?? 0;
     const newFrame = Math.max(0, previousFrame - frames);
     if (previousFrame === newFrame) {
       return;
     }
-    timelineImperativeContext.frameRef.current = {
-      ...timelineImperativeContext.frameRef.current,
+    frameRef.current = {
+      ...frameRef.current,
       [videoId]: newFrame
     };
     setFrame((currentFrames) => currentFrames[videoId] === newFrame ? currentFrames : { ...currentFrames, [videoId]: newFrame });
-  }, [setFrame, timelineImperativeContext, videoId]);
+  }, [frameRef, readIsPlaying, setFrame, videoId]);
   const frameForward = useCallback((frames) => {
     if (!videoId) {
       return null;
     }
-    if (timelineImperativeContext.imperativePlaying.current) {
+    if (readIsPlaying()) {
       return;
     }
-    const previousFrame = timelineImperativeContext.frameRef.current[videoId] ?? window.remotion_initialFrame ?? 0;
+    const previousFrame = frameRef.current[videoId] ?? window.remotion_initialFrame ?? 0;
     const newFrame = Math.min(lastFrame, previousFrame + frames);
     if (previousFrame === newFrame) {
       return;
     }
-    timelineImperativeContext.frameRef.current = {
-      ...timelineImperativeContext.frameRef.current,
+    frameRef.current = {
+      ...frameRef.current,
       [videoId]: newFrame
     };
     setFrame((currentFrames) => currentFrames[videoId] === newFrame ? currentFrames : { ...currentFrames, [videoId]: newFrame });
-  }, [lastFrame, setFrame, timelineImperativeContext, videoId]);
+  }, [frameRef, lastFrame, readIsPlaying, setFrame, videoId]);
   const toggle = useCallback((e) => {
-    if (timelineImperativeContext.imperativePlaying.current) {
+    if (readIsPlaying()) {
       pause();
     } else {
       play(e);
     }
-  }, [pause, play, timelineImperativeContext]);
-  const isPlaying = useCallback(() => {
-    return timelineImperativeContext.imperativePlaying.current;
-  }, [timelineImperativeContext]);
-  const isBuffering = useCallback(() => {
-    return bufferingContext.buffering.current;
-  }, [bufferingContext.buffering]);
-  return useMemo2(() => {
+  }, [pause, play, readIsPlaying]);
+  return useMemo(() => {
     return {
       frameBack,
       frameForward,
@@ -789,7 +713,7 @@ var usePlayerMethods = () => {
       pause,
       seek,
       getCurrentFrame,
-      isPlaying,
+      isPlaying: readIsPlaying,
       isBuffering,
       pauseAndReturnToPlayStart,
       toggle
@@ -799,11 +723,11 @@ var usePlayerMethods = () => {
     frameBack,
     frameForward,
     getCurrentFrame,
-    isBuffering,
-    isPlaying,
+    readIsPlaying,
     pause,
     pauseAndReturnToPlayStart,
     play,
+    isBuffering,
     seek,
     toggle
   ]);
@@ -815,15 +739,13 @@ var useBrowserMediaSession = ({
   videoConfig,
   playbackRate
 }) => {
-  const [playing] = Internals6.Timeline.usePlayingState();
+  const playing = Internals4.usePlaying();
   const { pause, play, emitter, getCurrentFrame, seek } = usePlayerMethods();
-  const hasEverPlayed = useRef3(false);
+  const hasEverPlayed = useRef2(false);
   useEffect3(() => {
     if (playing) {
       hasEverPlayed.current = true;
     }
-  }, [playing]);
-  useEffect3(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -956,7 +878,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;
@@ -964,7 +886,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef4(getIsBackgrounded());
+  const isBackgrounded = useRef3(getIsBackgrounded());
   useEffect4(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -978,7 +900,7 @@ var useIsBackgrounded = () => {
 };
 
 // src/set-global-time-anchor.ts
-import { Internals as Internals7 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 var ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
 var setGlobalTimeAnchor = ({
   audioContext,
@@ -999,7 +921,7 @@ var setGlobalTimeAnchor = ({
   if (Math.abs(shift) < Number.EPSILON) {
     return false;
   }
-  Internals7.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "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;
 };
@@ -1024,20 +946,17 @@ var usePlayback = ({
   getCurrentFrame,
   muted
 }) => {
-  const config = Internals8.useUnsafeVideoConfig();
-  const frame = Internals8.Timeline.useTimelinePosition();
-  const [playing] = Internals8.Timeline.usePlayingState();
+  const config = Internals6.useUnsafeVideoConfig();
+  const frame = Internals6.Timeline.useTimelinePosition();
+  const playing = Internals6.usePlaying();
   const { pause, emitter, isPlaying } = usePlayerMethods();
-  const setFrame = Internals8.Timeline.useTimelineSetFrame();
-  const sharedAudioContext = useContext4(Internals8.SharedAudioContext);
-  const { setPlayerMuted } = useContext4(Internals8.SetMediaVolumeContext);
-  const logLevel = Internals8.useLogLevel();
+  const setFrame = Internals6.Timeline.useTimelineSetFrame();
+  const sharedAudioContext = useContext3(Internals6.SharedAudioContext);
+  const { setPlayerMuted } = useContext3(Internals6.SetMediaVolumeContext);
+  const { isBuffering, subscribeBuffering } = useContext3(Internals6.SetTimelineContext);
+  const logLevel = Internals6.useLogLevel();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateTimestamp = useRef5(0);
-  const context = useContext4(Internals8.BufferingContextReact);
-  if (!context) {
-    throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
-  }
+  const lastTimeUpdateTimestamp = useRef4(0);
   useBrowserMediaSession({
     browserMediaControlsBehavior,
     playbackRate,
@@ -1151,7 +1070,7 @@ var usePlayback = ({
         sharedAudioContext?.suspend?.();
         return;
       }
-      if (!muted && !audioContextFailed && !context.buffering.current) {
+      if (!muted && !audioContextFailed && !isBuffering()) {
         sharedAudioContext?.resume?.();
       }
       const time = performance.now() - startedTime;
@@ -1169,7 +1088,7 @@ var usePlayback = ({
         shouldLoop: loop
       });
       framesAdvanced += framesToAdvance;
-      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded) && !context.buffering.current) {
+      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded) && !isBuffering()) {
         setFrame((c) => ({ ...c, [config.id]: nextFrame }));
       }
       if (hasEnded) {
@@ -1201,12 +1120,15 @@ var usePlayback = ({
         });
         return;
       }
-      if (context.buffering.current) {
+      if (isBuffering()) {
         if (!muted && !audioContextFailed) {
           sharedAudioContext?.suspend?.();
         }
-        const stopListening = context.listenForResume(() => {
-          stopListening.remove();
+        const unsubscribe = subscribeBuffering((state) => {
+          if (state.buffering) {
+            return;
+          }
+          unsubscribe();
           if (!muted && !audioContextFailed && sharedAudioContext?._experimentalKeepAudioContextAlive) {
             sharedAudioContext.resume();
           }
@@ -1251,10 +1173,11 @@ var usePlayback = ({
     moveToBeginningWhenEnded,
     isBackgroundedRef,
     getCurrentFrame,
-    context,
+    isBuffering,
     isPlaying,
     sharedAudioContext,
     setPlayerMuted,
+    subscribeBuffering,
     logLevel,
     muted
   ]);
@@ -1278,7 +1201,7 @@ var usePlayback = ({
 };
 
 // src/utils/use-element-size.ts
-import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState3 } from "react";
 var elementSizeHooks = [];
 var updateAllElementsSizes = () => {
   for (const listener of elementSizeHooks) {
@@ -1315,7 +1238,7 @@ var useElementSize = (source, options) => {
       }
     };
   });
-  const observer = useMemo3(() => {
+  const observer = useMemo2(() => {
     if (typeof ResizeObserver === "undefined") {
       return null;
     }
@@ -1407,7 +1330,7 @@ var useElementSize = (source, options) => {
       elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
     };
   }, [updateSize]);
-  return useMemo3(() => {
+  return useMemo2(() => {
     if (!size) {
       return null;
     }
@@ -1416,16 +1339,17 @@ var useElementSize = (source, options) => {
 };
 
 // src/Player.tsx
-import React14, {
+import React13, {
   forwardRef as forwardRef2,
+  useCallback as useCallback12,
   useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo15,
-  useRef as useRef13,
+  useMemo as useMemo14,
+  useRef as useRef12,
   useState as useState12
 } from "react";
-import { Composition, Internals as Internals17 } from "remotion";
+import { Composition, Internals as Internals15 } from "remotion";
 
 // src/player-css-classname.ts
 var playerCssClassname = (override) => {
@@ -1433,22 +1357,22 @@ var playerCssClassname = (override) => {
 };
 
 // src/PlayerUI.tsx
-import React12, {
+import React11, {
   Suspense,
   forwardRef,
   useCallback as useCallback10,
-  useContext as useContext5,
+  useContext as useContext4,
   useEffect as useEffect12,
   useImperativeHandle,
-  useMemo as useMemo13,
-  useRef as useRef11,
+  useMemo as useMemo12,
+  useRef as useRef10,
   useState as useState10
 } from "react";
-import { Internals as Internals13 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 
 // src/error-boundary.tsx
-import React5 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import React4 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var errorStyle = {
   display: "flex",
   justifyContent: "center",
@@ -1458,7 +1382,7 @@ var errorStyle = {
   width: "100%"
 };
 
-class ErrorBoundary extends React5.Component {
+class ErrorBoundary extends React4.Component {
   state = { hasError: null };
   static getDerivedStateFromError(error) {
     return { hasError: error };
@@ -1468,7 +1392,7 @@ class ErrorBoundary extends React5.Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ jsx5("div", {
+      return /* @__PURE__ */ jsx4("div", {
         style: errorStyle,
         children: this.props.errorFallback({
           error: this.state.hasError
@@ -1480,8 +1404,8 @@ class ErrorBoundary extends React5.Component {
 }
 
 // src/license-blacklist.tsx
-import React6, { useEffect as useEffect7 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import React5, { useEffect as useEffect7 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var getHashOfDomain = async () => {
   if (typeof window === "undefined") {
     return null;
@@ -1515,7 +1439,7 @@ var DOMAIN_BLACKLIST = [
 ];
 var ran = false;
 var RenderWarningIfBlacklist = () => {
-  const [unlicensed, setUnlicensed] = React6.useState(false);
+  const [unlicensed, setUnlicensed] = React5.useState(false);
   useEffect7(() => {
     if (ran) {
       return;
@@ -1557,10 +1481,10 @@ var RenderWarningIfBlacklist = () => {
   if (!unlicensed) {
     return null;
   }
-  return /* @__PURE__ */ jsx6("div", {
+  return /* @__PURE__ */ jsx5("div", {
     style,
     className: "warning-banner",
-    children: /* @__PURE__ */ jsx6("a", {
+    children: /* @__PURE__ */ jsx5("a", {
       style: { color: "white" },
       href: "https://github.com/remotion-dev/remotion/pull/4589",
       children: "Remotion Unlicensed – Contact hi@remotion.dev"
@@ -1569,30 +1493,30 @@ var RenderWarningIfBlacklist = () => {
 };
 
 // src/PlayerControls.tsx
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo10, useRef as useRef9, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef8, useState as useState9 } from "react";
 
 // src/DefaultPlayPauseButton.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var DefaultPlayPauseButton = ({ playing, buffering }) => {
   if (playing && buffering) {
-    return /* @__PURE__ */ jsx7(BufferingIndicator, {
+    return /* @__PURE__ */ jsx6(BufferingIndicator, {
       type: "player"
     });
   }
   if (playing) {
-    return /* @__PURE__ */ jsx7(PauseIcon, {});
+    return /* @__PURE__ */ jsx6(PauseIcon, {});
   }
-  return /* @__PURE__ */ jsx7(PlayIcon, {});
+  return /* @__PURE__ */ jsx6(PlayIcon, {});
 };
 
 // src/MediaVolumeSlider.tsx
-import { useCallback as useCallback4, useMemo as useMemo5, useRef as useRef6, useState as useState5 } from "react";
-import { Internals as Internals9 } from "remotion";
+import { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
+import { Internals as Internals7 } from "remotion";
 
 // src/render-volume-slider.tsx
-import React7, { useCallback as useCallback3, useMemo as useMemo4, useState as useState4 } from "react";
+import React6, { useCallback as useCallback3, useMemo as useMemo3, useState as useState4 } from "react";
 import { random } from "remotion";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var KNOB_SIZE = 12;
 var BAR_HEIGHT = 5;
 var DefaultVolumeSlider = ({
@@ -1602,7 +1526,7 @@ var DefaultVolumeSlider = ({
   inputRef,
   setVolume
 }) => {
-  const sliderContainer = useMemo4(() => {
+  const sliderContainer = useMemo3(() => {
     const paddingLeft = 5;
     const common = {
       paddingLeft,
@@ -1622,12 +1546,12 @@ var DefaultVolumeSlider = ({
       ...common
     };
   }, [isVertical]);
-  const randomId = typeof React7.useId === "undefined" ? "volume-slider" : React7.useId();
+  const randomId = typeof React6.useId === "undefined" ? "volume-slider" : React6.useId();
   const [randomClass] = useState4(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
   const onVolumeChange = useCallback3((e) => {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
-  const inputStyle = useMemo4(() => {
+  const inputStyle = useMemo3(() => {
     const commonStyle = {
       WebkitAppearance: "none",
       backgroundColor: "rgba(255, 255, 255, 0.5)",
@@ -1670,12 +1594,12 @@ var DefaultVolumeSlider = ({
   return /* @__PURE__ */ jsxs3("div", {
     style: sliderContainer,
     children: [
-      /* @__PURE__ */ jsx8("style", {
+      /* @__PURE__ */ jsx7("style", {
         dangerouslySetInnerHTML: {
           __html: sliderStyle
         }
       }),
-      /* @__PURE__ */ jsx8("input", {
+      /* @__PURE__ */ jsx7("input", {
         ref: inputRef,
         "aria-label": "Change volume",
         className: randomClass,
@@ -1692,20 +1616,20 @@ var DefaultVolumeSlider = ({
   });
 };
 var renderDefaultVolumeSlider = (props) => {
-  return /* @__PURE__ */ jsx8(DefaultVolumeSlider, {
+  return /* @__PURE__ */ jsx7(DefaultVolumeSlider, {
     ...props
   });
 };
 
 // src/MediaVolumeSlider.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var VOLUME_SLIDER_WIDTH = 100;
 var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
-  const [playerMuted, setPlayerMuted] = Internals9.usePlayerMutedState();
-  const [mediaVolume, setMediaVolume] = Internals9.useMediaVolumeState();
+  const [playerMuted, setPlayerMuted] = Internals7.usePlayerMutedState();
+  const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
   const [focused, setFocused] = useState5(false);
-  const parentDivRef = useRef6(null);
-  const inputRef = useRef6(null);
+  const parentDivRef = useRef5(null);
+  const inputRef = useRef5(null);
   const hover = useHoverState(parentDivRef, false);
   const onBlur = useCallback4(() => {
     setTimeout(() => {
@@ -1723,7 +1647,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     }
     setPlayerMuted((mute) => !mute);
   }, [isVolume0, setPlayerMuted, setMediaVolume]);
-  const parentDivStyle = useMemo5(() => {
+  const parentDivStyle = useMemo4(() => {
     return {
       display: "inline-flex",
       background: "none",
@@ -1734,7 +1658,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       ...displayVerticalVolumeSlider && { position: "relative" }
     };
   }, [displayVerticalVolumeSlider]);
-  const volumeContainer = useMemo5(() => {
+  const volumeContainer = useMemo4(() => {
     return {
       display: "inline",
       width: ICON_SIZE,
@@ -1748,7 +1672,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
   }, []);
   const renderDefaultMuteButton = useCallback4(({ muted, volume }) => {
     const isMutedOrZero = muted || volume === 0;
-    return /* @__PURE__ */ jsx9("button", {
+    return /* @__PURE__ */ jsx8("button", {
       "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
       title: isMutedOrZero ? "Unmute sound" : "Mute sound",
       onClick,
@@ -1756,14 +1680,14 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       onFocus: () => setFocused(true),
       style: volumeContainer,
       type: "button",
-      children: isMutedOrZero ? /* @__PURE__ */ jsx9(VolumeOffIcon, {}) : /* @__PURE__ */ jsx9(VolumeOnIcon, {})
+      children: isMutedOrZero ? /* @__PURE__ */ jsx8(VolumeOffIcon, {}) : /* @__PURE__ */ jsx8(VolumeOnIcon, {})
     });
   }, [onBlur, onClick, volumeContainer]);
-  const muteButton = useMemo5(() => {
+  const muteButton = useMemo4(() => {
     return renderMuteButton ? renderMuteButton({ muted: playerMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: playerMuted, volume: mediaVolume });
   }, [playerMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
-  const volumeSlider = useMemo5(() => {
-    return (focused || hover) && !playerMuted && !Internals9.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
+  const volumeSlider = useMemo4(() => {
+    return (focused || hover) && !playerMuted && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
       onBlur: () => setFocused(false),
@@ -1790,14 +1714,14 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 };
 
 // src/PlaybackrateControl.tsx
-import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo6, useState as useState7 } from "react";
-import { Internals as Internals10 } from "remotion";
+import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo5, useState as useState7 } from "react";
+import { Internals as Internals8 } from "remotion";
 
 // src/utils/use-component-visible.ts
-import { useEffect as useEffect8, useRef as useRef7, useState as useState6 } from "react";
+import { useEffect as useEffect8, useRef as useRef6, useState as useState6 } from "react";
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState6(initialIsVisible);
-  const ref = useRef7(null);
+  const ref = useRef6(null);
   useEffect8(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -1813,7 +1737,7 @@ function useComponentVisible(initialIsVisible) {
 }
 
 // src/PlaybackrateControl.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var BOTTOM = 35;
 var THRESHOLD = 70;
 var rateDiv = {
@@ -1834,10 +1758,10 @@ var checkmarkStyle = {
   height: 14,
   color: "black"
 };
-var Checkmark = () => /* @__PURE__ */ jsx10("svg", {
+var Checkmark = () => /* @__PURE__ */ jsx9("svg", {
   viewBox: "0 0 512 512",
   style: checkmarkStyle,
-  children: /* @__PURE__ */ jsx10("path", {
+  children: /* @__PURE__ */ jsx9("path", {
     fill: "currentColor",
     d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"
   })
@@ -1860,7 +1784,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
-  const actualStyle = useMemo6(() => {
+  const actualStyle = useMemo5(() => {
     return {
       ...rateDiv,
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
@@ -1873,9 +1797,9 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     style: actualStyle,
     onClick,
     children: [
-      /* @__PURE__ */ jsx10("div", {
+      /* @__PURE__ */ jsx9("div", {
         style: checkmarkContainer,
-        children: rate === selectedRate ? /* @__PURE__ */ jsx10(Checkmark, {}) : null
+        children: rate === selectedRate ? /* @__PURE__ */ jsx9(Checkmark, {}) : null
       }),
       formatPlaybackRate(rate),
       "x"
@@ -1883,7 +1807,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
   }, rate);
 };
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-  const { setPlaybackRate, playbackRate } = Internals10.usePlaybackRate();
+  const { setPlaybackRate, playbackRate } = Internals8.usePlaybackRate();
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState7(playbackRate);
   useEffect9(() => {
     const listener = (e) => {
@@ -1927,7 +1851,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo6(() => {
+  const playbackPopup = useMemo5(() => {
     return {
       position: "absolute",
       right: 0,
@@ -1941,10 +1865,10 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
       textAlign: "left"
     };
   }, [canvasSize.height]);
-  return /* @__PURE__ */ jsx10("div", {
+  return /* @__PURE__ */ jsx9("div", {
     style: playbackPopup,
     children: playbackRates.map((rate) => {
-      return /* @__PURE__ */ jsx10(PlaybackrateOption, {
+      return /* @__PURE__ */ jsx9(PlaybackrateOption, {
         selectedRate: playbackRate,
         onSelect,
         rate,
@@ -1985,13 +1909,13 @@ var button = {
 };
 var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
-  const { playbackRate } = Internals10.usePlaybackRate();
+  const { playbackRate } = Internals8.usePlaybackRate();
   const onClick = useCallback5((e) => {
     e.stopPropagation();
     e.preventDefault();
     setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
   }, [setIsComponentVisible]);
-  return /* @__PURE__ */ jsx10("div", {
+  return /* @__PURE__ */ jsx9("div", {
     ref,
     children: /* @__PURE__ */ jsxs5("button", {
       type: "button",
@@ -2006,7 +1930,7 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
             "x"
           ]
         }),
-        isComponentVisible && /* @__PURE__ */ jsx10(PlaybackPopup, {
+        isComponentVisible && /* @__PURE__ */ jsx9(PlaybackPopup, {
           canvasSize,
           playbackRates,
           setIsComponentVisible
@@ -2017,9 +1941,9 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo7, useRef as useRef8, useState as useState8 } from "react";
-import { Internals as Internals11, interpolate } from "remotion";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState8 } 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;
   const frame = Math.round(interpolate(pos, [0, width], [0, durationInFrames - 1], {
@@ -2055,14 +1979,14 @@ 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, isPlaying } = usePlayerMethods();
-  const frame = Internals11.Timeline.useTimelinePosition();
+  const frame = Internals9.Timeline.useTimelinePosition();
   const [dragging, setDragging] = useState8({
     dragging: false
   });
@@ -2119,7 +2043,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo7(() => {
+  const knobStyle = useMemo6(() => {
     return {
       height: KNOB_SIZE2,
       width: KNOB_SIZE2,
@@ -2132,7 +2056,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       opacity: Number(barHovered || dragging.dragging)
     };
   }, [barHovered, dragging.dragging, durationInFrames, frame, width]);
-  const fillStyle = useMemo7(() => {
+  const fillStyle = useMemo6(() => {
     return {
       height: BAR_HEIGHT2,
       backgroundColor: "rgba(255, 255, 255, 1)",
@@ -2141,7 +2065,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       borderRadius: BAR_HEIGHT2 / 2
     };
   }, [durationInFrames, frame, inFrame, width]);
-  const active = useMemo7(() => {
+  const active = useMemo6(() => {
     return {
       height: BAR_HEIGHT2,
       backgroundColor: "rgba(255, 255, 255, 0.25)",
@@ -2159,15 +2083,15 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       /* @__PURE__ */ jsxs6("div", {
         style: barBackground,
         children: [
-          /* @__PURE__ */ jsx11("div", {
+          /* @__PURE__ */ jsx10("div", {
             style: active
           }),
-          /* @__PURE__ */ jsx11("div", {
+          /* @__PURE__ */ jsx10("div", {
             style: fillStyle
           })
         ]
       }),
-      /* @__PURE__ */ jsx11("div", {
+      /* @__PURE__ */ jsx10("div", {
         style: knobStyle
       })
     ]
@@ -2175,8 +2099,8 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
 };
 
 // src/PlayerTimeLabel.tsx
-import { useMemo as useMemo8 } from "react";
-import { Internals as Internals12 } from "remotion";
+import { useMemo as useMemo7 } from "react";
+import { Internals as Internals10 } from "remotion";
 
 // src/format-time.ts
 var formatTime = (timeInSeconds) => {
@@ -2188,8 +2112,8 @@ var formatTime = (timeInSeconds) => {
 // src/PlayerTimeLabel.tsx
 import { jsxs as jsxs7 } from "react/jsx-runtime";
 var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
-  const frame = Internals12.Timeline.useTimelinePosition();
-  const timeLabel = useMemo8(() => {
+  const frame = Internals10.Timeline.useTimelinePosition();
+  const timeLabel = useMemo7(() => {
     return {
       color: "white",
       fontFamily: "sans-serif",
@@ -2212,14 +2136,14 @@ var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
 };
 
 // src/use-video-controls-resize.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo8 } from "react";
 var X_SPACER = 10;
 var X_PADDING = 12;
 var useVideoControlsResize = ({
   allowFullscreen: allowFullScreen,
   playerWidth
 }) => {
-  const resizeInfo = useMemo9(() => {
+  const resizeInfo = useMemo8(() => {
     const playPauseIconSize = ICON_SIZE;
     const volumeIconSize = ICON_SIZE;
     const _fullscreenIconSize = allowFullScreen ? fullscreenIconSize : 0;
@@ -2239,7 +2163,7 @@ var useVideoControlsResize = ({
 };
 
 // src/PlayerControls.tsx
-import { jsx as jsx12, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
 var gradientSteps = [
   0,
   0.013,
@@ -2348,7 +2272,7 @@ var Controls = ({
   toggle,
   renderCustomControls
 }) => {
-  const playButtonRef = useRef9(null);
+  const playButtonRef = useRef8(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState9(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -2376,7 +2300,7 @@ var Controls = ({
     }
     throw new TypeError("initiallyShowControls must be a number or a boolean");
   });
-  const containerCss = useMemo10(() => {
+  const containerCss = useMemo9(() => {
     const shouldShow = hovered || !playing || shouldShowInitially || alwaysShowControls;
     return {
       ...containerStyle2,
@@ -2405,7 +2329,7 @@ var Controls = ({
       clearInterval(timeout);
     };
   }, [shouldShowInitially]);
-  const playbackRates = useMemo10(() => {
+  const playbackRates = useMemo9(() => {
     if (showPlaybackRateControl === true) {
       return [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3];
     }
@@ -2423,8 +2347,8 @@ var Controls = ({
     return null;
   }, [showPlaybackRateControl]);
   const customControlsElement = renderCustomControls ? renderCustomControls() : null;
-  const ref = useRef9(null);
-  const flexRef = useRef9(null);
+  const ref = useRef8(null);
+  const flexRef = useRef8(null);
   const onPointerDownIfContainer = useCallback7((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
@@ -2448,82 +2372,82 @@ var Controls = ({
           /* @__PURE__ */ jsxs8("div", {
             style: leftPartStyle,
             children: [
-              /* @__PURE__ */ jsx12("button", {
+              /* @__PURE__ */ jsx11("button", {
                 ref: playButtonRef,
                 type: "button",
                 style: playerButtonStyle,
                 onClick: toggle,
                 "aria-label": playing ? "Pause video" : "Play video",
                 title: playing ? "Pause video" : "Play video",
-                children: renderPlayPauseButton === null ? /* @__PURE__ */ jsx12(DefaultPlayPauseButton, {
+                children: renderPlayPauseButton === null ? /* @__PURE__ */ jsx11(DefaultPlayPauseButton, {
                   buffering,
                   playing
                 }) : renderPlayPauseButton({
                   playing,
                   isBuffering: buffering
-                }) ?? /* @__PURE__ */ jsx12(DefaultPlayPauseButton, {
+                }) ?? /* @__PURE__ */ jsx11(DefaultPlayPauseButton, {
                   buffering,
                   playing
                 })
               }),
               showVolumeControls ? /* @__PURE__ */ jsxs8(Fragment2, {
                 children: [
-                  /* @__PURE__ */ jsx12("div", {
+                  /* @__PURE__ */ jsx11("div", {
                     style: xSpacer
                   }),
-                  /* @__PURE__ */ jsx12(MediaVolumeSlider, {
+                  /* @__PURE__ */ jsx11(MediaVolumeSlider, {
                     renderMuteButton,
                     renderVolumeSlider,
                     displayVerticalVolumeSlider
                   })
                 ]
               }) : null,
-              /* @__PURE__ */ jsx12("div", {
+              /* @__PURE__ */ jsx11("div", {
                 style: xSpacer
               }),
-              /* @__PURE__ */ jsx12(PlayerTimeLabel, {
+              /* @__PURE__ */ jsx11(PlayerTimeLabel, {
                 durationInFrames,
                 fps,
                 maxTimeLabelWidth
               }),
-              /* @__PURE__ */ jsx12("div", {
+              /* @__PURE__ */ jsx11("div", {
                 style: xSpacer
               })
             ]
           }),
-          /* @__PURE__ */ jsx12("div", {
+          /* @__PURE__ */ jsx11("div", {
             style: flex1
           }),
           customControlsElement,
-          customControlsElement && playbackRates && canvasSize ? /* @__PURE__ */ jsx12("div", {
+          customControlsElement && playbackRates && canvasSize ? /* @__PURE__ */ jsx11("div", {
             style: xSpacer
           }) : null,
-          playbackRates && canvasSize && /* @__PURE__ */ jsx12(PlaybackrateControl, {
+          playbackRates && canvasSize && /* @__PURE__ */ jsx11(PlaybackrateControl, {
             canvasSize,
             playbackRates
           }),
-          playbackRates && supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx12("div", {
+          playbackRates && supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx11("div", {
             style: xSpacer
           }) : null,
-          /* @__PURE__ */ jsx12("div", {
+          /* @__PURE__ */ jsx11("div", {
             style: fullscreen,
-            children: supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx12("button", {
+            children: supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx11("button", {
               type: "button",
               "aria-label": isFullscreen ? "Exit fullscreen" : "Enter Fullscreen",
               title: isFullscreen ? "Exit fullscreen" : "Enter Fullscreen",
               style: playerButtonStyle,
               onClick: isFullscreen ? onExitFullscreenButtonClick : onFullscreenButtonClick,
-              children: renderFullscreenButton === null ? /* @__PURE__ */ jsx12(FullscreenIcon, {
+              children: renderFullscreenButton === null ? /* @__PURE__ */ jsx11(FullscreenIcon, {
                 isFullscreen
               }) : renderFullscreenButton({ isFullscreen })
             }) : null
           })
         ]
       }),
-      /* @__PURE__ */ jsx12("div", {
+      /* @__PURE__ */ jsx11("div", {
         style: ySpacer
       }),
-      /* @__PURE__ */ jsx12(PlayerSeekBar, {
+      /* @__PURE__ */ jsx11(PlayerSeekBar, {
         onSeekEnd,
         onSeekStart,
         durationInFrames,
@@ -2538,7 +2462,7 @@ var Controls = ({
 var IS_NODE = typeof document === "undefined";
 
 // src/utils/use-click-prevention-on-double-click.ts
-import { useCallback as useCallback9, useMemo as useMemo12 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo11 } from "react";
 
 // src/utils/cancellable-promise.ts
 var cancellablePromise = (promise) => {
@@ -2566,9 +2490,9 @@ var cancellablePromise = (promise) => {
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 
 // src/utils/use-cancellable-promises.ts
-import { useCallback as useCallback8, useMemo as useMemo11, useRef as useRef10 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo10, useRef as useRef9 } from "react";
 var useCancellablePromises = () => {
-  const pendingPromises = useRef10([]);
+  const pendingPromises = useRef9([]);
   const appendPendingPromise = useCallback8((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
@@ -2576,7 +2500,7 @@ var useCancellablePromises = () => {
     pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
   }, []);
   const clearPendingPromises = useCallback8(() => pendingPromises.current.map((p) => p.cancel()), []);
-  const api = useMemo11(() => ({
+  const api = useMemo10(() => ({
     appendPendingPromise,
     removePendingPromise,
     clearPendingPromises
@@ -2618,7 +2542,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
     api.clearPendingPromises();
     onDoubleClick();
   }, [api, onDoubleClick]);
-  const returnValue = useMemo12(() => {
+  const returnValue = useMemo11(() => {
     if (!doubleClickToFullscreen) {
       return { handlePointerDown: onClick, handleDoubleClick: () => {
         return;
@@ -2630,8 +2554,8 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
 };
 
 // src/PlayerUI.tsx
-import { jsx as jsx13, jsxs as jsxs9, Fragment as Fragment3 } from "react/jsx-runtime";
-var reactVersion = React12.version.split(".")[0];
+import { jsx as jsx12, jsxs as jsxs9, Fragment as Fragment3 } from "react/jsx-runtime";
+var reactVersion = React11.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
@@ -2676,9 +2600,9 @@ var PlayerUI = ({
   overrideInternalClassName,
   noSuspense
 }, ref) => {
-  const config = Internals13.useUnsafeVideoConfig();
-  const video = Internals13.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
@@ -2688,15 +2612,15 @@ var PlayerUI = ({
   const [isFullscreen, setIsFullscreen] = useState10(() => false);
   const [seeking, setSeeking] = useState10(false);
   const [hasPlayed, setHasPlayed] = useState10(false);
-  const supportsFullScreen = useMemo13(() => {
+  const supportsFullScreen = useMemo12(() => {
     if (typeof document === "undefined") {
       return false;
     }
     return Boolean(document.fullscreenEnabled || document.webkitFullscreenEnabled);
   }, []);
   const player = usePlayerMethods();
-  const [playing] = Internals13.Timeline.usePlayingState();
-  const frame = Internals13.Timeline.useTimelinePosition();
+  const playing = Internals11.usePlaying();
+  const frame = Internals11.Timeline.useTimelinePosition();
   const play = useCallback10((e) => {
     if (player.isPlaying()) {
       return;
@@ -2704,7 +2628,7 @@ var PlayerUI = ({
     setHasPlayed(true);
     player.play(e);
   }, [player]);
-  const { playerMuted, mediaVolume } = useContext5(Internals13.MediaVolumeContext);
+  const { playerMuted, mediaVolume } = useContext4(Internals11.MediaVolumeContext);
   useEffect12(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
@@ -2801,7 +2725,7 @@ var PlayerUI = ({
     };
   }, [player.emitter]);
   const durationInFrames = config?.durationInFrames ?? 1;
-  const layout = useMemo13(() => {
+  const layout = useMemo12(() => {
     if (!config || !canvasSize) {
       return null;
     }
@@ -2813,7 +2737,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;
@@ -2821,7 +2745,7 @@ var PlayerUI = ({
     }
     player.emitter.dispatchScaleChange(scale);
   }, [player.emitter, scale]);
-  const { setMediaVolume, setPlayerMuted } = useContext5(Internals13.SetMediaVolumeContext);
+  const { setMediaVolume, setPlayerMuted } = useContext4(Internals11.SetMediaVolumeContext);
   const [showBufferIndicator, setShowBufferState] = useState10(false);
   useEffect12(() => {
     let timeout = null;
@@ -2941,7 +2865,7 @@ var PlayerUI = ({
     scale
   ]);
   const VideoComponent = video ? video.component : null;
-  const outerStyle = useMemo13(() => {
+  const outerStyle = useMemo12(() => {
     return calculateOuterStyle({
       canvasSize,
       config,
@@ -2950,10 +2874,10 @@ var PlayerUI = ({
       layout
     });
   }, [canvasSize, config, layout, overflowVisible, style2]);
-  const outer = useMemo13(() => {
+  const outer = useMemo12(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);
-  const containerStyle3 = useMemo13(() => {
+  const containerStyle3 = useMemo12(() => {
     return calculateContainerStyle({
       config,
       layout,
@@ -3002,14 +2926,14 @@ var PlayerUI = ({
       setShouldAutoPlay(false);
     }
   }, [play, shouldAutoplay]);
-  const loadingMarkup = useMemo13(() => {
+  const loadingMarkup = useMemo12(() => {
     return renderLoading ? renderLoading({
       height: outerStyle.height,
       width: outerStyle.width,
       isBuffering: showBufferIndicator
     }) : null;
   }, [outerStyle.height, outerStyle.width, renderLoading, showBufferIndicator]);
-  const currentScale = useMemo13(() => {
+  const currentScale = useMemo12(() => {
     return {
       type: "scale",
       scale
@@ -3027,11 +2951,11 @@ var PlayerUI = ({
     throw new TypeError("renderPoster() must return a React element, but undefined was returned");
   }
   const shouldShowPoster = poster && [
-    showPosterWhenPaused && !player.isPlaying() && !seeking,
-    showPosterWhenEnded && frame === durationInFrames - 1 && !player.isPlaying(),
-    showPosterWhenUnplayed && !hasPlayed && !player.isPlaying(),
-    showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
-    showPosterWhenBufferingAndPaused && showBufferIndicator && !player.isPlaying()
+    showPosterWhenPaused && !playing && !seeking,
+    showPosterWhenEnded && frame === durationInFrames - 1 && !playing,
+    showPosterWhenUnplayed && !hasPlayed && !playing,
+    showPosterWhenBuffering && showBufferIndicator && playing,
+    showPosterWhenBufferingAndPaused && showBufferIndicator && !playing
   ].some(Boolean);
   const { left, top, width, height, ...outerWithoutScale } = outer;
   const content = /* @__PURE__ */ jsxs9(Fragment3, {
@@ -3045,18 +2969,18 @@ var PlayerUI = ({
             style: containerStyle3,
             className: playerCssClassname(overrideInternalClassName),
             children: [
-              VideoComponent ? /* @__PURE__ */ jsx13(ErrorBoundary, {
+              VideoComponent ? /* @__PURE__ */ jsx12(ErrorBoundary, {
                 onError,
                 errorFallback,
-                children: /* @__PURE__ */ jsx13(Internals13.CurrentScaleContext.Provider, {
+                children: /* @__PURE__ */ jsx12(Internals11.CurrentScaleContext.Provider, {
                   value: currentScale,
-                  children: /* @__PURE__ */ jsx13(VideoComponent, {
+                  children: /* @__PURE__ */ jsx12(VideoComponent, {
                     ...video?.props ?? {},
                     ...inputProps ?? {}
                   })
                 })
               }) : null,
-              shouldShowPoster && posterFillMode === "composition-size" ? /* @__PURE__ */ jsx13("div", {
+              shouldShowPoster && posterFillMode === "composition-size" ? /* @__PURE__ */ jsx12("div", {
                 style: {
                   ...outerWithoutScale,
                   width: config.width,
@@ -3068,16 +2992,16 @@ var PlayerUI = ({
               }) : null
             ]
           }),
-          /* @__PURE__ */ jsx13(RenderWarningIfBlacklist, {})
+          /* @__PURE__ */ jsx12(RenderWarningIfBlacklist, {})
         ]
       }),
-      shouldShowPoster && posterFillMode === "player-size" ? /* @__PURE__ */ jsx13("div", {
+      shouldShowPoster && posterFillMode === "player-size" ? /* @__PURE__ */ jsx12("div", {
         style: outer,
         onPointerDown: clickToPlay ? handlePointerDown : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
         children: poster
       }) : null,
-      controls ? /* @__PURE__ */ jsx13(Controls, {
+      controls ? /* @__PURE__ */ jsx12(Controls, {
         fps: config.fps,
         playing,
         toggle,
@@ -3110,18 +3034,18 @@ var PlayerUI = ({
     ]
   });
   if (noSuspense || IS_NODE && !doesReactVersionSupportSuspense) {
-    return /* @__PURE__ */ jsx13("div", {
+    return /* @__PURE__ */ jsx12("div", {
       ref: container,
       style: outerStyle,
       className: className2,
       children: content
     });
   }
-  return /* @__PURE__ */ jsx13("div", {
+  return /* @__PURE__ */ jsx12("div", {
     ref: container,
     style: outerStyle,
     className: className2,
-    children: /* @__PURE__ */ jsx13(Suspense, {
+    children: /* @__PURE__ */ jsx12(Suspense, {
       fallback: loadingMarkup,
       children: content
     })
@@ -3130,11 +3054,11 @@ var PlayerUI = ({
 var PlayerUI_default = forwardRef(PlayerUI);
 
 // src/SharedPlayerContext.tsx
-import { useCallback as useCallback11, useMemo as useMemo14, useRef as useRef12, useState as useState11 } from "react";
-import { Internals as Internals15 } from "remotion";
+import { useCallback as useCallback11, useMemo as useMemo13, useRef as useRef11, useState as useState11 } from "react";
+import { Internals as Internals13 } from "remotion";
 
 // src/volume-persistence.ts
-import { Internals as Internals14 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 var DEFAULT_VOLUME_PERSISTENCE_KEY = "remotion.volumePreference";
 var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   if (typeof window === "undefined") {
@@ -3143,7 +3067,7 @@ var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   try {
     window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTENCE_KEY, String(volume));
   } catch (e) {
-    Internals14.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
+    Internals12.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
   }
 };
 var getPreferredVolume = (volumePersistenceKey) => {
@@ -3159,7 +3083,7 @@ var getPreferredVolume = (volumePersistenceKey) => {
 };
 
 // src/SharedPlayerContext.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var PLAYER_COMP_ID = "player-comp";
 var SharedPlayerContexts = ({
   children,
@@ -3182,7 +3106,7 @@ var SharedPlayerContexts = ({
   _experimentalKeepAudioContextAlive
 }) => {
   const persistVolumeToStorage = initialVolume === undefined;
-  const compositionManagerContext = useMemo14(() => {
+  const compositionManagerContext = useMemo13(() => {
     const context = {
       compositions: [
         {
@@ -3192,7 +3116,7 @@ var SharedPlayerContexts = ({
           width: compositionWidth,
           fps,
           id: PLAYER_COMP_ID,
-          nonce: [[0, 777]],
+          order: null,
           folderName: null,
           parentFolderName: null,
           schema: null,
@@ -3228,13 +3152,13 @@ var SharedPlayerContexts = ({
   ]);
   const [playerMuted, setPlayerMuted] = useState11(() => initiallyMuted);
   const [mediaVolume, setMediaVolume] = useState11(() => persistVolumeToStorage ? getPreferredVolume(volumePersistenceKey ?? null) : initialVolume);
-  const mediaVolumeContextValue = useMemo14(() => {
+  const mediaVolumeContextValue = useMemo13(() => {
     return {
       playerMuted,
       mediaVolume
     };
   }, [playerMuted, mediaVolume]);
-  const audioContextWasCreated = useRef12(false);
+  const audioContextWasCreated = useRef11(false);
   const shouldCreateAudioContext = audioContextWasCreated.current || audioEnabled && !playerMuted && mediaVolume > 0;
   audioContextWasCreated.current = shouldCreateAudioContext;
   const setMediaVolumeAndPersist = useCallback11((vol) => {
@@ -3243,19 +3167,19 @@ var SharedPlayerContexts = ({
       persistVolume(vol, logLevel, volumePersistenceKey ?? null);
     }
   }, [persistVolumeToStorage, logLevel, volumePersistenceKey]);
-  const setMediaVolumeContextValue = useMemo14(() => {
+  const setMediaVolumeContextValue = useMemo13(() => {
     return {
       setPlayerMuted,
       setMediaVolume: setMediaVolumeAndPersist
     };
   }, [setMediaVolumeAndPersist]);
-  const logLevelContext = useMemo14(() => {
+  const logLevelContext = useMemo13(() => {
     return {
       logLevel,
       mountTime: Date.now()
     };
   }, [logLevel]);
-  const env = useMemo14(() => {
+  const env = useMemo13(() => {
     return {
       isPlayer: true,
       isRendering: false,
@@ -3264,46 +3188,34 @@ var SharedPlayerContexts = ({
       isReadOnlyStudio: false
     };
   }, []);
-  const frameRef = useRef12(timelineContext.frame);
-  frameRef.current = timelineContext.frame;
-  const timelineImperativeContextValue = useMemo14(() => {
-    return {
-      frameRef,
-      imperativePlaying: timelineContext.imperativePlaying,
-      audioAndVideoTags: timelineContext.audioAndVideoTags
-    };
-  }, [timelineContext.audioAndVideoTags, timelineContext.imperativePlaying]);
-  return /* @__PURE__ */ jsx14(Internals15.RemotionEnvironmentContext.Provider, {
+  return /* @__PURE__ */ jsx13(Internals13.RemotionEnvironmentContext.Provider, {
     value: env,
-    children: /* @__PURE__ */ jsx14(Internals15.LogLevelContext.Provider, {
+    children: /* @__PURE__ */ jsx13(Internals13.LogLevelContext.Provider, {
       value: logLevelContext,
-      children: /* @__PURE__ */ jsx14(Internals15.CanUseRemotionHooksProvider, {
-        children: /* @__PURE__ */ jsx14(Internals15.AbsoluteTimeContext.Provider, {
+      children: /* @__PURE__ */ jsx13(Internals13.CanUseRemotionHooksProvider, {
+        children: /* @__PURE__ */ jsx13(Internals13.AbsoluteTimeContext.Provider, {
           value: timelineContext,
-          children: /* @__PURE__ */ jsx14(Internals15.PlaybackRateContext.Provider, {
+          children: /* @__PURE__ */ jsx13(Internals13.PlaybackRateContext.Provider, {
             value: playbackRateContext,
-            children: /* @__PURE__ */ jsx14(CoreTimelineImperativeContextProvider, {
-              value: timelineImperativeContextValue,
-              children: /* @__PURE__ */ jsx14(Internals15.TimelineContext.Provider, {
-                value: timelineContext,
-                children: /* @__PURE__ */ jsx14(Internals15.CompositionManager.Provider, {
-                  value: compositionManagerContext,
-                  children: /* @__PURE__ */ jsx14(Internals15.PrefetchProvider, {
-                    children: /* @__PURE__ */ jsx14(Internals15.DurationsContextProvider, {
-                      children: /* @__PURE__ */ jsx14(Internals15.MediaVolumeContext.Provider, {
-                        value: mediaVolumeContextValue,
-                        children: /* @__PURE__ */ jsx14(Internals15.SetMediaVolumeContext.Provider, {
-                          value: setMediaVolumeContextValue,
-                          children: /* @__PURE__ */ jsx14(Internals15.BufferingProvider, {
-                            children: /* @__PURE__ */ jsx14(Internals15.SharedAudioContextProvider, {
-                              audioLatencyHint,
-                              audioEnabled: shouldCreateAudioContext,
-                              previewSampleRate: sampleRate,
-                              _experimentalKeepAudioContextAlive,
-                              children: /* @__PURE__ */ jsx14(Internals15.SharedAudioTagsContextProvider, {
-                                numberOfAudioTags: numberOfSharedAudioTags,
-                                children
-                              })
+            children: /* @__PURE__ */ jsx13(Internals13.TimelineContext.Provider, {
+              value: timelineContext,
+              children: /* @__PURE__ */ jsx13(Internals13.CompositionManager.Provider, {
+                value: compositionManagerContext,
+                children: /* @__PURE__ */ jsx13(Internals13.PrefetchProvider, {
+                  children: /* @__PURE__ */ jsx13(Internals13.DurationsContextProvider, {
+                    children: /* @__PURE__ */ jsx13(Internals13.MediaVolumeContext.Provider, {
+                      value: mediaVolumeContextValue,
+                      children: /* @__PURE__ */ jsx13(Internals13.SetMediaVolumeContext.Provider, {
+                        value: setMediaVolumeContextValue,
+                        children: /* @__PURE__ */ jsx13(Internals13.BufferingProvider, {
+                          children: /* @__PURE__ */ jsx13(Internals13.SharedAudioContextProvider, {
+                            audioLatencyHint,
+                            audioEnabled: shouldCreateAudioContext,
+                            previewSampleRate: sampleRate,
+                            _experimentalKeepAudioContextAlive,
+                            children: /* @__PURE__ */ jsx13(Internals13.SharedAudioTagsContextProvider, {
+                              numberOfAudioTags: numberOfSharedAudioTags,
+                              children
                             })
                           })
                         })
@@ -3321,7 +3233,7 @@ var SharedPlayerContexts = ({
 };
 
 // src/use-remotion-license-acknowledge.ts
-import { Internals as Internals16 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 var warningShown = false;
 var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
   if (acknowledge) {
@@ -3331,7 +3243,7 @@ var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
     return;
   }
   warningShown = true;
-  Internals16.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
@@ -3432,7 +3344,7 @@ var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 var validateDefaultAndInputProps = NoReactInternals.validateDefaultAndInputProps;
 
 // src/Player.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var componentOrNullIfLazy = (props) => {
   if ("component" in props) {
     return props.component;
@@ -3440,7 +3352,7 @@ var componentOrNullIfLazy = (props) => {
   return null;
 };
 var TimelineSequenceObserverComponent = ({ onTimelineSequenceChange }) => {
-  const { sequences } = React14.useContext(Internals17.SequenceManager);
+  const { sequences } = React13.useContext(Internals15.SequenceManager);
   useEffect13(() => {
     onTimelineSequenceChange(sequences);
   }, [onTimelineSequenceChange, sequences]);
@@ -3504,7 +3416,7 @@ var PlayerFn = ({
   if (typeof window !== "undefined") {
     window.remotion_isPlayer = true;
   }
-  const onTimelineSequenceChange = React14.useContext(TimelineSequenceObserverContext);
+  const onTimelineSequenceChange = React13.useContext(TimelineSequenceObserverContext);
   if (componentProps.defaultProps !== undefined) {
     throw new Error("The <Player /> component does not accept `defaultProps`, but some were passed. Use `inputProps` instead.");
   }
@@ -3516,7 +3428,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.`);
   }
   useState12(() => acknowledgeRemotionLicenseMessage(Boolean(acknowledgeRemotionLicense), logLevel));
-  const component = Internals17.useLazyComponent({
+  const component = Internals15.useLazyComponent({
     compProps: componentProps,
     componentName: "Player",
     noSuspense: Boolean(noSuspense)
@@ -3525,10 +3437,14 @@ var PlayerFn = ({
   const [frame, setFrame] = useState12(() => ({
     [PLAYER_COMP_ID]: initialFrame ?? 0
   }));
-  const [playing, setPlaying] = useState12(false);
-  const rootRef = useRef13(null);
-  const audioAndVideoTags = useRef13([]);
-  const imperativePlaying = useRef13(false);
+  const frameRef = useRef12(frame);
+  frameRef.current = frame;
+  const rootRef = useRef12(null);
+  const audioAndVideoTags = useRef12([]);
+  const playingStore = useMemo14(() => Internals15.createRuntimeValueStore({ playing: false }), []);
+  const bufferingStore = useMemo14(() => Internals15.createRuntimeValueStore({ buffering: false }), []);
+  const readIsPlaying = useCallback12(() => playingStore.store.getSnapshot().playing, [playingStore]);
+  const readIsBuffering = useCallback12(() => bufferingStore.store.getSnapshot().buffering, [bufferingStore]);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState12(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -3591,68 +3507,91 @@ var PlayerFn = ({
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
   useState12(() => {
-    Internals17.playbackLogging({
+    Internals15.playbackLogging({
       logLevel,
       message: `[player] Mounting <Player>. User agent = ${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
       tag: "player",
       mountTime: Date.now()
     });
   });
-  const timelineContextValue = useMemo15(() => {
+  const timelineContextValue = useMemo14(() => {
     return {
       frame,
-      playing,
-      imperativePlaying,
+      isPlaying: readIsPlaying,
       audioAndVideoTags
     };
-  }, [frame, playing]);
-  const playbackRateContextValue = useMemo15(() => {
+  }, [frame, readIsPlaying]);
+  const playbackRateContextValue = useMemo14(() => {
     return {
       playbackRate: currentPlaybackRate,
       setPlaybackRate: setCurrentPlaybackRate
     };
   }, [currentPlaybackRate]);
-  const setTimelineContextValue = useMemo15(() => {
+  const setTimelineContextValue = useMemo14(() => {
     return {
       setFrame,
-      setPlaying
+      setPlaying: (updater) => {
+        const current = playingStore.store.getSnapshot().playing;
+        const next = typeof updater === "function" ? updater(current) : updater;
+        if (current !== next) {
+          playingStore.setSnapshot({ playing: next });
+        }
+      },
+      setBuffering: (buffering) => {
+        if (readIsBuffering() !== buffering) {
+          bufferingStore.setSnapshot({ buffering });
+        }
+      },
+      subscribePlaying: playingStore.store.subscribe,
+      subscribeBuffering: bufferingStore.store.subscribe,
+      isPlaying: readIsPlaying,
+      isBuffering: readIsBuffering,
+      frameRef,
+      audioAndVideoTags
     };
-  }, [setFrame]);
+  }, [
+    bufferingStore,
+    setFrame,
+    frameRef,
+    playingStore,
+    readIsBuffering,
+    readIsPlaying
+  ]);
   if (typeof window !== "undefined") {
     useLayoutEffect3(() => {
-      Internals17.CSSUtils.injectCSS(Internals17.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
+      Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
-  const actualInputProps = useMemo15(() => inputProps ?? {}, [inputProps]);
-  const browserMediaControlsBehavior = useMemo15(() => {
+  const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
+  const browserMediaControlsBehavior = useMemo14(() => {
     return passedBrowserMediaControlsBehavior ?? {
       mode: "prevent-media-session"
     };
   }, [passedBrowserMediaControlsBehavior]);
-  const player = /* @__PURE__ */ jsx15(Internals17.IsPlayerContextProvider, {
-    children: /* @__PURE__ */ jsx15(SharedPlayerContexts, {
-      timelineContext: timelineContextValue,
-      playbackRateContext: playbackRateContextValue,
-      component,
-      compositionHeight,
-      compositionWidth,
-      durationInFrames,
-      fps,
-      numberOfSharedAudioTags,
-      initiallyMuted,
-      logLevel,
-      audioLatencyHint,
-      sampleRate,
-      _experimentalKeepAudioContextAlive,
-      volumePersistenceKey,
-      initialVolume,
-      inputProps: actualInputProps,
-      audioEnabled: true,
-      children: /* @__PURE__ */ jsx15(Internals17.SetTimelineContext.Provider, {
-        value: setTimelineContextValue,
-        children: /* @__PURE__ */ jsx15(PlayerEmitterProvider, {
+  const player = /* @__PURE__ */ jsx14(Internals15.IsPlayerContextProvider, {
+    children: /* @__PURE__ */ jsx14(Internals15.SetTimelineContext.Provider, {
+      value: setTimelineContextValue,
+      children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
+        timelineContext: timelineContextValue,
+        playbackRateContext: playbackRateContextValue,
+        component,
+        compositionHeight,
+        compositionWidth,
+        durationInFrames,
+        fps,
+        numberOfSharedAudioTags,
+        initiallyMuted,
+        logLevel,
+        audioLatencyHint,
+        sampleRate,
+        _experimentalKeepAudioContextAlive,
+        volumePersistenceKey,
+        initialVolume,
+        inputProps: actualInputProps,
+        audioEnabled: true,
+        children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {
           currentPlaybackRate,
-          children: /* @__PURE__ */ jsx15(PlayerUI_default, {
+          children: /* @__PURE__ */ jsx14(PlayerUI_default, {
             ref: rootRef,
             posterFillMode,
             renderLoading,
@@ -3700,11 +3639,11 @@ var PlayerFn = ({
   if (!onTimelineSequenceChange) {
     return player;
   }
-  return /* @__PURE__ */ jsx15(Internals17.SequenceRegistrationContext.Provider, {
+  return /* @__PURE__ */ jsx14(Internals15.SequenceRegistrationContext.Provider, {
     value: true,
-    children: /* @__PURE__ */ jsxs10(Internals17.SequenceManagerProvider, {
+    children: /* @__PURE__ */ jsxs10(Internals15.SequenceManagerProvider, {
       children: [
-        /* @__PURE__ */ jsx15(TimelineSequenceObserverComponent, {
+        /* @__PURE__ */ jsx14(TimelineSequenceObserverComponent, {
           onTimelineSequenceChange
         }),
         player
@@ -3719,31 +3658,31 @@ import {
   forwardRef as forwardRef4,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo18,
-  useRef as useRef15,
+  useMemo as useMemo17,
+  useRef as useRef14,
   useState as useState13
 } from "react";
-import { Internals as Internals19 } from "remotion";
+import { Internals as Internals17 } from "remotion";
 
 // src/ThumbnailUI.tsx
-import React15, {
+import React14, {
   forwardRef as forwardRef3,
   Suspense as Suspense2,
-  useCallback as useCallback12,
+  useCallback as useCallback13,
   useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo17,
-  useRef as useRef14
+  useMemo as useMemo16,
+  useRef as useRef13
 } from "react";
-import { Internals as Internals18 } from "remotion";
+import { Internals as Internals16 } from "remotion";
 
 // src/use-thumbnail.ts
-import { useContext as useContext6, useMemo as useMemo16 } from "react";
+import { useContext as useContext5, useMemo as useMemo15 } from "react";
 var useThumbnail = () => {
-  const emitter = useContext6(ThumbnailEmitterContext);
+  const emitter = useContext5(ThumbnailEmitterContext);
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const returnValue = useMemo16(() => {
+  const returnValue = useMemo15(() => {
     return {
       emitter
     };
@@ -3752,8 +3691,8 @@ var useThumbnail = () => {
 };
 
 // src/ThumbnailUI.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var reactVersion2 = React15.version.split(".")[0];
+import { jsx as jsx15 } from "react/jsx-runtime";
+var reactVersion2 = React14.version.split(".")[0];
 if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
 }
@@ -3768,14 +3707,14 @@ var ThumbnailUI = ({
   noSuspense,
   overrideInternalClassName
 }, ref) => {
-  const config = Internals18.useUnsafeVideoConfig();
-  const video = Internals18.useVideo();
-  const container = useRef14(null);
+  const config = Internals16.useUnsafeVideoConfig();
+  const video = Internals16.useVideo();
+  const container = useRef13(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
   });
-  const layout = useMemo17(() => {
+  const layout = useMemo16(() => {
     if (!config || !canvasSize) {
       return null;
     }
@@ -3797,7 +3736,7 @@ var ThumbnailUI = ({
     return Object.assign(thumbnail.emitter, methods);
   }, [scale, thumbnail.emitter]);
   const VideoComponent = video ? video.component : null;
-  const outerStyle = useMemo17(() => {
+  const outerStyle = useMemo16(() => {
     return calculateOuterStyle({
       config,
       style: style2,
@@ -3806,10 +3745,10 @@ var ThumbnailUI = ({
       layout
     });
   }, [canvasSize, config, layout, overflowVisible, style2]);
-  const outer = useMemo17(() => {
+  const outer = useMemo16(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);
-  const containerStyle3 = useMemo17(() => {
+  const containerStyle3 = useMemo16(() => {
     return calculateContainerStyle({
       config,
       layout,
@@ -3817,17 +3756,17 @@ var ThumbnailUI = ({
       overflowVisible
     });
   }, [config, layout, overflowVisible, scale]);
-  const onError = useCallback12((error) => {
+  const onError = useCallback13((error) => {
     thumbnail.emitter.dispatchError(error);
   }, [thumbnail.emitter]);
-  const loadingMarkup = useMemo17(() => {
+  const loadingMarkup = useMemo16(() => {
     return renderLoading ? renderLoading({
       height: outerStyle.height,
       width: outerStyle.width,
       isBuffering: false
     }) : null;
   }, [outerStyle.height, outerStyle.width, renderLoading]);
-  const currentScaleContext = useMemo17(() => {
+  const currentScaleContext = useMemo16(() => {
     return {
       type: "scale",
       scale
@@ -3836,17 +3775,17 @@ var ThumbnailUI = ({
   if (!config) {
     return null;
   }
-  const content = /* @__PURE__ */ jsx16("div", {
+  const content = /* @__PURE__ */ jsx15("div", {
     style: outer,
-    children: /* @__PURE__ */ jsx16("div", {
+    children: /* @__PURE__ */ jsx15("div", {
       style: containerStyle3,
       className: playerCssClassname(overrideInternalClassName),
-      children: VideoComponent ? /* @__PURE__ */ jsx16(ErrorBoundary, {
+      children: VideoComponent ? /* @__PURE__ */ jsx15(ErrorBoundary, {
         onError,
         errorFallback,
-        children: /* @__PURE__ */ jsx16(Internals18.CurrentScaleContext.Provider, {
+        children: /* @__PURE__ */ jsx15(Internals16.CurrentScaleContext.Provider, {
           value: currentScaleContext,
-          children: /* @__PURE__ */ jsx16(VideoComponent, {
+          children: /* @__PURE__ */ jsx15(VideoComponent, {
             ...video?.props ?? {},
             ...inputProps ?? {}
           })
@@ -3855,18 +3794,18 @@ var ThumbnailUI = ({
     })
   });
   if (noSuspense || IS_NODE && !doesReactVersionSupportSuspense2) {
-    return /* @__PURE__ */ jsx16("div", {
+    return /* @__PURE__ */ jsx15("div", {
       ref: container,
       style: outerStyle,
       className: className2,
       children: content
     });
   }
-  return /* @__PURE__ */ jsx16("div", {
+  return /* @__PURE__ */ jsx15("div", {
     ref: container,
     style: outerStyle,
     className: className2,
-    children: /* @__PURE__ */ jsx16(Suspense2, {
+    children: /* @__PURE__ */ jsx15(Suspense2, {
       fallback: loadingMarkup,
       children: content
     })
@@ -3875,7 +3814,7 @@ var ThumbnailUI = ({
 var ThumbnailUI_default = forwardRef3(ThumbnailUI);
 
 // src/Thumbnail.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var ThumbnailFn = ({
   frameToDisplay,
   style: style2,
@@ -3898,21 +3837,20 @@ var ThumbnailFn = ({
       window.remotion_isPlayer = true;
     }, []);
   }
-  const rootRef = useRef15(null);
-  const imperativePlaying = useRef15(false);
-  const audioAndVideoTags = useRef15([]);
-  const timelineState = useMemo18(() => {
+  const rootRef = useRef14(null);
+  const audioAndVideoTags = useRef14([]);
+  const bufferingStore = useMemo17(() => Internals17.createRuntimeValueStore({ buffering: false }), []);
+  const timelineState = useMemo17(() => {
     const value = {
-      playing: false,
+      isPlaying: () => false,
       frame: {
         [PLAYER_COMP_ID]: frameToDisplay
       },
-      imperativePlaying,
       audioAndVideoTags
     };
     return value;
   }, [frameToDisplay]);
-  const playbackRateContext = useMemo18(() => {
+  const playbackRateContext = useMemo17(() => {
     return {
       playbackRate: 1,
       setPlaybackRate: () => {
@@ -3920,45 +3858,73 @@ var ThumbnailFn = ({
       }
     };
   }, []);
+  const frameRef = useRef14(timelineState.frame);
+  frameRef.current = timelineState.frame;
+  const setTimelineContext = useMemo17(() => {
+    return {
+      setFrame: () => {
+        return;
+      },
+      setPlaying: () => {
+        return;
+      },
+      setBuffering: (buffering) => {
+        if (bufferingStore.store.getSnapshot().buffering !== buffering) {
+          bufferingStore.setSnapshot({ buffering });
+        }
+      },
+      subscribePlaying: () => () => {
+        return;
+      },
+      subscribeBuffering: bufferingStore.store.subscribe,
+      isPlaying: () => false,
+      isBuffering: () => bufferingStore.store.getSnapshot().buffering,
+      frameRef,
+      audioAndVideoTags
+    };
+  }, [bufferingStore]);
   useImperativeHandle4(ref, () => rootRef.current, []);
-  const Component = Internals19.useLazyComponent({
+  const Component = Internals17.useLazyComponent({
     compProps: componentProps,
     componentName: "Thumbnail",
     noSuspense: Boolean(noSuspense)
   });
   const [emitter] = useState13(() => new ThumbnailEmitter);
-  const passedInputProps = useMemo18(() => {
+  const passedInputProps = useMemo17(() => {
     return inputProps ?? {};
   }, [inputProps]);
-  return /* @__PURE__ */ jsx17(Internals19.IsPlayerContextProvider, {
-    children: /* @__PURE__ */ jsx17(SharedPlayerContexts, {
-      timelineContext: timelineState,
-      playbackRateContext,
-      component: Component,
-      compositionHeight,
-      compositionWidth,
-      durationInFrames,
-      fps,
-      numberOfSharedAudioTags: 0,
-      initiallyMuted: true,
-      logLevel,
-      audioLatencyHint: "playback",
-      sampleRate: 48000,
-      inputProps: passedInputProps,
-      audioEnabled: false,
-      _experimentalKeepAudioContextAlive: false,
-      children: /* @__PURE__ */ jsx17(ThumbnailEmitterContext.Provider, {
-        value: emitter,
-        children: /* @__PURE__ */ jsx17(ThumbnailUI_default, {
-          ref: rootRef,
-          className: className2,
-          errorFallback,
-          inputProps: passedInputProps,
-          renderLoading,
-          style: style2,
-          overflowVisible,
-          overrideInternalClassName,
-          noSuspense: Boolean(noSuspense)
+  return /* @__PURE__ */ jsx16(Internals17.IsPlayerContextProvider, {
+    children: /* @__PURE__ */ jsx16(Internals17.SetTimelineContext.Provider, {
+      value: setTimelineContext,
+      children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
+        timelineContext: timelineState,
+        playbackRateContext,
+        component: Component,
+        compositionHeight,
+        compositionWidth,
+        durationInFrames,
+        fps,
+        numberOfSharedAudioTags: 0,
+        initiallyMuted: true,
+        logLevel,
+        audioLatencyHint: "playback",
+        sampleRate: 48000,
+        inputProps: passedInputProps,
+        audioEnabled: false,
+        _experimentalKeepAudioContextAlive: false,
+        children: /* @__PURE__ */ jsx16(ThumbnailEmitterContext.Provider, {
+          value: emitter,
+          children: /* @__PURE__ */ jsx16(ThumbnailUI_default, {
+            ref: rootRef,
+            className: className2,
+            errorFallback,
+            inputProps: passedInputProps,
+            renderLoading,
+            style: style2,
+            overflowVisible,
+            overrideInternalClassName,
+            noSuspense: Boolean(noSuspense)
+          })
         })
       })
     })