remotion 4.0.344 → 4.0.345

package/dist/esm/index.mjs

@@ -33,9 +33,10 @@ var Clipper = () => {
 };
 
 // src/enable-sequence-stack-traces.ts
-import React from "react";
+import React2 from "react";
 
 // src/get-remotion-environment.ts
+import React from "react";
 function getNodeEnvString() {
   return ["NOD", "E_EN", "V"].join("");
 }
@@ -51,12 +52,14 @@ var getRemotionEnvironment = () => {
     isStudio,
     isRendering,
     isPlayer,
-    isReadOnlyStudio
+    isReadOnlyStudio,
+    isClientSideRendering: false
   };
 };
+var RemotionEnvironmentContext = React.createContext(null);
 
 // src/enable-sequence-stack-traces.ts
-var originalCreateElement = React.createElement;
+var originalCreateElement = React2.createElement;
 var componentsToAddStacksTo = [];
 var enableSequenceStackTraces = () => {
   if (!getRemotionEnvironment().isStudio) {
@@ -75,7 +78,7 @@ var enableSequenceStackTraces = () => {
       return Reflect.apply(target, thisArg, argArray);
     }
   });
-  React.createElement = proxy;
+  React2.createElement = proxy;
 };
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
@@ -104,7 +107,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.344";
+var VERSION = "4.0.345";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -143,7 +146,7 @@ var Null = () => {
 // src/Sequence.tsx
 import {
   forwardRef as forwardRef2,
-  useContext as useContext10,
+  useContext as useContext11,
   useEffect as useEffect3,
   useMemo as useMemo9,
   useState as useState5
@@ -250,9 +253,9 @@ import { createContext as createContext3 } from "react";
 var SequenceContext = createContext3(null);
 
 // src/SequenceManager.tsx
-import React3, { useCallback, useMemo as useMemo2, useState } from "react";
+import React4, { useCallback, useMemo as useMemo2, useState } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var SequenceManager = React3.createContext({
+var SequenceManager = React4.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -261,7 +264,7 @@ var SequenceManager = React3.createContext({
   },
   sequences: []
 });
-var SequenceVisibilityToggleContext = React3.createContext({
+var SequenceVisibilityToggleContext = React4.createContext({
   hidden: {},
   setHidden: () => {
     throw new Error("SequenceVisibilityToggle not initialized");
@@ -336,17 +339,18 @@ __export(exports_timeline_position_state, {
   TimelineContext: () => TimelineContext,
   SetTimelineContext: () => SetTimelineContext
 });
-import { createContext as createContext8, useContext as useContext5, useMemo as useMemo6 } from "react";
+import { createContext as createContext8, useContext as useContext6, useMemo as useMemo6 } from "react";
 
 // src/use-remotion-environment.ts
-import { useState as useState3 } from "react";
+import { useContext as useContext3, useState as useState3 } from "react";
 var useRemotionEnvironment = () => {
+  const context = useContext3(RemotionEnvironmentContext);
   const [env] = useState3(() => getRemotionEnvironment());
-  return env;
+  return context ?? env;
 };
 
 // src/use-video.ts
-import { useContext as useContext4, useMemo as useMemo5 } from "react";
+import { useContext as useContext5, useMemo as useMemo5 } from "react";
 
 // src/CompositionManagerContext.tsx
 import { createContext as createContext5 } from "react";
@@ -383,7 +387,7 @@ import {
   createContext as createContext7,
   createRef,
   useCallback as useCallback3,
-  useContext as useContext3,
+  useContext as useContext4,
   useEffect as useEffect2,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo4,
@@ -391,7 +395,7 @@ import {
 } from "react";
 
 // src/EditorProps.tsx
-import React4, {
+import React5, {
   createContext as createContext6,
   useCallback as useCallback2,
   useImperativeHandle,
@@ -407,10 +411,10 @@ var EditorPropsContext = createContext6({
     throw new Error("Not implemented");
   }
 });
-var editorPropsProviderRef = React4.createRef();
-var timeValueRef = React4.createRef();
+var editorPropsProviderRef = React5.createRef();
+var timeValueRef = React5.createRef();
 var EditorPropsProvider = ({ children }) => {
-  const [props, setProps] = React4.useState({});
+  const [props, setProps] = React5.useState({});
   const updateProps = useCallback2(({
     defaultProps,
     id,
@@ -770,14 +774,14 @@ var needsResolution = (composition) => {
 var PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
 var ResolveCompositionConfig = ({ children }) => {
   const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext3(CompositionManager);
-  const { fastRefreshes, manualRefreshes } = useContext3(NonceContext);
+  const { compositions, canvasContent, currentCompositionMetadata } = useContext4(CompositionManager);
+  const { fastRefreshes, manualRefreshes } = useContext4(NonceContext);
   if (manualRefreshes) {}
   const selectedComposition = useMemo4(() => {
     return compositions.find((c) => canvasContent && canvasContent.type === "composition" && canvasContent.compositionId === c.id);
   }, [canvasContent, compositions]);
   const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
-  const { props: allEditorProps } = useContext3(EditorPropsContext);
+  const { props: allEditorProps } = useContext4(EditorPropsContext);
   const env = useRemotionEnvironment();
   const inputProps = useMemo4(() => {
     return typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {};
@@ -1021,9 +1025,9 @@ var ResolveCompositionConfig = ({ children }) => {
   });
 };
 var useResolvedVideoConfig = (preferredCompositionId) => {
-  const context = useContext3(ResolveCompositionContext);
-  const { props: allEditorProps } = useContext3(EditorPropsContext);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext3(CompositionManager);
+  const context = useContext4(ResolveCompositionContext);
+  const { props: allEditorProps } = useContext4(EditorPropsContext);
+  const { compositions, canvasContent, currentCompositionMetadata } = useContext4(CompositionManager);
   const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   const compositionId = preferredCompositionId ?? currentComposition;
   const composition = compositions.find((c) => c.id === compositionId);
@@ -1089,7 +1093,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
 
 // src/use-video.ts
 var useVideo = () => {
-  const { canvasContent, compositions, currentCompositionMetadata } = useContext4(CompositionManager);
+  const { canvasContent, compositions, currentCompositionMetadata } = useContext5(CompositionManager);
   const selected = compositions.find((c) => {
     return canvasContent?.type === "composition" && c.id === canvasContent.compositionId;
   });
@@ -1163,7 +1167,7 @@ var getFrameForComposition = (composition) => {
 };
 var useTimelinePosition = () => {
   const videoConfig = useVideo();
-  const state = useContext5(TimelineContext);
+  const state = useContext6(TimelineContext);
   const env = useRemotionEnvironment();
   if (!videoConfig) {
     return typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0;
@@ -1172,17 +1176,17 @@ var useTimelinePosition = () => {
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
 var useTimelineSetFrame = () => {
-  const { setFrame } = useContext5(SetTimelineContext);
+  const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
 };
 var usePlayingState = () => {
-  const { playing, imperativePlaying } = useContext5(TimelineContext);
-  const { setPlaying } = useContext5(SetTimelineContext);
+  const { playing, imperativePlaying } = useContext6(TimelineContext);
+  const { setPlaying } = useContext6(SetTimelineContext);
   return useMemo6(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
 };
 
 // src/use-video-config.ts
-import { useContext as useContext7 } from "react";
+import { useContext as useContext8 } from "react";
 
 // src/CanUseRemotionHooks.tsx
 import { createContext as createContext9 } from "react";
@@ -1196,9 +1200,9 @@ var CanUseRemotionHooksProvider = ({ children }) => {
 };
 
 // src/use-unsafe-video-config.ts
-import { useContext as useContext6, useMemo as useMemo7 } from "react";
+import { useContext as useContext7, useMemo as useMemo7 } from "react";
 var useUnsafeVideoConfig = () => {
-  const context = useContext6(SequenceContext);
+  const context = useContext7(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
@@ -1239,7 +1243,7 @@ var useUnsafeVideoConfig = () => {
 // src/use-video-config.ts
 var useVideoConfig = () => {
   const videoConfig = useUnsafeVideoConfig();
-  const context = useContext7(CanUseRemotionHooks);
+  const context = useContext8(CanUseRemotionHooks);
   const isPlayer = useIsPlayer();
   if (!videoConfig) {
     if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
@@ -1258,12 +1262,12 @@ var useVideoConfig = () => {
 };
 
 // src/freeze.tsx
-import { useContext as useContext9, useMemo as useMemo8 } from "react";
+import { useContext as useContext10, useMemo as useMemo8 } from "react";
 
 // src/use-current-frame.ts
-import { useContext as useContext8 } from "react";
+import { useContext as useContext9 } from "react";
 var useCurrentFrame = () => {
-  const canUseRemotionHooks = useContext8(CanUseRemotionHooks);
+  const canUseRemotionHooks = useContext9(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
     if (env.isPlayer) {
@@ -1272,7 +1276,7 @@ var useCurrentFrame = () => {
     throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
   }
   const frame = useTimelinePosition();
-  const context = useContext8(SequenceContext);
+  const context = useContext9(SequenceContext);
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 };
@@ -1306,8 +1310,8 @@ var Freeze = ({
       return active(frame);
     }
   }, [active, frame]);
-  const timelineContext = useContext9(TimelineContext);
-  const sequenceContext = useContext9(SequenceContext);
+  const timelineContext = useContext10(TimelineContext);
+  const sequenceContext = useContext10(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
   const timelineValue = useMemo8(() => {
     if (!isActive) {
@@ -1348,8 +1352,8 @@ var RegularSequenceRefForwardingFunction = ({
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState5(() => String(Math.random()));
-  const parentSequence = useContext10(SequenceContext);
-  const { rootId } = useContext10(TimelineContext);
+  const parentSequence = useContext11(SequenceContext);
+  const { rootId } = useContext11(TimelineContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
@@ -1374,8 +1378,8 @@ var RegularSequenceRefForwardingFunction = ({
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext10(SequenceManager);
-  const { hidden } = useContext10(SequenceVisibilityToggleContext);
+  const { registerSequence, unregisterSequence } = useContext11(SequenceManager);
+  const { hidden } = useContext11(SequenceVisibilityToggleContext);
   const premounting = useMemo9(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
@@ -1598,6 +1602,9 @@ function cancelRender(err) {
   throw error;
 }
 
+// src/use-delay-render.ts
+import { useCallback as useCallback4 } from "react";
+
 // src/log.ts
 var logLevels = ["trace", "verbose", "info", "warn", "error"];
 var getNumberForLogLevel = (level) => {
@@ -1717,8 +1724,20 @@ var continueRender = (handle) => {
   continueRenderInternal(handle, getRemotionEnvironment());
 };
 
+// src/use-delay-render.ts
+var useDelayRender = () => {
+  const environment = useRemotionEnvironment();
+  const delayRender2 = useCallback4((label, options) => {
+    return delayRenderInternal(environment, label, options);
+  }, [environment]);
+  const continueRender2 = useCallback4((handle) => {
+    continueRenderInternal(handle, environment);
+  }, [environment]);
+  return { delayRender: delayRender2, continueRender: continueRender2 };
+};
+
 // src/animated-image/canvas.tsx
-import React8, { useCallback as useCallback4, useImperativeHandle as useImperativeHandle3, useRef as useRef2 } from "react";
+import React9, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef2 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
@@ -1770,7 +1789,7 @@ var calcArgs = (fit, frameSize, canvasSize) => {
 };
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
   const canvasRef = useRef2(null);
-  const draw = useCallback4((imageData) => {
+  const draw = useCallback5((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -1815,7 +1834,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
     style
   });
 };
-var Canvas = React8.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React9.forwardRef(CanvasRefForwardingFunction);
 
 // src/animated-image/decode-image.ts
 var CACHE_SIZE = 5;
@@ -1989,7 +2008,8 @@ var AnimatedImage = forwardRef3(({
   }, []);
   const resolvedSrc = resolveAnimatedImageSource(src);
   const [imageDecoder, setImageDecoder] = useState6(null);
-  const [decodeHandle] = useState6(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const currentTime = frame / playbackRate / fps;
@@ -2013,15 +2033,15 @@ var AnimatedImage = forwardRef3(({
       initialLoopBehavior
     }).then((d) => {
       setImageDecoder(d);
-      continueRender(decodeHandle);
+      continueRender2(decodeHandle);
     }).catch((err) => {
       if (err.name === "AbortError") {
-        continueRender(decodeHandle);
+        continueRender2(decodeHandle);
         return;
       }
       if (onError) {
         onError?.(err);
-        continueRender(decodeHandle);
+        continueRender2(decodeHandle);
       } else {
         cancelRender(err);
       }
@@ -2029,12 +2049,18 @@ var AnimatedImage = forwardRef3(({
     return () => {
       controller.abort();
     };
-  }, [resolvedSrc, decodeHandle, onError, initialLoopBehavior]);
+  }, [
+    resolvedSrc,
+    decodeHandle,
+    onError,
+    initialLoopBehavior,
+    continueRender2
+  ]);
   useLayoutEffect(() => {
     if (!imageDecoder) {
       return;
     }
-    const delay = delayRender(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
+    const delay = delayRender2(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
     imageDecoder.getFrame(currentTime, loopBehavior).then((videoFrame) => {
       if (mountState.current.isMounted) {
         if (videoFrame === null) {
@@ -2043,16 +2069,24 @@ var AnimatedImage = forwardRef3(({
           ref.current?.draw(videoFrame.frame);
         }
       }
-      continueRender(delay);
+      continueRender2(delay);
     }).catch((err) => {
       if (onError) {
         onError(err);
-        continueRender(delay);
+        continueRender2(delay);
       } else {
         cancelRender(err);
       }
     });
-  }, [currentTime, imageDecoder, loopBehavior, onError, src]);
+  }, [
+    currentTime,
+    imageDecoder,
+    loopBehavior,
+    onError,
+    src,
+    continueRender2,
+    delayRender2
+  ]);
   return /* @__PURE__ */ jsx10(Canvas, {
     ref,
     width,
@@ -2062,12 +2096,12 @@ var AnimatedImage = forwardRef3(({
   });
 });
 // src/Artifact.tsx
-import { useContext as useContext11, useEffect as useEffect5, useState as useState8 } from "react";
+import { useContext as useContext12, useEffect as useEffect5, useState as useState8 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
   createContext as createContext10,
-  useCallback as useCallback5,
+  useCallback as useCallback6,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo10,
   useState as useState7
@@ -2117,13 +2151,13 @@ var RenderAssetManager = createContext10({
 });
 var RenderAssetManagerProvider = ({ children }) => {
   const [renderAssets, setRenderAssets] = useState7([]);
-  const registerRenderAsset = useCallback5((renderAsset) => {
+  const registerRenderAsset = useCallback6((renderAsset) => {
     validateRenderAsset(renderAsset);
     setRenderAssets((assets) => {
       return [...assets, renderAsset];
     });
   }, []);
-  const unregisterRenderAsset = useCallback5((id) => {
+  const unregisterRenderAsset = useCallback6((id) => {
     setRenderAssets((assts) => {
       return assts.filter((a) => a.id !== id);
     });
@@ -2152,7 +2186,7 @@ var RenderAssetManagerProvider = ({ children }) => {
 // src/Artifact.tsx
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext11(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext12(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState8(() => {
@@ -2209,7 +2243,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/Audio.tsx
-import { forwardRef as forwardRef6, useCallback as useCallback10, useContext as useContext24 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext25 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -2241,11 +2275,11 @@ var calculateLoopDuration = ({
 };
 
 // src/loop/index.tsx
-import React9, { createContext as createContext11, useMemo as useMemo11 } from "react";
+import React10, { createContext as createContext11, useMemo as useMemo11 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var LoopContext = createContext11(null);
 var useLoop = () => {
-  return React9.useContext(LoopContext);
+  return React10.useContext(LoopContext);
 };
 var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
   const currentFrame = useCurrentFrame();
@@ -2299,7 +2333,7 @@ var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) =>
 Loop.useLoop = useLoop;
 
 // src/prefetch.ts
-import { useContext as useContext12 } from "react";
+import { useContext as useContext13 } from "react";
 
 // src/playback-logging.ts
 var playbackLogging = ({
@@ -2355,7 +2389,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext12(PreloadContext);
+  const preloads2 = useContext13(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -2669,7 +2703,7 @@ var DurationsContextProvider = ({ children }) => {
 // src/audio/AudioForPreview.tsx
 import {
   forwardRef as forwardRef4,
-  useContext as useContext22,
+  useContext as useContext23,
   useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo20,
@@ -2693,20 +2727,20 @@ var getCrossOriginValue = ({
 
 // src/log-level-context.tsx
 import { createContext as createContext14 } from "react";
-import * as React12 from "react";
+import * as React13 from "react";
 var LogLevelContext = createContext14({
   logLevel: "info",
   mountTime: 0
 });
 var useLogLevel = () => {
-  const { logLevel } = React12.useContext(LogLevelContext);
+  const { logLevel } = React13.useContext(LogLevelContext);
   if (logLevel === null) {
     throw new Error("useLogLevel must be used within a LogLevelProvider");
   }
   return logLevel;
 };
 var useMountTime = () => {
-  const { mountTime } = React12.useContext(LogLevelContext);
+  const { mountTime } = React13.useContext(LogLevelContext);
   if (mountTime === null) {
     throw new Error("useMountTime must be used within a LogLevelProvider");
   }
@@ -2748,14 +2782,14 @@ var random = (seed, dummy) => {
 };
 
 // src/use-amplification.ts
-import { useContext as useContext15, useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
+import { useContext as useContext16, useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
 
 // src/audio/shared-audio-tags.tsx
-import React13, {
+import React14, {
   createContext as createContext15,
   createRef as createRef2,
-  useCallback as useCallback6,
-  useContext as useContext14,
+  useCallback as useCallback7,
+  useContext as useContext15,
   useEffect as useEffect7,
   useMemo as useMemo14,
   useRef as useRef4,
@@ -2922,7 +2956,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
     });
   }, [audioContext, numberOfAudioTags]);
   const takenAudios = useRef4(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback6(() => {
+  const rerenderAudios = useCallback7(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
       const { current } = ref;
@@ -2943,7 +2977,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
       });
     });
   }, [refs]);
-  const registerAudio = useCallback6((options) => {
+  const registerAudio = useCallback7((options) => {
     const { aud, audioId, premounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
@@ -2969,7 +3003,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback6((id) => {
+  const unregisterAudio = useCallback7((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r) => r.id === id);
     if (index === -1) {
@@ -2980,7 +3014,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
     audios.current = audios.current?.filter((a) => a.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback6(({
+  const updateAudio = useCallback7(({
     aud,
     audioId,
     id,
@@ -3009,7 +3043,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
   }, [rerenderAudios]);
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const playAllAudios = useCallback6(() => {
+  const playAllAudios = useCallback7(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
       if (audio?.premounting) {
@@ -3044,7 +3078,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
     updateAudio,
     audioContext
   ]);
-  const resetAudio = useCallback6(() => {
+  const resetAudio = useCallback7(() => {
     takenAudios.current = new Array(numberOfAudioTags).fill(false);
     audios.current = [];
     rerenderAudios();
@@ -3073,12 +3107,12 @@ var useSharedAudio = ({
   audioId,
   premounting
 }) => {
-  const ctx = useContext14(SharedAudioContext);
+  const ctx = useContext15(SharedAudioContext);
   const [elem] = useState10(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting });
     }
-    const el = React13.createRef();
+    const el = React14.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
       audioContext: ctx.audioContext,
       ref: el
@@ -3092,7 +3126,7 @@ var useSharedAudio = ({
       premounting
     };
   });
-  const effectToUse = React13.useInsertionEffect ?? React13.useLayoutEffect;
+  const effectToUse = React14.useInsertionEffect ?? React14.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
@@ -3248,7 +3282,7 @@ var useVolume = ({
   const audioStuffRef = useRef6(null);
   const currentVolumeRef = useRef6(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext15(SharedAudioContext);
+  const sharedAudioContext = useContext16(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -3304,12 +3338,12 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useContext as useContext17, useEffect as useEffect8, useMemo as useMemo15, useState as useState11 } from "react";
+import { useContext as useContext18, useEffect as useEffect8, useMemo as useMemo15, useState as useState11 } from "react";
 
 // src/audio/use-audio-frame.ts
-import { useContext as useContext16 } from "react";
+import { useContext as useContext17 } from "react";
 var useMediaStartsAt = () => {
-  const parentSequence = useContext16(SequenceContext);
+  const parentSequence = useContext17(SequenceContext);
   const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
   return startsAt;
 };
@@ -3384,12 +3418,12 @@ var useMediaInTimeline = ({
   isPostmounting
 }) => {
   const videoConfig = useVideoConfig();
-  const { rootId, audioAndVideoTags } = useContext17(TimelineContext);
-  const parentSequence = useContext17(SequenceContext);
+  const { rootId, audioAndVideoTags } = useContext18(TimelineContext);
+  const parentSequence = useContext18(SequenceContext);
   const actualFrom = parentSequence ? parentSequence.relativeFrom + parentSequence.cumulatedFrom : 0;
-  const { imperativePlaying } = useContext17(TimelineContext);
+  const { imperativePlaying } = useContext18(TimelineContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
   const [initialVolume] = useState11(() => volume);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
@@ -3516,23 +3550,23 @@ var useMediaInTimeline = ({
 
 // src/use-media-playback.ts
 import {
-  useCallback as useCallback9,
-  useContext as useContext20,
+  useCallback as useCallback10,
+  useContext as useContext21,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect5,
   useRef as useRef10
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback8, useMemo as useMemo18, useRef as useRef8 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo18, useRef as useRef8 } from "react";
 
 // src/use-buffer-state.ts
-import { useContext as useContext19, useMemo as useMemo17 } from "react";
+import { useContext as useContext20, useMemo as useMemo17 } from "react";
 
 // src/buffering.tsx
-import React14, {
-  useCallback as useCallback7,
-  useContext as useContext18,
+import React15, {
+  useCallback as useCallback8,
+  useContext as useContext19,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo16,
@@ -3545,7 +3579,7 @@ var useBufferManager = (logLevel, mountTime) => {
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState12([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState12([]);
   const buffering = useRef7(false);
-  const addBlock = useCallback7((block) => {
+  const addBlock = useCallback8((block) => {
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3559,7 +3593,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForBuffering = useCallback7((callback) => {
+  const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -3567,7 +3601,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForResume = useCallback7((callback) => {
+  const listenForResume = useCallback8((callback) => {
     setOnResumeCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -3603,9 +3637,9 @@ var useBufferManager = (logLevel, mountTime) => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React14.createContext(null);
+var BufferingContextReact = React15.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext18(LogLevelContext);
+  const { logLevel, mountTime } = useContext19(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
   return /* @__PURE__ */ jsx16(BufferingContextReact.Provider, {
     value: bufferManager,
@@ -3637,7 +3671,7 @@ var useIsPlayerBuffering = (bufferManager) => {
 
 // src/use-buffer-state.ts
 var useBufferState = () => {
-  const buffer = useContext19(BufferingContextReact);
+  const buffer = useContext20(BufferingContextReact);
   const addBlock = buffer ? buffer.addBlock : null;
   return useMemo17(() => ({
     delayPlayback: () => {
@@ -3667,7 +3701,7 @@ var useBufferUntilFirstFrame = ({
 }) => {
   const bufferingRef = useRef8(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback8((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback9((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -3747,9 +3781,9 @@ var useBufferUntilFirstFrame = ({
 };
 
 // src/media-tag-current-time-timestamp.ts
-import React15 from "react";
+import React16 from "react";
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React15.useRef({
+  const lastUpdate = React16.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -4159,11 +4193,11 @@ var useMediaPlayback = ({
   isPostmounting,
   onAutoPlayError
 }) => {
-  const { playbackRate: globalPlaybackRate } = useContext20(TimelineContext);
+  const { playbackRate: globalPlaybackRate } = useContext21(TimelineContext);
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering = useContext20(BufferingContextReact);
+  const buffering = useContext21(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const lastSeekDueToShift = useRef10(null);
@@ -4174,7 +4208,7 @@ var useMediaPlayback = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isVariableFpsVideoMap = useRef10({});
-  const onVariableFpsVideoDetected = useCallback9(() => {
+  const onVariableFpsVideoDetected = useCallback10(() => {
     if (!src) {
       return;
     }
@@ -4389,7 +4423,7 @@ var useMediaPlayback = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext16, useContext as useContext21, useMemo as useMemo19 } from "react";
+import { createContext as createContext16, useContext as useContext22, useMemo as useMemo19 } from "react";
 var MediaVolumeContext = createContext16({
   mediaMuted: false,
   mediaVolume: 1
@@ -4403,15 +4437,15 @@ var SetMediaVolumeContext = createContext16({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext21(MediaVolumeContext);
-  const { setMediaVolume } = useContext21(SetMediaVolumeContext);
+  const { mediaVolume } = useContext22(MediaVolumeContext);
+  const { setMediaVolume } = useContext22(SetMediaVolumeContext);
   return useMemo19(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
-  const { mediaMuted } = useContext21(MediaVolumeContext);
-  const { setMediaMuted } = useContext21(SetMediaVolumeContext);
+  const { mediaMuted } = useContext22(MediaVolumeContext);
+  const { setMediaMuted } = useContext22(SetMediaVolumeContext);
   return useMemo19(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
@@ -4459,12 +4493,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext22(SequenceVisibilityToggleContext);
+  const { hidden } = useContext23(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext22(SequenceContext);
+  const sequenceContext = useContext23(SequenceContext);
   const [timelineId] = useState14(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
@@ -4502,7 +4536,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     props.muted,
     props.loop
   ]);
-  const context = useContext22(SharedAudioContext);
+  const context = useContext23(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -4584,7 +4618,7 @@ var AudioForPreview = forwardRef4(AudioForDevelopmentForwardRefFunction);
 // src/audio/AudioForRendering.tsx
 import {
   forwardRef as forwardRef5,
-  useContext as useContext23,
+  useContext as useContext24,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect6,
@@ -4615,8 +4649,9 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext23(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext23(RenderAssetManager);
+  const sequenceContext = useContext24(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext24(RenderAssetManager);
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const id = useMemo21(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
@@ -4682,7 +4717,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     if (!needsToRenderAudioTag) {
       return;
     }
-    const newHandle = delayRender("Loading <Audio> duration with src=" + src, {
+    const newHandle = delayRender2("Loading <Audio> duration with src=" + src, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
@@ -4691,24 +4726,26 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
       if (current?.duration) {
         onDuration(current.src, current.duration);
       }
-      continueRender(newHandle);
+      continueRender2(newHandle);
     };
     if (current?.duration) {
       onDuration(current.src, current.duration);
-      continueRender(newHandle);
+      continueRender2(newHandle);
     } else {
       current?.addEventListener("loadedmetadata", didLoad, { once: true });
     }
     return () => {
       current?.removeEventListener("loadedmetadata", didLoad);
-      continueRender(newHandle);
+      continueRender2(newHandle);
     };
   }, [
     src,
     onDuration,
     needsToRenderAudioTag,
     delayRenderRetries,
-    delayRenderTimeoutInMilliseconds
+    delayRenderTimeoutInMilliseconds,
+    continueRender2,
+    delayRender2
   ]);
   if (!needsToRenderAudioTag) {
     return null;
@@ -4724,7 +4761,7 @@ var AudioForRendering = forwardRef5(AudioForRenderingRefForwardingFunction);
 // src/audio/Audio.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioContext = useContext24(SharedAudioContext);
+  const audioContext = useContext25(SharedAudioContext);
   const {
     startFrom,
     endAt,
@@ -4740,12 +4777,12 @@ var AudioRefForwardingFunction = (props, ref) => {
   const { loop, ...propsOtherThanLoop } = props;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext24(DurationsContext);
+  const { durations, setDurations } = useContext25(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback10((e) => {
+  const onError = useCallback11((e) => {
     console.log(e.currentTarget.error);
     const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
     if (loop) {
@@ -4759,7 +4796,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback10((src, durationInSeconds) => {
+  const onDuration = useCallback11((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -4835,11 +4872,11 @@ var AudioRefForwardingFunction = (props, ref) => {
 var Audio = forwardRef6(AudioRefForwardingFunction);
 addSequenceStackTraces(Audio);
 // src/Composition.tsx
-import { Suspense, useContext as useContext26, useEffect as useEffect16 } from "react";
+import { Suspense, useContext as useContext27, useEffect as useEffect16 } from "react";
 import { createPortal } from "react-dom";
 
 // src/Folder.tsx
-import { createContext as createContext17, useContext as useContext25, useEffect as useEffect15, useMemo as useMemo22 } from "react";
+import { createContext as createContext17, useContext as useContext26, useEffect as useEffect15, useMemo as useMemo22 } from "react";
 
 // src/validation/validate-folder-name.ts
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
@@ -4864,8 +4901,8 @@ var FolderContext = createContext17({
   parentName: null
 });
 var Folder = ({ name, children }) => {
-  const parent = useContext25(FolderContext);
-  const { registerFolder, unregisterFolder } = useContext25(CompositionSetters);
+  const parent = useContext26(FolderContext);
+  const { registerFolder, unregisterFolder } = useContext26(CompositionSetters);
   validateFolderName(name);
   const parentNameArr = [parent.parentName, parent.folderName].filter(truthy);
   const parentName = parentNameArr.length === 0 ? null : parentNameArr.join("/");
@@ -4976,7 +5013,7 @@ var portalNode = () => {
 };
 
 // src/use-lazy-component.ts
-import React19, { useMemo as useMemo23 } from "react";
+import React20, { useMemo as useMemo23 } from "react";
 var useLazyComponent = ({
   compProps,
   componentName,
@@ -4990,13 +5027,13 @@ var useLazyComponent = ({
       if (typeof compProps.component === "undefined") {
         throw new Error(`A value of \`undefined\` was passed to the \`component\` prop. Check the value you are passing to the <${componentName}/> component.`);
       }
-      return React19.lazy(() => Promise.resolve({ default: compProps.component }));
+      return React20.lazy(() => Promise.resolve({ default: compProps.component }));
     }
     if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
       if (typeof compProps.lazyComponent === "undefined") {
         throw new Error(`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`);
       }
-      return React19.lazy(compProps.lazyComponent);
+      return React20.lazy(compProps.lazyComponent);
     }
     throw new Error("You must pass either 'component' or 'lazyComponent'");
   }, [compProps.component, compProps.lazyComponent]);
@@ -5029,10 +5066,11 @@ var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
 // src/Composition.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
 var Fallback = () => {
+  const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
   useEffect16(() => {
-    const fallback = delayRender("Waiting for Root component to unsuspend");
-    return () => continueRender(fallback);
-  }, []);
+    const fallback = delayRender2("Waiting for Root component to unsuspend");
+    return () => continueRender2(fallback);
+  }, [continueRender2, delayRender2]);
   return null;
 };
 var InnerComposition = ({
@@ -5045,7 +5083,7 @@ var InnerComposition = ({
   schema,
   ...compProps
 }) => {
-  const compManager = useContext26(CompositionSetters);
+  const compManager = useContext27(CompositionSetters);
   const { registerComposition, unregisterComposition } = compManager;
   const video = useVideo();
   const lazy = useLazyComponent({
@@ -5056,14 +5094,14 @@ var InnerComposition = ({
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
   const environment = useRemotionEnvironment();
-  const canUseComposition = useContext26(CanUseRemotionHooks);
+  const canUseComposition = useContext27(CanUseRemotionHooks);
   if (canUseComposition) {
     if (isPlayer) {
       throw new Error("<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.");
     }
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
-  const { folderName, parentName } = useContext26(FolderContext);
+  const { folderName, parentName } = useContext27(FolderContext);
   useEffect16(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
@@ -5142,7 +5180,7 @@ var InnerComposition = ({
   return null;
 };
 var Composition = (props2) => {
-  const { onlyRenderComposition } = useContext26(CompositionSetters);
+  const { onlyRenderComposition } = useContext27(CompositionSetters);
   if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
     return null;
   }
@@ -5364,7 +5402,7 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback11, useState as useState15 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState15 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
@@ -5373,22 +5411,23 @@ var IFrameRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   ...props2
 }, ref) => {
-  const [handle] = useState15(() => delayRender(`Loading <IFrame> with source ${props2.src}`, {
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  const [handle] = useState15(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback11((e) => {
-    continueRender(handle);
+  const didLoad = useCallback12((e) => {
+    continueRender2(handle);
     onLoad?.(e);
-  }, [handle, onLoad]);
-  const didGetError = useCallback11((e) => {
-    continueRender(handle);
+  }, [handle, onLoad, continueRender2]);
+  const didGetError = useCallback12((e) => {
+    continueRender2(handle);
     if (onError) {
       onError(e);
     } else {
       console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
     }
-  }, [handle, onError]);
+  }, [handle, onError, continueRender2]);
   return /* @__PURE__ */ jsx23("iframe", {
     ...props2,
     ref,
@@ -5400,8 +5439,8 @@ var IFrame = forwardRef7(IFrameRefForwarding);
 // src/Img.tsx
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback12,
-  useContext as useContext27,
+  useCallback as useCallback13,
+  useContext as useContext28,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef13
@@ -5424,7 +5463,7 @@ var ImgRefForwarding = ({
   const imageRef = useRef13(null);
   const errors = useRef13({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext27(SequenceContext);
+  const sequenceContext = useContext28(SequenceContext);
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -5436,7 +5475,7 @@ var ImgRefForwarding = ({
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback12((timeout) => {
+  const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -5453,7 +5492,7 @@ var ImgRefForwarding = ({
       imageRef.current.setAttribute("src", newSrc);
     }, timeout);
   }, []);
-  const didGetError = useCallback12((e) => {
+  const didGetError = useCallback13((e) => {
     if (!errors.current) {
       return;
     }
@@ -5470,6 +5509,7 @@ var ImgRefForwarding = ({
     }
     cancelRender("Error loading image with src: " + imageRef.current?.src);
   }, [maxRetries, onError, retryIn]);
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
@@ -5484,7 +5524,7 @@ var ImgRefForwarding = ({
       if (!current) {
         return;
       }
-      const newHandle = delayRender("Loading <Img> with src=" + actualSrc, {
+      const newHandle = delayRender2("Loading <Img> with src=" + actualSrc, {
         retries: delayRenderRetries ?? undefined,
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
       });
@@ -5494,7 +5534,7 @@ var ImgRefForwarding = ({
       let unmounted = false;
       const onComplete = () => {
         if (unmounted) {
-          continueRender(newHandle);
+          continueRender2(newHandle);
           return;
         }
         if ((errors.current[imageRef.current?.src] ?? 0) > 0) {
@@ -5505,7 +5545,7 @@ var ImgRefForwarding = ({
           onImageFrame?.(current);
         }
         unblock();
-        continueRender(newHandle);
+        continueRender2(newHandle);
       };
       if (!imageRef.current) {
         onComplete();
@@ -5528,7 +5568,7 @@ var ImgRefForwarding = ({
         unmounted = true;
         current.removeEventListener("load", onComplete);
         unblock();
-        continueRender(newHandle);
+        continueRender2(newHandle);
       };
     }, [
       actualSrc,
@@ -5538,7 +5578,9 @@ var ImgRefForwarding = ({
       pauseWhenLoading,
       isPremounting,
       isPostmounting,
-      onImageFrame
+      onImageFrame,
+      continueRender2,
+      delayRender2
     ]);
   }
   const crossOriginValue = getCrossOriginValue({
@@ -5557,15 +5599,15 @@ var Img = forwardRef8(ImgRefForwarding);
 import { createRef as createRef3 } from "react";
 
 // src/CompositionManager.tsx
-import React23, {
-  useCallback as useCallback13,
+import React24, {
+  useCallback as useCallback14,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo24,
   useRef as useRef14,
   useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
-var compositionsRef = React23.createRef();
+var compositionsRef = React24.createRef();
 var CompositionManagerProvider = ({
   children,
   numberOfAudioTags,
@@ -5577,14 +5619,14 @@ var CompositionManagerProvider = ({
   const currentcompositionsRef = useRef14(compositions);
   const [folders, setFolders] = useState16([]);
   const [canvasContent, setCanvasContent] = useState16(null);
-  const updateCompositions = useCallback13((updateComps) => {
+  const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback13((comp) => {
+  const registerComposition = useCallback14((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -5593,12 +5635,12 @@ var CompositionManagerProvider = ({
       return value;
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback13((id) => {
+  const unregisterComposition = useCallback14((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback13((name, parent) => {
+  const registerFolder = useCallback14((name, parent) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -5609,7 +5651,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback13((name, parent) => {
+  const unregisterFolder = useCallback14((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -5620,7 +5662,7 @@ var CompositionManagerProvider = ({
     };
   }, []);
   const composition = compositions.find((c2) => canvasContent?.type === "composition" ? c2.id === canvasContent.compositionId : null);
-  const updateCompositionDefaultProps = useCallback13((id, newDefaultProps) => {
+  const updateCompositionDefaultProps = useCallback14((id, newDefaultProps) => {
     setCompositions((comps) => {
       const updated = comps.map((c2) => {
         if (c2.id === id) {
@@ -5793,11 +5835,12 @@ var RemotionRoot = ({
   const [manualRefreshes, setManualRefreshes] = useState17(0);
   const [playbackRate, setPlaybackRate] = useState17(1);
   const audioAndVideoTags = useRef15([]);
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect8(() => {
       window.remotion_setFrame = (f, composition, attempt) => {
         window.remotion_attempt = attempt;
-        const id = delayRender(`Setting the current frame to ${f}`);
+        const id = delayRender2(`Setting the current frame to ${f}`);
         let asyncUpdate = true;
         setFrame((s) => {
           const currentFrame = s[composition] ?? window.remotion_initialFrame;
@@ -5811,13 +5854,13 @@ var RemotionRoot = ({
           };
         });
         if (asyncUpdate) {
-          requestAnimationFrame(() => continueRender(id));
+          requestAnimationFrame(() => continueRender2(id));
         } else {
-          continueRender(id);
+          continueRender2(id);
         }
       };
       window.remotion_isPlayer = false;
-    }, []);
+    }, [continueRender2, delayRender2]);
   }
   const timelineContextValue = useMemo25(() => {
     return {
@@ -5925,8 +5968,8 @@ var setupEnvVariables = () => {
 };
 
 // src/use-current-scale.ts
-import React25, { createContext as createContext18 } from "react";
-var CurrentScaleContext = React25.createContext(null);
+import React26, { createContext as createContext18 } from "react";
+var CurrentScaleContext = React26.createContext(null);
 var PreviewSizeContext = createContext18({
   setSize: () => {
     return;
@@ -5951,8 +5994,8 @@ var calculateScale = ({
   return Number(previewSize);
 };
 var useCurrentScale = (options) => {
-  const hasContext = React25.useContext(CurrentScaleContext);
-  const zoomContext = React25.useContext(PreviewSizeContext);
+  const hasContext = React26.useContext(CurrentScaleContext);
+  const zoomContext = React26.useContext(PreviewSizeContext);
   const config = useUnsafeVideoConfig();
   const env = useRemotionEnvironment();
   if (hasContext === null || config === null || zoomContext === null) {
@@ -5984,7 +6027,7 @@ var useCurrentScale = (options) => {
 // src/video/VideoForPreview.tsx
 import {
   forwardRef as forwardRef9,
-  useContext as useContext28,
+  useContext as useContext29,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo26,
@@ -6024,7 +6067,7 @@ var useEmitVideoFrame = ({
 // src/video/VideoForPreview.tsx
 import { jsx as jsx27 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext28(SharedAudioContext);
+  const context = useContext29(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -6072,8 +6115,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext28(SequenceContext);
-  const { hidden } = useContext28(SequenceVisibilityToggleContext);
+  const parentSequence = useContext29(SequenceContext);
+  const { hidden } = useContext29(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState18(() => String(Math.random()));
@@ -6263,21 +6306,21 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React27, { useMemo as useMemo27 } from "react";
+import React28, { useMemo as useMemo27 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 function useRemotionContexts() {
-  const compositionManagerCtx = React27.useContext(CompositionManager);
-  const timelineContext = React27.useContext(TimelineContext);
-  const setTimelineContext = React27.useContext(SetTimelineContext);
-  const sequenceContext = React27.useContext(SequenceContext);
-  const nonceContext = React27.useContext(NonceContext);
-  const canUseRemotionHooksContext = React27.useContext(CanUseRemotionHooks);
-  const preloadContext = React27.useContext(PreloadContext);
-  const resolveCompositionContext = React27.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React27.useContext(RenderAssetManager);
-  const sequenceManagerContext = React27.useContext(SequenceManager);
-  const bufferManagerContext = React27.useContext(BufferingContextReact);
-  const logLevelContext = React27.useContext(LogLevelContext);
+  const compositionManagerCtx = React28.useContext(CompositionManager);
+  const timelineContext = React28.useContext(TimelineContext);
+  const setTimelineContext = React28.useContext(SetTimelineContext);
+  const sequenceContext = React28.useContext(SequenceContext);
+  const nonceContext = React28.useContext(NonceContext);
+  const canUseRemotionHooksContext = React28.useContext(CanUseRemotionHooks);
+  const preloadContext = React28.useContext(PreloadContext);
+  const resolveCompositionContext = React28.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React28.useContext(RenderAssetManager);
+  const sequenceManagerContext = React28.useContext(SequenceManager);
+  const bufferManagerContext = React28.useContext(BufferingContextReact);
+  const logLevelContext = React28.useContext(LogLevelContext);
   return useMemo27(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -6424,7 +6467,8 @@ var Internals = {
   useLogLevel,
   playbackLogging,
   timeValueRef,
-  compositionSelectorRef
+  compositionSelectorRef,
+  RemotionEnvironmentContext
 };
 // src/interpolate-colors.ts
 var NUMBER = "[-+]?\\d*\\.?\\d+";
@@ -6803,11 +6847,11 @@ var getOffthreadVideoSource = ({
 import { Children, forwardRef as forwardRef10, useMemo as useMemo28 } from "react";
 
 // src/series/flatten-children.tsx
-import React28 from "react";
+import React29 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React28.Children.toArray(children);
+  const childrenArray = React29.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React28.Fragment) {
+    if (child.type === React29.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -6816,7 +6860,7 @@ var flattenChildren = (children) => {
 };
 
 // src/series/is-inside-series.tsx
-import React29, { createContext as createContext19 } from "react";
+import React30, { createContext as createContext19 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var IsInsideSeriesContext = createContext19(false);
 var IsInsideSeriesContainer = ({ children }) => {
@@ -6832,7 +6876,7 @@ var IsNotInsideSeriesProvider = ({ children }) => {
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React29.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React30.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -7247,26 +7291,14 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React31 from "react";
+import React32 from "react";
 var Still = (props2) => {
   const newProps = {
     ...props2,
     durationInFrames: 1,
     fps: 1
   };
-  return React31.createElement(Composition, newProps);
-};
-// src/use-delay-render.ts
-import { useCallback as useCallback14 } from "react";
-var useDelayRender = () => {
-  const environment = useRemotionEnvironment();
-  const delayRender2 = useCallback14((label2, options) => {
-    return delayRenderInternal(environment, label2, options);
-  }, [environment]);
-  const continueRender2 = useCallback14((handle) => {
-    continueRenderInternal(handle, environment);
-  }, [environment]);
-  return { delayRender: delayRender2, continueRender: continueRender2 };
+  return React32.createElement(Composition, newProps);
 };
 // src/video/OffthreadVideo.tsx
 import { useCallback as useCallback16 } from "react";
@@ -7274,7 +7306,7 @@ import { useCallback as useCallback16 } from "react";
 // src/video/OffthreadVideoForRendering.tsx
 import {
   useCallback as useCallback15,
-  useContext as useContext29,
+  useContext as useContext30,
   useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo29,
@@ -7304,9 +7336,9 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext29(SequenceContext);
+  const sequenceContext = useContext30(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -7380,6 +7412,7 @@ var OffthreadVideoForRendering = ({
     });
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState19(null);
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect9(() => {
     if (!window.remotion_videoEnabled) {
       return;
@@ -7387,7 +7420,7 @@ var OffthreadVideoForRendering = ({
     const cleanup = [];
     setImageSrc(null);
     const controller = new AbortController;
-    const newHandle = delayRender(`Fetching ${actualSrc} from server`, {
+    const newHandle = delayRender2(`Fetching ${actualSrc} from server`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
@@ -7416,11 +7449,11 @@ var OffthreadVideoForRendering = ({
         });
       } catch (err) {
         if (err.message.includes("aborted")) {
-          continueRender(newHandle);
+          continueRender2(newHandle);
           return;
         }
         if (controller.signal.aborted) {
-          continueRender(newHandle);
+          continueRender2(newHandle);
           return;
         }
         if (err.message.includes("Failed to fetch")) {
@@ -7447,7 +7480,9 @@ var OffthreadVideoForRendering = ({
     actualSrc,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
-    onError
+    onError,
+    continueRender2,
+    delayRender2
   ]);
   const onErr = useCallback15(() => {
     if (onError) {
@@ -7467,7 +7502,7 @@ var OffthreadVideoForRendering = ({
   if (!imageSrc || !window.remotion_videoEnabled) {
     return null;
   }
-  continueRender(imageSrc.handle);
+  continueRender2(imageSrc.handle);
   return /* @__PURE__ */ jsx31(Img, {
     src: imageSrc.src,
     className,
@@ -7553,12 +7588,12 @@ var OffthreadVideo = (props2) => {
   });
 };
 // src/video/Video.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext31 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext32 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef11,
-  useContext as useContext30,
+  useContext as useContext31,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect10,
@@ -7712,12 +7747,13 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext30(SequenceContext);
+  const sequenceContext = useContext31(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext31(RenderAssetManager);
   const id = useMemo30(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -7789,21 +7825,21 @@ var VideoForRenderingForwardFunction = ({
       startFrom: -mediaStartsAt,
       fps: videoConfig.fps
     });
-    const handle = delayRender(`Rendering <Video /> with src="${props2.src}" at time ${currentTime}`, {
+    const handle = delayRender2(`Rendering <Video /> with src="${props2.src}" at time ${currentTime}`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
     if (window.process?.env?.NODE_ENV === "test") {
-      continueRender(handle);
+      continueRender2(handle);
       return;
     }
     if (isApproximatelyTheSame(current.currentTime, currentTime)) {
       if (current.readyState >= 2) {
-        continueRender(handle);
+        continueRender2(handle);
         return;
       }
       const loadedDataHandler = () => {
-        continueRender(handle);
+        continueRender2(handle);
       };
       current.addEventListener("loadeddata", loadedDataHandler, { once: true });
       return () => {
@@ -7811,7 +7847,7 @@ var VideoForRenderingForwardFunction = ({
       };
     }
     const endedHandler = () => {
-      continueRender(handle);
+      continueRender2(handle);
     };
     const seek2 = seekToTimeMultipleUntilRight({
       element: current,
@@ -7821,7 +7857,7 @@ var VideoForRenderingForwardFunction = ({
       mountTime
     });
     seek2.prom.then(() => {
-      continueRender(handle);
+      continueRender2(handle);
     });
     current.addEventListener("ended", endedHandler, { once: true });
     const errorHandler = () => {
@@ -7840,7 +7876,7 @@ var VideoForRenderingForwardFunction = ({
       seek2.cancel();
       current.removeEventListener("ended", endedHandler);
       current.removeEventListener("error", errorHandler);
-      continueRender(handle);
+      continueRender2(handle);
     };
   }, [
     volumePropsFrame,
@@ -7853,7 +7889,9 @@ var VideoForRenderingForwardFunction = ({
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     logLevel,
-    mountTime
+    mountTime,
+    continueRender2,
+    delayRender2
   ]);
   const { src } = props2;
   if (environment.isRendering) {
@@ -7861,7 +7899,7 @@ var VideoForRenderingForwardFunction = ({
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
-      const newHandle = delayRender("Loading <Video> duration with src=" + src, {
+      const newHandle = delayRender2("Loading <Video> duration with src=" + src, {
         retries: delayRenderRetries ?? undefined,
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
       });
@@ -7870,19 +7908,26 @@ var VideoForRenderingForwardFunction = ({
         if (current?.duration) {
           onDuration(src, current.duration);
         }
-        continueRender(newHandle);
+        continueRender2(newHandle);
       };
       if (current?.duration) {
         onDuration(src, current.duration);
-        continueRender(newHandle);
+        continueRender2(newHandle);
       } else {
         current?.addEventListener("loadedmetadata", didLoad, { once: true });
       }
       return () => {
         current?.removeEventListener("loadedmetadata", didLoad);
-        continueRender(newHandle);
+        continueRender2(newHandle);
       };
-    }, [src, onDuration, delayRenderRetries, delayRenderTimeoutInMilliseconds]);
+    }, [
+      src,
+      onDuration,
+      delayRenderRetries,
+      delayRenderTimeoutInMilliseconds,
+      continueRender2,
+      delayRender2
+    ]);
   }
   return /* @__PURE__ */ jsx33("video", {
     ref: videoRef,
@@ -7911,7 +7956,7 @@ var VideoForwardingFunction = (props2, ref) => {
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext31(DurationsContext);
+  const { durations, setDurations } = useContext32(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }