remotion 4.0.413 → 4.0.415

package/dist/esm/index.mjs

@@ -110,7 +110,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.413";
+var VERSION = "4.0.415";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -150,9 +150,9 @@ var Null = () => {
 import {
   forwardRef as forwardRef2,
   useContext as useContext13,
-  useEffect as useEffect3,
+  useEffect as useEffect2,
   useMemo as useMemo10,
-  useState as useState6
+  useState as useState5
 } from "react";
 
 // src/AbsoluteFill.tsx
@@ -308,11 +308,11 @@ var SequenceManagerProvider = ({ children }) => {
 
 // src/TimelineContext.tsx
 import {
-  createContext as createContext10,
+  createContext as createContext9,
   useLayoutEffect,
   useMemo as useMemo7,
-  useRef as useRef2,
-  useState as useState5
+  useRef,
+  useState as useState3
 } from "react";
 
 // src/random.ts
@@ -359,7 +359,7 @@ __export(exports_timeline_position_state, {
   getInitialFrameState: () => getInitialFrameState,
   getFrameForComposition: () => getFrameForComposition
 });
-import { useContext as useContext6, useMemo as useMemo6 } from "react";
+import { useContext as useContext5, useMemo as useMemo6 } from "react";
 
 // src/use-remotion-environment.ts
 import { useContext as useContext2, useState as useState2 } from "react";
@@ -376,7 +376,7 @@ var useRemotionEnvironment = () => {
 };
 
 // src/use-video.ts
-import { useContext as useContext5, useMemo as useMemo5 } from "react";
+import { useContext as useContext4, useMemo as useMemo5 } from "react";
 
 // src/CompositionManagerContext.tsx
 import { createContext as createContext4 } from "react";
@@ -409,16 +409,7 @@ var CompositionSetters = createContext4({
 });
 
 // src/ResolveCompositionConfig.tsx
-import {
-  createContext as createContext7,
-  createRef,
-  useCallback as useCallback3,
-  useContext as useContext4,
-  useEffect as useEffect2,
-  useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo4,
-  useState as useState4
-} from "react";
+import { createContext as createContext6, createRef, useContext as useContext3, useMemo as useMemo4 } from "react";
 
 // src/EditorProps.tsx
 import React5, {
@@ -597,58 +588,6 @@ var getInputProps = () => {
   return parsed;
 };
 
-// src/nonce.ts
-import { createContext as createContext6, useContext as useContext3, useEffect, useRef, useState as useState3 } from "react";
-var NonceContext = createContext6({
-  getNonce: () => 0,
-  fastRefreshes: 0,
-  manualRefreshes: 0
-});
-var SetNonceContext = createContext6({
-  increaseManualRefreshes: () => {}
-});
-var useNonce = () => {
-  const context = useContext3(NonceContext);
-  const [nonce, setNonce] = useState3(() => context.getNonce());
-  const lastContext = useRef(context);
-  useEffect(() => {
-    if (lastContext.current === context) {
-      return;
-    }
-    lastContext.current = context;
-    setNonce(context.getNonce);
-  }, [context]);
-  return nonce;
-};
-
-// src/codec.ts
-var validCodecs = [
-  "h264",
-  "h265",
-  "vp8",
-  "vp9",
-  "mp3",
-  "aac",
-  "wav",
-  "prores",
-  "h264-mkv",
-  "h264-ts",
-  "gif"
-];
-
-// src/validation/validate-default-codec.ts
-function validateCodec(defaultCodec, location, name) {
-  if (typeof defaultCodec === "undefined") {
-    return;
-  }
-  if (typeof defaultCodec !== "string") {
-    throw new TypeError(`The "${name}" prop ${location} must be a string, but you passed a value of type ${typeof defaultCodec}.`);
-  }
-  if (!validCodecs.includes(defaultCodec)) {
-    throw new Error(`The "${name}" prop ${location} must be one of ${validCodecs.join(", ")}, but you passed ${defaultCodec}.`);
-  }
-}
-
 // src/validation/validate-dimensions.ts
 function validateDimension(amount, nameOfProp, location) {
   if (typeof amount !== "number") {
@@ -707,412 +646,17 @@ function validateFps(fps, location, isGif) {
   }
 }
 
-// src/resolve-video-config.ts
-var validateCalculated = ({
-  calculated,
-  compositionId,
-  compositionFps,
-  compositionHeight,
-  compositionWidth,
-  compositionDurationInFrames
-}) => {
-  const calculateMetadataErrorLocation = `calculated by calculateMetadata() for the composition "${compositionId}"`;
-  const defaultErrorLocation = `of the "<Composition />" component with the id "${compositionId}"`;
-  const width = calculated?.width ?? compositionWidth ?? undefined;
-  validateDimension(width, "width", calculated?.width ? calculateMetadataErrorLocation : defaultErrorLocation);
-  const height = calculated?.height ?? compositionHeight ?? undefined;
-  validateDimension(height, "height", calculated?.height ? calculateMetadataErrorLocation : defaultErrorLocation);
-  const fps = calculated?.fps ?? compositionFps ?? null;
-  validateFps(fps, calculated?.fps ? calculateMetadataErrorLocation : defaultErrorLocation, false);
-  const durationInFrames = calculated?.durationInFrames ?? compositionDurationInFrames ?? null;
-  validateDurationInFrames(durationInFrames, {
-    allowFloats: false,
-    component: `of the "<Composition />" component with the id "${compositionId}"`
-  });
-  const defaultCodec = calculated?.defaultCodec;
-  validateCodec(defaultCodec, calculateMetadataErrorLocation, "defaultCodec");
-  const defaultOutName = calculated?.defaultOutName;
-  const defaultVideoImageFormat = calculated?.defaultVideoImageFormat;
-  const defaultPixelFormat = calculated?.defaultPixelFormat;
-  const defaultProResProfile = calculated?.defaultProResProfile;
-  return {
-    width,
-    height,
-    fps,
-    durationInFrames,
-    defaultCodec,
-    defaultOutName,
-    defaultVideoImageFormat,
-    defaultPixelFormat,
-    defaultProResProfile
-  };
-};
-var resolveVideoConfig = ({
-  calculateMetadata,
-  signal,
-  defaultProps,
-  inputProps: originalProps,
-  compositionId,
-  compositionDurationInFrames,
-  compositionFps,
-  compositionHeight,
-  compositionWidth
-}) => {
-  const calculatedProm = calculateMetadata ? calculateMetadata({
-    defaultProps,
-    props: originalProps,
-    abortSignal: signal,
-    compositionId,
-    isRendering: getRemotionEnvironment().isRendering
-  }) : null;
-  if (calculatedProm !== null && typeof calculatedProm === "object" && "then" in calculatedProm) {
-    return calculatedProm.then((c) => {
-      const {
-        height,
-        width,
-        durationInFrames,
-        fps,
-        defaultCodec,
-        defaultOutName,
-        defaultVideoImageFormat,
-        defaultPixelFormat,
-        defaultProResProfile
-      } = validateCalculated({
-        calculated: c,
-        compositionDurationInFrames,
-        compositionFps,
-        compositionHeight,
-        compositionWidth,
-        compositionId
-      });
-      return {
-        width,
-        height,
-        fps,
-        durationInFrames,
-        id: compositionId,
-        defaultProps: serializeThenDeserializeInStudio(defaultProps),
-        props: serializeThenDeserializeInStudio(c.props ?? originalProps),
-        defaultCodec: defaultCodec ?? null,
-        defaultOutName: defaultOutName ?? null,
-        defaultVideoImageFormat: defaultVideoImageFormat ?? null,
-        defaultPixelFormat: defaultPixelFormat ?? null,
-        defaultProResProfile: defaultProResProfile ?? null
-      };
-    });
-  }
-  const data = validateCalculated({
-    calculated: calculatedProm,
-    compositionDurationInFrames,
-    compositionFps,
-    compositionHeight,
-    compositionWidth,
-    compositionId
-  });
-  if (calculatedProm === null) {
-    return {
-      ...data,
-      id: compositionId,
-      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
-      props: serializeThenDeserializeInStudio(originalProps),
-      defaultCodec: null,
-      defaultOutName: null,
-      defaultVideoImageFormat: null,
-      defaultPixelFormat: null,
-      defaultProResProfile: null
-    };
-  }
-  return {
-    ...data,
-    id: compositionId,
-    defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
-    props: serializeThenDeserializeInStudio(calculatedProm.props ?? originalProps),
-    defaultCodec: calculatedProm.defaultCodec ?? null,
-    defaultOutName: calculatedProm.defaultOutName ?? null,
-    defaultVideoImageFormat: calculatedProm.defaultVideoImageFormat ?? null,
-    defaultPixelFormat: calculatedProm.defaultPixelFormat ?? null,
-    defaultProResProfile: calculatedProm.defaultProResProfile ?? null
-  };
-};
-var resolveVideoConfigOrCatch = (params) => {
-  try {
-    const promiseOrReturnValue = resolveVideoConfig(params);
-    return {
-      type: "success",
-      result: promiseOrReturnValue
-    };
-  } catch (err) {
-    return {
-      type: "error",
-      error: err
-    };
-  }
-};
-
 // src/ResolveCompositionConfig.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var ResolveCompositionContext = createContext7(null);
+var ResolveCompositionContext = createContext6(null);
 var resolveCompositionsRef = createRef();
 var needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
 };
 var PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
-var ResolveCompositionConfigInStudio = ({ children }) => {
-  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
-  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 } = useContext4(EditorPropsContext);
-  const env = useRemotionEnvironment();
-  const inputProps = useMemo4(() => {
-    return typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {};
-  }, [env.isPlayer]);
-  const [resolvedConfigs, setResolvedConfigs] = useState4({});
-  const selectedEditorProps = useMemo4(() => {
-    return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
-  }, [allEditorProps, selectedComposition]);
-  const renderModalProps = useMemo4(() => {
-    return renderModalComposition ? allEditorProps[renderModalComposition.id] ?? {} : {};
-  }, [allEditorProps, renderModalComposition]);
-  const hasResolution = Boolean(currentCompositionMetadata);
-  const doResolution = useCallback3(({
-    calculateMetadata,
-    combinedProps,
-    compositionDurationInFrames,
-    compositionFps,
-    compositionHeight,
-    compositionId,
-    compositionWidth,
-    defaultProps
-  }) => {
-    const controller = new AbortController;
-    if (hasResolution) {
-      return controller;
-    }
-    const { signal } = controller;
-    const result = resolveVideoConfigOrCatch({
-      compositionId,
-      calculateMetadata,
-      inputProps: combinedProps,
-      signal,
-      defaultProps,
-      compositionDurationInFrames,
-      compositionFps,
-      compositionHeight,
-      compositionWidth
-    });
-    if (result.type === "error") {
-      setResolvedConfigs((r) => ({
-        ...r,
-        [compositionId]: {
-          type: "error",
-          error: result.error
-        }
-      }));
-      return controller;
-    }
-    const promOrNot = result.result;
-    if (typeof promOrNot === "object" && "then" in promOrNot) {
-      setResolvedConfigs((r) => {
-        const prev = r[compositionId];
-        if (prev?.type === "success" || prev?.type === "success-and-refreshing") {
-          return {
-            ...r,
-            [compositionId]: {
-              type: "success-and-refreshing",
-              result: prev.result
-            }
-          };
-        }
-        return {
-          ...r,
-          [compositionId]: {
-            type: "loading"
-          }
-        };
-      });
-      promOrNot.then((c) => {
-        if (controller.signal.aborted) {
-          return;
-        }
-        setResolvedConfigs((r) => ({
-          ...r,
-          [compositionId]: {
-            type: "success",
-            result: c
-          }
-        }));
-      }).catch((err) => {
-        if (controller.signal.aborted) {
-          return;
-        }
-        setResolvedConfigs((r) => ({
-          ...r,
-          [compositionId]: {
-            type: "error",
-            error: err
-          }
-        }));
-      });
-    } else {
-      setResolvedConfigs((r) => ({
-        ...r,
-        [compositionId]: {
-          type: "success",
-          result: promOrNot
-        }
-      }));
-    }
-    return controller;
-  }, [hasResolution]);
-  const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
-  useImperativeHandle2(resolveCompositionsRef, () => {
-    return {
-      setCurrentRenderModalComposition: (id) => {
-        setCurrentRenderModalComposition(id);
-      },
-      reloadCurrentlySelectedComposition: () => {
-        if (!currentComposition) {
-          return;
-        }
-        const composition = compositions.find((c) => c.id === currentComposition);
-        if (!composition) {
-          throw new Error(`Could not find composition with id ${currentComposition}`);
-        }
-        const editorProps = allEditorProps[currentComposition] ?? {};
-        const defaultProps = {
-          ...composition.defaultProps ?? {},
-          ...editorProps ?? {}
-        };
-        const props = {
-          ...defaultProps,
-          ...inputProps ?? {}
-        };
-        doResolution({
-          defaultProps,
-          calculateMetadata: composition.calculateMetadata,
-          combinedProps: props,
-          compositionDurationInFrames: composition.durationInFrames ?? null,
-          compositionFps: composition.fps ?? null,
-          compositionHeight: composition.height ?? null,
-          compositionWidth: composition.width ?? null,
-          compositionId: composition.id
-        });
-      }
-    };
-  }, [
-    allEditorProps,
-    compositions,
-    currentComposition,
-    doResolution,
-    inputProps
-  ]);
-  const isTheSame = selectedComposition?.id === renderModalComposition?.id;
-  const currentDefaultProps = useMemo4(() => {
-    return {
-      ...selectedComposition?.defaultProps ?? {},
-      ...selectedEditorProps ?? {}
-    };
-  }, [selectedComposition?.defaultProps, selectedEditorProps]);
-  const originalProps = useMemo4(() => {
-    return {
-      ...currentDefaultProps,
-      ...inputProps ?? {}
-    };
-  }, [currentDefaultProps, inputProps]);
-  const canResolve = selectedComposition && needsResolution(selectedComposition);
-  const shouldIgnoreUpdate = typeof window !== "undefined" && window.remotion_ignoreFastRefreshUpdate && fastRefreshes <= window.remotion_ignoreFastRefreshUpdate;
-  useEffect2(() => {
-    if (shouldIgnoreUpdate) {
-      return;
-    }
-    if (canResolve) {
-      const controller = doResolution({
-        calculateMetadata: selectedComposition.calculateMetadata,
-        combinedProps: originalProps,
-        compositionDurationInFrames: selectedComposition.durationInFrames ?? null,
-        compositionFps: selectedComposition.fps ?? null,
-        compositionHeight: selectedComposition.height ?? null,
-        compositionWidth: selectedComposition.width ?? null,
-        defaultProps: currentDefaultProps,
-        compositionId: selectedComposition.id
-      });
-      return () => {
-        controller.abort();
-      };
-    }
-  }, [
-    canResolve,
-    currentDefaultProps,
-    doResolution,
-    originalProps,
-    selectedComposition?.calculateMetadata,
-    selectedComposition?.durationInFrames,
-    selectedComposition?.fps,
-    selectedComposition?.height,
-    selectedComposition?.id,
-    selectedComposition?.width,
-    shouldIgnoreUpdate
-  ]);
-  useEffect2(() => {
-    if (renderModalComposition && !isTheSame) {
-      const combinedProps = {
-        ...renderModalComposition.defaultProps ?? {},
-        ...renderModalProps ?? {},
-        ...inputProps ?? {}
-      };
-      const controller = doResolution({
-        calculateMetadata: renderModalComposition.calculateMetadata,
-        compositionDurationInFrames: renderModalComposition.durationInFrames ?? null,
-        compositionFps: renderModalComposition.fps ?? null,
-        compositionHeight: renderModalComposition.height ?? null,
-        compositionId: renderModalComposition.id,
-        compositionWidth: renderModalComposition.width ?? null,
-        defaultProps: currentDefaultProps,
-        combinedProps
-      });
-      return () => {
-        controller.abort();
-      };
-    }
-  }, [
-    currentDefaultProps,
-    doResolution,
-    inputProps,
-    isTheSame,
-    renderModalComposition,
-    renderModalProps
-  ]);
-  const resolvedConfigsIncludingStaticOnes = useMemo4(() => {
-    const staticComps = compositions.filter((c) => {
-      return c.calculateMetadata === null;
-    });
-    return {
-      ...resolvedConfigs,
-      ...staticComps.reduce((acc, curr) => {
-        return {
-          ...acc,
-          [curr.id]: {
-            type: "success",
-            result: { ...curr, defaultProps: curr.defaultProps ?? {} }
-          }
-        };
-      }, {})
-    };
-  }, [compositions, resolvedConfigs]);
-  return /* @__PURE__ */ jsx5(ResolveCompositionContext.Provider, {
-    value: resolvedConfigsIncludingStaticOnes,
-    children
-  });
-};
 var useResolvedVideoConfig = (preferredCompositionId) => {
-  const context = useContext4(ResolveCompositionContext);
-  const { props: allEditorProps } = useContext4(EditorPropsContext);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext4(CompositionManager);
+  const context = useContext3(ResolveCompositionContext);
+  const { props: allEditorProps } = useContext3(EditorPropsContext);
+  const { compositions, canvasContent, currentCompositionMetadata } = useContext3(CompositionManager);
   const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   const compositionId = preferredCompositionId ?? currentComposition;
   const composition = compositions.find((c) => c.id === compositionId);
@@ -1182,7 +726,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
 
 // src/use-video.ts
 var useVideo = () => {
-  const { canvasContent, compositions, currentCompositionMetadata } = useContext5(CompositionManager);
+  const { canvasContent, compositions, currentCompositionMetadata } = useContext4(CompositionManager);
   const selected = compositions.find((c) => {
     return canvasContent?.type === "composition" && c.id === canvasContent.compositionId;
   });
@@ -1235,7 +779,7 @@ var getFrameForComposition = (composition) => {
 };
 var useTimelinePosition = () => {
   const videoConfig = useVideo();
-  const state = useContext6(TimelineContext);
+  const state = useContext5(TimelineContext);
   const env = useRemotionEnvironment();
   if (!videoConfig) {
     return typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0;
@@ -1244,17 +788,17 @@ var useTimelinePosition = () => {
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
 var useTimelineSetFrame = () => {
-  const { setFrame } = useContext6(SetTimelineContext);
+  const { setFrame } = useContext5(SetTimelineContext);
   return setFrame;
 };
 var usePlayingState = () => {
-  const { playing, imperativePlaying } = useContext6(TimelineContext);
-  const { setPlaying } = useContext6(SetTimelineContext);
+  const { playing, imperativePlaying } = useContext5(TimelineContext);
+  const { setPlaying } = useContext5(SetTimelineContext);
   return useMemo6(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
 };
 
 // src/use-delay-render.tsx
-import { createContext as createContext9, useCallback as useCallback4, useContext as useContext8 } from "react";
+import { createContext as createContext8, useCallback as useCallback3, useContext as useContext7 } from "react";
 
 // src/cancel-render.ts
 var getErrorStackWithMessage = (error) => {
@@ -1472,9 +1016,9 @@ var continueRender = (handle) => {
 };
 
 // src/log-level-context.tsx
-import { createContext as createContext8 } from "react";
+import { createContext as createContext7 } from "react";
 import * as React6 from "react";
-var LogLevelContext = createContext8({
+var LogLevelContext = createContext7({
   logLevel: "info",
   mountTime: 0
 });
@@ -1494,12 +1038,12 @@ var useMountTime = () => {
 };
 
 // src/use-delay-render.tsx
-var DelayRenderContextType = createContext9(null);
+var DelayRenderContextType = createContext8(null);
 var useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext8(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
+  const scope = useContext7(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
   const logLevel = useLogLevel();
-  const delayRender2 = useCallback4((label, options) => {
+  const delayRender2 = useCallback3((label, options) => {
     if (!scope) {
       return Math.random();
     }
@@ -1510,7 +1054,7 @@ var useDelayRender = () => {
       options: options ?? {}
     });
   }, [environment, scope]);
-  const continueRender2 = useCallback4((handle) => {
+  const continueRender2 = useCallback3((handle) => {
     if (!scope) {
       return;
     }
@@ -1521,15 +1065,15 @@ var useDelayRender = () => {
       logLevel
     });
   }, [environment, logLevel, scope]);
-  const cancelRender2 = useCallback4((err) => {
+  const cancelRender2 = useCallback3((err) => {
     return cancelRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), err);
   }, [scope]);
   return { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 };
 };
 
 // src/TimelineContext.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var SetTimelineContext = createContext10({
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SetTimelineContext = createContext9({
   setFrame: () => {
     throw new Error("default");
   },
@@ -1537,7 +1081,7 @@ var SetTimelineContext = createContext10({
     throw new Error("default");
   }
 });
-var TimelineContext = createContext10({
+var TimelineContext = createContext9({
   frame: {},
   playing: false,
   playbackRate: 1,
@@ -1551,12 +1095,12 @@ var TimelineContext = createContext10({
   audioAndVideoTags: { current: [] }
 });
 var TimelineContextProvider = ({ children, frameState }) => {
-  const [playing, setPlaying] = useState5(false);
-  const imperativePlaying = useRef2(false);
-  const [playbackRate, setPlaybackRate] = useState5(1);
-  const audioAndVideoTags = useRef2([]);
-  const [remotionRootId] = useState5(() => String(random(null)));
-  const [_frame, setFrame] = useState5(() => getInitialFrameState());
+  const [playing, setPlaying] = useState3(false);
+  const imperativePlaying = useRef(false);
+  const [playbackRate, setPlaybackRate] = useState3(1);
+  const audioAndVideoTags = useRef([]);
+  const [remotionRootId] = useState3(() => String(random(null)));
+  const [_frame, setFrame] = useState3(() => getInitialFrameState());
   const frame = frameState ?? _frame;
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
@@ -1602,24 +1146,43 @@ var TimelineContextProvider = ({ children, frameState }) => {
       setPlaying
     };
   }, []);
-  return /* @__PURE__ */ jsx6(TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx5(TimelineContext.Provider, {
     value: timelineContextValue,
-    children: /* @__PURE__ */ jsx6(SetTimelineContext.Provider, {
+    children: /* @__PURE__ */ jsx5(SetTimelineContext.Provider, {
       value: setTimelineContextValue,
       children
     })
   });
 };
 
+// src/nonce.ts
+import { createContext as createContext10, useContext as useContext8, useEffect, useRef as useRef2, useState as useState4 } from "react";
+var NonceContext = createContext10({
+  getNonce: () => 0
+});
+var useNonce = () => {
+  const context = useContext8(NonceContext);
+  const [nonce, setNonce] = useState4(() => context.getNonce());
+  const lastContext = useRef2(context);
+  useEffect(() => {
+    if (lastContext.current === context) {
+      return;
+    }
+    lastContext.current = context;
+    setNonce(context.getNonce);
+  }, [context]);
+  return nonce;
+};
+
 // src/use-video-config.ts
 import { useContext as useContext10 } from "react";
 
 // src/CanUseRemotionHooks.tsx
 import { createContext as createContext11 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var CanUseRemotionHooks = createContext11(false);
 var CanUseRemotionHooksProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx7(CanUseRemotionHooks.Provider, {
+  return /* @__PURE__ */ jsx6(CanUseRemotionHooks.Provider, {
     value: true,
     children
   });
@@ -1710,7 +1273,7 @@ var useCurrentFrame = () => {
 };
 
 // src/freeze.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Freeze = ({
   frame: frameToFreeze,
   children,
@@ -1768,9 +1331,9 @@ var Freeze = ({
       cumulatedFrom: 0
     };
   }, [sequenceContext, isActive]);
-  return /* @__PURE__ */ jsx8(TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx7(TimelineContext.Provider, {
     value: timelineValue,
-    children: /* @__PURE__ */ jsx8(SequenceContext.Provider, {
+    children: /* @__PURE__ */ jsx7(SequenceContext.Provider, {
       value: newSequenceContext,
       children
     })
@@ -1778,7 +1341,7 @@ var Freeze = ({
 };
 
 // src/Sequence.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
   durationInFrames = Infinity,
@@ -1794,7 +1357,7 @@ var RegularSequenceRefForwardingFunction = ({
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState6(() => String(Math.random()));
+  const [id] = useState5(() => String(Math.random()));
   const parentSequence = useContext13(SequenceContext);
   const { rootId } = useContext13(TimelineContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
@@ -1860,7 +1423,7 @@ var RegularSequenceRefForwardingFunction = ({
     return name ?? "";
   }, [name]);
   const env = useRemotionEnvironment();
-  useEffect3(() => {
+  useEffect2(() => {
     if (!env.isStudio) {
       return;
     }
@@ -1919,9 +1482,9 @@ var RegularSequenceRefForwardingFunction = ({
   if (isSequenceHidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx9(SequenceContext.Provider, {
+  return /* @__PURE__ */ jsx8(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx9(AbsoluteFill, {
+    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx8(AbsoluteFill, {
       ref,
       style: defaultStyle,
       className: other.className,
@@ -1965,10 +1528,10 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     styleWhilePremounted,
     styleWhilePostmounted
   ]);
-  return /* @__PURE__ */ jsx9(Freeze, {
+  return /* @__PURE__ */ jsx8(Freeze, {
     frame: freezeFrame,
     active: isFreezingActive,
-    children: /* @__PURE__ */ jsx9(Sequence, {
+    children: /* @__PURE__ */ jsx8(Sequence, {
       ref,
       from,
       durationInFrames,
@@ -1986,13 +1549,13 @@ var SequenceRefForwardingFunction = (props, ref) => {
   const env = useRemotionEnvironment();
   if (props.layout !== "none" && !env.isRendering) {
     if (props.premountFor || props.postmountFor) {
-      return /* @__PURE__ */ jsx9(PremountedPostmountedSequence, {
+      return /* @__PURE__ */ jsx8(PremountedPostmountedSequence, {
         ...props,
         ref
       });
     }
   }
-  return /* @__PURE__ */ jsx9(RegularSequence, {
+  return /* @__PURE__ */ jsx8(RegularSequence, {
     ...props,
     ref
   });
@@ -2001,16 +1564,16 @@ var Sequence = forwardRef2(SequenceRefForwardingFunction);
 // src/animated-image/AnimatedImage.tsx
 import {
   forwardRef as forwardRef3,
-  useEffect as useEffect4,
-  useImperativeHandle as useImperativeHandle4,
+  useEffect as useEffect3,
+  useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef4,
-  useState as useState7
+  useState as useState6
 } from "react";
 
 // src/animated-image/canvas.tsx
-import React11, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef3 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import React11, { useCallback as useCallback4, useImperativeHandle as useImperativeHandle2, useRef as useRef3 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -2061,7 +1624,7 @@ var calcArgs = (fit, frameSize, canvasSize) => {
 };
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
   const canvasRef = useRef3(null);
-  const draw = useCallback5((imageData) => {
+  const draw = useCallback4((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -2082,7 +1645,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
       height: canvasHeight
     }));
   }, [fit, height, width]);
-  useImperativeHandle3(ref, () => {
+  useImperativeHandle2(ref, () => {
     return {
       draw,
       getCanvas: () => {
@@ -2100,7 +1663,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
       }
     };
   }, [draw]);
-  return /* @__PURE__ */ jsx10("canvas", {
+  return /* @__PURE__ */ jsx9("canvas", {
     ref: canvasRef,
     className,
     style
@@ -2259,7 +1822,7 @@ var resolveAnimatedImageSource = (src) => {
 };
 
 // src/animated-image/AnimatedImage.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var AnimatedImage = forwardRef3(({
   src,
   width,
@@ -2271,7 +1834,7 @@ var AnimatedImage = forwardRef3(({
   ...props
 }, canvasRef) => {
   const mountState = useRef4({ isMounted: true });
-  useEffect4(() => {
+  useEffect3(() => {
     const { current } = mountState;
     current.isMounted = true;
     return () => {
@@ -2279,24 +1842,24 @@ var AnimatedImage = forwardRef3(({
     };
   }, []);
   const resolvedSrc = resolveAnimatedImageSource(src);
-  const [imageDecoder, setImageDecoder] = useState7(null);
+  const [imageDecoder, setImageDecoder] = useState6(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [decodeHandle] = useState7(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+  const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const currentTime = frame / playbackRate / fps;
   const currentTimeRef = useRef4(currentTime);
   currentTimeRef.current = currentTime;
   const ref = useRef4(null);
-  useImperativeHandle4(canvasRef, () => {
+  useImperativeHandle3(canvasRef, () => {
     const c = ref.current?.getCanvas();
     if (!c) {
       throw new Error("Canvas ref is not set");
     }
     return c;
   }, []);
-  const [initialLoopBehavior] = useState7(() => loopBehavior);
-  useEffect4(() => {
+  const [initialLoopBehavior] = useState6(() => loopBehavior);
+  useEffect3(() => {
     const controller = new AbortController;
     decodeImage({
       resolvedSrc,
@@ -2359,7 +1922,7 @@ var AnimatedImage = forwardRef3(({
     continueRender2,
     delayRender2
   ]);
-  return /* @__PURE__ */ jsx11(Canvas, {
+  return /* @__PURE__ */ jsx10(Canvas, {
     ref,
     width,
     height,
@@ -2368,17 +1931,17 @@ var AnimatedImage = forwardRef3(({
   });
 });
 // src/Artifact.tsx
-import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useState as useState9 } from "react";
+import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
   createContext as createContext12,
-  useCallback as useCallback6,
-  useImperativeHandle as useImperativeHandle5,
+  useCallback as useCallback5,
+  useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo11,
   useRef as useRef5,
-  useState as useState8
+  useState as useState7
 } from "react";
 
 // src/validation/validate-artifact.ts
@@ -2413,7 +1976,7 @@ var validateRenderAsset = (artifact) => {
 };
 
 // src/RenderAssetManager.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var RenderAssetManager = createContext12({
   registerRenderAsset: () => {
     return;
@@ -2424,15 +1987,15 @@ var RenderAssetManager = createContext12({
   renderAssets: []
 });
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
-  const [renderAssets, setRenderAssets] = useState8([]);
+  const [renderAssets, setRenderAssets] = useState7([]);
   const renderAssetsRef = useRef5([]);
-  const registerRenderAsset = useCallback6((renderAsset) => {
+  const registerRenderAsset = useCallback5((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
     setRenderAssets(renderAssetsRef.current);
   }, []);
   if (collectAssets) {
-    useImperativeHandle5(collectAssets, () => {
+    useImperativeHandle4(collectAssets, () => {
       return {
         collectAssets: () => {
           const assets = renderAssetsRef.current;
@@ -2443,7 +2006,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }, []);
   }
-  const unregisterRenderAsset = useCallback6((id) => {
+  const unregisterRenderAsset = useCallback5((id) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a) => a.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
@@ -2464,7 +2027,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       renderAssets
     };
   }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-  return /* @__PURE__ */ jsx12(RenderAssetManager.Provider, {
+  return /* @__PURE__ */ jsx11(RenderAssetManager.Provider, {
     value: contextValue,
     children
   });
@@ -2476,7 +2039,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
   const { registerRenderAsset, unregisterRenderAsset } = useContext14(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
-  const [id] = useState9(() => {
+  const [id] = useState8(() => {
     return String(Math.random());
   });
   useLayoutEffect4(() => {
@@ -2530,7 +2093,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/Audio.tsx
-import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext27 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback10, useContext as useContext27 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -2563,7 +2126,7 @@ var calculateMediaDuration = ({
 
 // src/loop/index.tsx
 import React12, { createContext as createContext13, useMemo as useMemo12 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var LoopContext = createContext13(null);
 var useLoop = () => {
   return React12.useContext(LoopContext);
@@ -2604,9 +2167,9 @@ var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) =>
       durationInFrames
     };
   }, [currentFrame, durationInFrames]);
-  return /* @__PURE__ */ jsx13(LoopContext.Provider, {
+  return /* @__PURE__ */ jsx12(LoopContext.Provider, {
     value: loopContext,
-    children: /* @__PURE__ */ jsx13(Sequence, {
+    children: /* @__PURE__ */ jsx12(Sequence, {
       durationInFrames,
       from,
       name: name ?? "<Loop>",
@@ -2634,8 +2197,8 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext14, useEffect as useEffect5, useState as useState10 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { createContext as createContext14, useEffect as useEffect4, useState as useState9 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var PreloadContext = createContext14({});
 var preloads = {};
 var updaters = [];
@@ -2644,8 +2207,8 @@ var setPreloads = (updater) => {
   updaters.forEach((u) => u());
 };
 var PrefetchProvider = ({ children }) => {
-  const [_preloads, _setPreloads] = useState10(() => preloads);
-  useEffect5(() => {
+  const [_preloads, _setPreloads] = useState9(() => preloads);
+  useEffect4(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
     };
@@ -2654,7 +2217,7 @@ var PrefetchProvider = ({ children }) => {
       updaters = updaters.filter((u) => u !== updaterFunction);
     };
   }, []);
-  return /* @__PURE__ */ jsx14(PreloadContext.Provider, {
+  return /* @__PURE__ */ jsx13(PreloadContext.Provider, {
     value: _preloads,
     children
   });
@@ -2950,7 +2513,7 @@ var resolveTrimProps = ({
 
 // src/video/duration-state.tsx
 import { createContext as createContext15, useMemo as useMemo13, useReducer } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
     case "got-duration": {
@@ -2981,7 +2544,7 @@ var DurationsContextProvider = ({ children }) => {
       setDurations
     };
   }, [durations]);
-  return /* @__PURE__ */ jsx15(DurationsContext.Provider, {
+  return /* @__PURE__ */ jsx14(DurationsContext.Provider, {
     value,
     children
   });
@@ -2991,11 +2554,11 @@ var DurationsContextProvider = ({ children }) => {
 import React18, {
   forwardRef as forwardRef4,
   useContext as useContext25,
-  useEffect as useEffect12,
-  useImperativeHandle as useImperativeHandle6,
+  useEffect as useEffect11,
+  useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo21,
   useRef as useRef13,
-  useState as useState15
+  useState as useState14
 } from "react";
 
 // src/get-cross-origin-value.ts
@@ -3023,11 +2586,11 @@ import { useContext as useContext17, useLayoutEffect as useLayoutEffect5, useRef
 import React15, {
   createContext as createContext16,
   createRef as createRef2,
-  useCallback as useCallback7,
+  useCallback as useCallback6,
   useContext as useContext16,
   useMemo as useMemo15,
   useRef as useRef6,
-  useState as useState11
+  useState as useState10
 } from "react";
 
 // src/play-and-handle-not-allowed-error.ts
@@ -3163,7 +2726,7 @@ var useSingletonAudioContext = ({
 };
 
 // src/audio/shared-audio-tags.tsx
-import { jsx as jsx16, jsxs } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs } from "react/jsx-runtime";
 var EMPTY_AUDIO = "data:audio/mp3;base64,/+MYxAAJcAV8AAgAABn//////+/gQ5BAMA+D4Pg+BAQBAEAwD4Pg+D4EBAEAQDAPg++hYBH///hUFQVBUFREDQNHmf///////+MYxBUGkAGIMAAAAP/29Xt6lUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDUAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";
 var compareProps = (obj1, obj2) => {
   const keysA = Object.keys(obj1).sort();
@@ -3193,7 +2756,7 @@ var didPropChange = (key, newProp, prevProp) => {
 var SharedAudioContext = createContext16(null);
 var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, audioEnabled }) => {
   const audios = useRef6([]);
-  const [initialNumberOfAudioTags] = useState11(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.");
   }
@@ -3227,7 +2790,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     };
   }, [refs]);
   const takenAudios = useRef6(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback7(() => {
+  const rerenderAudios = useCallback6(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
       const { current } = ref;
@@ -3248,7 +2811,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       });
     });
   }, [refs]);
-  const registerAudio = useCallback7((options) => {
+  const registerAudio = useCallback6((options) => {
     const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
@@ -3277,7 +2840,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback7((id) => {
+  const unregisterAudio = useCallback6((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r) => r.id === id);
     if (index === -1) {
@@ -3288,7 +2851,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     audios.current = audios.current?.filter((a) => a.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback7(({
+  const updateAudio = useCallback6(({
     aud,
     audioId,
     id,
@@ -3324,7 +2887,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
   }, [rerenderAudios]);
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const playAllAudios = useCallback7(() => {
+  const playAllAudios = useCallback6(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
       if (audio?.premounting) {
@@ -3363,7 +2926,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     value,
     children: [
       refs.map(({ id, ref }) => {
-        return /* @__PURE__ */ jsx16("audio", {
+        return /* @__PURE__ */ jsx15("audio", {
           ref,
           preload: "metadata",
           src: EMPTY_AUDIO
@@ -3380,7 +2943,7 @@ var useSharedAudio = ({
   postmounting
 }) => {
   const ctx = useContext16(SharedAudioContext);
-  const [elem] = useState11(() => {
+  const [elem] = useState10(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting, postmounting });
     }
@@ -3615,7 +3178,7 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useContext as useContext19, useEffect as useEffect6, useMemo as useMemo16, useState as useState12 } from "react";
+import { useContext as useContext19, useEffect as useEffect5, useMemo as useMemo16, useState as useState11 } from "react";
 
 // src/audio/use-audio-frame.ts
 import { useContext as useContext18 } from "react";
@@ -3693,7 +3256,7 @@ var useBasicMediaInTimeline = ({
   const startsAt = useMediaStartsAt();
   const parentSequence = useContext19(SequenceContext);
   const videoConfig = useVideoConfig();
-  const [initialVolume] = useState12(() => volume);
+  const [initialVolume] = useState11(() => volume);
   const mediaDuration = calculateMediaDuration({
     mediaDurationInFrames: videoConfig.durationInFrames,
     playbackRate,
@@ -3713,7 +3276,7 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, startsAt, volume, mediaVolume]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       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`);
     }
@@ -3767,7 +3330,7 @@ var useMediaInTimeline = ({
     trimBefore: undefined,
     playbackRate
   });
-  useEffect6(() => {
+  useEffect5(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -3826,38 +3389,38 @@ var useMediaInTimeline = ({
 
 // src/use-media-playback.ts
 import {
-  useCallback as useCallback10,
+  useCallback as useCallback9,
   useContext as useContext22,
-  useEffect as useEffect10,
+  useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef12
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback9, useMemo as useMemo19, useRef as useRef10 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo19, useRef as useRef10 } from "react";
 
 // src/use-buffer-state.ts
 import { useContext as useContext21, useMemo as useMemo18 } from "react";
 
 // src/buffering.tsx
 import React16, {
-  useCallback as useCallback8,
+  useCallback as useCallback7,
   useContext as useContext20,
-  useEffect as useEffect7,
+  useEffect as useEffect6,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo17,
   useRef as useRef9,
-  useState as useState13
+  useState as useState12
 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var useBufferManager = (logLevel, mountTime) => {
-  const [blocks, setBlocks] = useState13([]);
-  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
-  const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const [blocks, setBlocks] = useState12([]);
+  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState12([]);
+  const [onResumeCallbacks, setOnResumeCallbacks] = useState12([]);
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
   const buffering = useRef9(false);
-  const addBlock = useCallback8((block) => {
+  const addBlock = useCallback7((block) => {
     if (rendering) {
       return {
         unblock: () => {
@@ -3878,7 +3441,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, [rendering]);
-  const listenForBuffering = useCallback8((callback) => {
+  const listenForBuffering = useCallback7((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -3886,7 +3449,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForResume = useCallback8((callback) => {
+  const listenForResume = useCallback7((callback) => {
     setOnResumeCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -3894,7 +3457,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect7(() => {
+  useEffect6(() => {
     if (rendering) {
       return;
     }
@@ -3932,14 +3495,14 @@ var BufferingContextReact = React16.createContext(null);
 var BufferingProvider = ({ children }) => {
   const { logLevel, mountTime } = useContext20(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
-  return /* @__PURE__ */ jsx17(BufferingContextReact.Provider, {
+  return /* @__PURE__ */ jsx16(BufferingContextReact.Provider, {
     value: bufferManager,
     children
   });
 };
 var useIsPlayerBuffering = (bufferManager) => {
-  const [isBuffering, setIsBuffering] = useState13(bufferManager.buffering.current);
-  useEffect7(() => {
+  const [isBuffering, setIsBuffering] = useState12(bufferManager.buffering.current);
+  useEffect6(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -3992,7 +3555,7 @@ var useBufferUntilFirstFrame = ({
 }) => {
   const bufferingRef = useRef10(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback9((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback8((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -4108,7 +3671,7 @@ var seek = ({
 };
 
 // src/use-media-buffering.ts
-import { useEffect as useEffect8, useState as useState14 } from "react";
+import { useEffect as useEffect7, useState as useState13 } from "react";
 var useMediaBuffering = ({
   element,
   shouldBuffer,
@@ -4119,8 +3682,8 @@ var useMediaBuffering = ({
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState14(false);
-  useEffect8(() => {
+  const [isBuffering, setIsBuffering] = useState13(false);
+  useEffect7(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -4248,7 +3811,7 @@ var useMediaBuffering = ({
 };
 
 // src/use-request-video-callback-time.ts
-import { useEffect as useEffect9, useRef as useRef11 } from "react";
+import { useEffect as useEffect8, useRef as useRef11 } from "react";
 var useRequestVideoCallbackTime = ({
   mediaRef,
   mediaType,
@@ -4256,7 +3819,7 @@ var useRequestVideoCallbackTime = ({
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef11(null);
-  useEffect9(() => {
+  useEffect8(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -4499,7 +4062,7 @@ var useMediaPlayback = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isVariableFpsVideoMap = useRef12({});
-  const onVariableFpsVideoDetected = useCallback10(() => {
+  const onVariableFpsVideoDetected = useCallback9(() => {
     if (!src) {
       return;
     }
@@ -4550,7 +4113,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect10(() => {
+  useEffect9(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -4595,7 +4158,7 @@ var useMediaPlayback = ({
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect10(() => {
+  useEffect9(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -4714,7 +4277,7 @@ var useMediaPlayback = ({
 };
 
 // src/use-media-tag.ts
-import { useContext as useContext23, useEffect as useEffect11 } from "react";
+import { useContext as useContext23, useEffect as useEffect10 } from "react";
 var useMediaTag = ({
   mediaRef,
   id,
@@ -4727,7 +4290,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect11(() => {
+  useEffect10(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -4804,9 +4367,9 @@ var warnAboutTooHighVolume = (volume) => {
 };
 
 // src/audio/AudioForPreview.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var AudioForDevelopmentForwardRefFunction = (props, ref) => {
-  const [initialShouldPreMountAudioElements] = useState15(props.shouldPreMountAudioTags);
+  const [initialShouldPreMountAudioElements] = useState14(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
     throw new Error("Cannot change the behavior for pre-mounting audio tags dynamically.");
   }
@@ -4851,7 +4414,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }
   const preloadedSrc = usePreload(src);
   const sequenceContext = useContext25(SequenceContext);
-  const [timelineId] = useState15(() => String(Math.random()));
+  const [timelineId] = useState14(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
@@ -4949,12 +4512,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
       });
     };
   }, [cleanupOnMediaTagUnmount]);
-  useImperativeHandle6(ref, () => {
+  useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, [audioRef]);
   const currentOnDurationCallback = useRef13(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect12(() => {
+  useEffect11(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -4974,7 +4537,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   if (initialShouldPreMountAudioElements) {
     return null;
   }
-  return /* @__PURE__ */ jsx18("audio", {
+  return /* @__PURE__ */ jsx17("audio", {
     ref: audioRef,
     preload: "metadata",
     crossOrigin: crossOriginValue,
@@ -4987,13 +4550,13 @@ var AudioForPreview = forwardRef4(AudioForDevelopmentForwardRefFunction);
 import {
   forwardRef as forwardRef5,
   useContext as useContext26,
-  useEffect as useEffect13,
-  useImperativeHandle as useImperativeHandle7,
+  useEffect as useEffect12,
+  useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo22,
   useRef as useRef14
 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const audioRef = useRef14(null);
   const {
@@ -5032,10 +4595,10 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useImperativeHandle7(ref, () => {
+  useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect13(() => {
+  useEffect12(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -5119,7 +4682,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   if (!needsToRenderAudioTag) {
     return null;
   }
-  return /* @__PURE__ */ jsx19("audio", {
+  return /* @__PURE__ */ jsx18("audio", {
     ref: audioRef,
     ...nativeProps,
     onError: onNativeError
@@ -5128,7 +4691,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 var AudioForRendering = forwardRef5(AudioForRenderingRefForwardingFunction);
 
 // src/audio/Audio.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var AudioRefForwardingFunction = (props, ref) => {
   const audioContext = useContext27(SharedAudioContext);
   const {
@@ -5154,7 +4717,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback11((e) => {
+  const onError = useCallback10((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) {
@@ -5168,7 +4731,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback11((src, durationInSeconds) => {
+  const onDuration = useCallback10((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -5181,14 +4744,14 @@ var AudioRefForwardingFunction = (props, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx20(Html5Audio, {
+      return /* @__PURE__ */ jsx19(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
     const duration = durationFetched * fps;
-    return /* @__PURE__ */ jsx20(Loop, {
+    return /* @__PURE__ */ jsx19(Loop, {
       layout: "none",
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
@@ -5196,7 +4759,7 @@ var AudioRefForwardingFunction = (props, ref) => {
         playbackRate: props.playbackRate ?? 1,
         trimBefore: trimBeforeValue
       }),
-      children: /* @__PURE__ */ jsx20(Html5Audio, {
+      children: /* @__PURE__ */ jsx19(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -5204,13 +4767,13 @@ var AudioRefForwardingFunction = (props, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx20(Sequence, {
+    return /* @__PURE__ */ jsx19(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx20(Html5Audio, {
+      children: /* @__PURE__ */ jsx19(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
@@ -5220,7 +4783,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   }
   validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Html5Audio");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx20(AudioForRendering, {
+    return /* @__PURE__ */ jsx19(AudioForRendering, {
       onDuration,
       ...props,
       ref,
@@ -5228,7 +4791,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       _remotionInternalNeedsDurationCalculation: Boolean(loop)
     });
   }
-  return /* @__PURE__ */ jsx20(AudioForPreview, {
+  return /* @__PURE__ */ jsx19(AudioForPreview, {
     _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false,
     _remotionInternalStack: stack ?? null,
     shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0,
@@ -5245,11 +4808,11 @@ var Html5Audio = forwardRef6(AudioRefForwardingFunction);
 addSequenceStackTraces(Html5Audio);
 var Audio = Html5Audio;
 // src/Composition.tsx
-import { Suspense, useContext as useContext29, useEffect as useEffect15 } from "react";
+import { Suspense, useContext as useContext29, useEffect as useEffect14 } from "react";
 import { createPortal } from "react-dom";
 
 // src/Folder.tsx
-import { createContext as createContext18, useContext as useContext28, useEffect as useEffect14, useMemo as useMemo23 } from "react";
+import { createContext as createContext18, useContext as useContext28, useEffect as useEffect13, useMemo as useMemo23 } from "react";
 
 // src/validation/validate-folder-name.ts
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
@@ -5268,7 +4831,7 @@ var validateFolderName = (name) => {
 var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
 
 // src/Folder.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var FolderContext = createContext18({
   folderName: null,
   parentName: null
@@ -5285,20 +4848,20 @@ var Folder = ({ name, children }) => {
       parentName
     };
   }, [name, parentName]);
-  useEffect14(() => {
+  useEffect13(() => {
     registerFolder(name, parentName);
     return () => {
       unregisterFolder(name, parentName);
     };
   }, [name, parent.folderName, parentName, registerFolder, unregisterFolder]);
-  return /* @__PURE__ */ jsx21(FolderContext.Provider, {
+  return /* @__PURE__ */ jsx20(FolderContext.Provider, {
     value,
     children
   });
 };
 
 // src/loading-indicator.tsx
-import { jsx as jsx22, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs2 } from "react/jsx-runtime";
 var rotate = {
   transform: `rotate(90deg)`
 };
@@ -5317,7 +4880,7 @@ var Loading = () => {
     style: container,
     id: "remotion-comp-loading",
     children: [
-      /* @__PURE__ */ jsx22("style", {
+      /* @__PURE__ */ jsx21("style", {
         type: "text/css",
         children: `
 				@keyframes anim {
@@ -5334,12 +4897,12 @@ var Loading = () => {
 				}
 			`
       }),
-      /* @__PURE__ */ jsx22("svg", {
+      /* @__PURE__ */ jsx21("svg", {
         width: ICON_SIZE,
         height: ICON_SIZE,
         viewBox: "-100 -100 400 400",
         style: rotate,
-        children: /* @__PURE__ */ jsx22("path", {
+        children: /* @__PURE__ */ jsx21("path", {
           fill: "#555",
           stroke: "#555",
           strokeWidth: "100",
@@ -5437,10 +5000,10 @@ var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
 };
 
 // src/Composition.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect15(() => {
+  useEffect14(() => {
     const fallback = delayRender2("Waiting for Root component to unsuspend");
     return () => continueRender2(fallback);
   }, [continueRender2, delayRender2]);
@@ -5478,7 +5041,7 @@ var InnerComposition = ({
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
   const { folderName, parentName } = useContext29(FolderContext);
-  useEffect15(() => {
+  useEffect14(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -5517,7 +5080,7 @@ var InnerComposition = ({
     registerComposition,
     unregisterComposition
   ]);
-  useEffect15(() => {
+  useEffect14(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -5530,10 +5093,10 @@ var InnerComposition = ({
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
     }
-    return createPortal(/* @__PURE__ */ jsx23(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx23(Suspense, {
-        fallback: /* @__PURE__ */ jsx23(Loading, {}),
-        children: /* @__PURE__ */ jsx23(Comp, {
+    return createPortal(/* @__PURE__ */ jsx22(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx22(Suspense, {
+        fallback: /* @__PURE__ */ jsx22(Loading, {}),
+        children: /* @__PURE__ */ jsx22(Comp, {
           ...resolved.result.props ?? {}
         })
       })
@@ -5544,10 +5107,10 @@ var InnerComposition = ({
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
     }
-    return createPortal(/* @__PURE__ */ jsx23(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx23(Suspense, {
-        fallback: /* @__PURE__ */ jsx23(Fallback, {}),
-        children: /* @__PURE__ */ jsx23(Comp, {
+    return createPortal(/* @__PURE__ */ jsx22(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx22(Suspense, {
+        fallback: /* @__PURE__ */ jsx22(Fallback, {}),
+        children: /* @__PURE__ */ jsx22(Comp, {
           ...resolved.result.props ?? {}
         })
       })
@@ -5560,7 +5123,7 @@ var Composition = (props2) => {
   if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
     return null;
   }
-  return /* @__PURE__ */ jsx23(InnerComposition, {
+  return /* @__PURE__ */ jsx22(InnerComposition, {
     ...props2
   });
 };
@@ -5778,8 +5341,8 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState16 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7, useCallback as useCallback11, useState as useState15 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
   onError,
@@ -5788,15 +5351,15 @@ var IFrameRefForwarding = ({
   ...props2
 }, ref) => {
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [handle] = useState16(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
+  const [handle] = useState15(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback12((e) => {
+  const didLoad = useCallback11((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback12((e) => {
+  const didGetError = useCallback11((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -5804,7 +5367,7 @@ var IFrameRefForwarding = ({
       console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
     }
   }, [handle, onError, continueRender2]);
-  return /* @__PURE__ */ jsx24("iframe", {
+  return /* @__PURE__ */ jsx23("iframe", {
     referrerPolicy: "strict-origin-when-cross-origin",
     ...props2,
     ref,
@@ -5816,13 +5379,13 @@ var IFrame = forwardRef7(IFrameRefForwarding);
 // src/Img.tsx
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback13,
+  useCallback as useCallback12,
   useContext as useContext30,
-  useImperativeHandle as useImperativeHandle8,
+  useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect9,
   useRef as useRef15
 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
@@ -5848,11 +5411,11 @@ var ImgRefForwarding = ({
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  useImperativeHandle8(ref, () => {
+  useImperativeHandle7(ref, () => {
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback13((timeout) => {
+  const retryIn = useCallback12((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -5869,7 +5432,7 @@ var ImgRefForwarding = ({
       imageRef.current.setAttribute("src", newSrc);
     }, timeout);
   }, []);
-  const didGetError = useCallback13((e) => {
+  const didGetError = useCallback12((e) => {
     if (!errors.current) {
       return;
     }
@@ -5962,7 +5525,7 @@ var ImgRefForwarding = ({
     requestsVideoFrame: false,
     isClientSideRendering
   });
-  return /* @__PURE__ */ jsx25("img", {
+  return /* @__PURE__ */ jsx24("img", {
     ...props2,
     ref: imageRef,
     crossOrigin: crossOriginValue,
@@ -5980,13 +5543,13 @@ var compositionsRef = React25.createRef();
 
 // src/CompositionManagerProvider.tsx
 import {
-  useCallback as useCallback14,
-  useImperativeHandle as useImperativeHandle9,
+  useCallback as useCallback13,
+  useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo25,
   useRef as useRef16,
-  useState as useState17
+  useState as useState16
 } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -5994,18 +5557,18 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState17([]);
-  const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
-  const [compositions, setCompositions] = useState17(initialCompositions);
+  const [folders, setFolders] = useState16([]);
+  const [canvasContent, setCanvasContent] = useState16(initialCanvasContent);
+  const [compositions, setCompositions] = useState16(initialCompositions);
   const currentcompositionsRef = useRef16(compositions);
-  const updateCompositions = useCallback14((updateComps) => {
+  const updateCompositions = useCallback13((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback14((comp) => {
+  const registerComposition = useCallback13((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -6014,12 +5577,12 @@ var CompositionManagerProvider = ({
       return value;
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback14((id) => {
+  const unregisterComposition = useCallback13((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback14((name, parent) => {
+  const registerFolder = useCallback13((name, parent) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -6030,17 +5593,17 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback14((name, parent) => {
+  const unregisterFolder = useCallback13((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
   }, []);
-  useImperativeHandle9(compositionsRef, () => {
+  useImperativeHandle8(compositionsRef, () => {
     return {
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const updateCompositionDefaultProps = useCallback14((id, newDefaultProps) => {
+  const updateCompositionDefaultProps = useCallback13((id, newDefaultProps) => {
     setCompositions((comps) => {
       const updated = comps.map((c2) => {
         if (c2.id === id) {
@@ -6080,9 +5643,9 @@ var CompositionManagerProvider = ({
       canvasContent
     };
   }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-  return /* @__PURE__ */ jsx26(CompositionManager.Provider, {
+  return /* @__PURE__ */ jsx25(CompositionManager.Provider, {
     value: compositionManagerContextValue,
-    children: /* @__PURE__ */ jsx26(CompositionSetters.Provider, {
+    children: /* @__PURE__ */ jsx25(CompositionSetters.Provider, {
       value: compositionManagerSetters,
       children
     })
@@ -6191,11 +5754,11 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useEffect as useEffect16, useMemo as useMemo27, useState as useState18 } from "react";
+import { useMemo as useMemo27 } from "react";
 
 // src/use-media-enabled.tsx
 import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var MediaEnabledContext = createContext19(null);
 var useVideoEnabled = () => {
   const context = useContext31(MediaEnabledContext);
@@ -6223,14 +5786,14 @@ var MediaEnabledProvider = ({
   audioEnabled
 }) => {
   const value = useMemo26(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx27(MediaEnabledContext.Provider, {
+  return /* @__PURE__ */ jsx26(MediaEnabledContext.Provider, {
     value,
     children
   });
 };
 
 // src/RemotionRoot.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var RemotionRootContexts = ({
   children,
   numberOfAudioTags,
@@ -6238,61 +5801,37 @@ var RemotionRootContexts = ({
   audioLatencyHint,
   videoEnabled,
   audioEnabled,
-  frameState
+  frameState,
+  nonceContextSeed
 }) => {
-  const [fastRefreshes, setFastRefreshes] = useState18(0);
-  const [manualRefreshes, setManualRefreshes] = useState18(0);
   const nonceContext = useMemo27(() => {
     let counter = 0;
     return {
-      getNonce: () => counter++,
-      fastRefreshes,
-      manualRefreshes
-    };
-  }, [fastRefreshes, manualRefreshes]);
-  const setNonceContext = useMemo27(() => {
-    return {
-      increaseManualRefreshes: () => {
-        setManualRefreshes((i) => i + 1);
-      }
+      getNonce: () => counter++
     };
-  }, []);
-  useEffect16(() => {
-    if (typeof __webpack_module__ !== "undefined") {
-      if (__webpack_module__.hot) {
-        __webpack_module__.hot.addStatusHandler((status) => {
-          if (status === "idle") {
-            setFastRefreshes((i) => i + 1);
-          }
-        });
-      }
-    }
-  }, []);
+  }, [nonceContextSeed]);
   const logging = useMemo27(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx28(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx27(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx28(NonceContext.Provider, {
+    children: /* @__PURE__ */ jsx27(NonceContext.Provider, {
       value: nonceContext,
-      children: /* @__PURE__ */ jsx28(SetNonceContext.Provider, {
-        value: setNonceContext,
-        children: /* @__PURE__ */ jsx28(TimelineContextProvider, {
-          frameState,
-          children: /* @__PURE__ */ jsx28(MediaEnabledProvider, {
-            videoEnabled,
-            audioEnabled,
-            children: /* @__PURE__ */ jsx28(EditorPropsProvider, {
-              children: /* @__PURE__ */ jsx28(PrefetchProvider, {
-                children: /* @__PURE__ */ jsx28(SequenceManagerProvider, {
-                  children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
-                    numberOfAudioTags,
-                    audioLatencyHint,
-                    audioEnabled,
-                    children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
-                      children: /* @__PURE__ */ jsx28(BufferingProvider, {
-                        children
-                      })
+      children: /* @__PURE__ */ jsx27(TimelineContextProvider, {
+        frameState,
+        children: /* @__PURE__ */ jsx27(MediaEnabledProvider, {
+          videoEnabled,
+          audioEnabled,
+          children: /* @__PURE__ */ jsx27(EditorPropsProvider, {
+            children: /* @__PURE__ */ jsx27(PrefetchProvider, {
+              children: /* @__PURE__ */ jsx27(SequenceManagerProvider, {
+                children: /* @__PURE__ */ jsx27(SharedAudioContextProvider, {
+                  numberOfAudioTags,
+                  audioLatencyHint,
+                  audioEnabled,
+                  children: /* @__PURE__ */ jsx27(DurationsContextProvider, {
+                    children: /* @__PURE__ */ jsx27(BufferingProvider, {
+                      children
                     })
                   })
                 })
@@ -6305,6 +5844,176 @@ var RemotionRootContexts = ({
   });
 };
 
+// src/codec.ts
+var validCodecs = [
+  "h264",
+  "h265",
+  "vp8",
+  "vp9",
+  "mp3",
+  "aac",
+  "wav",
+  "prores",
+  "h264-mkv",
+  "h264-ts",
+  "gif"
+];
+
+// src/validation/validate-default-codec.ts
+function validateCodec(defaultCodec, location, name) {
+  if (typeof defaultCodec === "undefined") {
+    return;
+  }
+  if (typeof defaultCodec !== "string") {
+    throw new TypeError(`The "${name}" prop ${location} must be a string, but you passed a value of type ${typeof defaultCodec}.`);
+  }
+  if (!validCodecs.includes(defaultCodec)) {
+    throw new Error(`The "${name}" prop ${location} must be one of ${validCodecs.join(", ")}, but you passed ${defaultCodec}.`);
+  }
+}
+
+// src/resolve-video-config.ts
+var validateCalculated = ({
+  calculated,
+  compositionId,
+  compositionFps,
+  compositionHeight,
+  compositionWidth,
+  compositionDurationInFrames
+}) => {
+  const calculateMetadataErrorLocation = `calculated by calculateMetadata() for the composition "${compositionId}"`;
+  const defaultErrorLocation = `of the "<Composition />" component with the id "${compositionId}"`;
+  const width = calculated?.width ?? compositionWidth ?? undefined;
+  validateDimension(width, "width", calculated?.width ? calculateMetadataErrorLocation : defaultErrorLocation);
+  const height = calculated?.height ?? compositionHeight ?? undefined;
+  validateDimension(height, "height", calculated?.height ? calculateMetadataErrorLocation : defaultErrorLocation);
+  const fps = calculated?.fps ?? compositionFps ?? null;
+  validateFps(fps, calculated?.fps ? calculateMetadataErrorLocation : defaultErrorLocation, false);
+  const durationInFrames = calculated?.durationInFrames ?? compositionDurationInFrames ?? null;
+  validateDurationInFrames(durationInFrames, {
+    allowFloats: false,
+    component: `of the "<Composition />" component with the id "${compositionId}"`
+  });
+  const defaultCodec = calculated?.defaultCodec;
+  validateCodec(defaultCodec, calculateMetadataErrorLocation, "defaultCodec");
+  const defaultOutName = calculated?.defaultOutName;
+  const defaultVideoImageFormat = calculated?.defaultVideoImageFormat;
+  const defaultPixelFormat = calculated?.defaultPixelFormat;
+  const defaultProResProfile = calculated?.defaultProResProfile;
+  return {
+    width,
+    height,
+    fps,
+    durationInFrames,
+    defaultCodec,
+    defaultOutName,
+    defaultVideoImageFormat,
+    defaultPixelFormat,
+    defaultProResProfile
+  };
+};
+var resolveVideoConfig = ({
+  calculateMetadata,
+  signal,
+  defaultProps,
+  inputProps: originalProps,
+  compositionId,
+  compositionDurationInFrames,
+  compositionFps,
+  compositionHeight,
+  compositionWidth
+}) => {
+  const calculatedProm = calculateMetadata ? calculateMetadata({
+    defaultProps,
+    props: originalProps,
+    abortSignal: signal,
+    compositionId,
+    isRendering: getRemotionEnvironment().isRendering
+  }) : null;
+  if (calculatedProm !== null && typeof calculatedProm === "object" && "then" in calculatedProm) {
+    return calculatedProm.then((c2) => {
+      const {
+        height,
+        width,
+        durationInFrames,
+        fps,
+        defaultCodec,
+        defaultOutName,
+        defaultVideoImageFormat,
+        defaultPixelFormat,
+        defaultProResProfile
+      } = validateCalculated({
+        calculated: c2,
+        compositionDurationInFrames,
+        compositionFps,
+        compositionHeight,
+        compositionWidth,
+        compositionId
+      });
+      return {
+        width,
+        height,
+        fps,
+        durationInFrames,
+        id: compositionId,
+        defaultProps: serializeThenDeserializeInStudio(defaultProps),
+        props: serializeThenDeserializeInStudio(c2.props ?? originalProps),
+        defaultCodec: defaultCodec ?? null,
+        defaultOutName: defaultOutName ?? null,
+        defaultVideoImageFormat: defaultVideoImageFormat ?? null,
+        defaultPixelFormat: defaultPixelFormat ?? null,
+        defaultProResProfile: defaultProResProfile ?? null
+      };
+    });
+  }
+  const data = validateCalculated({
+    calculated: calculatedProm,
+    compositionDurationInFrames,
+    compositionFps,
+    compositionHeight,
+    compositionWidth,
+    compositionId
+  });
+  if (calculatedProm === null) {
+    return {
+      ...data,
+      id: compositionId,
+      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
+      props: serializeThenDeserializeInStudio(originalProps),
+      defaultCodec: null,
+      defaultOutName: null,
+      defaultVideoImageFormat: null,
+      defaultPixelFormat: null,
+      defaultProResProfile: null
+    };
+  }
+  return {
+    ...data,
+    id: compositionId,
+    defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
+    props: serializeThenDeserializeInStudio(calculatedProm.props ?? originalProps),
+    defaultCodec: calculatedProm.defaultCodec ?? null,
+    defaultOutName: calculatedProm.defaultOutName ?? null,
+    defaultVideoImageFormat: calculatedProm.defaultVideoImageFormat ?? null,
+    defaultPixelFormat: calculatedProm.defaultPixelFormat ?? null,
+    defaultProResProfile: calculatedProm.defaultProResProfile ?? null
+  };
+};
+var resolveVideoConfigOrCatch = (params) => {
+  try {
+    const promiseOrReturnValue = resolveVideoConfig(params);
+    return {
+      type: "success",
+      result: promiseOrReturnValue
+    };
+  } catch (err) {
+    return {
+      type: "error",
+      error: err
+    };
+  }
+};
+
 // src/setup-env-variables.ts
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
@@ -6390,16 +6099,16 @@ var useCurrentScale = (options) => {
 };
 
 // src/video/OffthreadVideo.tsx
-import { useCallback as useCallback16 } from "react";
+import { useCallback as useCallback15 } from "react";
 
 // src/video/OffthreadVideoForRendering.tsx
 import {
-  useCallback as useCallback15,
+  useCallback as useCallback14,
   useContext as useContext32,
-  useEffect as useEffect17,
+  useEffect as useEffect15,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo28,
-  useState as useState19
+  useState as useState17
 } from "react";
 
 // src/video/offthread-video-source.ts
@@ -6413,7 +6122,7 @@ var getOffthreadVideoSource = ({
 };
 
 // src/video/OffthreadVideoForRendering.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var OffthreadVideoForRendering = ({
   onError,
   volume: volumeProp,
@@ -6458,7 +6167,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect17(() => {
+  useEffect15(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -6513,7 +6222,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState19(null);
+  const [imageSrc, setImageSrc] = useState17(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
@@ -6586,7 +6295,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback15(() => {
+  const onErr = useCallback14(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -6596,7 +6305,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo28(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback15((img) => {
+  const onImageFrame = useCallback14((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -6605,7 +6314,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx29(Img, {
+  return /* @__PURE__ */ jsx28(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -6620,20 +6329,20 @@ var OffthreadVideoForRendering = ({
 import React30, {
   forwardRef as forwardRef9,
   useContext as useContext33,
-  useEffect as useEffect19,
-  useImperativeHandle as useImperativeHandle10,
+  useEffect as useEffect17,
+  useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo29,
   useRef as useRef17,
-  useState as useState20
+  useState as useState18
 } from "react";
 
 // src/video/emit-video-frame.ts
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect16 } from "react";
 var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect18(() => {
+  useEffect16(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -6657,7 +6366,7 @@ var useEmitVideoFrame = ({
 };
 
 // src/video/VideoForPreview.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const context = useContext33(SharedAudioContext);
   if (!context) {
@@ -6719,7 +6428,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const { hidden } = useContext33(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState20(() => 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.");
@@ -6782,16 +6491,16 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     duration,
     fps
   });
-  useImperativeHandle10(ref, () => {
+  useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState20(() => playbackLogging({
+  useState18(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
     mountTime
   }));
-  useEffect19(() => {
+  useEffect17(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6822,7 +6531,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef17(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect19(() => {
+  useEffect17(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6839,7 +6548,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect19(() => {
+  useEffect17(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6861,7 +6570,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  return /* @__PURE__ */ jsx30("video", {
+  return /* @__PURE__ */ jsx29("video", {
     ref: videoRef,
     muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
     playsInline: true,
@@ -6876,7 +6585,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
 var VideoForPreview = forwardRef9(VideoForDevelopmentRefForwardingFunction);
 
 // src/video/OffthreadVideo.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -6893,7 +6602,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback16(() => {
+  const onDuration = useCallback15(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -6907,13 +6616,13 @@ var InnerOffthreadVideo = (props2) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx31(Sequence, {
+    return /* @__PURE__ */ jsx30(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx31(InnerOffthreadVideo, {
+      children: /* @__PURE__ */ jsx30(InnerOffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         trimAfter: undefined,
@@ -6928,7 +6637,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx31(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx30(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -6950,7 +6659,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx31(VideoForPreview, {
+  return /* @__PURE__ */ jsx30(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -6999,7 +6708,7 @@ var OffthreadVideo = ({
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx31(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx30(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -7073,7 +6782,7 @@ var watchStaticFile = (fileName, callback) => {
 
 // src/wrap-remotion-context.tsx
 import React32, { useMemo as useMemo30 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function useRemotionContexts() {
   const compositionManagerCtx = React32.useContext(CompositionManager);
   const timelineContext = React32.useContext(TimelineContext);
@@ -7117,29 +6826,29 @@ function useRemotionContexts() {
 }
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx32(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx31(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx32(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx31(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx32(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx31(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx32(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx31(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx32(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx31(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx32(SequenceManager.Provider, {
+            children: /* @__PURE__ */ jsx31(SequenceManager.Provider, {
               value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx32(RenderAssetManager.Provider, {
+              children: /* @__PURE__ */ jsx31(RenderAssetManager.Provider, {
                 value: contexts.renderAssetManagerContext,
-                children: /* @__PURE__ */ jsx32(ResolveCompositionContext.Provider, {
+                children: /* @__PURE__ */ jsx31(ResolveCompositionContext.Provider, {
                   value: contexts.resolveCompositionContext,
-                  children: /* @__PURE__ */ jsx32(TimelineContext.Provider, {
+                  children: /* @__PURE__ */ jsx31(TimelineContext.Provider, {
                     value: contexts.timelineContext,
-                    children: /* @__PURE__ */ jsx32(SetTimelineContext.Provider, {
+                    children: /* @__PURE__ */ jsx31(SetTimelineContext.Provider, {
                       value: contexts.setTimelineContext,
-                      children: /* @__PURE__ */ jsx32(SequenceContext.Provider, {
+                      children: /* @__PURE__ */ jsx31(SequenceContext.Provider, {
                         value: contexts.sequenceContext,
-                        children: /* @__PURE__ */ jsx32(BufferingContextReact.Provider, {
+                        children: /* @__PURE__ */ jsx31(BufferingContextReact.Provider, {
                           value: contexts.bufferManagerContext,
                           children
                         })
@@ -7211,11 +6920,11 @@ var Internals = {
   EditorPropsContext,
   usePreload,
   NonceContext,
-  SetNonceContext,
   resolveVideoConfig,
+  resolveVideoConfigOrCatch,
+  ResolveCompositionContext,
   useResolvedVideoConfig,
   resolveCompositionsRef,
-  ResolveCompositionConfigInStudio,
   REMOTION_STUDIO_CONTAINER_ELEMENT,
   RenderAssetManager,
   persistCurrentFrame,
@@ -7636,16 +7345,16 @@ var flattenChildren = (children) => {
 
 // src/series/is-inside-series.tsx
 import React34, { createContext as createContext21 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var IsInsideSeriesContext = createContext21(false);
 var IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx33(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx32(IsInsideSeriesContext.Provider, {
     value: true,
     children
   });
 };
 var IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx33(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx32(IsInsideSeriesContext.Provider, {
     value: false,
     children
   });
@@ -7658,10 +7367,10 @@ var useRequireToBeInsideSeries = () => {
 };
 
 // src/series/index.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx34(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx33(IsNotInsideSeriesProvider, {
     children
   });
 };
@@ -7711,7 +7420,7 @@ var Series = (props2) => {
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx34(Sequence, {
+      return /* @__PURE__ */ jsx33(Sequence, {
         name: name || "<Series.Sequence>",
         from: currentStartFrame,
         durationInFrames: durationInFramesProp,
@@ -7722,14 +7431,14 @@ var Series = (props2) => {
     });
   }, [props2.children]);
   if (ENABLE_V5_BREAKING_CHANGES) {
-    return /* @__PURE__ */ jsx34(IsInsideSeriesContainer, {
-      children: /* @__PURE__ */ jsx34(Sequence, {
+    return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
+      children: /* @__PURE__ */ jsx33(Sequence, {
         ...props2,
         children: childrenValue
       })
     });
   }
-  return /* @__PURE__ */ jsx34(IsInsideSeriesContainer, {
+  return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
     children: childrenValue
   });
 };
@@ -8076,14 +7785,14 @@ var Still = (props2) => {
   return React36.createElement(Composition, newProps);
 };
 // src/video/Video.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext35 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback16, useContext as useContext35 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef11,
   useContext as useContext34,
-  useEffect as useEffect20,
-  useImperativeHandle as useImperativeHandle11,
+  useEffect as useEffect18,
+  useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo32,
   useRef as useRef18
@@ -8214,7 +7923,7 @@ var seekToTimeMultipleUntilRight = ({
 };
 
 // src/video/VideoForRendering.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var VideoForRenderingForwardFunction = ({
   onError,
   volume: volumeProp,
@@ -8258,7 +7967,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect20(() => {
+  useEffect18(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -8298,10 +8007,10 @@ var VideoForRenderingForwardFunction = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  useImperativeHandle11(ref, () => {
+  useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect20(() => {
+  useEffect18(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -8419,7 +8128,7 @@ var VideoForRenderingForwardFunction = ({
       delayRender2
     ]);
   }
-  return /* @__PURE__ */ jsx35("video", {
+  return /* @__PURE__ */ jsx34("video", {
     ref: videoRef,
     disableRemotePlayback: true,
     ...props2
@@ -8428,7 +8137,7 @@ var VideoForRenderingForwardFunction = ({
 var VideoForRendering = forwardRef11(VideoForRenderingForwardFunction);
 
 // src/video/Video.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -8457,10 +8166,10 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback17((src, durationInSeconds) => {
+  const onDuration = useCallback16((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback17(() => {}, []);
+  const onVideoFrame = useCallback16(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -8471,14 +8180,14 @@ var VideoForwardingFunction = (props2, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx36(Html5Video, {
+      return /* @__PURE__ */ jsx35(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
     const mediaDuration = durationFetched * fps;
-    return /* @__PURE__ */ jsx36(Loop, {
+    return /* @__PURE__ */ jsx35(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
         mediaDurationInFrames: mediaDuration,
@@ -8487,7 +8196,7 @@ var VideoForwardingFunction = (props2, ref) => {
       }),
       layout: "none",
       name,
-      children: /* @__PURE__ */ jsx36(Html5Video, {
+      children: /* @__PURE__ */ jsx35(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -8495,13 +8204,13 @@ var VideoForwardingFunction = (props2, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx36(Sequence, {
+    return /* @__PURE__ */ jsx35(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx36(Html5Video, {
+      children: /* @__PURE__ */ jsx35(Html5Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         ref
@@ -8510,14 +8219,14 @@ var VideoForwardingFunction = (props2, ref) => {
   }
   validateMediaProps({ playbackRate: props2.playbackRate, volume: props2.volume }, "Html5Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx36(VideoForRendering, {
+    return /* @__PURE__ */ jsx35(VideoForRendering, {
       onDuration,
       onVideoFrame: onVideoFrame ?? null,
       ...otherProps,
       ref
     });
   }
-  return /* @__PURE__ */ jsx36(VideoForPreview, {
+  return /* @__PURE__ */ jsx35(VideoForPreview, {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,