@remotion/player 4.0.505 → 4.0.507

package/dist/esm/index.mjs

@@ -354,7 +354,7 @@ var ThumbnailEmitterContext = React.createContext(undefined);
 
 // src/EmitterProvider.tsx
 import { useContext as useContext2, useEffect, useState } from "react";
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals4 } from "remotion";
 
 // src/event-emitter.ts
 class PlayerEmitter {
@@ -469,11 +469,57 @@ 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 Internals2 } from "remotion";
+import { Internals as Internals3 } from "remotion";
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext(Internals2.BufferingContextReact);
+  const bufferManager = useContext(Internals3.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -494,10 +540,10 @@ var useBufferStateEmitter = (emitter) => {
 };
 
 // src/EmitterProvider.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   const [emitter] = useState(() => new PlayerEmitter);
-  const bufferManager = useContext2(Internals3.BufferingContextReact);
+  const bufferManager = useContext2(Internals4.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -507,9 +553,11 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
     }
   }, [emitter, currentPlaybackRate]);
   useBufferStateEmitter(emitter);
-  return /* @__PURE__ */ jsx3(PlayerEventEmitterContext.Provider, {
-    value: emitter,
-    children
+  return /* @__PURE__ */ jsx4(TimelineImperativeCompatibilityProvider, {
+    children: /* @__PURE__ */ jsx4(PlayerEventEmitterContext.Provider, {
+      value: emitter,
+      children
+    })
   });
 };
 
@@ -558,189 +606,203 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 
 // src/use-playback.ts
 import { useLayoutEffect as useLayoutEffect2 } from "react";
-import { useContext as useContext4, useEffect as useEffect5, useRef as useRef4 } from "react";
-import { Internals as Internals6 } from "remotion";
+import { useContext as useContext4, useEffect as useEffect5, useRef as useRef5 } from "react";
+import { Internals as Internals8 } from "remotion";
 
 // src/browser-mediasession.ts
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { Internals as Internals6 } from "remotion";
 
-// src/use-player.ts
-import { useCallback, useContext as useContext3, useMemo, useRef, useState as useState3 } from "react";
-import { Internals as Internals4 } from "remotion";
-var usePlayer = () => {
-  const [playing, setPlaying, imperativePlaying] = Internals4.Timeline.usePlayingState();
-  const [hasPlayed, setHasPlayed] = useState3(false);
-  const frame = Internals4.Timeline.useTimelinePosition();
-  const playStart = useRef(frame);
-  const setFrame = Internals4.Timeline.useTimelineSetFrame();
-  const setTimelinePosition = Internals4.Timeline.useTimelineSetFrame();
-  const audioContext = useContext3(Internals4.SharedAudioContext);
-  const audioTagsContext = useContext3(Internals4.SharedAudioTagsContext);
-  const { audioAndVideoTags } = Internals4.useTimelineContext();
-  const frameRef = useRef(frame);
-  frameRef.current = frame;
-  const video = Internals4.useVideo();
-  const config = Internals4.useUnsafeVideoConfig();
+// 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";
+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 environment = useRemotionEnvironment();
+  const video = Internals5.useVideo();
+  const config = Internals5.useUnsafeVideoConfig();
   const emitter = useContext3(PlayerEventEmitterContext);
-  const lastFrame = (config?.durationInFrames ?? 1) - 1;
-  const isLastFrame = frame === lastFrame;
-  const isFirstFrame = frame === 0;
+  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.");
+  }
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext3(Internals4.BufferingContextReact);
+  const bufferingContext = useContext3(Internals5.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
-  const { buffering } = bufferingContext;
+  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 seek = useCallback((newFrame) => {
-    const frameToSeekTo = config ? Internals4.TimelinePosition.clampFrameToCompositionRange(newFrame, config.durationInFrames) : Math.max(0, newFrame);
+    const frameToSeekTo = config ? Internals5.TimelinePosition.clampFrameToCompositionRange(newFrame, config.durationInFrames) : Math.max(0, newFrame);
+    fallbackFrame.current = frameToSeekTo;
     if (video?.id) {
-      setTimelinePosition((c) => c[video.id] === frameToSeekTo ? c : { ...c, [video.id]: frameToSeekTo });
+      if (timelineImperativeContext.frameRef.current[video.id] !== frameToSeekTo) {
+        timelineImperativeContext.frameRef.current = {
+          ...timelineImperativeContext.frameRef.current,
+          [video.id]: frameToSeekTo
+        };
+      }
+      setTimelinePosition((currentFrames) => currentFrames[video.id] === frameToSeekTo ? currentFrames : { ...currentFrames, [video.id]: frameToSeekTo });
     }
-    frameRef.current = frameToSeekTo;
     emitter.dispatchSeek(frameToSeekTo);
-  }, [config, emitter, setTimelinePosition, video?.id]);
+  }, [
+    config,
+    emitter,
+    setTimelinePosition,
+    timelineImperativeContext,
+    video?.id
+  ]);
   const play = useCallback((e) => {
-    if (imperativePlaying.current) {
+    if (timelineImperativeContext.imperativePlaying.current) {
       return;
     }
-    setHasPlayed(true);
-    if (isLastFrame) {
+    const lastFrameForPlayback = (config?.durationInFrames ?? 1) - 1;
+    if (getCurrentFrame() === lastFrameForPlayback) {
       seek(0);
     }
     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;
+    timelineImperativeContext.audioAndVideoTags.current.forEach((tag) => tag.play("player play() was called and playing audio from a click"));
+    timelineImperativeContext.imperativePlaying.current = true;
     setPlaying(true);
-    playStart.current = frameRef.current;
+    playStart.current = getCurrentFrame();
     emitter.dispatchPlay();
   }, [
-    imperativePlaying,
-    isLastFrame,
     audioContext,
     audioTagsContext,
-    setPlaying,
+    config?.durationInFrames,
     emitter,
+    getCurrentFrame,
     seek,
-    audioAndVideoTags
+    setPlaying,
+    timelineImperativeContext
   ]);
   const pause = useCallback(() => {
-    if (imperativePlaying.current) {
-      imperativePlaying.current = false;
+    if (timelineImperativeContext.imperativePlaying.current) {
+      timelineImperativeContext.imperativePlaying.current = false;
       setPlaying(false);
       emitter.dispatchPause();
       audioContext?.suspend();
     }
-  }, [emitter, imperativePlaying, setPlaying, audioContext]);
+  }, [audioContext, emitter, setPlaying, timelineImperativeContext]);
   const pauseAndReturnToPlayStart = useCallback(() => {
-    if (imperativePlaying.current) {
-      imperativePlaying.current = false;
-      frameRef.current = playStart.current;
+    if (timelineImperativeContext.imperativePlaying.current) {
+      timelineImperativeContext.imperativePlaying.current = false;
+      fallbackFrame.current = playStart.current;
       if (config) {
-        setTimelinePosition((c) => ({
-          ...c,
+        timelineImperativeContext.frameRef.current = {
+          ...timelineImperativeContext.frameRef.current,
+          [config.id]: playStart.current
+        };
+        setTimelinePosition((currentFrames) => ({
+          ...currentFrames,
           [config.id]: playStart.current
         }));
         setPlaying(false);
         emitter.dispatchPause();
       }
     }
-  }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
+  }, [
+    config,
+    emitter,
+    setPlaying,
+    setTimelinePosition,
+    timelineImperativeContext
+  ]);
   const videoId = video?.id;
+  const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const frameBack = useCallback((frames) => {
     if (!videoId) {
       return null;
     }
-    if (imperativePlaying.current) {
+    if (timelineImperativeContext.imperativePlaying.current) {
       return;
     }
-    setFrame((c) => {
-      const prevFrame = c[videoId] ?? window.remotion_initialFrame ?? 0;
-      const newFrame = Math.max(0, prevFrame - frames);
-      if (prevFrame === newFrame) {
-        return c;
-      }
-      return {
-        ...c,
-        [videoId]: newFrame
-      };
-    });
-  }, [imperativePlaying, setFrame, videoId]);
+    const previousFrame = timelineImperativeContext.frameRef.current[videoId] ?? window.remotion_initialFrame ?? 0;
+    const newFrame = Math.max(0, previousFrame - frames);
+    if (previousFrame === newFrame) {
+      return;
+    }
+    timelineImperativeContext.frameRef.current = {
+      ...timelineImperativeContext.frameRef.current,
+      [videoId]: newFrame
+    };
+    setFrame((currentFrames) => currentFrames[videoId] === newFrame ? currentFrames : { ...currentFrames, [videoId]: newFrame });
+  }, [setFrame, timelineImperativeContext, videoId]);
   const frameForward = useCallback((frames) => {
     if (!videoId) {
       return null;
     }
-    if (imperativePlaying.current) {
+    if (timelineImperativeContext.imperativePlaying.current) {
       return;
     }
-    setFrame((c) => {
-      const prevFrame = c[videoId] ?? window.remotion_initialFrame ?? 0;
-      const newFrame = Math.min(lastFrame, prevFrame + frames);
-      if (prevFrame === newFrame) {
-        return c;
-      }
-      return {
-        ...c,
-        [videoId]: newFrame
-      };
-    });
-  }, [videoId, imperativePlaying, lastFrame, setFrame]);
+    const previousFrame = timelineImperativeContext.frameRef.current[videoId] ?? window.remotion_initialFrame ?? 0;
+    const newFrame = Math.min(lastFrame, previousFrame + frames);
+    if (previousFrame === newFrame) {
+      return;
+    }
+    timelineImperativeContext.frameRef.current = {
+      ...timelineImperativeContext.frameRef.current,
+      [videoId]: newFrame
+    };
+    setFrame((currentFrames) => currentFrames[videoId] === newFrame ? currentFrames : { ...currentFrames, [videoId]: newFrame });
+  }, [lastFrame, setFrame, timelineImperativeContext, videoId]);
   const toggle = useCallback((e) => {
-    if (imperativePlaying.current) {
+    if (timelineImperativeContext.imperativePlaying.current) {
       pause();
     } else {
       play(e);
     }
-  }, [imperativePlaying, pause, play]);
+  }, [pause, play, timelineImperativeContext]);
   const isPlaying = useCallback(() => {
-    return imperativePlaying.current;
-  }, [imperativePlaying]);
-  const getCurrentFrame = useCallback(() => {
-    return frameRef.current;
-  }, [frameRef]);
+    return timelineImperativeContext.imperativePlaying.current;
+  }, [timelineImperativeContext]);
   const isBuffering = useCallback(() => {
-    return buffering.current;
-  }, [buffering]);
-  const returnValue = useMemo(() => {
+    return bufferingContext.buffering.current;
+  }, [bufferingContext.buffering]);
+  return useMemo2(() => {
     return {
       frameBack,
       frameForward,
-      isLastFrame,
       emitter,
-      playing,
       play,
       pause,
       seek,
-      isFirstFrame,
       getCurrentFrame,
       isPlaying,
       isBuffering,
       pauseAndReturnToPlayStart,
-      hasPlayed,
       toggle
     };
   }, [
     emitter,
     frameBack,
     frameForward,
-    hasPlayed,
-    isFirstFrame,
-    isLastFrame,
     getCurrentFrame,
+    isBuffering,
+    isPlaying,
     pause,
     pauseAndReturnToPlayStart,
     play,
-    playing,
     seek,
-    toggle,
-    isPlaying,
-    isBuffering
+    toggle
   ]);
-  return returnValue;
 };
 
 // src/browser-mediasession.ts
@@ -749,8 +811,9 @@ var useBrowserMediaSession = ({
   videoConfig,
   playbackRate
 }) => {
-  const { playing, pause, play, emitter, getCurrentFrame, seek } = usePlayer();
-  const hasEverPlayed = useRef2(false);
+  const [playing] = Internals6.Timeline.usePlayingState();
+  const { pause, play, emitter, getCurrentFrame, seek } = usePlayerMethods();
+  const hasEverPlayed = useRef3(false);
   useEffect3(() => {
     if (playing) {
       hasEverPlayed.current = true;
@@ -889,7 +952,7 @@ var calculateNextFrame = ({
 };
 
 // src/is-backgrounded.ts
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 var getIsBackgrounded = () => {
   if (typeof document === "undefined") {
     return false;
@@ -897,7 +960,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef3(getIsBackgrounded());
+  const isBackgrounded = useRef4(getIsBackgrounded());
   useEffect4(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -911,7 +974,7 @@ var useIsBackgrounded = () => {
 };
 
 // src/set-global-time-anchor.ts
-import { Internals as Internals5 } from "remotion";
+import { Internals as Internals7 } from "remotion";
 var ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
 var setGlobalTimeAnchor = ({
   audioContext,
@@ -932,7 +995,7 @@ var setGlobalTimeAnchor = ({
   if (Math.abs(shift) < Number.EPSILON) {
     return false;
   }
-  Internals5.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
+  Internals7.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;
 };
@@ -957,15 +1020,17 @@ var usePlayback = ({
   getCurrentFrame,
   muted
 }) => {
-  const config = Internals6.useUnsafeVideoConfig();
-  const frame = Internals6.Timeline.useTimelinePosition();
-  const { playing, pause, emitter, isPlaying } = usePlayer();
-  const setFrame = Internals6.Timeline.useTimelineSetFrame();
-  const sharedAudioContext = useContext4(Internals6.SharedAudioContext);
-  const logLevel = Internals6.useLogLevel();
+  const config = Internals8.useUnsafeVideoConfig();
+  const frame = Internals8.Timeline.useTimelinePosition();
+  const [playing] = Internals8.Timeline.usePlayingState();
+  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 isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateTimestamp = useRef4(0);
-  const context = useContext4(Internals6.BufferingContextReact);
+  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.");
   }
@@ -1044,6 +1109,7 @@ var usePlayback = ({
       return;
     }
     let hasBeenStopped = false;
+    let audioContextFailed = false;
     let reqAnimFrameCall = null;
     let startedTime = performance.now();
     let framesAdvanced = 0;
@@ -1068,7 +1134,7 @@ var usePlayback = ({
         sharedAudioContext?.suspend?.();
         return;
       }
-      if (!muted && !context.buffering.current) {
+      if (!muted && !audioContextFailed && !context.buffering.current) {
         sharedAudioContext?.resume?.();
       }
       const time = performance.now() - startedTime;
@@ -1098,9 +1164,20 @@ var usePlayback = ({
       queueNextFrame();
     };
     const queueNextFrame = () => {
-      const getIsResumingAudioContext = sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
+      if (hasBeenStopped) {
+        return;
+      }
+      const getIsResumingAudioContext = audioContextFailed ? null : sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
       if (getIsResumingAudioContext !== null && !muted) {
-        getIsResumingAudioContext.then(() => {
+        getIsResumingAudioContext.then((result) => {
+          if (hasBeenStopped) {
+            return;
+          }
+          if (result === "failed") {
+            audioContextFailed = true;
+            sharedAudioContext?.suspend();
+            setPlayerMuted(true);
+          }
           startedTime = performance.now();
           framesAdvanced = 0;
           queueNextFrame();
@@ -1108,7 +1185,7 @@ var usePlayback = ({
         return;
       }
       if (context.buffering.current) {
-        if (!muted) {
+        if (!muted && !audioContextFailed) {
           sharedAudioContext?.suspend?.();
         }
         const stopListening = context.listenForResume(() => {
@@ -1157,6 +1234,7 @@ var usePlayback = ({
     context,
     isPlaying,
     sharedAudioContext,
+    setPlayerMuted,
     logLevel,
     muted
   ]);
@@ -1180,7 +1258,7 @@ var usePlayback = ({
 };
 
 // src/utils/use-element-size.ts
-import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo3, useState as useState3 } from "react";
 var elementSizeHooks = [];
 var updateAllElementsSizes = () => {
   for (const listener of elementSizeHooks) {
@@ -1197,7 +1275,7 @@ var getElement = (source) => {
   return source;
 };
 var useElementSize = (source, options) => {
-  const [size, setSize] = useState4(() => {
+  const [size, setSize] = useState3(() => {
     const element = getElement(source);
     if (!element) {
       return null;
@@ -1217,7 +1295,7 @@ var useElementSize = (source, options) => {
       }
     };
   });
-  const observer = useMemo2(() => {
+  const observer = useMemo3(() => {
     if (typeof ResizeObserver === "undefined") {
       return null;
     }
@@ -1309,7 +1387,7 @@ var useElementSize = (source, options) => {
       elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
     };
   }, [updateSize]);
-  return useMemo2(() => {
+  return useMemo3(() => {
     if (!size) {
       return null;
     }
@@ -1323,11 +1401,11 @@ import {
   useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo14,
-  useRef as useRef12,
-  useState as useState13
+  useMemo as useMemo15,
+  useRef as useRef13,
+  useState as useState12
 } from "react";
-import { Composition, Internals as Internals15 } from "remotion";
+import { Composition, Internals as Internals17 } from "remotion";
 
 // src/player-css-classname.ts
 var playerCssClassname = (override) => {
@@ -1335,22 +1413,22 @@ var playerCssClassname = (override) => {
 };
 
 // src/PlayerUI.tsx
-import React10, {
+import React11, {
   Suspense,
   forwardRef,
   useCallback as useCallback10,
   useContext as useContext5,
   useEffect as useEffect12,
   useImperativeHandle,
-  useMemo as useMemo12,
-  useRef as useRef10,
-  useState as useState11
+  useMemo as useMemo13,
+  useRef as useRef11,
+  useState as useState10
 } from "react";
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals13 } from "remotion";
 
 // src/error-boundary.tsx
-import React3 from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import React4 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var errorStyle = {
   display: "flex",
   justifyContent: "center",
@@ -1360,7 +1438,7 @@ var errorStyle = {
   width: "100%"
 };
 
-class ErrorBoundary extends React3.Component {
+class ErrorBoundary extends React4.Component {
   state = { hasError: null };
   static getDerivedStateFromError(error) {
     return { hasError: error };
@@ -1370,7 +1448,7 @@ class ErrorBoundary extends React3.Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ jsx4("div", {
+      return /* @__PURE__ */ jsx5("div", {
         style: errorStyle,
         children: this.props.errorFallback({
           error: this.state.hasError
@@ -1382,8 +1460,8 @@ class ErrorBoundary extends React3.Component {
 }
 
 // src/license-blacklist.tsx
-import React4, { useEffect as useEffect7 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import React5, { useEffect as useEffect7 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var getHashOfDomain = async () => {
   if (typeof window === "undefined") {
     return null;
@@ -1417,7 +1495,7 @@ var DOMAIN_BLACKLIST = [
 ];
 var ran = false;
 var RenderWarningIfBlacklist = () => {
-  const [unlicensed, setUnlicensed] = React4.useState(false);
+  const [unlicensed, setUnlicensed] = React5.useState(false);
   useEffect7(() => {
     if (ran) {
       return;
@@ -1459,10 +1537,10 @@ var RenderWarningIfBlacklist = () => {
   if (!unlicensed) {
     return null;
   }
-  return /* @__PURE__ */ jsx5("div", {
+  return /* @__PURE__ */ jsx6("div", {
     style,
     className: "warning-banner",
-    children: /* @__PURE__ */ jsx5("a", {
+    children: /* @__PURE__ */ jsx6("a", {
       style: { color: "white" },
       href: "https://github.com/remotion-dev/remotion/pull/4589",
       children: "Remotion Unlicensed – Contact hi@remotion.dev"
@@ -1471,30 +1549,30 @@ var RenderWarningIfBlacklist = () => {
 };
 
 // src/PlayerControls.tsx
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef8, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo10, useRef as useRef9, useState as useState9 } from "react";
 
 // src/DefaultPlayPauseButton.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var DefaultPlayPauseButton = ({ playing, buffering }) => {
   if (playing && buffering) {
-    return /* @__PURE__ */ jsx6(BufferingIndicator, {
+    return /* @__PURE__ */ jsx7(BufferingIndicator, {
       type: "player"
     });
   }
   if (playing) {
-    return /* @__PURE__ */ jsx6(PauseIcon, {});
+    return /* @__PURE__ */ jsx7(PauseIcon, {});
   }
-  return /* @__PURE__ */ jsx6(PlayIcon, {});
+  return /* @__PURE__ */ jsx7(PlayIcon, {});
 };
 
 // src/MediaVolumeSlider.tsx
-import { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
-import { Internals as Internals7 } from "remotion";
+import { useCallback as useCallback4, useMemo as useMemo5, useRef as useRef6, useState as useState5 } from "react";
+import { Internals as Internals9 } from "remotion";
 
 // src/render-volume-slider.tsx
-import React5, { useCallback as useCallback3, useMemo as useMemo3, useState as useState5 } from "react";
+import React6, { useCallback as useCallback3, useMemo as useMemo4, useState as useState4 } from "react";
 import { random } from "remotion";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var KNOB_SIZE = 12;
 var BAR_HEIGHT = 5;
 var DefaultVolumeSlider = ({
@@ -1504,7 +1582,7 @@ var DefaultVolumeSlider = ({
   inputRef,
   setVolume
 }) => {
-  const sliderContainer = useMemo3(() => {
+  const sliderContainer = useMemo4(() => {
     const paddingLeft = 5;
     const common = {
       paddingLeft,
@@ -1524,12 +1602,12 @@ var DefaultVolumeSlider = ({
       ...common
     };
   }, [isVertical]);
-  const randomId = typeof React5.useId === "undefined" ? "volume-slider" : React5.useId();
-  const [randomClass] = useState5(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
+  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 = useMemo3(() => {
+  const inputStyle = useMemo4(() => {
     const commonStyle = {
       WebkitAppearance: "none",
       backgroundColor: "rgba(255, 255, 255, 0.5)",
@@ -1572,12 +1650,12 @@ var DefaultVolumeSlider = ({
   return /* @__PURE__ */ jsxs3("div", {
     style: sliderContainer,
     children: [
-      /* @__PURE__ */ jsx7("style", {
+      /* @__PURE__ */ jsx8("style", {
         dangerouslySetInnerHTML: {
           __html: sliderStyle
         }
       }),
-      /* @__PURE__ */ jsx7("input", {
+      /* @__PURE__ */ jsx8("input", {
         ref: inputRef,
         "aria-label": "Change volume",
         className: randomClass,
@@ -1594,20 +1672,20 @@ var DefaultVolumeSlider = ({
   });
 };
 var renderDefaultVolumeSlider = (props) => {
-  return /* @__PURE__ */ jsx7(DefaultVolumeSlider, {
+  return /* @__PURE__ */ jsx8(DefaultVolumeSlider, {
     ...props
   });
 };
 
 // src/MediaVolumeSlider.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var VOLUME_SLIDER_WIDTH = 100;
 var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
-  const [playerMuted, setPlayerMuted] = Internals7.usePlayerMutedState();
-  const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
-  const [focused, setFocused] = useState6(false);
-  const parentDivRef = useRef5(null);
-  const inputRef = useRef5(null);
+  const [playerMuted, setPlayerMuted] = Internals9.usePlayerMutedState();
+  const [mediaVolume, setMediaVolume] = Internals9.useMediaVolumeState();
+  const [focused, setFocused] = useState5(false);
+  const parentDivRef = useRef6(null);
+  const inputRef = useRef6(null);
   const hover = useHoverState(parentDivRef, false);
   const onBlur = useCallback4(() => {
     setTimeout(() => {
@@ -1625,7 +1703,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     }
     setPlayerMuted((mute) => !mute);
   }, [isVolume0, setPlayerMuted, setMediaVolume]);
-  const parentDivStyle = useMemo4(() => {
+  const parentDivStyle = useMemo5(() => {
     return {
       display: "inline-flex",
       background: "none",
@@ -1636,7 +1714,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       ...displayVerticalVolumeSlider && { position: "relative" }
     };
   }, [displayVerticalVolumeSlider]);
-  const volumeContainer = useMemo4(() => {
+  const volumeContainer = useMemo5(() => {
     return {
       display: "inline",
       width: ICON_SIZE,
@@ -1650,7 +1728,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
   }, []);
   const renderDefaultMuteButton = useCallback4(({ muted, volume }) => {
     const isMutedOrZero = muted || volume === 0;
-    return /* @__PURE__ */ jsx8("button", {
+    return /* @__PURE__ */ jsx9("button", {
       "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
       title: isMutedOrZero ? "Unmute sound" : "Mute sound",
       onClick,
@@ -1658,14 +1736,14 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       onFocus: () => setFocused(true),
       style: volumeContainer,
       type: "button",
-      children: isMutedOrZero ? /* @__PURE__ */ jsx8(VolumeOffIcon, {}) : /* @__PURE__ */ jsx8(VolumeOnIcon, {})
+      children: isMutedOrZero ? /* @__PURE__ */ jsx9(VolumeOffIcon, {}) : /* @__PURE__ */ jsx9(VolumeOnIcon, {})
     });
   }, [onBlur, onClick, volumeContainer]);
-  const muteButton = useMemo4(() => {
+  const muteButton = useMemo5(() => {
     return renderMuteButton ? renderMuteButton({ muted: playerMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: playerMuted, volume: mediaVolume });
   }, [playerMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
-  const volumeSlider = useMemo4(() => {
-    return (focused || hover) && !playerMuted && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
+  const volumeSlider = useMemo5(() => {
+    return (focused || hover) && !playerMuted && !Internals9.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
       onBlur: () => setFocused(false),
@@ -1692,14 +1770,14 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 };
 
 // src/PlaybackrateControl.tsx
-import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo5, useState as useState8 } from "react";
-import { Internals as Internals8 } from "remotion";
+import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo6, useState as useState7 } from "react";
+import { Internals as Internals10 } from "remotion";
 
 // src/utils/use-component-visible.ts
-import { useEffect as useEffect8, useRef as useRef6, useState as useState7 } from "react";
+import { useEffect as useEffect8, useRef as useRef7, useState as useState6 } from "react";
 function useComponentVisible(initialIsVisible) {
-  const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
-  const ref = useRef6(null);
+  const [isComponentVisible, setIsComponentVisible] = useState6(initialIsVisible);
+  const ref = useRef7(null);
   useEffect8(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -1715,7 +1793,7 @@ function useComponentVisible(initialIsVisible) {
 }
 
 // src/PlaybackrateControl.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var BOTTOM = 35;
 var THRESHOLD = 70;
 var rateDiv = {
@@ -1736,10 +1814,10 @@ var checkmarkStyle = {
   height: 14,
   color: "black"
 };
-var Checkmark = () => /* @__PURE__ */ jsx9("svg", {
+var Checkmark = () => /* @__PURE__ */ jsx10("svg", {
   viewBox: "0 0 512 512",
   style: checkmarkStyle,
-  children: /* @__PURE__ */ jsx9("path", {
+  children: /* @__PURE__ */ jsx10("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"
   })
@@ -1754,7 +1832,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     e.preventDefault();
     onSelect(rate);
   }, [onSelect, rate]);
-  const [hovered, setHovered] = useState8(false);
+  const [hovered, setHovered] = useState7(false);
   const onMouseEnter = useCallback5(() => {
     setHovered(true);
   }, []);
@@ -1762,7 +1840,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
-  const actualStyle = useMemo5(() => {
+  const actualStyle = useMemo6(() => {
     return {
       ...rateDiv,
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
@@ -1775,9 +1853,9 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     style: actualStyle,
     onClick,
     children: [
-      /* @__PURE__ */ jsx9("div", {
+      /* @__PURE__ */ jsx10("div", {
         style: checkmarkContainer,
-        children: rate === selectedRate ? /* @__PURE__ */ jsx9(Checkmark, {}) : null
+        children: rate === selectedRate ? /* @__PURE__ */ jsx10(Checkmark, {}) : null
       }),
       formatPlaybackRate(rate),
       "x"
@@ -1785,8 +1863,8 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
   }, rate);
 };
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-  const { setPlaybackRate, playbackRate } = Internals8.usePlaybackRate();
-  const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
+  const { setPlaybackRate, playbackRate } = Internals10.usePlaybackRate();
+  const [keyboardSelectedRate, setKeyboardSelectedRate] = useState7(playbackRate);
   useEffect9(() => {
     const listener = (e) => {
       e.preventDefault();
@@ -1829,7 +1907,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo5(() => {
+  const playbackPopup = useMemo6(() => {
     return {
       position: "absolute",
       right: 0,
@@ -1843,10 +1921,10 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
       textAlign: "left"
     };
   }, [canvasSize.height]);
-  return /* @__PURE__ */ jsx9("div", {
+  return /* @__PURE__ */ jsx10("div", {
     style: playbackPopup,
     children: playbackRates.map((rate) => {
-      return /* @__PURE__ */ jsx9(PlaybackrateOption, {
+      return /* @__PURE__ */ jsx10(PlaybackrateOption, {
         selectedRate: playbackRate,
         onSelect,
         rate,
@@ -1887,13 +1965,13 @@ var button = {
 };
 var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
-  const { playbackRate } = Internals8.usePlaybackRate();
+  const { playbackRate } = Internals10.usePlaybackRate();
   const onClick = useCallback5((e) => {
     e.stopPropagation();
     e.preventDefault();
     setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
   }, [setIsComponentVisible]);
-  return /* @__PURE__ */ jsx9("div", {
+  return /* @__PURE__ */ jsx10("div", {
     ref,
     children: /* @__PURE__ */ jsxs5("button", {
       type: "button",
@@ -1908,7 +1986,7 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
             "x"
           ]
         }),
-        isComponentVisible && /* @__PURE__ */ jsx9(PlaybackPopup, {
+        isComponentVisible && /* @__PURE__ */ jsx10(PlaybackPopup, {
           canvasSize,
           playbackRates,
           setIsComponentVisible
@@ -1919,9 +1997,9 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
-import { Internals as Internals9, interpolate } from "remotion";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+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";
 var getFrameFromX = (clientX, durationInFrames, width) => {
   const pos = clientX;
   const frame = Math.round(interpolate(pos, [0, width], [0, durationInFrames - 1], {
@@ -1957,15 +2035,15 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef7(null);
+  const containerRef = useRef8(null);
   const barHovered = useHoverState(containerRef, false);
   const size = useElementSize(containerRef, {
     triggerOnWindowResize: true,
     shouldApplyCssTransforms: true
   });
-  const { seek, play, pause, playing } = usePlayer();
-  const frame = Internals9.Timeline.useTimelinePosition();
-  const [dragging, setDragging] = useState9({
+  const { seek, play, pause, isPlaying } = usePlayerMethods();
+  const frame = Internals11.Timeline.useTimelinePosition();
+  const [dragging, setDragging] = useState8({
     dragging: false
   });
   const width = size?.width ?? 0;
@@ -1975,14 +2053,15 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     }
     const posLeft = containerRef.current?.getBoundingClientRect().left;
     const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, width);
+    const wasPlaying = isPlaying();
     pause();
     seek(_frame);
     setDragging({
       dragging: true,
-      wasPlaying: playing
+      wasPlaying
     });
     onSeekStart();
-  }, [durationInFrames, width, pause, seek, playing, onSeekStart]);
+  }, [durationInFrames, width, isPlaying, pause, seek, onSeekStart]);
   const onPointerMove = useCallback6((e) => {
     if (!size) {
       throw new Error("Player has no size");
@@ -2020,7 +2099,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo6(() => {
+  const knobStyle = useMemo7(() => {
     return {
       height: KNOB_SIZE2,
       width: KNOB_SIZE2,
@@ -2033,7 +2112,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       opacity: Number(barHovered || dragging.dragging)
     };
   }, [barHovered, dragging.dragging, durationInFrames, frame, width]);
-  const fillStyle = useMemo6(() => {
+  const fillStyle = useMemo7(() => {
     return {
       height: BAR_HEIGHT2,
       backgroundColor: "rgba(255, 255, 255, 1)",
@@ -2042,7 +2121,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       borderRadius: BAR_HEIGHT2 / 2
     };
   }, [durationInFrames, frame, inFrame, width]);
-  const active = useMemo6(() => {
+  const active = useMemo7(() => {
     return {
       height: BAR_HEIGHT2,
       backgroundColor: "rgba(255, 255, 255, 0.25)",
@@ -2060,15 +2139,15 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       /* @__PURE__ */ jsxs6("div", {
         style: barBackground,
         children: [
-          /* @__PURE__ */ jsx10("div", {
+          /* @__PURE__ */ jsx11("div", {
             style: active
           }),
-          /* @__PURE__ */ jsx10("div", {
+          /* @__PURE__ */ jsx11("div", {
             style: fillStyle
           })
         ]
       }),
-      /* @__PURE__ */ jsx10("div", {
+      /* @__PURE__ */ jsx11("div", {
         style: knobStyle
       })
     ]
@@ -2076,8 +2155,8 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
 };
 
 // src/PlayerTimeLabel.tsx
-import { useMemo as useMemo7 } from "react";
-import { Internals as Internals10 } from "remotion";
+import { useMemo as useMemo8 } from "react";
+import { Internals as Internals12 } from "remotion";
 
 // src/format-time.ts
 var formatTime = (timeInSeconds) => {
@@ -2089,8 +2168,8 @@ 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 timeLabel = useMemo7(() => {
+  const frame = Internals12.Timeline.useTimelinePosition();
+  const timeLabel = useMemo8(() => {
     return {
       color: "white",
       fontFamily: "sans-serif",
@@ -2113,14 +2192,14 @@ var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
 };
 
 // src/use-video-controls-resize.ts
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 var X_SPACER = 10;
 var X_PADDING = 12;
 var useVideoControlsResize = ({
   allowFullscreen: allowFullScreen,
   playerWidth
 }) => {
-  const resizeInfo = useMemo8(() => {
+  const resizeInfo = useMemo9(() => {
     const playPauseIconSize = ICON_SIZE;
     const volumeIconSize = ICON_SIZE;
     const _fullscreenIconSize = allowFullScreen ? fullscreenIconSize : 0;
@@ -2140,7 +2219,7 @@ var useVideoControlsResize = ({
 };
 
 // src/PlayerControls.tsx
-import { jsx as jsx11, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
 var gradientSteps = [
   0,
   0.013,
@@ -2249,14 +2328,14 @@ var Controls = ({
   toggle,
   renderCustomControls
 }) => {
-  const playButtonRef = useRef8(null);
-  const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
+  const playButtonRef = useRef9(null);
+  const [supportsFullscreen, setSupportsFullscreen] = useState9(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
     allowFullscreen,
     playerWidth: canvasSize?.width ?? 0
   });
-  const [shouldShowInitially, setInitiallyShowControls] = useState10(() => {
+  const [shouldShowInitially, setInitiallyShowControls] = useState9(() => {
     if (typeof initiallyShowControls === "boolean") {
       return initiallyShowControls;
     }
@@ -2277,7 +2356,7 @@ var Controls = ({
     }
     throw new TypeError("initiallyShowControls must be a number or a boolean");
   });
-  const containerCss = useMemo9(() => {
+  const containerCss = useMemo10(() => {
     const shouldShow = hovered || !playing || shouldShowInitially || alwaysShowControls;
     return {
       ...containerStyle2,
@@ -2306,7 +2385,7 @@ var Controls = ({
       clearInterval(timeout);
     };
   }, [shouldShowInitially]);
-  const playbackRates = useMemo9(() => {
+  const playbackRates = useMemo10(() => {
     if (showPlaybackRateControl === true) {
       return [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3];
     }
@@ -2324,8 +2403,8 @@ var Controls = ({
     return null;
   }, [showPlaybackRateControl]);
   const customControlsElement = renderCustomControls ? renderCustomControls() : null;
-  const ref = useRef8(null);
-  const flexRef = useRef8(null);
+  const ref = useRef9(null);
+  const flexRef = useRef9(null);
   const onPointerDownIfContainer = useCallback7((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
@@ -2349,82 +2428,82 @@ var Controls = ({
           /* @__PURE__ */ jsxs8("div", {
             style: leftPartStyle,
             children: [
-              /* @__PURE__ */ jsx11("button", {
+              /* @__PURE__ */ jsx12("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__ */ jsx11(DefaultPlayPauseButton, {
+                children: renderPlayPauseButton === null ? /* @__PURE__ */ jsx12(DefaultPlayPauseButton, {
                   buffering,
                   playing
                 }) : renderPlayPauseButton({
                   playing,
                   isBuffering: buffering
-                }) ?? /* @__PURE__ */ jsx11(DefaultPlayPauseButton, {
+                }) ?? /* @__PURE__ */ jsx12(DefaultPlayPauseButton, {
                   buffering,
                   playing
                 })
               }),
               showVolumeControls ? /* @__PURE__ */ jsxs8(Fragment2, {
                 children: [
-                  /* @__PURE__ */ jsx11("div", {
+                  /* @__PURE__ */ jsx12("div", {
                     style: xSpacer
                   }),
-                  /* @__PURE__ */ jsx11(MediaVolumeSlider, {
+                  /* @__PURE__ */ jsx12(MediaVolumeSlider, {
                     renderMuteButton,
                     renderVolumeSlider,
                     displayVerticalVolumeSlider
                   })
                 ]
               }) : null,
-              /* @__PURE__ */ jsx11("div", {
+              /* @__PURE__ */ jsx12("div", {
                 style: xSpacer
               }),
-              /* @__PURE__ */ jsx11(PlayerTimeLabel, {
+              /* @__PURE__ */ jsx12(PlayerTimeLabel, {
                 durationInFrames,
                 fps,
                 maxTimeLabelWidth
               }),
-              /* @__PURE__ */ jsx11("div", {
+              /* @__PURE__ */ jsx12("div", {
                 style: xSpacer
               })
             ]
           }),
-          /* @__PURE__ */ jsx11("div", {
+          /* @__PURE__ */ jsx12("div", {
             style: flex1
           }),
           customControlsElement,
-          customControlsElement && playbackRates && canvasSize ? /* @__PURE__ */ jsx11("div", {
+          customControlsElement && playbackRates && canvasSize ? /* @__PURE__ */ jsx12("div", {
             style: xSpacer
           }) : null,
-          playbackRates && canvasSize && /* @__PURE__ */ jsx11(PlaybackrateControl, {
+          playbackRates && canvasSize && /* @__PURE__ */ jsx12(PlaybackrateControl, {
             canvasSize,
             playbackRates
           }),
-          playbackRates && supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx11("div", {
+          playbackRates && supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx12("div", {
             style: xSpacer
           }) : null,
-          /* @__PURE__ */ jsx11("div", {
+          /* @__PURE__ */ jsx12("div", {
             style: fullscreen,
-            children: supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx11("button", {
+            children: supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx12("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__ */ jsx11(FullscreenIcon, {
+              children: renderFullscreenButton === null ? /* @__PURE__ */ jsx12(FullscreenIcon, {
                 isFullscreen
               }) : renderFullscreenButton({ isFullscreen })
             }) : null
           })
         ]
       }),
-      /* @__PURE__ */ jsx11("div", {
+      /* @__PURE__ */ jsx12("div", {
         style: ySpacer
       }),
-      /* @__PURE__ */ jsx11(PlayerSeekBar, {
+      /* @__PURE__ */ jsx12(PlayerSeekBar, {
         onSeekEnd,
         onSeekStart,
         durationInFrames,
@@ -2439,7 +2518,7 @@ var Controls = ({
 var IS_NODE = typeof document === "undefined";
 
 // src/utils/use-click-prevention-on-double-click.ts
-import { useCallback as useCallback9, useMemo as useMemo11 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo12 } from "react";
 
 // src/utils/cancellable-promise.ts
 var cancellablePromise = (promise) => {
@@ -2467,9 +2546,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 useMemo10, useRef as useRef9 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo11, useRef as useRef10 } from "react";
 var useCancellablePromises = () => {
-  const pendingPromises = useRef9([]);
+  const pendingPromises = useRef10([]);
   const appendPendingPromise = useCallback8((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
@@ -2477,7 +2556,7 @@ var useCancellablePromises = () => {
     pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
   }, []);
   const clearPendingPromises = useCallback8(() => pendingPromises.current.map((p) => p.cancel()), []);
-  const api = useMemo10(() => ({
+  const api = useMemo11(() => ({
     appendPendingPromise,
     removePendingPromise,
     clearPendingPromises
@@ -2519,7 +2598,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
     api.clearPendingPromises();
     onDoubleClick();
   }, [api, onDoubleClick]);
-  const returnValue = useMemo11(() => {
+  const returnValue = useMemo12(() => {
     if (!doubleClickToFullscreen) {
       return { handlePointerDown: onClick, handleDoubleClick: () => {
         return;
@@ -2531,8 +2610,8 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
 };
 
 // src/PlayerUI.tsx
-import { jsx as jsx12, jsxs as jsxs9, Fragment as Fragment3 } from "react/jsx-runtime";
-var reactVersion = React10.version.split(".")[0];
+import { jsx as jsx13, 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`);
 }
@@ -2577,26 +2656,35 @@ var PlayerUI = ({
   overrideInternalClassName,
   noSuspense
 }, ref) => {
-  const config = Internals11.useUnsafeVideoConfig();
-  const video = Internals11.useVideo();
-  const container = useRef10(null);
+  const config = Internals13.useUnsafeVideoConfig();
+  const video = Internals13.useVideo();
+  const container = useRef11(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
   });
-  const [hasPausedToResume, setHasPausedToResume] = useState11(false);
-  const [shouldAutoplay, setShouldAutoPlay] = useState11(autoPlay);
-  const [isFullscreen, setIsFullscreen] = useState11(() => false);
-  const [seeking, setSeeking] = useState11(false);
-  const supportsFullScreen = useMemo12(() => {
+  const [hasPausedToResume, setHasPausedToResume] = useState10(false);
+  const [shouldAutoplay, setShouldAutoPlay] = useState10(autoPlay);
+  const [isFullscreen, setIsFullscreen] = useState10(() => false);
+  const [seeking, setSeeking] = useState10(false);
+  const [hasPlayed, setHasPlayed] = useState10(false);
+  const supportsFullScreen = useMemo13(() => {
     if (typeof document === "undefined") {
       return false;
     }
     return Boolean(document.fullscreenEnabled || document.webkitFullscreenEnabled);
   }, []);
-  const player = usePlayer();
-  const playerToggle = player.toggle;
-  const { playerMuted, mediaVolume } = useContext5(Internals11.MediaVolumeContext);
+  const player = usePlayerMethods();
+  const [playing] = Internals13.Timeline.usePlayingState();
+  const frame = Internals13.Timeline.useTimelinePosition();
+  const play = useCallback10((e) => {
+    if (player.isPlaying()) {
+      return;
+    }
+    setHasPlayed(true);
+    player.play(e);
+  }, [player]);
+  const { playerMuted, mediaVolume } = useContext5(Internals13.MediaVolumeContext);
   useEffect12(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
@@ -2617,11 +2705,11 @@ var PlayerUI = ({
     muted: isMuted
   });
   useEffect12(() => {
-    if (hasPausedToResume && !player.playing) {
+    if (hasPausedToResume && !playing) {
       setHasPausedToResume(false);
-      player.play();
+      play();
     }
-  }, [hasPausedToResume, player]);
+  }, [hasPausedToResume, play, playing]);
   useEffect12(() => {
     const { current } = container;
     if (!current) {
@@ -2639,8 +2727,12 @@ var PlayerUI = ({
     };
   }, []);
   const toggle = useCallback10((e) => {
-    playerToggle(e);
-  }, [playerToggle]);
+    if (player.isPlaying()) {
+      player.pause();
+    } else {
+      play(e);
+    }
+  }, [play, player]);
   const requestFullscreen = useCallback10(() => {
     if (!allowFullscreen) {
       throw new Error("allowFullscreen is false");
@@ -2689,7 +2781,7 @@ var PlayerUI = ({
     };
   }, [player.emitter]);
   const durationInFrames = config?.durationInFrames ?? 1;
-  const layout = useMemo12(() => {
+  const layout = useMemo13(() => {
     if (!config || !canvasSize) {
       return null;
     }
@@ -2701,7 +2793,7 @@ var PlayerUI = ({
     });
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef10(false);
+  const initialScaleIgnored = useRef11(false);
   useEffect12(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
@@ -2709,8 +2801,8 @@ var PlayerUI = ({
     }
     player.emitter.dispatchScaleChange(scale);
   }, [player.emitter, scale]);
-  const { setMediaVolume, setPlayerMuted } = useContext5(Internals11.SetMediaVolumeContext);
-  const [showBufferIndicator, setShowBufferState] = useState11(false);
+  const { setMediaVolume, setPlayerMuted } = useContext5(Internals13.SetMediaVolumeContext);
+  const [showBufferIndicator, setShowBufferState] = useState10(false);
   useEffect12(() => {
     let timeout = null;
     let stopped = false;
@@ -2751,7 +2843,7 @@ var PlayerUI = ({
   }, [bufferStateDelayInMilliseconds, player.emitter]);
   useImperativeHandle(ref, () => {
     const methods = {
-      play: player.play,
+      play,
       pause: () => {
         setHasPausedToResume(false);
         player.pause();
@@ -2821,6 +2913,7 @@ var PlayerUI = ({
     isMuted,
     mediaVolume,
     player,
+    play,
     requestFullscreen,
     setPlayerMuted,
     setMediaVolume,
@@ -2828,7 +2921,7 @@ var PlayerUI = ({
     scale
   ]);
   const VideoComponent = video ? video.component : null;
-  const outerStyle = useMemo12(() => {
+  const outerStyle = useMemo13(() => {
     return calculateOuterStyle({
       canvasSize,
       config,
@@ -2837,10 +2930,10 @@ var PlayerUI = ({
       layout
     });
   }, [canvasSize, config, layout, overflowVisible, style2]);
-  const outer = useMemo12(() => {
+  const outer = useMemo13(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);
-  const containerStyle3 = useMemo12(() => {
+  const containerStyle3 = useMemo13(() => {
     return calculateContainerStyle({
       config,
       layout,
@@ -2885,18 +2978,18 @@ var PlayerUI = ({
   const { handlePointerDown, handleDoubleClick } = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
   useEffect12(() => {
     if (shouldAutoplay) {
-      player.play();
+      play();
       setShouldAutoPlay(false);
     }
-  }, [shouldAutoplay, player]);
-  const loadingMarkup = useMemo12(() => {
+  }, [play, shouldAutoplay]);
+  const loadingMarkup = useMemo13(() => {
     return renderLoading ? renderLoading({
       height: outerStyle.height,
       width: outerStyle.width,
       isBuffering: showBufferIndicator
     }) : null;
   }, [outerStyle.height, outerStyle.width, renderLoading, showBufferIndicator]);
-  const currentScale = useMemo12(() => {
+  const currentScale = useMemo13(() => {
     return {
       type: "scale",
       scale
@@ -2915,8 +3008,8 @@ var PlayerUI = ({
   }
   const shouldShowPoster = poster && [
     showPosterWhenPaused && !player.isPlaying() && !seeking,
-    showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
-    showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
+    showPosterWhenEnded && frame === durationInFrames - 1 && !player.isPlaying(),
+    showPosterWhenUnplayed && !hasPlayed && !player.isPlaying(),
     showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
     showPosterWhenBufferingAndPaused && showBufferIndicator && !player.isPlaying()
   ].some(Boolean);
@@ -2932,18 +3025,18 @@ var PlayerUI = ({
             style: containerStyle3,
             className: playerCssClassname(overrideInternalClassName),
             children: [
-              VideoComponent ? /* @__PURE__ */ jsx12(ErrorBoundary, {
+              VideoComponent ? /* @__PURE__ */ jsx13(ErrorBoundary, {
                 onError,
                 errorFallback,
-                children: /* @__PURE__ */ jsx12(Internals11.CurrentScaleContext.Provider, {
+                children: /* @__PURE__ */ jsx13(Internals13.CurrentScaleContext.Provider, {
                   value: currentScale,
-                  children: /* @__PURE__ */ jsx12(VideoComponent, {
+                  children: /* @__PURE__ */ jsx13(VideoComponent, {
                     ...video?.props ?? {},
                     ...inputProps ?? {}
                   })
                 })
               }) : null,
-              shouldShowPoster && posterFillMode === "composition-size" ? /* @__PURE__ */ jsx12("div", {
+              shouldShowPoster && posterFillMode === "composition-size" ? /* @__PURE__ */ jsx13("div", {
                 style: {
                   ...outerWithoutScale,
                   width: config.width,
@@ -2955,19 +3048,19 @@ var PlayerUI = ({
               }) : null
             ]
           }),
-          /* @__PURE__ */ jsx12(RenderWarningIfBlacklist, {})
+          /* @__PURE__ */ jsx13(RenderWarningIfBlacklist, {})
         ]
       }),
-      shouldShowPoster && posterFillMode === "player-size" ? /* @__PURE__ */ jsx12("div", {
+      shouldShowPoster && posterFillMode === "player-size" ? /* @__PURE__ */ jsx13("div", {
         style: outer,
         onPointerDown: clickToPlay ? handlePointerDown : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
         children: poster
       }) : null,
-      controls ? /* @__PURE__ */ jsx12(Controls, {
+      controls ? /* @__PURE__ */ jsx13(Controls, {
         fps: config.fps,
-        playing: player.playing,
-        toggle: player.toggle,
+        playing,
+        toggle,
         durationInFrames: config.durationInFrames,
         containerRef: container,
         onFullscreenButtonClick,
@@ -2997,18 +3090,18 @@ var PlayerUI = ({
     ]
   });
   if (noSuspense || IS_NODE && !doesReactVersionSupportSuspense) {
-    return /* @__PURE__ */ jsx12("div", {
+    return /* @__PURE__ */ jsx13("div", {
       ref: container,
       style: outerStyle,
       className: className2,
       children: content
     });
   }
-  return /* @__PURE__ */ jsx12("div", {
+  return /* @__PURE__ */ jsx13("div", {
     ref: container,
     style: outerStyle,
     className: className2,
-    children: /* @__PURE__ */ jsx12(Suspense, {
+    children: /* @__PURE__ */ jsx13(Suspense, {
       fallback: loadingMarkup,
       children: content
     })
@@ -3017,11 +3110,11 @@ var PlayerUI = ({
 var PlayerUI_default = forwardRef(PlayerUI);
 
 // src/SharedPlayerContext.tsx
-import { useCallback as useCallback11, useMemo as useMemo13, useRef as useRef11, useState as useState12 } from "react";
-import { Internals as Internals13 } from "remotion";
+import { useCallback as useCallback11, useMemo as useMemo14, useRef as useRef12, useState as useState11 } from "react";
+import { Internals as Internals15 } from "remotion";
 
 // src/volume-persistence.ts
-import { Internals as Internals12 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 var DEFAULT_VOLUME_PERSISTENCE_KEY = "remotion.volumePreference";
 var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   if (typeof window === "undefined") {
@@ -3030,7 +3123,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);
+    Internals14.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
   }
 };
 var getPreferredVolume = (volumePersistenceKey) => {
@@ -3046,7 +3139,7 @@ var getPreferredVolume = (volumePersistenceKey) => {
 };
 
 // src/SharedPlayerContext.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var PLAYER_COMP_ID = "player-comp";
 var SharedPlayerContexts = ({
   children,
@@ -3068,7 +3161,7 @@ var SharedPlayerContexts = ({
   audioEnabled
 }) => {
   const persistVolumeToStorage = initialVolume === undefined;
-  const compositionManagerContext = useMemo13(() => {
+  const compositionManagerContext = useMemo14(() => {
     const context = {
       compositions: [
         {
@@ -3111,15 +3204,15 @@ var SharedPlayerContexts = ({
     fps,
     inputProps
   ]);
-  const [playerMuted, setPlayerMuted] = useState12(() => initiallyMuted);
-  const [mediaVolume, setMediaVolume] = useState12(() => persistVolumeToStorage ? getPreferredVolume(volumePersistenceKey ?? null) : initialVolume);
-  const mediaVolumeContextValue = useMemo13(() => {
+  const [playerMuted, setPlayerMuted] = useState11(() => initiallyMuted);
+  const [mediaVolume, setMediaVolume] = useState11(() => persistVolumeToStorage ? getPreferredVolume(volumePersistenceKey ?? null) : initialVolume);
+  const mediaVolumeContextValue = useMemo14(() => {
     return {
       playerMuted,
       mediaVolume
     };
   }, [playerMuted, mediaVolume]);
-  const audioContextWasCreated = useRef11(false);
+  const audioContextWasCreated = useRef12(false);
   const shouldCreateAudioContext = audioContextWasCreated.current || audioEnabled && !playerMuted && mediaVolume > 0;
   audioContextWasCreated.current = shouldCreateAudioContext;
   const setMediaVolumeAndPersist = useCallback11((vol) => {
@@ -3128,19 +3221,19 @@ var SharedPlayerContexts = ({
       persistVolume(vol, logLevel, volumePersistenceKey ?? null);
     }
   }, [persistVolumeToStorage, logLevel, volumePersistenceKey]);
-  const setMediaVolumeContextValue = useMemo13(() => {
+  const setMediaVolumeContextValue = useMemo14(() => {
     return {
       setPlayerMuted,
       setMediaVolume: setMediaVolumeAndPersist
     };
   }, [setMediaVolumeAndPersist]);
-  const logLevelContext = useMemo13(() => {
+  const logLevelContext = useMemo14(() => {
     return {
       logLevel,
       mountTime: Date.now()
     };
   }, [logLevel]);
-  const env = useMemo13(() => {
+  const env = useMemo14(() => {
     return {
       isPlayer: true,
       isRendering: false,
@@ -3149,33 +3242,45 @@ var SharedPlayerContexts = ({
       isReadOnlyStudio: false
     };
   }, []);
-  return /* @__PURE__ */ jsx13(Internals13.RemotionEnvironmentContext.Provider, {
+  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, {
     value: env,
-    children: /* @__PURE__ */ jsx13(Internals13.LogLevelContext.Provider, {
+    children: /* @__PURE__ */ jsx14(Internals15.LogLevelContext.Provider, {
       value: logLevelContext,
-      children: /* @__PURE__ */ jsx13(Internals13.CanUseRemotionHooksProvider, {
-        children: /* @__PURE__ */ jsx13(Internals13.AbsoluteTimeContext.Provider, {
+      children: /* @__PURE__ */ jsx14(Internals15.CanUseRemotionHooksProvider, {
+        children: /* @__PURE__ */ jsx14(Internals15.AbsoluteTimeContext.Provider, {
           value: timelineContext,
-          children: /* @__PURE__ */ jsx13(Internals13.PlaybackRateContext.Provider, {
+          children: /* @__PURE__ */ jsx14(Internals15.PlaybackRateContext.Provider, {
             value: playbackRateContext,
-            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,
-                            children: /* @__PURE__ */ jsx13(Internals13.SharedAudioTagsContextProvider, {
-                              numberOfAudioTags: numberOfSharedAudioTags,
-                              children
+            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,
+                              children: /* @__PURE__ */ jsx14(Internals15.SharedAudioTagsContextProvider, {
+                                numberOfAudioTags: numberOfSharedAudioTags,
+                                children
+                              })
                             })
                           })
                         })
@@ -3193,7 +3298,7 @@ var SharedPlayerContexts = ({
 };
 
 // src/use-remotion-license-acknowledge.ts
-import { Internals as Internals14 } from "remotion";
+import { Internals as Internals16 } from "remotion";
 var warningShown = false;
 var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
   if (acknowledge) {
@@ -3203,7 +3308,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.");
+  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.");
 };
 
 // src/utils/validate-in-out-frame.ts
@@ -3304,7 +3409,7 @@ var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 var validateDefaultAndInputProps = NoReactInternals.validateDefaultAndInputProps;
 
 // src/Player.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var componentOrNullIfLazy = (props) => {
   if ("component" in props) {
     return props.component;
@@ -3378,21 +3483,21 @@ var PlayerFn = ({
   if (componentForValidation === Composition) {
     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({
+  useState12(() => acknowledgeRemotionLicenseMessage(Boolean(acknowledgeRemotionLicense), logLevel));
+  const component = Internals17.useLazyComponent({
     compProps: componentProps,
     componentName: "Player",
     noSuspense: Boolean(noSuspense)
   });
   validateInitialFrame({ initialFrame, durationInFrames });
-  const [frame, setFrame] = useState13(() => ({
+  const [frame, setFrame] = useState12(() => ({
     [PLAYER_COMP_ID]: initialFrame ?? 0
   }));
-  const [playing, setPlaying] = useState13(false);
-  const rootRef = useRef12(null);
-  const audioAndVideoTags = useRef12([]);
-  const imperativePlaying = useRef12(false);
-  const [currentPlaybackRate, setCurrentPlaybackRate] = useState13(playbackRate);
+  const [playing, setPlaying] = useState12(false);
+  const rootRef = useRef13(null);
+  const audioAndVideoTags = useRef13([]);
+  const imperativePlaying = useRef13(false);
+  const [currentPlaybackRate, setCurrentPlaybackRate] = useState12(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
   }
@@ -3453,15 +3558,15 @@ var PlayerFn = ({
     setCurrentPlaybackRate(playbackRate);
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
-  useState13(() => {
-    Internals15.playbackLogging({
+  useState12(() => {
+    Internals17.playbackLogging({
       logLevel,
       message: `[player] Mounting <Player>. User agent = ${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
       tag: "player",
       mountTime: Date.now()
     });
   });
-  const timelineContextValue = useMemo14(() => {
+  const timelineContextValue = useMemo15(() => {
     return {
       frame,
       playing,
@@ -3469,13 +3574,13 @@ var PlayerFn = ({
       audioAndVideoTags
     };
   }, [frame, playing]);
-  const playbackRateContextValue = useMemo14(() => {
+  const playbackRateContextValue = useMemo15(() => {
     return {
       playbackRate: currentPlaybackRate,
       setPlaybackRate: setCurrentPlaybackRate
     };
   }, [currentPlaybackRate]);
-  const setTimelineContextValue = useMemo14(() => {
+  const setTimelineContextValue = useMemo15(() => {
     return {
       setFrame,
       setPlaying
@@ -3483,17 +3588,17 @@ var PlayerFn = ({
   }, [setFrame]);
   if (typeof window !== "undefined") {
     useLayoutEffect3(() => {
-      Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
+      Internals17.CSSUtils.injectCSS(Internals17.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
-  const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
-  const browserMediaControlsBehavior = useMemo14(() => {
+  const actualInputProps = useMemo15(() => inputProps ?? {}, [inputProps]);
+  const browserMediaControlsBehavior = useMemo15(() => {
     return passedBrowserMediaControlsBehavior ?? {
       mode: "prevent-media-session"
     };
   }, [passedBrowserMediaControlsBehavior]);
-  return /* @__PURE__ */ jsx14(Internals15.IsPlayerContextProvider, {
-    children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
+  return /* @__PURE__ */ jsx15(Internals17.IsPlayerContextProvider, {
+    children: /* @__PURE__ */ jsx15(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
       playbackRateContext: playbackRateContextValue,
       component,
@@ -3510,11 +3615,11 @@ var PlayerFn = ({
       initialVolume,
       inputProps: actualInputProps,
       audioEnabled: true,
-      children: /* @__PURE__ */ jsx14(Internals15.SetTimelineContext.Provider, {
+      children: /* @__PURE__ */ jsx15(Internals17.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
-        children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {
+        children: /* @__PURE__ */ jsx15(PlayerEmitterProvider, {
           currentPlaybackRate,
-          children: /* @__PURE__ */ jsx14(PlayerUI_default, {
+          children: /* @__PURE__ */ jsx15(PlayerUI_default, {
             ref: rootRef,
             posterFillMode,
             renderLoading,
@@ -3567,31 +3672,31 @@ import {
   forwardRef as forwardRef4,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo17,
-  useRef as useRef14,
-  useState as useState14
+  useMemo as useMemo18,
+  useRef as useRef15,
+  useState as useState13
 } from "react";
-import { Internals as Internals17 } from "remotion";
+import { Internals as Internals19 } from "remotion";
 
 // src/ThumbnailUI.tsx
-import React13, {
+import React14, {
   forwardRef as forwardRef3,
   Suspense as Suspense2,
   useCallback as useCallback12,
   useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo16,
-  useRef as useRef13
+  useMemo as useMemo17,
+  useRef as useRef14
 } from "react";
-import { Internals as Internals16 } from "remotion";
+import { Internals as Internals18 } from "remotion";
 
 // src/use-thumbnail.ts
-import { useContext as useContext6, useMemo as useMemo15 } from "react";
+import { useContext as useContext6, useMemo as useMemo16 } from "react";
 var useThumbnail = () => {
   const emitter = useContext6(ThumbnailEmitterContext);
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const returnValue = useMemo15(() => {
+  const returnValue = useMemo16(() => {
     return {
       emitter
     };
@@ -3600,8 +3705,8 @@ var useThumbnail = () => {
 };
 
 // src/ThumbnailUI.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var reactVersion2 = React13.version.split(".")[0];
+import { jsx as jsx16 } 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`);
 }
@@ -3616,14 +3721,14 @@ var ThumbnailUI = ({
   noSuspense,
   overrideInternalClassName
 }, ref) => {
-  const config = Internals16.useUnsafeVideoConfig();
-  const video = Internals16.useVideo();
-  const container = useRef13(null);
+  const config = Internals18.useUnsafeVideoConfig();
+  const video = Internals18.useVideo();
+  const container = useRef14(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
   });
-  const layout = useMemo16(() => {
+  const layout = useMemo17(() => {
     if (!config || !canvasSize) {
       return null;
     }
@@ -3645,7 +3750,7 @@ var ThumbnailUI = ({
     return Object.assign(thumbnail.emitter, methods);
   }, [scale, thumbnail.emitter]);
   const VideoComponent = video ? video.component : null;
-  const outerStyle = useMemo16(() => {
+  const outerStyle = useMemo17(() => {
     return calculateOuterStyle({
       config,
       style: style2,
@@ -3654,10 +3759,10 @@ var ThumbnailUI = ({
       layout
     });
   }, [canvasSize, config, layout, overflowVisible, style2]);
-  const outer = useMemo16(() => {
+  const outer = useMemo17(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);
-  const containerStyle3 = useMemo16(() => {
+  const containerStyle3 = useMemo17(() => {
     return calculateContainerStyle({
       config,
       layout,
@@ -3668,14 +3773,14 @@ var ThumbnailUI = ({
   const onError = useCallback12((error) => {
     thumbnail.emitter.dispatchError(error);
   }, [thumbnail.emitter]);
-  const loadingMarkup = useMemo16(() => {
+  const loadingMarkup = useMemo17(() => {
     return renderLoading ? renderLoading({
       height: outerStyle.height,
       width: outerStyle.width,
       isBuffering: false
     }) : null;
   }, [outerStyle.height, outerStyle.width, renderLoading]);
-  const currentScaleContext = useMemo16(() => {
+  const currentScaleContext = useMemo17(() => {
     return {
       type: "scale",
       scale
@@ -3684,17 +3789,17 @@ var ThumbnailUI = ({
   if (!config) {
     return null;
   }
-  const content = /* @__PURE__ */ jsx15("div", {
+  const content = /* @__PURE__ */ jsx16("div", {
     style: outer,
-    children: /* @__PURE__ */ jsx15("div", {
+    children: /* @__PURE__ */ jsx16("div", {
       style: containerStyle3,
       className: playerCssClassname(overrideInternalClassName),
-      children: VideoComponent ? /* @__PURE__ */ jsx15(ErrorBoundary, {
+      children: VideoComponent ? /* @__PURE__ */ jsx16(ErrorBoundary, {
         onError,
         errorFallback,
-        children: /* @__PURE__ */ jsx15(Internals16.CurrentScaleContext.Provider, {
+        children: /* @__PURE__ */ jsx16(Internals18.CurrentScaleContext.Provider, {
           value: currentScaleContext,
-          children: /* @__PURE__ */ jsx15(VideoComponent, {
+          children: /* @__PURE__ */ jsx16(VideoComponent, {
             ...video?.props ?? {},
             ...inputProps ?? {}
           })
@@ -3703,18 +3808,18 @@ var ThumbnailUI = ({
     })
   });
   if (noSuspense || IS_NODE && !doesReactVersionSupportSuspense2) {
-    return /* @__PURE__ */ jsx15("div", {
+    return /* @__PURE__ */ jsx16("div", {
       ref: container,
       style: outerStyle,
       className: className2,
       children: content
     });
   }
-  return /* @__PURE__ */ jsx15("div", {
+  return /* @__PURE__ */ jsx16("div", {
     ref: container,
     style: outerStyle,
     className: className2,
-    children: /* @__PURE__ */ jsx15(Suspense2, {
+    children: /* @__PURE__ */ jsx16(Suspense2, {
       fallback: loadingMarkup,
       children: content
     })
@@ -3723,7 +3828,7 @@ var ThumbnailUI = ({
 var ThumbnailUI_default = forwardRef3(ThumbnailUI);
 
 // src/Thumbnail.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var ThumbnailFn = ({
   frameToDisplay,
   style: style2,
@@ -3746,21 +3851,21 @@ var ThumbnailFn = ({
       window.remotion_isPlayer = true;
     }, []);
   }
-  const rootRef = useRef14(null);
-  const timelineState = useMemo17(() => {
+  const rootRef = useRef15(null);
+  const imperativePlaying = useRef15(false);
+  const audioAndVideoTags = useRef15([]);
+  const timelineState = useMemo18(() => {
     const value = {
       playing: false,
       frame: {
         [PLAYER_COMP_ID]: frameToDisplay
       },
-      imperativePlaying: {
-        current: false
-      },
-      audioAndVideoTags: { current: [] }
+      imperativePlaying,
+      audioAndVideoTags
     };
     return value;
   }, [frameToDisplay]);
-  const playbackRateContext = useMemo17(() => {
+  const playbackRateContext = useMemo18(() => {
     return {
       playbackRate: 1,
       setPlaybackRate: () => {
@@ -3769,17 +3874,17 @@ var ThumbnailFn = ({
     };
   }, []);
   useImperativeHandle4(ref, () => rootRef.current, []);
-  const Component = Internals17.useLazyComponent({
+  const Component = Internals19.useLazyComponent({
     compProps: componentProps,
     componentName: "Thumbnail",
     noSuspense: Boolean(noSuspense)
   });
-  const [emitter] = useState14(() => new ThumbnailEmitter);
-  const passedInputProps = useMemo17(() => {
+  const [emitter] = useState13(() => new ThumbnailEmitter);
+  const passedInputProps = useMemo18(() => {
     return inputProps ?? {};
   }, [inputProps]);
-  return /* @__PURE__ */ jsx16(Internals17.IsPlayerContextProvider, {
-    children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
+  return /* @__PURE__ */ jsx17(Internals19.IsPlayerContextProvider, {
+    children: /* @__PURE__ */ jsx17(SharedPlayerContexts, {
       timelineContext: timelineState,
       playbackRateContext,
       component: Component,
@@ -3794,9 +3899,9 @@ var ThumbnailFn = ({
       sampleRate: 48000,
       inputProps: passedInputProps,
       audioEnabled: false,
-      children: /* @__PURE__ */ jsx16(ThumbnailEmitterContext.Provider, {
+      children: /* @__PURE__ */ jsx17(ThumbnailEmitterContext.Provider, {
         value: emitter,
-        children: /* @__PURE__ */ jsx16(ThumbnailUI_default, {
+        children: /* @__PURE__ */ jsx17(ThumbnailUI_default, {
           ref: rootRef,
           className: className2,
           errorFallback,
@@ -3818,7 +3923,7 @@ var Thumbnail = forward2(ThumbnailFn);
 var PlayerInternals = {
   PlayerEventEmitterContext,
   PlayerEmitter,
-  usePlayer,
+  usePlayerMethods,
   usePlayback,
   useElementSize,
   calculateCanvasTransformation,