@remotion/promo-pages 4.0.388 → 4.0.391

package/dist/Homepage.js

@@ -96,9 +96,9 @@ import {
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo11,
+  useRef as useRef5,
   useState as useState8
 } from "react";
-import { flushSync } from "react-dom";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext27 } from "react";
 import React12, { createContext as createContext13, useMemo as useMemo12 } from "react";
@@ -114,22 +114,22 @@ import {
   useEffect as useEffect12,
   useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo21,
-  useRef as useRef12,
+  useRef as useRef13,
   useState as useState15
 } from "react";
-import { useContext as useContext17, useLayoutEffect as useLayoutEffect5, useRef as useRef7 } from "react";
+import { useContext as useContext17, useLayoutEffect as useLayoutEffect5, useRef as useRef8 } from "react";
 import React15, {
   createContext as createContext16,
   createRef as createRef2,
   useCallback as useCallback7,
   useContext as useContext16,
   useMemo as useMemo15,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState11
 } from "react";
 import { useMemo as useMemo14 } from "react";
 import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
-import { useRef as useRef6 } from "react";
+import { useRef as useRef7 } from "react";
 import { useContext as useContext19, useEffect as useEffect6, useMemo as useMemo16, useState as useState12 } from "react";
 import { useContext as useContext18 } from "react";
 import {
@@ -137,9 +137,9 @@ import {
   useContext as useContext22,
   useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect7,
-  useRef as useRef11
+  useRef as useRef12
 } from "react";
-import { useCallback as useCallback9, useMemo as useMemo19, useRef as useRef9 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo19, useRef as useRef10 } from "react";
 import { useContext as useContext21, useMemo as useMemo18 } from "react";
 import React16, {
   useCallback as useCallback8,
@@ -147,13 +147,13 @@ import React16, {
   useEffect as useEffect7,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo17,
-  useRef as useRef8,
+  useRef as useRef9,
   useState as useState13
 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import React17 from "react";
 import { useEffect as useEffect8, useState as useState14 } from "react";
-import { useEffect as useEffect9, useRef as useRef10 } from "react";
+import { useEffect as useEffect9, useRef as useRef11 } from "react";
 import { useContext as useContext23, useEffect as useEffect11 } from "react";
 import { createContext as createContext17, useContext as useContext24, useMemo as useMemo20 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
@@ -164,7 +164,7 @@ import {
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo222,
-  useRef as useRef13
+  useRef as useRef14
 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import { jsx as jsx20 } from "react/jsx-runtime";
@@ -183,7 +183,7 @@ import {
   useContext as useContext30,
   useImperativeHandle as useImperativeHandle8,
   useLayoutEffect as useLayoutEffect9,
-  useRef as useRef14
+  useRef as useRef15
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
@@ -192,7 +192,7 @@ import {
   useCallback as useCallback14,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo25,
-  useRef as useRef15,
+  useRef as useRef16,
   useState as useState17
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
@@ -218,7 +218,7 @@ import {
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo29,
-  useRef as useRef16,
+  useRef as useRef17,
   useState as useState20
 } from "react";
 import { useEffect as useEffect18 } from "react";
@@ -240,7 +240,7 @@ import {
   useImperativeHandle as useImperativeHandle11,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo32,
-  useRef as useRef17
+  useRef as useRef18
 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import { jsx as jsx36 } from "react/jsx-runtime";
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.388", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,6 +1582,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
+}, useTimelineFrameRef = () => {
+  const { frameRef } = useContext6(TimelineContext);
+  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1647,7 +1650,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, error = (options, ...args) => {
   return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
-}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = ({
+}, Log, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = ({
   scope,
   environment,
   label,
@@ -1657,33 +1660,29 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
   }
   const handle = Math.random();
-  handles.push(handle);
+  scope.remotion_delayRenderHandles.push(handle);
   const called = Error().stack?.replace(/^Error/g, "") ?? "";
   if (environment.isRendering) {
-    const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof scope === "undefined" ? defaultTimeout : scope.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
-    if (typeof scope !== "undefined") {
-      const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
-      scope.remotion_delayRenderTimeouts[handle] = {
-        label: label ?? null,
-        startTime: Date.now(),
-        timeout: setTimeout(() => {
-          const message = [
-            `A delayRender()`,
-            label ? `"${label}"` : null,
-            `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-            retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
-            retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
-            DELAY_RENDER_CALLSTACK_TOKEN,
-            called
-          ].filter(truthy2).join(" ");
-          cancelRenderInternal(scope, Error(message));
-        }, timeoutToUse)
-      };
-    }
-  }
-  if (typeof scope !== "undefined") {
-    scope.remotion_renderReady = false;
+    const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
+    const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
+    scope.remotion_delayRenderTimeouts[handle] = {
+      label: label ?? null,
+      startTime: Date.now(),
+      timeout: setTimeout(() => {
+        const message = [
+          `A delayRender()`,
+          label ? `"${label}"` : null,
+          `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+          retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
+          retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
+          DELAY_RENDER_CALLSTACK_TOKEN,
+          called
+        ].filter(truthy2).join(" ");
+        cancelRenderInternal(scope, Error(message));
+      }, timeoutToUse)
+    };
   }
+  scope.remotion_renderReady = false;
   return handle;
 }, continueRenderInternal = ({
   scope,
@@ -1697,7 +1696,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (typeof handle !== "number") {
     throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
   }
-  handles = handles.filter((h) => {
+  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
     if (h === handle) {
       if (environment.isRendering && scope !== undefined) {
         if (!scope.remotion_delayRenderTimeouts[handle]) {
@@ -1717,7 +1716,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
     return true;
   });
-  if (handles.length === 0 && typeof scope !== "undefined") {
+  if (scope.remotion_delayRenderHandles.length === 0) {
     scope.remotion_renderReady = true;
   }
 }, LogLevelContext, useLogLevel = () => {
@@ -1734,19 +1733,25 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return mountTime;
 }, DelayRenderContextType, useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext8(DelayRenderContextType);
+  const scope = useContext8(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
   const logLevel = useLogLevel();
   const delayRender2 = useCallback4((label, options) => {
+    if (!scope) {
+      return Math.random();
+    }
     return delayRenderInternal({
-      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      scope,
       environment,
       label: label ?? null,
       options: options ?? {}
     });
   }, [environment, scope]);
   const continueRender2 = useCallback4((handle) => {
+    if (!scope) {
+      return;
+    }
     continueRenderInternal({
-      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      scope,
       handle,
       environment,
       logLevel
@@ -1764,6 +1769,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
+  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1799,7 +1805,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags
+      audioAndVideoTags,
+      frameRef
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -2430,37 +2437,38 @@ Check that all your Remotion packages are on the same version. If your dependenc
   validateContent(artifact.content);
 }, RenderAssetManager, RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState8([]);
+  const renderAssetsRef = useRef5([]);
   const registerRenderAsset = useCallback6((renderAsset) => {
     validateRenderAsset(renderAsset);
-    setRenderAssets((assets) => {
-      return [...assets, renderAsset];
-    });
+    renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
+    setRenderAssets(renderAssetsRef.current);
   }, []);
   if (collectAssets) {
     useImperativeHandle5(collectAssets, () => {
       return {
         collectAssets: () => {
-          flushSync(() => {
-            setRenderAssets([]);
-          });
-          return renderAssets;
+          const assets = renderAssetsRef.current;
+          renderAssetsRef.current = [];
+          setRenderAssets([]);
+          return assets;
         }
       };
-    }, [renderAssets]);
+    }, []);
   }
   const unregisterRenderAsset = useCallback6((id) => {
-    setRenderAssets((assts) => {
-      return assts.filter((a) => a.id !== id);
-    });
+    renderAssetsRef.current = renderAssetsRef.current.filter((a) => a.id !== id);
+    setRenderAssets(renderAssetsRef.current);
   }, []);
   useLayoutEffect3(() => {
     if (typeof window !== "undefined") {
       window.remotion_collectAssets = () => {
+        const assets = renderAssetsRef.current;
+        renderAssetsRef.current = [];
         setRenderAssets([]);
-        return renderAssets;
+        return assets;
       };
     }
-  }, [renderAssets]);
+  }, []);
   const contextValue = useMemo11(() => {
     return {
       registerRenderAsset,
@@ -3061,7 +3069,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return true;
 }, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint }) => {
-  const audios = useRef5([]);
+  const audios = useRef6([]);
   const [initialNumberOfAudioTags] = useState11(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
@@ -3081,7 +3089,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const takenAudios = useRef5(new Array(numberOfAudioTags).fill(false));
+  const takenAudios = useRef6(new Array(numberOfAudioTags).fill(false));
   const rerenderAudios = useCallback7(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
@@ -3104,7 +3112,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     });
   }, [refs]);
   const registerAudio = useCallback7((options) => {
-    const { aud, audioId, premounting } = options;
+    const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
       return found;
@@ -3123,7 +3131,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
       el: ref,
       audioId,
       mediaElementSourceNode,
-      premounting
+      premounting,
+      audioMounted: Boolean(ref.current),
+      postmounting
     };
     audios.current?.push(newElem);
     rerenderAudios();
@@ -3144,12 +3154,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
     aud,
     audioId,
     id,
-    premounting
+    premounting,
+    postmounting
   }) => {
     let changed = false;
     audios.current = audios.current?.map((prevA) => {
+      const audioMounted = Boolean(prevA.el.current);
+      if (prevA.audioMounted !== audioMounted) {
+        changed = true;
+      }
       if (prevA.id === id) {
-        const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting;
+        const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting && prevA.postmounting === postmounting;
         if (isTheSame) {
           return prevA;
         }
@@ -3158,7 +3173,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
           ...prevA,
           props: aud,
           premounting,
-          audioId
+          postmounting,
+          audioId,
+          audioMounted
         };
       }
       return prevA;
@@ -3220,12 +3237,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, useSharedAudio = ({
   aud,
   audioId,
-  premounting
+  premounting,
+  postmounting
 }) => {
   const ctx = useContext16(SharedAudioContext);
   const [elem] = useState11(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
-      return ctx.registerAudio({ aud, audioId, premounting });
+      return ctx.registerAudio({ aud, audioId, premounting, postmounting });
     }
     const el = React15.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
@@ -3238,16 +3256,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
       props: aud,
       audioId,
       mediaElementSourceNode,
-      premounting
+      premounting,
+      audioMounted: Boolean(el.current),
+      postmounting
     };
   });
   const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
-        ctx.updateAudio({ id: elem.id, aud, audioId, premounting });
+        ctx.updateAudio({ id: elem.id, aud, audioId, premounting, postmounting });
       }
-    }, [aud, ctx, elem.id, audioId, premounting]);
+    }, [aud, ctx, elem.id, audioId, premounting, postmounting]);
     effectToUse(() => {
       return () => {
         if (ctx && ctx.numberOfAudioTags > 0) {
@@ -3337,9 +3357,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   duration: initialDuration,
   fps
 }) => {
-  const actualFromRef = useRef6(initialActualFrom);
-  const actualDuration = useRef6(initialDuration);
-  const actualSrc = useRef6(initialActualSrc);
+  const actualFromRef = useRef7(initialActualFrom);
+  const actualDuration = useRef7(initialDuration);
+  const actualSrc = useRef7(initialActualSrc);
   if (!isSubsetOfDuration({
     prevStartFrom: actualFromRef.current,
     newStartFrom: initialActualFrom,
@@ -3373,8 +3393,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   source,
   shouldUseWebAudioApi
 }) => {
-  const audioStuffRef = useRef7(null);
-  const currentVolumeRef = useRef7(volume);
+  const audioStuffRef = useRef8(null);
+  const currentVolumeRef = useRef8(volume);
   currentVolumeRef.current = volume;
   const sharedAudioContext = useContext17(SharedAudioContext);
   if (!sharedAudioContext) {
@@ -3623,7 +3643,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
-  const buffering = useRef8(false);
+  const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
     setBlocks((b) => [...b, block]);
     return {
@@ -3734,7 +3754,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef9(false);
+  const bufferingRef = useRef10(false);
   const { delayPlayback } = useBufferState();
   const bufferUntilFirstFrame = useCallback9((requestedTime) => {
     if (mediaType !== "video") {
@@ -3984,7 +4004,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef10(null);
+  const currentTime = useRef11(null);
   useEffect9(() => {
     const { current } = mediaRef;
     if (current) {
@@ -4108,14 +4128,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const buffering = useContext22(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const lastSeekDueToShift = useRef11(null);
-  const lastSeek = useRef11(null);
+  const lastSeekDueToShift = useRef12(null);
+  const lastSeek = useRef12(null);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const isVariableFpsVideoMap = useRef11({});
+  const isVariableFpsVideoMap = useRef12({});
   const onVariableFpsVideoDetected = useCallback10(() => {
     if (!src) {
       return;
@@ -4485,7 +4505,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { el: audioRef, mediaElementSourceNode } = useSharedAudio({
     aud: propsToPass,
     audioId: id,
-    premounting: Boolean(sequenceContext?.premounting)
+    premounting: Boolean(sequenceContext?.premounting),
+    postmounting: Boolean(sequenceContext?.postmounting)
   });
   useMediaInTimeline({
     volume,
@@ -4531,7 +4552,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, [audioRef]);
-  const currentOnDurationCallback = useRef12(onDuration);
+  const currentOnDurationCallback = useRef13(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEffect12(() => {
     const { current } = audioRef;
@@ -4560,7 +4581,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     ...propsToPass
   });
 }, AudioForPreview, AudioForRenderingRefForwardingFunction = (props, ref) => {
-  const audioRef = useRef13(null);
+  const audioRef = useRef14(null);
   const {
     volume: volumeProp,
     playbackRate,
@@ -5067,8 +5088,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   crossOrigin,
   ...props2
 }, ref) => {
-  const imageRef = useRef14(null);
-  const errors = useRef14({});
+  const imageRef = useRef15(null);
+  const errors = useRef15({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext30(SequenceContext);
   if (!src) {
@@ -5207,7 +5228,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [folders, setFolders] = useState17([]);
   const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
   const [compositions, setCompositions] = useState17(initialCompositions);
-  const currentcompositionsRef = useRef15(compositions);
+  const currentcompositionsRef = useRef16(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
@@ -5726,7 +5747,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
-  const videoRef = useRef16(null);
+  const videoRef = useRef17(null);
   const sharedSource = useMemo29(() => {
     if (!context.audioContext) {
       return null;
@@ -5874,7 +5895,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       current.removeEventListener("error", errorHandler);
     };
   }, [onError, src]);
-  const currentOnDurationCallback = useRef16(onDuration);
+  const currentOnDurationCallback = useRef17(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect19(() => {
@@ -6450,7 +6471,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const videoRef = useRef17(null);
+  const videoRef = useRef18(null);
   const sequenceContext = useContext34(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
@@ -6779,6 +6800,7 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
+    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6854,12 +6876,12 @@ var init_esm = __esm(() => {
     warn,
     error
   };
-  handles = [];
   if (typeof window !== "undefined") {
     window.remotion_renderReady = false;
     if (!window.remotion_delayRenderTimeouts) {
       window.remotion_delayRenderTimeouts = {};
     }
+    window.remotion_delayRenderHandles = [];
   }
   LogLevelContext = createContext8({
     logLevel: "info",
@@ -6876,6 +6898,7 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
+    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",
@@ -7248,7 +7271,7 @@ __export(exports_esm, {
   Lottie: () => Lottie
 });
 import lottie from "lottie-web";
-import { useEffect as useEffect38, useRef as useRef36, useState as useState37 } from "react";
+import { useEffect as useEffect38, useRef as useRef37, useState as useState37 } from "react";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -7313,10 +7336,10 @@ var getLottieMetadata = (animationData) => {
   }
   validatePlaybackRate2(playbackRate);
   validateLoop(loop);
-  const animationRef = useRef36(null);
-  const currentFrameRef = useRef36(null);
-  const containerRef = useRef36(null);
-  const onAnimationLoadedRef = useRef36(onAnimationLoaded);
+  const animationRef = useRef37(null);
+  const currentFrameRef = useRef37(null);
+  const containerRef = useRef37(null);
+  const onAnimationLoadedRef = useRef37(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender, continueRender } = useDelayRender();
   const [handle] = useState37(() => delayRender("Waiting for Lottie animation to load"));
@@ -12900,7 +12923,7 @@ var extrudeAndTransformElement = (options) => {
 init_esm();
 import { jsx as jsx37, Fragment } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs3 } from "react/jsx-runtime";
-import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef18 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef19 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
 import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 import React42 from "react";
@@ -13255,7 +13278,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef18([]);
+  const pathsRef = useRef19([]);
   useEffect22(() => {
     const animate = () => {
       const now = performance.now();
@@ -20515,23 +20538,23 @@ init_esm();
 import { jsx as jsx50, jsxs as jsxs14 } from "react/jsx-runtime";
 import { jsx as jsx213, jsxs as jsxs24, Fragment as Fragment6 } from "react/jsx-runtime";
 import React41 from "react";
-import { useContext as useContext210, useEffect as useEffect210, useState as useState35 } from "react";
-import { useContext as useContext40, useEffect as useEffect36 } from "react";
+import { useContext as useContext210, useEffect as useEffect36, useState as useState35 } from "react";
+import { useContext as useContext40, useLayoutEffect as useLayoutEffect15 } from "react";
 import { jsx as jsx310 } from "react/jsx-runtime";
-import { useCallback as useCallback27, useRef as useRef32 } from "react";
-import { useEffect as useEffect37, useState as useState210 } from "react";
-import { useContext as useContext42, useEffect as useEffect62, useRef as useRef42 } from "react";
-import { useEffect as useEffect42 } from "react";
-import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef24, useState as useState36 } from "react";
-import { useEffect as useEffect52, useRef as useRef33 } from "react";
-import { useCallback as useCallback32, useEffect as useEffect72, useMemo as useMemo212, useState as useState42 } from "react";
+import { useCallback as useCallback27 } from "react";
+import { useEffect as useEffect210, useState as useState210 } from "react";
+import { useContext as useContext42, useEffect as useEffect52, useRef as useRef33 } from "react";
+import { useEffect as useEffect37 } from "react";
+import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef34, useState as useState36 } from "react";
+import { useEffect as useEffect42, useRef as useRef24 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef26,
-  useEffect as useEffect142,
+  useEffect as useEffect132,
   useImperativeHandle as useImperativeHandle22,
-  useLayoutEffect as useLayoutEffect15,
+  useLayoutEffect as useLayoutEffect23,
   useMemo as useMemo142,
-  useRef as useRef112,
+  useRef as useRef102,
   useState as useState132
 } from "react";
 import React102, {
@@ -20539,28 +20562,28 @@ import React102, {
   forwardRef as forwardRef27,
   useCallback as useCallback112,
   useContext as useContext62,
-  useEffect as useEffect132,
+  useEffect as useEffect122,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo122,
-  useRef as useRef102,
+  useRef as useRef92,
   useState as useState113
 } from "react";
-import { useCallback as useCallback82, useEffect as useEffect112, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
+import { useCallback as useCallback82, useEffect as useEffect102, useMemo as useMemo92, useRef as useRef72, useState as useState102 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
-import { useCallback as useCallback52, useMemo as useMemo43, useRef as useRef52, useState as useState62 } from "react";
+import { useCallback as useCallback52, useMemo as useMemo43, useRef as useRef42, useState as useState62 } from "react";
 import React38, { useCallback as useCallback42, useMemo as useMemo34, useState as useState52 } from "react";
 import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
 import {
   useCallback as useCallback62,
   useContext as useContext52,
-  useEffect as useEffect92,
+  useEffect as useEffect83,
   useMemo as useMemo52,
   useState as useState82
 } from "react";
-import { useEffect as useEffect83, useRef as useRef62, useState as useState72 } from "react";
+import { useEffect as useEffect72, useRef as useRef52, useState as useState72 } from "react";
 import { jsx as jsx74, jsxs as jsxs52 } from "react/jsx-runtime";
-import { useCallback as useCallback72, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
+import { useCallback as useCallback72, useEffect as useEffect92, useMemo as useMemo62, useRef as useRef62, useState as useState92 } from "react";
 import { jsx as jsx84, jsxs as jsxs62 } from "react/jsx-runtime";
 import { useMemo as useMemo72 } from "react";
 import { jsxs as jsxs7 } from "react/jsx-runtime";
@@ -20568,10 +20591,10 @@ import { useMemo as useMemo82 } from "react";
 import { jsx as jsx94, jsxs as jsxs82, Fragment as Fragment22 } from "react/jsx-runtime";
 import React82 from "react";
 import { jsx as jsx104 } from "react/jsx-runtime";
-import React92, { useEffect as useEffect122 } from "react";
+import React92, { useEffect as useEffect112 } from "react";
 import { jsx as jsx113 } from "react/jsx-runtime";
 import { useCallback as useCallback102, useMemo as useMemo112 } from "react";
-import { useCallback as useCallback92, useMemo as useMemo102, useRef as useRef92 } from "react";
+import { useCallback as useCallback92, useMemo as useMemo102, useRef as useRef82 } from "react";
 import { jsx as jsx123, jsxs as jsxs92, Fragment as Fragment32 } from "react/jsx-runtime";
 import { useCallback as useCallback122, useMemo as useMemo132, useState as useState122 } from "react";
 import { jsx as jsx133 } from "react/jsx-runtime";
@@ -20684,6 +20707,7 @@ if (typeof window !== "undefined") {
   if (!window.remotion_delayRenderTimeouts) {
     window.remotion_delayRenderTimeouts = {};
   }
+  window.remotion_delayRenderHandles = [];
 }
 var DELAY_RENDER_CALLSTACK_TOKEN2 = "The delayRender was called:";
 var DELAY_RENDER_RETRIES_LEFT2 = "Retries left: ";
@@ -21209,9 +21233,9 @@ import { jsx as jsx143 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef42,
   useImperativeHandle as useImperativeHandle42,
-  useLayoutEffect as useLayoutEffect23,
+  useLayoutEffect as useLayoutEffect33,
   useMemo as useMemo172,
-  useRef as useRef132,
+  useRef as useRef122,
   useState as useState142
 } from "react";
 import React132, {
@@ -21220,7 +21244,7 @@ import React132, {
   useCallback as useCallback132,
   useImperativeHandle as useImperativeHandle32,
   useMemo as useMemo162,
-  useRef as useRef122
+  useRef as useRef112
 } from "react";
 import { useContext as useContext72, useMemo as useMemo152 } from "react";
 import { jsx as jsx153 } from "react/jsx-runtime";
@@ -21662,7 +21686,7 @@ var useBufferStateEmitter = (emitter) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect36(() => {
+  useLayoutEffect15(() => {
     const clear1 = bufferManager.listenForBuffering(() => {
       bufferManager.buffering.current = true;
       emitter.dispatchWaiting({});
@@ -21683,7 +21707,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect210(() => {
+  useEffect36(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
@@ -21696,7 +21720,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
 };
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState210(false);
-  useEffect37(() => {
+  useEffect210(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -21738,12 +21762,12 @@ var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState36(false);
   const frame = Internals.Timeline.useTimelinePosition();
-  const playStart = useRef24(frame);
+  const playStart = useRef34(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
   const audioContext = useContext37(Internals.SharedAudioContext);
   const { audioAndVideoTags } = useContext37(Internals.TimelineContext);
-  const frameRef = useRef24(frame);
+  const frameRef = Internals.Timeline.useTimelineFrameRef();
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
@@ -21759,13 +21783,16 @@ var usePlayer = () => {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
   const { buffering } = bufferingContext;
+  const setFrameAndImperative = useCallback28((newFrame, videoIdToSet) => {
+    setTimelinePosition((c) => ({ ...c, [videoIdToSet]: newFrame }));
+    frameRef.current = newFrame;
+  }, [frameRef, setTimelinePosition]);
   const seek2 = useCallback28((newFrame) => {
     if (video?.id) {
-      setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
+      setFrameAndImperative(newFrame, video.id);
     }
-    frameRef.current = newFrame;
     emitter.dispatchSeek(newFrame);
-  }, [emitter, setTimelinePosition, video?.id]);
+  }, [emitter, setFrameAndImperative, video?.id]);
   const play = useCallback28((e) => {
     if (imperativePlaying.current) {
       return;
@@ -21790,7 +21817,8 @@ var usePlayer = () => {
     setPlaying,
     emitter,
     seek2,
-    audioAndVideoTags
+    audioAndVideoTags,
+    frameRef
   ]);
   const pause = useCallback28(() => {
     if (imperativePlaying.current) {
@@ -21813,7 +21841,14 @@ var usePlayer = () => {
         emitter.dispatchPause();
       }
     }
-  }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
+  }, [
+    config,
+    emitter,
+    imperativePlaying,
+    setPlaying,
+    setTimelinePosition,
+    frameRef
+  ]);
   const videoId = video?.id;
   const frameBack = useCallback28((frames) => {
     if (!videoId) {
@@ -21871,12 +21906,15 @@ var usePlayer = () => {
       pause,
       seek: seek2,
       isFirstFrame,
-      getCurrentFrame: () => frameRef.current,
+      getCurrentFrame: () => {
+        return frameRef.current;
+      },
       isPlaying: () => imperativePlaying.current,
       isBuffering: () => buffering.current,
       pauseAndReturnToPlayStart,
       hasPlayed,
-      toggle
+      toggle,
+      setFrameAndImperative
     };
   }, [
     buffering,
@@ -21892,7 +21930,9 @@ var usePlayer = () => {
     play,
     playing,
     seek2,
-    toggle
+    toggle,
+    setFrameAndImperative,
+    frameRef
   ]);
   return returnValue;
 };
@@ -21902,7 +21942,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek: seek2 } = usePlayer();
-  useEffect42(() => {
+  useEffect37(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -21915,7 +21955,7 @@ var useBrowserMediaSession = ({
       navigator.mediaSession.playbackState = "paused";
     }
   }, [browserMediaControlsBehavior.mode, playing]);
-  useEffect42(() => {
+  useEffect37(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -21945,7 +21985,7 @@ var useBrowserMediaSession = ({
     playbackRate,
     videoConfig
   ]);
-  useEffect42(() => {
+  useEffect37(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -22038,8 +22078,8 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef33(getIsBackgrounded());
-  useEffect52(() => {
+  const isBackgrounded = useRef24(getIsBackgrounded());
+  useEffect42(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
     };
@@ -22061,10 +22101,9 @@ var usePlayback = ({
 }) => {
   const config = Internals.useUnsafeVideoConfig();
   const frame = Internals.Timeline.useTimelinePosition();
-  const { playing, pause, emitter } = usePlayer();
-  const setFrame = Internals.Timeline.useTimelineSetFrame();
+  const { playing, pause, emitter, setFrameAndImperative } = usePlayer();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateEvent = useRef42(null);
+  const lastTimeUpdateEvent = useRef33(null);
   const context = useContext42(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
@@ -22074,7 +22113,7 @@ var usePlayback = ({
     playbackRate,
     videoConfig: config
   });
-  useEffect62(() => {
+  useEffect52(() => {
     if (!config) {
       return;
     }
@@ -22118,7 +22157,7 @@ var usePlayback = ({
       });
       framesAdvanced += framesToAdvance;
       if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded)) {
-        setFrame((c) => ({ ...c, [config.id]: nextFrame }));
+        setFrameAndImperative(nextFrame, config.id);
       }
       if (hasEnded) {
         stop();
@@ -22165,7 +22204,7 @@ var usePlayback = ({
     loop,
     pause,
     playing,
-    setFrame,
+    setFrameAndImperative,
     emitter,
     playbackRate,
     inFrame,
@@ -22175,7 +22214,7 @@ var usePlayback = ({
     getCurrentFrame,
     context
   ]);
-  useEffect62(() => {
+  useEffect52(() => {
     const interval = setInterval(() => {
       if (lastTimeUpdateEvent.current === getCurrentFrame()) {
         return;
@@ -22185,7 +22224,7 @@ var usePlayback = ({
     }, 250);
     return () => clearInterval(interval);
   }, [emitter, getCurrentFrame]);
-  useEffect62(() => {
+  useEffect52(() => {
     emitter.dispatchFrameUpdate({ frame });
   }, [emitter, frame]);
 };
@@ -22268,7 +22307,7 @@ var useElementSize = (ref, options2) => {
       };
     });
   }, [ref]);
-  useEffect72(() => {
+  useEffect62(() => {
     if (!observer) {
       return;
     }
@@ -22282,7 +22321,7 @@ var useElementSize = (ref, options2) => {
       }
     };
   }, [observer, ref, updateSize]);
-  useEffect72(() => {
+  useEffect62(() => {
     if (!options2.triggerOnWindowResize) {
       return;
     }
@@ -22291,7 +22330,7 @@ var useElementSize = (ref, options2) => {
       window.removeEventListener("resize", updateSize);
     };
   }, [options2.triggerOnWindowResize, updateSize]);
-  useEffect72(() => {
+  useEffect62(() => {
     elementSizeHooks.push(updateSize);
     return () => {
       elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
@@ -22423,8 +22462,8 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
   const [mediaMuted, setMediaMuted] = Internals.useMediaMutedState();
   const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
   const [focused, setFocused] = useState62(false);
-  const parentDivRef = useRef52(null);
-  const inputRef = useRef52(null);
+  const parentDivRef = useRef42(null);
+  const inputRef = useRef42(null);
   const hover = useHoverState(parentDivRef, false);
   const onBlur = useCallback52(() => {
     setTimeout(() => {
@@ -22509,8 +22548,8 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 };
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState72(initialIsVisible);
-  const ref = useRef62(null);
-  useEffect83(() => {
+  const ref = useRef52(null);
+  useEffect72(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         setIsComponentVisible(false);
@@ -22594,7 +22633,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
   const { setPlaybackRate, playbackRate } = useContext52(Internals.TimelineContext);
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState82(playbackRate);
-  useEffect92(() => {
+  useEffect83(() => {
     const listener = (e) => {
       e.preventDefault();
       if (e.key === "ArrowUp") {
@@ -22759,7 +22798,7 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef72(null);
+  const containerRef = useRef62(null);
   const barHovered = useHoverState(containerRef, false);
   const size4 = useElementSize(containerRef, {
     triggerOnWindowResize: true,
@@ -22810,7 +22849,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, pause, play]);
-  useEffect102(() => {
+  useEffect92(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -23035,7 +23074,7 @@ var Controls = ({
   playing,
   toggle
 }) => {
-  const playButtonRef = useRef82(null);
+  const playButtonRef = useRef72(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState102(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -23070,17 +23109,17 @@ var Controls = ({
       opacity: Number(shouldShow)
     };
   }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
-  useEffect112(() => {
+  useEffect102(() => {
     if (playButtonRef.current && spaceKeyToPlayOrPause) {
       playButtonRef.current.focus({
         preventScroll: true
       });
     }
   }, [playing, spaceKeyToPlayOrPause]);
-  useEffect112(() => {
+  useEffect102(() => {
     setSupportsFullscreen((typeof document !== "undefined" && (document.fullscreenEnabled || document.webkitFullscreenEnabled)) ?? false);
   }, []);
-  useEffect112(() => {
+  useEffect102(() => {
     if (shouldShowInitially === false) {
       return;
     }
@@ -23109,8 +23148,8 @@ var Controls = ({
     }
     return null;
   }, [showPlaybackRateControl]);
-  const ref = useRef82(null);
-  const flexRef = useRef82(null);
+  const ref = useRef72(null);
+  const flexRef = useRef72(null);
   const onPointerDownIfContainer = useCallback82((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
@@ -23278,7 +23317,7 @@ var DOMAIN_BLACKLIST = [
 var ran = false;
 var RenderWarningIfBlacklist = () => {
   const [unlicensed, setUnlicensed] = React92.useState(false);
-  useEffect122(() => {
+  useEffect112(() => {
     if (ran) {
       return;
     }
@@ -23289,7 +23328,7 @@ var RenderWarningIfBlacklist = () => {
       }
     }).catch(() => {});
   }, []);
-  useEffect122(() => {
+  useEffect112(() => {
     if (!unlicensed) {
       return;
     }
@@ -23355,7 +23394,7 @@ var cancellablePromise = (promise) => {
 };
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 var useCancellablePromises = () => {
-  const pendingPromises = useRef92([]);
+  const pendingPromises = useRef82([]);
   const appendPendingPromise = useCallback92((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
@@ -23459,7 +23498,7 @@ var PlayerUI = ({
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
   const video = Internals.useVideo();
-  const container4 = useRef102(null);
+  const container4 = useRef92(null);
   const canvasSize = useElementSize(container4, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -23485,13 +23524,13 @@ var PlayerUI = ({
     getCurrentFrame: player.getCurrentFrame,
     browserMediaControlsBehavior
   });
-  useEffect132(() => {
+  useEffect122(() => {
     if (hasPausedToResume && !player.playing) {
       setHasPausedToResume(false);
       player.play();
     }
   }, [hasPausedToResume, player]);
-  useEffect132(() => {
+  useEffect122(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -23533,7 +23572,7 @@ var PlayerUI = ({
       document.exitFullscreen();
     }
   }, []);
-  useEffect132(() => {
+  useEffect122(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -23570,8 +23609,8 @@ var PlayerUI = ({
     });
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef102(false);
-  useEffect132(() => {
+  const initialScaleIgnored = useRef92(false);
+  useEffect122(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
       return;
@@ -23580,17 +23619,17 @@ var PlayerUI = ({
   }, [player.emitter, scale]);
   const { setMediaVolume, setMediaMuted } = useContext62(Internals.SetMediaVolumeContext);
   const { mediaMuted, mediaVolume } = useContext62(Internals.MediaVolumeContext);
-  useEffect132(() => {
+  useEffect122(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
   const isMuted = mediaMuted || mediaVolume === 0;
-  useEffect132(() => {
+  useEffect122(() => {
     player.emitter.dispatchMuteChange({
       isMuted
     });
   }, [player.emitter, isMuted]);
   const [showBufferIndicator, setShowBufferState] = useState113(false);
-  useEffect132(() => {
+  useEffect122(() => {
     let timeout = null;
     let stopped = false;
     const onBuffer = () => {
@@ -23762,7 +23801,7 @@ var PlayerUI = ({
     }
   }, [exitFullscreen, isFullscreen, requestFullscreen]);
   const { handlePointerDown, handleDoubleClick } = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
-  useEffect132(() => {
+  useEffect122(() => {
     if (shouldAutoplay) {
       player.play();
       setShouldAutoPlay(false);
@@ -24218,9 +24257,9 @@ var PlayerFn = ({
   }));
   const [playing, setPlaying] = useState132(false);
   const [rootId] = useState132("player-comp");
-  const rootRef = useRef112(null);
-  const audioAndVideoTags = useRef112([]);
-  const imperativePlaying = useRef112(false);
+  const rootRef = useRef102(null);
+  const audioAndVideoTags = useRef102([]);
+  const imperativePlaying = useRef102(false);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState132(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -24269,7 +24308,7 @@ var PlayerFn = ({
     throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
   }
   validatePlaybackRate(currentPlaybackRate);
-  useEffect142(() => {
+  useEffect132(() => {
     setCurrentPlaybackRate(playbackRate);
   }, [playbackRate]);
   useImperativeHandle22(ref, () => rootRef.current, []);
@@ -24284,6 +24323,7 @@ var PlayerFn = ({
   const timelineContextValue = useMemo142(() => {
     return {
       frame,
+      frameRef: { current: frame[PLAYER_COMP_ID] },
       playing,
       rootId,
       playbackRate: currentPlaybackRate,
@@ -24301,7 +24341,7 @@ var PlayerFn = ({
     };
   }, [setFrame]);
   if (typeof window !== "undefined") {
-    useLayoutEffect15(() => {
+    useLayoutEffect23(() => {
       Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
@@ -24405,7 +24445,7 @@ var ThumbnailUI = ({
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
   const video = Internals.useVideo();
-  const container4 = useRef122(null);
+  const container4 = useRef112(null);
   const canvasSize = useElementSize(container4, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -24526,14 +24566,15 @@ var ThumbnailFn = ({
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
-    useLayoutEffect23(() => {
+    useLayoutEffect33(() => {
       window.remotion_isPlayer = true;
     }, []);
   }
   const [thumbnailId] = useState142(() => String(random(null)));
-  const rootRef = useRef132(null);
+  const rootRef = useRef122(null);
   const timelineState = useMemo172(() => {
     const value = {
+      frameRef: { current: frameToDisplay },
       playing: false,
       frame: {
         [PLAYER_COMP_ID]: frameToDisplay
@@ -24598,7 +24639,7 @@ import {
   useCallback as useCallback43,
   useEffect as useEffect51,
   useMemo as useMemo53,
-  useRef as useRef41,
+  useRef as useRef43,
   useState as useState47
 } from "react";
 
@@ -25382,13 +25423,13 @@ import {
   createRef as createRef4,
   useCallback as useCallback35,
   useEffect as useEffect43,
-  useRef as useRef38,
+  useRef as useRef39,
   useState as useState40
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
 init_esm();
-import { useCallback as useCallback31, useRef as useRef34 } from "react";
+import { useCallback as useCallback31, useRef as useRef36 } from "react";
 
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -25486,7 +25527,7 @@ var Card2 = ({
   onClickRight
 }) => {
   const refToUse = refsToUse[index2];
-  const stopPrevious = useRef34([]);
+  const stopPrevious = useRef36([]);
   let newIndices = [...indices];
   const applyPositions = useCallback31((except) => {
     let stopped = false;
@@ -25754,7 +25795,7 @@ import {
   useCallback as useCallback33,
   useEffect as useEffect41,
   useImperativeHandle as useImperativeHandle14,
-  useRef as useRef37
+  useRef as useRef38
 } from "react";
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
@@ -25867,10 +25908,10 @@ var emojiStyle = {
   top: "calc(50% - 50px)"
 };
 var EmojiCardRefFn = ({ emojiIndex }, ref) => {
-  const ref1 = useRef37(null);
-  const ref2 = useRef37(null);
-  const ref3 = useRef37(null);
-  const transforms = useRef37([-100, 0, 100]);
+  const ref1 = useRef38(null);
+  const ref2 = useRef38(null);
+  const ref3 = useRef38(null);
+  const transforms = useRef38([-100, 0, 100]);
   const onLeft = useCallback33(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
@@ -26323,14 +26364,14 @@ var Cards = ({
   location,
   trending
 }) => {
-  const container4 = useRef38(null);
+  const container4 = useRef39(null);
   const [refs] = useState40(() => {
     return new Array(4).fill(true).map(() => {
       return createRef4();
     });
   });
-  const positions = useRef38(getInitialPositions());
-  const shouldBePositions = useRef38(getInitialPositions());
+  const positions = useRef39(getInitialPositions());
+  const shouldBePositions = useRef39(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
   useEffect43(() => {
     const { current } = container4;
@@ -26348,7 +26389,7 @@ var Cards = ({
       current.removeEventListener("click", onClick);
     };
   }, [onToggle]);
-  const ref = useRef38(null);
+  const ref = useRef39(null);
   const onLeft = useCallback35(() => {
     ref.current?.onRight();
     onRightPress();
@@ -26871,7 +26912,7 @@ var DragAndDropNudge = () => {
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
 init_esm();
-import { useCallback as useCallback39, useEffect as useEffect47, useMemo as useMemo51, useRef as useRef39, useState as useState45 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect47, useMemo as useMemo51, useRef as useRef40, useState as useState45 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
 import { useCallback as useCallback38, useEffect as useEffect46, useMemo as useMemo50, useState as useState43 } from "react";
@@ -27000,7 +27041,7 @@ var PlayerSeekBar2 = ({
   outFrame,
   playerRef
 }) => {
-  const containerRef = useRef39(null);
+  const containerRef = useRef40(null);
   const barHovered = useHoverState2(containerRef, false);
   const size4 = useElementSize2(containerRef.current);
   const [playing, setPlaying] = useState45(false);
@@ -27149,7 +27190,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback40, useEffect as useEffect48, useRef as useRef40, useState as useState46 } from "react";
+import { useCallback as useCallback40, useEffect as useEffect48, useRef as useRef41, useState as useState46 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx90 } from "react/jsx-runtime";
@@ -27209,7 +27250,7 @@ import { jsx as jsx91 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState46(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState46(false);
-  const timerRef = useRef40(null);
+  const timerRef = useRef41(null);
   useEffect48(() => {
     const { current } = playerRef;
     if (!current) {
@@ -27498,7 +27539,7 @@ var playerWrapper = {
 var Demo = () => {
   const { colorMode } = useColorMode();
   const [data2, setData] = useState47(null);
-  const ref = useRef41(null);
+  const ref = useRef43(null);
   const [isFullscreen, setIsFullscreen] = useState47(false);
   const [cardOrder, setCardOrder] = useState47([0, 1, 2, 3]);
   const [emojiIndex, setEmojiIndex] = useState47(0);
@@ -27645,15 +27686,15 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef31, useEffect as useEffect55, useImperativeHandle as useImperativeHandle15, useRef as useRef45 } from "react";
+import { forwardRef as forwardRef31, useEffect as useEffect55, useImperativeHandle as useImperativeHandle15, useRef as useRef46 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef30, useCallback as useCallback45, useEffect as useEffect53, useRef as useRef43, useState as useState48 } from "react";
+import { forwardRef as forwardRef30, useCallback as useCallback45, useEffect as useEffect53, useRef as useRef45, useState as useState48 } from "react";
 import { jsx as jsx105 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
-  const targetRef = useRef43(null);
+  const targetRef = useRef45(null);
   useEffect53(() => {
     refs.forEach((ref) => {
       if (!ref)
@@ -27668,9 +27709,9 @@ var useCombinedRefs = function(...refs) {
   return targetRef;
 };
 var VideoPlayerWithControls = forwardRef30(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
-  const videoRef = useRef43(null);
+  const videoRef = useRef45(null);
   const metaRef = useCombinedRefs(ref, videoRef);
-  const playerRef = useRef43(null);
+  const playerRef = useRef45(null);
   const [playerInitTime] = useState48(Date.now());
   const videoError = useCallback45((event) => onError(event), [onError]);
   const onImageLoad = useCallback45((event) => {
@@ -27755,7 +27796,7 @@ var getVideoToPlayUrl = (muxId) => {
   return `https://stream.mux.com/${muxId}.m3u8`;
 };
 var MuxVideoForward = ({ muxId, ...props }, ref) => {
-  const videoRef = useRef45(null);
+  const videoRef = useRef46(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle15(ref, () => videoRef.current, []);
   useEffect55(() => {
@@ -28137,14 +28178,14 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect58, useRef as useRef46, useState as useState53 } from "react";
+import { useEffect as useEffect58, useRef as useRef47, useState as useState53 } from "react";
 import { jsx as jsx114, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
   marginLeft: 10
 };
 var ParameterizeAndEdit = () => {
-  const ref = useRef46(null);
+  const ref = useRef47(null);
   const [vid, setVid] = useState53("/img/editing-vp9-chrome.webm");
   useEffect58(() => {
     if (isWebkit()) {
@@ -28260,15 +28301,15 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect59, useRef as useRef47, useState as useState55 } from "react";
+import { useEffect as useEffect59, useRef as useRef48, useState as useState55 } from "react";
 import { jsx as jsx116, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
   marginLeft: 10
 };
 var RealMP4Videos = () => {
-  const ref = useRef47(null);
-  const videoRef = useRef47(null);
+  const ref = useRef48(null);
+  const videoRef = useRef48(null);
   const [vid, setVid] = useState55("/img/render-progress.webm");
   useEffect59(() => {
     if (isWebkit()) {
@@ -28521,7 +28562,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useEffect as useEffect60, useRef as useRef48, useState as useState56 } from "react";
+import { useEffect as useEffect60, useRef as useRef49, useState as useState56 } from "react";
 import { jsx as jsx118, jsxs as jsxs49 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -28577,8 +28618,8 @@ var VideoAppsShowcase = () => {
   const [activeTab, setActiveTab] = useState56(0);
   const [isMuted, setIsMuted] = useState56(true);
   const [isPlaying, setIsPlaying] = useState56(false);
-  const videoRef = useRef48(null);
-  const containerRef = useRef48(null);
+  const videoRef = useRef49(null);
+  const containerRef = useRef49(null);
   useEffect60(() => {
     const video = videoRef.current;
     if (video) {