remotion 4.0.341 → 4.0.342

package/dist/esm/index.mjs

@@ -104,7 +104,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.341";
+var VERSION = "4.0.342";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -146,7 +146,7 @@ import {
   useContext as useContext10,
   useEffect as useEffect3,
   useMemo as useMemo9,
-  useState as useState4
+  useState as useState5
 } from "react";
 
 // src/AbsoluteFill.tsx
@@ -338,6 +338,13 @@ __export(exports_timeline_position_state, {
 });
 import { createContext as createContext8, useContext as useContext5, useMemo as useMemo6 } from "react";
 
+// src/use-remotion-environment.ts
+import { useState as useState3 } from "react";
+var useRemotionEnvironment = () => {
+  const [env] = useState3(() => getRemotionEnvironment());
+  return env;
+};
+
 // src/use-video.ts
 import { useContext as useContext4, useMemo as useMemo5 } from "react";
 
@@ -380,7 +387,7 @@ import {
   useEffect as useEffect2,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo4,
-  useState as useState3
+  useState as useState4
 } from "react";
 
 // src/EditorProps.tsx
@@ -670,7 +677,8 @@ var resolveVideoConfig = ({
     defaultProps,
     props: originalProps,
     abortSignal: signal,
-    compositionId
+    compositionId,
+    isRendering: getRemotionEnvironment().isRendering
   }) : null;
   if (calculatedProm !== null && typeof calculatedProm === "object" && "then" in calculatedProm) {
     return calculatedProm.then((c) => {
@@ -761,7 +769,7 @@ var needsResolution = (composition) => {
 };
 var PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
 var ResolveCompositionConfig = ({ children }) => {
-  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState3(null);
+  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
   const { compositions, canvasContent, currentCompositionMetadata } = useContext3(CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext3(NonceContext);
   if (manualRefreshes) {}
@@ -770,10 +778,11 @@ var ResolveCompositionConfig = ({ children }) => {
   }, [canvasContent, compositions]);
   const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
   const { props: allEditorProps } = useContext3(EditorPropsContext);
+  const env = useRemotionEnvironment();
   const inputProps = useMemo4(() => {
-    return typeof window === "undefined" || getRemotionEnvironment().isPlayer ? {} : getInputProps() ?? {};
-  }, []);
-  const [resolvedConfigs, setResolvedConfigs] = useState3({});
+    return typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {};
+  }, [env.isPlayer]);
+  const [resolvedConfigs, setResolvedConfigs] = useState4({});
   const selectedEditorProps = useMemo4(() => {
     return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
   }, [allEditorProps, selectedComposition]);
@@ -1021,6 +1030,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
   const selectedEditorProps = useMemo4(() => {
     return composition ? allEditorProps[composition.id] ?? {} : {};
   }, [allEditorProps, composition]);
+  const env = useRemotionEnvironment();
   return useMemo4(() => {
     if (!composition) {
       return null;
@@ -1055,7 +1065,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
           props: {
             ...composition.defaultProps ?? {},
             ...selectedEditorProps ?? {},
-            ...typeof window === "undefined" || getRemotionEnvironment().isPlayer ? {} : getInputProps() ?? {}
+            ...typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {}
           },
           defaultCodec: null,
           defaultOutName: null,
@@ -1068,7 +1078,13 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
       return null;
     }
     return context[composition.id];
-  }, [composition, context, currentCompositionMetadata, selectedEditorProps]);
+  }, [
+    composition,
+    context,
+    currentCompositionMetadata,
+    selectedEditorProps,
+    env.isPlayer
+  ]);
 };
 
 // src/use-video.ts
@@ -1148,10 +1164,11 @@ var getFrameForComposition = (composition) => {
 var useTimelinePosition = () => {
   const videoConfig = useVideo();
   const state = useContext5(TimelineContext);
+  const env = useRemotionEnvironment();
   if (!videoConfig) {
     return typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0;
   }
-  const unclamped = state.frame[videoConfig.id] ?? (getRemotionEnvironment().isPlayer ? 0 : getFrameForComposition(videoConfig.id));
+  const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
 var useTimelineSetFrame = () => {
@@ -1247,8 +1264,9 @@ import { useContext as useContext9, useMemo as useMemo8 } from "react";
 import { useContext as useContext8 } from "react";
 var useCurrentFrame = () => {
   const canUseRemotionHooks = useContext8(CanUseRemotionHooks);
+  const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
-    if (getRemotionEnvironment().isPlayer) {
+    if (env.isPlayer) {
       throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
     }
     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`);
@@ -1329,7 +1347,7 @@ var RegularSequenceRefForwardingFunction = ({
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState4(() => String(Math.random()));
+  const [id] = useState5(() => String(Math.random()));
   const parentSequence = useContext10(SequenceContext);
   const { rootId } = useContext10(TimelineContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
@@ -1390,8 +1408,9 @@ var RegularSequenceRefForwardingFunction = ({
   const timelineClipName = useMemo9(() => {
     return name ?? "";
   }, [name]);
+  const env = useRemotionEnvironment();
   useEffect3(() => {
-    if (!getRemotionEnvironment().isStudio) {
+    if (!env.isStudio) {
       return;
     }
     registerSequence({
@@ -1428,7 +1447,8 @@ var RegularSequenceRefForwardingFunction = ({
     loopDisplay,
     stack,
     premountDisplay,
-    postmountDisplay
+    postmountDisplay,
+    env.isStudio
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -1512,7 +1532,8 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
 };
 var PremountedPostmountedSequence = forwardRef2(PremountedPostmountedSequenceRefForwardingFunction);
 var SequenceRefForwardingFunction = (props, ref) => {
-  if (props.layout !== "none" && !getRemotionEnvironment().isRendering) {
+  const env = useRemotionEnvironment();
+  if (props.layout !== "none" && !env.isRendering) {
     if (props.premountFor || props.postmountFor) {
       return /* @__PURE__ */ jsx8(PremountedPostmountedSequence, {
         ...props,
@@ -1533,7 +1554,7 @@ import {
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect,
   useRef as useRef3,
-  useState as useState5
+  useState as useState6
 } from "react";
 
 // src/cancel-render.ts
@@ -1624,14 +1645,14 @@ var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
 var DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
 var DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";
 var defaultTimeout = 30000;
-var delayRender = (label, options) => {
+var delayRenderInternal = (environment, label, options) => {
   if (typeof label !== "string" && typeof label !== "undefined") {
     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);
   const called = Error().stack?.replace(/^Error/g, "") ?? "";
-  if (getRemotionEnvironment().isRendering) {
+  if (environment.isRendering) {
     const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof window === "undefined" ? defaultTimeout : window.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
     if (typeof window !== "undefined") {
       const retriesLeft = (options?.retries ?? 0) - (window.remotion_attempt - 1);
@@ -1658,7 +1679,10 @@ var delayRender = (label, options) => {
   }
   return handle;
 };
-var continueRender = (handle) => {
+var delayRender = (label, options) => {
+  return delayRenderInternal(getRemotionEnvironment(), label, options);
+};
+var continueRenderInternal = (handle, environment) => {
   if (typeof handle === "undefined") {
     throw new TypeError("The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.");
   }
@@ -1667,7 +1691,7 @@ var continueRender = (handle) => {
   }
   handles = handles.filter((h) => {
     if (h === handle) {
-      if (getRemotionEnvironment().isRendering) {
+      if (environment.isRendering) {
         if (!window.remotion_delayRenderTimeouts[handle]) {
           return false;
         }
@@ -1689,6 +1713,9 @@ var continueRender = (handle) => {
     window.remotion_renderReady = true;
   }
 };
+var continueRender = (handle) => {
+  continueRenderInternal(handle, getRemotionEnvironment());
+};
 
 // src/animated-image/canvas.tsx
 import React8, { useCallback as useCallback4, useImperativeHandle as useImperativeHandle3, useRef as useRef2 } from "react";
@@ -1961,8 +1988,8 @@ var AnimatedImage = forwardRef3(({
     };
   }, []);
   const resolvedSrc = resolveAnimatedImageSource(src);
-  const [imageDecoder, setImageDecoder] = useState5(null);
-  const [decodeHandle] = useState5(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+  const [imageDecoder, setImageDecoder] = useState6(null);
+  const [decodeHandle] = useState6(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const currentTime = frame / playbackRate / fps;
@@ -1976,7 +2003,7 @@ var AnimatedImage = forwardRef3(({
     }
     return c;
   }, []);
-  const [initialLoopBehavior] = useState5(() => loopBehavior);
+  const [initialLoopBehavior] = useState6(() => loopBehavior);
   useEffect4(() => {
     const controller = new AbortController;
     decodeImage({
@@ -2035,7 +2062,7 @@ var AnimatedImage = forwardRef3(({
   });
 });
 // src/Artifact.tsx
-import { useContext as useContext11, useEffect as useEffect5, useState as useState7 } from "react";
+import { useContext as useContext11, useEffect as useEffect5, useState as useState8 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
@@ -2043,7 +2070,7 @@ import {
   useCallback as useCallback5,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo10,
-  useState as useState6
+  useState as useState7
 } from "react";
 
 // src/validation/validate-artifact.ts
@@ -2089,7 +2116,7 @@ var RenderAssetManager = createContext10({
   renderAssets: []
 });
 var RenderAssetManagerProvider = ({ children }) => {
-  const [renderAssets, setRenderAssets] = useState6([]);
+  const [renderAssets, setRenderAssets] = useState7([]);
   const registerRenderAsset = useCallback5((renderAsset) => {
     validateRenderAsset(renderAsset);
     setRenderAssets((assets) => {
@@ -2126,9 +2153,9 @@ var RenderAssetManagerProvider = ({ children }) => {
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content, downloadBehavior }) => {
   const { registerRenderAsset, unregisterRenderAsset } = useContext11(RenderAssetManager);
-  const [env] = useState7(() => getRemotionEnvironment());
+  const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
-  const [id] = useState7(() => {
+  const [id] = useState8(() => {
     return String(Math.random());
   });
   useEffect5(() => {
@@ -2286,7 +2313,7 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext12, useEffect as useEffect6, useState as useState8 } from "react";
+import { createContext as createContext12, useEffect as useEffect6, useState as useState9 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var PreloadContext = createContext12({});
 var preloads = {};
@@ -2296,7 +2323,7 @@ var setPreloads = (updater) => {
   updaters.forEach((u) => u());
 };
 var PrefetchProvider = ({ children }) => {
-  const [_preloads, _setPreloads] = useState8(() => preloads);
+  const [_preloads, _setPreloads] = useState9(() => preloads);
   useEffect6(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
@@ -2647,7 +2674,7 @@ import {
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo20,
   useRef as useRef11,
-  useState as useState13
+  useState as useState14
 } from "react";
 
 // src/get-cross-origin-value.ts
@@ -2732,7 +2759,7 @@ import React13, {
   useEffect as useEffect7,
   useMemo as useMemo14,
   useRef as useRef4,
-  useState as useState9
+  useState as useState10
 } from "react";
 
 // src/play-and-handle-not-allowed-error.ts
@@ -2742,7 +2769,8 @@ var playAndHandleNotAllowedError = ({
   onAutoPlayError,
   logLevel,
   mountTime,
-  reason
+  reason,
+  isPlayer
 }) => {
   const { current } = mediaRef;
   if (!current) {
@@ -2787,7 +2815,7 @@ var playAndHandleNotAllowedError = ({
         return;
       }
       console.log(`The video will be muted and we'll retry playing it.`);
-      if (mediaType === "video" && getRemotionEnvironment().isPlayer) {
+      if (mediaType === "video" && isPlayer) {
         console.log("Use onAutoPlayError() to handle this error yourself.");
       }
       current.muted = true;
@@ -2874,7 +2902,7 @@ var didPropChange = (key, newProp, prevProp) => {
 var SharedAudioContext = createContext15(null);
 var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audioLatencyHint }) => {
   const audios = useRef4([]);
-  const [initialNumberOfAudioTags] = useState9(numberOfAudioTags);
+  const [initialNumberOfAudioTags] = useState10(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.");
   }
@@ -2980,6 +3008,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
     }
   }, [rerenderAudios]);
   const mountTime = useMountTime();
+  const env = useRemotionEnvironment();
   const playAllAudios = useCallback6(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
@@ -2992,11 +3021,12 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audi
         onAutoPlayError: null,
         logLevel,
         mountTime,
-        reason: "playing all audios"
+        reason: "playing all audios",
+        isPlayer: env.isPlayer
       });
     });
     audioContext?.resume();
-  }, [audioContext, logLevel, mountTime, refs]);
+  }, [audioContext, logLevel, mountTime, refs, env.isPlayer]);
   const value = useMemo14(() => {
     return {
       registerAudio,
@@ -3044,7 +3074,7 @@ var useSharedAudio = ({
   premounting
 }) => {
   const ctx = useContext14(SharedAudioContext);
-  const [elem] = useState9(() => {
+  const [elem] = useState10(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting });
     }
@@ -3274,7 +3304,7 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useContext as useContext17, useEffect as useEffect8, useMemo as useMemo15, useState as useState10 } from "react";
+import { useContext as useContext17, useEffect as useEffect8, useMemo as useMemo15, useState as useState11 } from "react";
 
 // src/audio/use-audio-frame.ts
 import { useContext as useContext16 } from "react";
@@ -3360,7 +3390,7 @@ var useMediaInTimeline = ({
   const { imperativePlaying } = useContext17(TimelineContext);
   const startsAt = useMediaStartsAt();
   const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
-  const [initialVolume] = useState10(() => volume);
+  const [initialVolume] = useState11(() => volume);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const nonce = useNonce();
@@ -3383,6 +3413,7 @@ var useMediaInTimeline = ({
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
   }, [initialVolume, mediaType, src, volume]);
+  const env = useRemotionEnvironment();
   useEffect8(() => {
     if (!mediaRef.current) {
       return;
@@ -3390,7 +3421,7 @@ var useMediaInTimeline = ({
     if (!src) {
       throw new Error("No src passed");
     }
-    if (!getRemotionEnvironment().isStudio && window.process?.env?.NODE_ENV !== "test") {
+    if (!env.isStudio && window.process?.env?.NODE_ENV !== "test") {
       return;
     }
     if (!showInTimeline) {
@@ -3440,7 +3471,8 @@ var useMediaInTimeline = ({
     stack,
     showInTimeline,
     premountDisplay,
-    postmountDisplay
+    postmountDisplay,
+    env.isStudio
   ]);
   useEffect8(() => {
     const tag = {
@@ -3458,7 +3490,8 @@ var useMediaInTimeline = ({
           onAutoPlayError,
           logLevel,
           mountTime,
-          reason
+          reason,
+          isPlayer: env.isPlayer
         });
       }
     };
@@ -3476,7 +3509,8 @@ var useMediaInTimeline = ({
     isPremounting,
     isPostmounting,
     logLevel,
-    mountTime
+    mountTime,
+    env.isPlayer
   ]);
 };
 
@@ -3503,13 +3537,13 @@ import React14, {
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo16,
   useRef as useRef7,
-  useState as useState11
+  useState as useState12
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var useBufferManager = (logLevel, mountTime) => {
-  const [blocks, setBlocks] = useState11([]);
-  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState11([]);
-  const [onResumeCallbacks, setOnResumeCallbacks] = useState11([]);
+  const [blocks, setBlocks] = useState12([]);
+  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState12([]);
+  const [onResumeCallbacks, setOnResumeCallbacks] = useState12([]);
   const buffering = useRef7(false);
   const addBlock = useCallback7((block) => {
     setBlocks((b) => [...b, block]);
@@ -3579,7 +3613,7 @@ var BufferingProvider = ({ children }) => {
   });
 };
 var useIsPlayerBuffering = (bufferManager) => {
-  const [isBuffering, setIsBuffering] = useState11(bufferManager.buffering.current);
+  const [isBuffering, setIsBuffering] = useState12(bufferManager.buffering.current);
   useEffect9(() => {
     const onBuffer = () => {
       setIsBuffering(true);
@@ -3749,7 +3783,7 @@ var seek = ({
 };
 
 // src/use-media-buffering.ts
-import { useEffect as useEffect10, useState as useState12 } from "react";
+import { useEffect as useEffect10, useState as useState13 } from "react";
 var useMediaBuffering = ({
   element,
   shouldBuffer,
@@ -3760,7 +3794,7 @@ var useMediaBuffering = ({
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState12(false);
+  const [isBuffering, setIsBuffering] = useState13(false);
   useEffect10(() => {
     let cleanupFns = [];
     const { current } = element;
@@ -4229,6 +4263,7 @@ var useMediaPlayback = ({
     playing,
     isPostmounting
   ]);
+  const env = useRemotionEnvironment();
   useLayoutEffect5(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
@@ -4272,7 +4307,8 @@ var useMediaPlayback = ({
             onAutoPlayError,
             logLevel,
             mountTime,
-            reason: "player is playing but media tag is paused, and just seeked"
+            reason: "player is playing but media tag is paused, and just seeked",
+            isPlayer: env.isPlayer
           });
         }
       }
@@ -4319,7 +4355,8 @@ var useMediaPlayback = ({
         onAutoPlayError,
         logLevel,
         mountTime,
-        reason: `player is playing and ${reason}`
+        reason: `player is playing and ${reason}`,
+        isPlayer: env.isPlayer
       });
       if (!isVariableFpsVideo && playbackRate > 0) {
         bufferUntilFirstFrame(shouldBeTime);
@@ -4346,7 +4383,8 @@ var useMediaPlayback = ({
     isPostmounting,
     pauseWhenBuffering,
     mountTime,
-    mediaTagCurrentTime
+    mediaTagCurrentTime,
+    env.isPlayer
   ]);
 };
 
@@ -4382,7 +4420,7 @@ var useMediaMutedState = () => {
 // src/audio/AudioForPreview.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
 var AudioForDevelopmentForwardRefFunction = (props, ref) => {
-  const [initialShouldPreMountAudioElements] = useState13(props.shouldPreMountAudioTags);
+  const [initialShouldPreMountAudioElements] = useState14(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
     throw new Error("Cannot change the behavior for pre-mounting audio tags dynamically.");
   }
@@ -4427,7 +4465,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }
   const preloadedSrc = usePreload(src);
   const sequenceContext = useContext22(SequenceContext);
-  const [timelineId] = useState13(() => String(Math.random()));
+  const [timelineId] = useState14(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
@@ -4701,7 +4739,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   } = props;
   const { loop, ...propsOtherThanLoop } = props;
   const { fps } = useVideoConfig();
-  const environment = getRemotionEnvironment();
+  const environment = useRemotionEnvironment();
   const { durations, setDurations } = useContext24(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
@@ -5017,7 +5055,7 @@ var InnerComposition = ({
   });
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
-  const environment = getRemotionEnvironment();
+  const environment = useRemotionEnvironment();
   const canUseComposition = useContext26(CanUseRemotionHooks);
   if (canUseComposition) {
     if (isPlayer) {
@@ -5326,7 +5364,7 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback11, useState as useState14 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback11, useState as useState15 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
@@ -5335,7 +5373,7 @@ var IFrameRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   ...props2
 }, ref) => {
-  const [handle] = useState14(() => delayRender(`Loading <IFrame> with source ${props2.src}`, {
+  const [handle] = useState15(() => delayRender(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
@@ -5524,7 +5562,7 @@ import React23, {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo24,
   useRef as useRef14,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var compositionsRef = React23.createRef();
@@ -5535,10 +5573,10 @@ var CompositionManagerProvider = ({
   currentCompositionMetadata,
   audioLatencyHint
 }) => {
-  const [compositions, setCompositions] = useState15([]);
+  const [compositions, setCompositions] = useState16([]);
   const currentcompositionsRef = useRef14(compositions);
-  const [folders, setFolders] = useState15([]);
-  const [canvasContent, setCanvasContent] = useState15(null);
+  const [folders, setFolders] = useState16([]);
+  const [canvasContent, setCanvasContent] = useState16(null);
   const updateCompositions = useCallback13((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
@@ -5736,7 +5774,7 @@ import {
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo25,
   useRef as useRef15,
-  useState as useState16
+  useState as useState17
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var RemotionRoot = ({
@@ -5747,13 +5785,13 @@ var RemotionRoot = ({
   currentCompositionMetadata,
   audioLatencyHint
 }) => {
-  const [remotionRootId] = useState16(() => String(random(null)));
-  const [frame, setFrame] = useState16(() => getInitialFrameState());
-  const [playing, setPlaying] = useState16(false);
+  const [remotionRootId] = useState17(() => String(random(null)));
+  const [frame, setFrame] = useState17(() => getInitialFrameState());
+  const [playing, setPlaying] = useState17(false);
   const imperativePlaying = useRef15(false);
-  const [fastRefreshes, setFastRefreshes] = useState16(0);
-  const [manualRefreshes, setManualRefreshes] = useState16(0);
-  const [playbackRate, setPlaybackRate] = useState16(1);
+  const [fastRefreshes, setFastRefreshes] = useState17(0);
+  const [manualRefreshes, setManualRefreshes] = useState17(0);
+  const [playbackRate, setPlaybackRate] = useState17(1);
   const audioAndVideoTags = useRef15([]);
   if (typeof window !== "undefined") {
     useLayoutEffect8(() => {
@@ -5916,11 +5954,12 @@ var useCurrentScale = (options) => {
   const hasContext = React25.useContext(CurrentScaleContext);
   const zoomContext = React25.useContext(PreviewSizeContext);
   const config = useUnsafeVideoConfig();
+  const env = useRemotionEnvironment();
   if (hasContext === null || config === null || zoomContext === null) {
     if (options?.dontThrowIfOutsideOfRemotion) {
       return 1;
     }
-    if (getRemotionEnvironment().isRendering) {
+    if (env.isRendering) {
       return 1;
     }
     throw new Error([
@@ -5950,7 +5989,7 @@ import {
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo26,
   useRef as useRef16,
-  useState as useState17
+  useState as useState18
 } from "react";
 
 // src/video/emit-video-frame.ts
@@ -6037,7 +6076,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const { hidden } = useContext28(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState17(() => String(Math.random()));
+  const [timelineId] = useState18(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -6097,7 +6136,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState17(() => playbackLogging({
+  useState18(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -7217,17 +7256,29 @@ var Still = (props2) => {
   };
   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 };
+};
 // src/video/OffthreadVideo.tsx
-import { useCallback as useCallback15 } from "react";
+import { useCallback as useCallback16 } from "react";
 
 // src/video/OffthreadVideoForRendering.tsx
 import {
-  useCallback as useCallback14,
+  useCallback as useCallback15,
   useContext as useContext29,
   useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo29,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var OffthreadVideoForRendering = ({
@@ -7328,7 +7379,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState18(null);
+  const [imageSrc, setImageSrc] = useState19(null);
   useLayoutEffect9(() => {
     if (!window.remotion_videoEnabled) {
       return;
@@ -7398,7 +7449,7 @@ var OffthreadVideoForRendering = ({
     delayRenderTimeoutInMilliseconds,
     onError
   ]);
-  const onErr = useCallback14(() => {
+  const onErr = useCallback15(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -7408,7 +7459,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo29(() => {
     return [OFFTHREAD_VIDEO_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback14((img) => {
+  const onImageFrame = useCallback15((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -7442,8 +7493,8 @@ var OffthreadVideo = (props2) => {
     showInTimeline,
     ...otherProps
   } = props2;
-  const environment = getRemotionEnvironment();
-  const onDuration = useCallback15(() => {
+  const environment = useRemotionEnvironment();
+  const onDuration = useCallback16(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -7502,7 +7553,7 @@ var OffthreadVideo = (props2) => {
   });
 };
 // src/video/Video.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback16, useContext as useContext31 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext31 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
@@ -7663,7 +7714,7 @@ var VideoForRenderingForwardFunction = ({
   const videoRef = useRef17(null);
   const sequenceContext = useContext30(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const environment = getRemotionEnvironment();
+  const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
@@ -7859,7 +7910,7 @@ var VideoForwardingFunction = (props2, ref) => {
   } = props2;
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
-  const environment = getRemotionEnvironment();
+  const environment = useRemotionEnvironment();
   const { durations, setDurations } = useContext31(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
@@ -7868,10 +7919,10 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback16((src, durationInSeconds) => {
+  const onDuration = useCallback17((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback16(() => {}, []);
+  const onVideoFrame = useCallback17(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -7974,6 +8025,8 @@ addSequenceStackTraces(Sequence);
 export {
   watchStaticFile,
   useVideoConfig,
+  useRemotionEnvironment,
+  useDelayRender,
   useCurrentScale,
   useCurrentFrame,
   useBufferState,