remotion 4.0.375 → 4.0.377

package/dist/cjs/Artifact.js

@@ -13,7 +13,7 @@ const Artifact = ({ filename, content, downloadBehavior }) => {
     const [id] = (0, react_1.useState)(() => {
         return String(Math.random());
     });
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         if (!env.isRendering) {
             return;
         }

package/dist/cjs/Composition.d.ts

@@ -43,7 +43,7 @@ type MandatoryDimensions<Schema extends AnyZodObject, Props extends Record<strin
     calculateMetadata?: CalculateMetadataFunction<InferProps<Schema, Props>>;
 };
 type StillCalculateMetadataOrExplicit<Schema extends AnyZodObject, Props extends Record<string, unknown>> = OptionalDimensions<Schema, Props> | MandatoryDimensions<Schema, Props>;
-type CompositionCalculateMetadataOrExplicit<Schema extends AnyZodObject, Props extends Record<string, unknown>> = (OptionalDimensions<Schema, Props> & {
+export type CompositionCalculateMetadataOrExplicit<Schema extends AnyZodObject, Props extends Record<string, unknown>> = (OptionalDimensions<Schema, Props> & {
     fps?: number;
     durationInFrames?: number;
 }) | (MandatoryDimensions<Schema, Props> & {

package/dist/cjs/RemotionRoot.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { LogLevel } from './log.js';
-export declare const RemotionRoot: React.FC<{
+export declare const RemotionRootContexts: React.FC<{
     readonly children: React.ReactNode;
     readonly numberOfAudioTags: number;
     readonly logLevel: LogLevel;

package/dist/cjs/RemotionRoot.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemotionRoot = void 0;
+exports.RemotionRootContexts = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const EditorProps_js_1 = require("./EditorProps.js");
-const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
@@ -14,7 +13,7 @@ const nonce_js_1 = require("./nonce.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const duration_state_js_1 = require("./video/duration-state.js");
-const RemotionRoot = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, videoEnabled, audioEnabled, frameState, }) => {
+const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, videoEnabled, audioEnabled, frameState, }) => {
     const [fastRefreshes, setFastRefreshes] = (0, react_1.useState)(0);
     const [manualRefreshes, setManualRefreshes] = (0, react_1.useState)(0);
     const nonceContext = (0, react_1.useMemo)(() => {
@@ -46,6 +45,6 @@ const RemotionRoot = ({ children, numberOfAudioTags, logLevel, audioLatencyHint,
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.SetNonceContext.Provider, { value: setNonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManagerProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, audioLatencyHint: audioLatencyHint, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.SetNonceContext.Provider, { value: setNonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, audioLatencyHint: audioLatencyHint, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }));
 };
-exports.RemotionRoot = RemotionRoot;
+exports.RemotionRootContexts = RemotionRootContexts;

package/dist/cjs/RenderAssetManager.d.ts

@@ -5,6 +5,10 @@ export type RenderAssetManagerContext = {
     renderAssets: TRenderAsset[];
 };
 export declare const RenderAssetManager: import("react").Context<RenderAssetManagerContext>;
+export type CollectAssetsRef = {
+    collectAssets: () => TRenderAsset[];
+};
 export declare const RenderAssetManagerProvider: React.FC<{
     children: React.ReactNode;
+    collectAssets: null | React.RefObject<CollectAssetsRef | null>;
 }>;

package/dist/cjs/RenderAssetManager.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderAssetManagerProvider = exports.RenderAssetManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const validate_artifact_js_1 = require("./validation/validate-artifact.js");
 exports.RenderAssetManager = (0, react_1.createContext)({
     // Must be undefined, otherwise error in Player
@@ -10,7 +11,7 @@ exports.RenderAssetManager = (0, react_1.createContext)({
     unregisterRenderAsset: () => undefined,
     renderAssets: [],
 });
-const RenderAssetManagerProvider = ({ children }) => {
+const RenderAssetManagerProvider = ({ children, collectAssets }) => {
     const [renderAssets, setRenderAssets] = (0, react_1.useState)([]);
     const registerRenderAsset = (0, react_1.useCallback)((renderAsset) => {
         (0, validate_artifact_js_1.validateRenderAsset)(renderAsset);
@@ -18,6 +19,19 @@ const RenderAssetManagerProvider = ({ children }) => {
             return [...assets, renderAsset];
         });
     }, []);
+    if (collectAssets) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useImperativeHandle)(collectAssets, () => {
+            return {
+                collectAssets: () => {
+                    (0, react_dom_1.flushSync)(() => {
+                        setRenderAssets([]); // clear assets at next render
+                    });
+                    return renderAssets;
+                },
+            };
+        }, [renderAssets]);
+    }
     const unregisterRenderAsset = (0, react_1.useCallback)((id) => {
         setRenderAssets((assts) => {
             return assts.filter((a) => a.id !== id);

package/dist/cjs/ResolveCompositionConfig.js

@@ -64,7 +64,7 @@ const ResolveCompositionConfigInStudio = ({ children }) => {
         const result = (0, resolve_video_config_js_1.resolveVideoConfigOrCatch)({
             compositionId,
             calculateMetadata,
-            originalProps: combinedProps,
+            inputProps: combinedProps,
             signal,
             defaultProps,
             compositionDurationInFrames,

package/dist/cjs/index.d.ts

@@ -92,6 +92,7 @@ export { Artifact } from './Artifact.js';
 export { Audio, Html5Audio, RemotionAudioProps } from './audio/index.js';
 export type { LoopVolumeCurveBehavior } from './audio/use-audio-frame.js';
 export { cancelRender } from './cancel-render.js';
+export type { Codec } from './codec.js';
 export { CalculateMetadataFunction, Composition, CompositionProps, CompProps, StillProps, } from './Composition.js';
 export type { CanvasContent } from './CompositionManagerContext.js';
 export { getInputProps } from './config/input-props.js';

package/dist/cjs/internals.d.ts

@@ -12,6 +12,7 @@ import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volu
 import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
 import { useRemotionContexts } from './wrap-remotion-context.js';
 export declare const Internals: {
+    readonly MaxMediaCacheSizeContext: import("react").Context<number | null>;
     readonly useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
     readonly useFrameForVolumeProp: (behavior: import("./audio/use-audio-frame.js").LoopVolumeCurveBehavior) => number;
     readonly useTimelinePosition: () => number;
@@ -71,7 +72,7 @@ export declare const Internals: {
     readonly CompositionSetters: import("react").Context<import("./CompositionManagerContext.js").CompositionManagerSetters>;
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
     readonly SequenceVisibilityToggleContext: import("react").Context<import("./SequenceManager.js").SequenceVisibilityToggleState>;
-    readonly RemotionRoot: import("react").FC<{
+    readonly RemotionRootContexts: import("react").FC<{
         readonly children: React.ReactNode;
         readonly numberOfAudioTags: number;
         readonly logLevel: import("./log.js").LogLevel;
@@ -188,7 +189,7 @@ export declare const Internals: {
     readonly usePreload: (src: string) => string;
     readonly NonceContext: import("react").Context<import("./nonce.js").TNonceContext>;
     readonly SetNonceContext: import("react").Context<import("./nonce.js").TSetNonceContext>;
-    readonly resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: {
+    readonly resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, inputProps: originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: {
         compositionId: string;
         compositionWidth: number | null;
         compositionHeight: number | null;
@@ -197,7 +198,7 @@ export declare const Internals: {
         calculateMetadata: import("./Composition.js").CalculateMetadataFunction<import("./props-if-has-props.js").InferProps<import("zod").AnyZodObject, Record<string, unknown>>> | null;
         signal: AbortSignal;
         defaultProps: Record<string, unknown>;
-        originalProps: Record<string, unknown>;
+        inputProps: Record<string, unknown>;
     }) => import("./video-config.js").VideoConfig | Promise<import("./video-config.js").VideoConfig>;
     readonly useResolvedVideoConfig: (preferredCompositionId: string | null) => ({
         type: "loading";
@@ -379,5 +380,9 @@ export declare const Internals: {
     readonly TimelinePosition: typeof TimelinePosition;
     readonly DelayRenderContextType: import("react").Context<import("./delay-render.js").DelayRenderScope | null>;
     readonly TimelineContext: import("react").Context<TimelineContextValue>;
+    readonly RenderAssetManagerProvider: import("react").FC<{
+        children: React.ReactNode;
+        collectAssets: null | React.RefObject<import("./RenderAssetManager.js").CollectAssetsRef | null>;
+    }>;
 };
 export type { CompositionManagerContext, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -55,6 +55,7 @@ const input_props_override_js_1 = require("./input-props-override.js");
 const is_player_js_1 = require("./is-player.js");
 const log_level_context_js_1 = require("./log-level-context.js");
 const log_js_1 = require("./log.js");
+const max_video_cache_size_js_1 = require("./max-video-cache-size.js");
 const nonce_js_1 = require("./nonce.js");
 const playback_logging_js_1 = require("./playback-logging.js");
 const portal_node_js_1 = require("./portal-node.js");
@@ -98,6 +99,7 @@ const compositionSelectorRef = (0, react_1.createRef)();
 // Mark them as Internals so use don't assume this is public
 // API and are less likely to use it
 exports.Internals = {
+    MaxMediaCacheSizeContext: max_video_cache_size_js_1.MaxMediaCacheSizeContext,
     useUnsafeVideoConfig: use_unsafe_video_config_js_1.useUnsafeVideoConfig,
     useFrameForVolumeProp: use_audio_frame_js_1.useFrameForVolumeProp,
     useTimelinePosition: TimelinePosition.useTimelinePosition,
@@ -112,7 +114,7 @@ exports.Internals = {
     CompositionSetters: CompositionManagerContext_js_1.CompositionSetters,
     SequenceManager: SequenceManager_js_1.SequenceManager,
     SequenceVisibilityToggleContext: SequenceManager_js_1.SequenceVisibilityToggleContext,
-    RemotionRoot: RemotionRoot_js_1.RemotionRoot,
+    RemotionRootContexts: RemotionRoot_js_1.RemotionRootContexts,
     CompositionManagerProvider: CompositionManagerProvider_js_1.CompositionManagerProvider,
     useVideo: use_video_js_1.useVideo,
     getRoot: register_root_js_1.getRoot,
@@ -191,4 +193,5 @@ exports.Internals = {
     TimelinePosition,
     DelayRenderContextType: use_delay_render_js_1.DelayRenderContextType,
     TimelineContext: TimelineContext_js_1.TimelineContext,
+    RenderAssetManagerProvider: RenderAssetManager_js_1.RenderAssetManagerProvider,
 };

package/dist/cjs/max-video-cache-size.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MaxMediaCacheSizeContext: React.Context<number | null>;

package/dist/cjs/max-video-cache-size.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaxMediaCacheSizeContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.MaxMediaCacheSizeContext = react_1.default.createContext(null);

package/dist/cjs/resolve-video-config.d.ts

@@ -11,9 +11,9 @@ type ResolveVideoConfigParams = {
     calculateMetadata: CalculateMetadataFunction<InferProps<AnyZodObject, Record<string, unknown>>> | null;
     signal: AbortSignal;
     defaultProps: Record<string, unknown>;
-    originalProps: Record<string, unknown>;
+    inputProps: Record<string, unknown>;
 };
-export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: ResolveVideoConfigParams) => VideoConfig | Promise<VideoConfig>;
+export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, inputProps: originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: ResolveVideoConfigParams) => VideoConfig | Promise<VideoConfig>;
 export declare const resolveVideoConfigOrCatch: (params: ResolveVideoConfigParams) => {
     type: "success";
     result: VideoConfig | Promise<VideoConfig>;

package/dist/cjs/resolve-video-config.js

@@ -40,7 +40,7 @@ const validateCalculated = ({ calculated, compositionId, compositionFps, composi
         defaultProResProfile,
     };
 };
-const resolveVideoConfig = ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }) => {
+const resolveVideoConfig = ({ calculateMetadata, signal, defaultProps, inputProps: originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }) => {
     var _a, _b, _c, _d, _e, _f;
     const calculatedProm = calculateMetadata
         ? calculateMetadata({

package/dist/cjs/use-delay-render.d.ts

@@ -1,7 +1,8 @@
+import type { cancelRender as cancelRenderOriginal } from './cancel-render.js';
 import type { DelayRenderOptions, DelayRenderScope } from './delay-render.js';
 type DelayRenderFn = (label?: string, options?: DelayRenderOptions) => number;
 type ContinueRenderFn = (handle: number) => void;
-type CancelRenderFn = (err: unknown) => never;
+type CancelRenderFn = typeof cancelRenderOriginal;
 export declare const DelayRenderContextType: import("react").Context<DelayRenderScope | null>;
 export declare const useDelayRender: () => {
     delayRender: DelayRenderFn;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.375";
+export declare const VERSION = "4.0.377";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.375';
+exports.VERSION = '4.0.377';

package/dist/esm/index.mjs

@@ -110,7 +110,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.375";
+var VERSION = "4.0.377";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -751,7 +751,7 @@ var resolveVideoConfig = ({
   calculateMetadata,
   signal,
   defaultProps,
-  originalProps,
+  inputProps: originalProps,
   compositionId,
   compositionDurationInFrames,
   compositionFps,
@@ -897,7 +897,7 @@ var ResolveCompositionConfigInStudio = ({ children }) => {
     const result = resolveVideoConfigOrCatch({
       compositionId,
       calculateMetadata,
-      originalProps: combinedProps,
+      inputProps: combinedProps,
       signal,
       defaultProps,
       compositionDurationInFrames,
@@ -2352,16 +2352,18 @@ var AnimatedImage = forwardRef3(({
   });
 });
 // src/Artifact.tsx
-import { useContext as useContext14, useEffect as useEffect5, useState as useState9 } from "react";
+import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useState as useState9 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
   createContext as createContext12,
   useCallback as useCallback6,
+  useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo11,
   useState as useState8
 } from "react";
+import { flushSync } from "react-dom";
 
 // src/validation/validate-artifact.ts
 var validateArtifactFilename = (filename) => {
@@ -2405,7 +2407,7 @@ var RenderAssetManager = createContext12({
   },
   renderAssets: []
 });
-var RenderAssetManagerProvider = ({ children }) => {
+var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState8([]);
   const registerRenderAsset = useCallback6((renderAsset) => {
     validateRenderAsset(renderAsset);
@@ -2413,6 +2415,18 @@ var RenderAssetManagerProvider = ({ children }) => {
       return [...assets, renderAsset];
     });
   }, []);
+  if (collectAssets) {
+    useImperativeHandle5(collectAssets, () => {
+      return {
+        collectAssets: () => {
+          flushSync(() => {
+            setRenderAssets([]);
+          });
+          return renderAssets;
+        }
+      };
+    }, [renderAssets]);
+  }
   const unregisterRenderAsset = useCallback6((id) => {
     setRenderAssets((assts) => {
       return assts.filter((a) => a.id !== id);
@@ -2448,7 +2462,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
   const [id] = useState9(() => {
     return String(Math.random());
   });
-  useEffect5(() => {
+  useLayoutEffect4(() => {
     if (!env.isRendering) {
       return;
     }
@@ -2603,7 +2617,7 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext14, useEffect as useEffect6, useState as useState10 } from "react";
+import { createContext as createContext14, useEffect as useEffect5, useState as useState10 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var PreloadContext = createContext14({});
 var preloads = {};
@@ -2614,7 +2628,7 @@ var setPreloads = (updater) => {
 };
 var PrefetchProvider = ({ children }) => {
   const [_preloads, _setPreloads] = useState10(() => preloads);
-  useEffect6(() => {
+  useEffect5(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
     };
@@ -2960,8 +2974,8 @@ var DurationsContextProvider = ({ children }) => {
 import {
   forwardRef as forwardRef4,
   useContext as useContext25,
-  useEffect as useEffect14,
-  useImperativeHandle as useImperativeHandle5,
+  useEffect as useEffect13,
+  useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo21,
   useRef as useRef12,
   useState as useState15
@@ -2982,7 +2996,7 @@ var getCrossOriginValue = ({
 };
 
 // src/use-amplification.ts
-import { useContext as useContext17, useLayoutEffect as useLayoutEffect4, useRef as useRef7 } from "react";
+import { useContext as useContext17, useLayoutEffect as useLayoutEffect5, useRef as useRef7 } from "react";
 
 // src/audio/shared-audio-tags.tsx
 import React15, {
@@ -2990,7 +3004,7 @@ import React15, {
   createRef as createRef2,
   useCallback as useCallback7,
   useContext as useContext16,
-  useEffect as useEffect7,
+  useEffect as useEffect6,
   useMemo as useMemo15,
   useRef as useRef5,
   useState as useState11
@@ -3285,7 +3299,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     audios.current = [];
     rerenderAudios();
   }, [numberOfAudioTags, rerenderAudios]);
-  useEffect7(() => {
+  useEffect6(() => {
     return () => {
       resetAudio();
     };
@@ -3490,7 +3504,7 @@ var useVolume = ({
   }
   const { audioContext } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect4(() => {
+    useLayoutEffect5(() => {
       if (!audioContext) {
         return;
       }
@@ -3540,7 +3554,7 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useContext as useContext19, useEffect as useEffect8, useMemo as useMemo16, useState as useState12 } from "react";
+import { useContext as useContext19, useEffect as useEffect7, useMemo as useMemo16, useState as useState12 } from "react";
 
 // src/audio/use-audio-frame.ts
 import { useContext as useContext18 } from "react";
@@ -3638,7 +3652,7 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, startsAt, volume, mediaVolume]);
-  useEffect8(() => {
+  useEffect7(() => {
     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`);
     }
@@ -3692,7 +3706,7 @@ var useMediaInTimeline = ({
     trimBefore: undefined,
     playbackRate
   });
-  useEffect8(() => {
+  useEffect7(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -3753,8 +3767,8 @@ var useMediaInTimeline = ({
 import {
   useCallback as useCallback10,
   useContext as useContext22,
-  useEffect as useEffect12,
-  useLayoutEffect as useLayoutEffect6,
+  useEffect as useEffect11,
+  useLayoutEffect as useLayoutEffect7,
   useRef as useRef11
 } from "react";
 
@@ -3768,8 +3782,8 @@ import { useContext as useContext21, useMemo as useMemo18 } from "react";
 import React16, {
   useCallback as useCallback8,
   useContext as useContext20,
-  useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect5,
+  useEffect as useEffect8,
+  useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo17,
   useRef as useRef8,
   useState as useState13
@@ -3810,7 +3824,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect9(() => {
+  useEffect8(() => {
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3822,7 +3836,7 @@ var useBufferManager = (logLevel, mountTime) => {
     }
   }, [blocks]);
   if (typeof window !== "undefined") {
-    useLayoutEffect5(() => {
+    useLayoutEffect6(() => {
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -3849,7 +3863,7 @@ var BufferingProvider = ({ children }) => {
 };
 var useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState13(bufferManager.buffering.current);
-  useEffect9(() => {
+  useEffect8(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -4018,7 +4032,7 @@ var seek = ({
 };
 
 // src/use-media-buffering.ts
-import { useEffect as useEffect10, useState as useState14 } from "react";
+import { useEffect as useEffect9, useState as useState14 } from "react";
 var useMediaBuffering = ({
   element,
   shouldBuffer,
@@ -4030,7 +4044,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState14(false);
-  useEffect10(() => {
+  useEffect9(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -4158,7 +4172,7 @@ var useMediaBuffering = ({
 };
 
 // src/use-request-video-callback-time.ts
-import { useEffect as useEffect11, useRef as useRef10 } from "react";
+import { useEffect as useEffect10, useRef as useRef10 } from "react";
 var useRequestVideoCallbackTime = ({
   mediaRef,
   mediaType,
@@ -4166,7 +4180,7 @@ var useRequestVideoCallbackTime = ({
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef10(null);
-  useEffect11(() => {
+  useEffect10(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -4460,7 +4474,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect12(() => {
+  useEffect11(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -4499,13 +4513,13 @@ var useMediaPlayback = ({
     isPostmounting
   ]);
   const env = useRemotionEnvironment();
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect12(() => {
+  useEffect11(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -4624,7 +4638,7 @@ var useMediaPlayback = ({
 };
 
 // src/use-media-tag.ts
-import { useContext as useContext23, useEffect as useEffect13 } from "react";
+import { useContext as useContext23, useEffect as useEffect12 } from "react";
 var useMediaTag = ({
   mediaRef,
   id,
@@ -4637,7 +4651,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect13(() => {
+  useEffect12(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -4849,12 +4863,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  useImperativeHandle5(ref, () => {
+  useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, [audioRef]);
   const currentOnDurationCallback = useRef12(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect14(() => {
+  useEffect13(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -4887,9 +4901,9 @@ var AudioForPreview = forwardRef4(AudioForDevelopmentForwardRefFunction);
 import {
   forwardRef as forwardRef5,
   useContext as useContext26,
-  useEffect as useEffect15,
-  useImperativeHandle as useImperativeHandle6,
-  useLayoutEffect as useLayoutEffect7,
+  useEffect as useEffect14,
+  useImperativeHandle as useImperativeHandle7,
+  useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo22,
   useRef as useRef13
 } from "react";
@@ -4932,10 +4946,10 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useImperativeHandle6(ref, () => {
+  useImperativeHandle7(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect15(() => {
+  useEffect14(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -4979,7 +4993,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -5142,11 +5156,11 @@ var Html5Audio = forwardRef6(AudioRefForwardingFunction);
 addSequenceStackTraces(Html5Audio);
 var Audio = Html5Audio;
 // src/Composition.tsx
-import { Suspense, useContext as useContext29, useEffect as useEffect17 } from "react";
+import { Suspense, useContext as useContext29, useEffect as useEffect16 } from "react";
 import { createPortal } from "react-dom";
 
 // src/Folder.tsx
-import { createContext as createContext18, useContext as useContext28, useEffect as useEffect16, useMemo as useMemo23 } from "react";
+import { createContext as createContext18, useContext as useContext28, useEffect as useEffect15, useMemo as useMemo23 } from "react";
 
 // src/validation/validate-folder-name.ts
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
@@ -5182,7 +5196,7 @@ var Folder = ({ name, children }) => {
       parentName
     };
   }, [name, parentName]);
-  useEffect16(() => {
+  useEffect15(() => {
     registerFolder(name, parentName);
     return () => {
       unregisterFolder(name, parentName);
@@ -5337,7 +5351,7 @@ var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
 import { jsx as jsx23 } from "react/jsx-runtime";
 var Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect17(() => {
+  useEffect16(() => {
     const fallback = delayRender2("Waiting for Root component to unsuspend");
     return () => continueRender2(fallback);
   }, [continueRender2, delayRender2]);
@@ -5375,7 +5389,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);
-  useEffect17(() => {
+  useEffect16(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -5414,7 +5428,7 @@ var InnerComposition = ({
     registerComposition,
     unregisterComposition
   ]);
-  useEffect17(() => {
+  useEffect16(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -5715,8 +5729,8 @@ import {
   forwardRef as forwardRef8,
   useCallback as useCallback13,
   useContext as useContext30,
-  useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect8,
+  useImperativeHandle as useImperativeHandle8,
+  useLayoutEffect as useLayoutEffect9,
   useRef as useRef14
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
@@ -5745,7 +5759,7 @@ var ImgRefForwarding = ({
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  useImperativeHandle7(ref, () => {
+  useImperativeHandle8(ref, () => {
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
@@ -5787,7 +5801,7 @@ var ImgRefForwarding = ({
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
-    useLayoutEffect8(() => {
+    useLayoutEffect9(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -5876,7 +5890,7 @@ var compositionsRef = React25.createRef();
 // src/CompositionManagerProvider.tsx
 import {
   useCallback as useCallback14,
-  useImperativeHandle as useImperativeHandle8,
+  useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo25,
   useRef as useRef15,
   useState as useState17
@@ -5930,7 +5944,7 @@ var CompositionManagerProvider = ({
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
   }, []);
-  useImperativeHandle8(compositionsRef, () => {
+  useImperativeHandle9(compositionsRef, () => {
     return {
       getCompositions: () => currentcompositionsRef.current
     };
@@ -6041,6 +6055,10 @@ var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
 
+// src/max-video-cache-size.ts
+import React26 from "react";
+var MaxMediaCacheSizeContext = React26.createContext(null);
+
 // src/register-root.ts
 var Root = null;
 var listeners = [];
@@ -6073,7 +6091,7 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useEffect as useEffect18, useMemo as useMemo27, useState as useState18 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
 
 // src/use-media-enabled.tsx
 import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
@@ -6113,7 +6131,7 @@ var MediaEnabledProvider = ({
 
 // src/RemotionRoot.tsx
 import { jsx as jsx28 } from "react/jsx-runtime";
-var RemotionRoot = ({
+var RemotionRootContexts = ({
   children,
   numberOfAudioTags,
   logLevel,
@@ -6139,7 +6157,7 @@ var RemotionRoot = ({
       }
     };
   }, []);
-  useEffect18(() => {
+  useEffect17(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -6167,14 +6185,12 @@ var RemotionRoot = ({
             children: /* @__PURE__ */ jsx28(EditorPropsProvider, {
               children: /* @__PURE__ */ jsx28(PrefetchProvider, {
                 children: /* @__PURE__ */ jsx28(SequenceManagerProvider, {
-                  children: /* @__PURE__ */ jsx28(RenderAssetManagerProvider, {
-                    children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
-                      numberOfAudioTags,
-                      audioLatencyHint,
-                      children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
-                        children: /* @__PURE__ */ jsx28(BufferingProvider, {
-                          children
-                        })
+                  children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
+                    numberOfAudioTags,
+                    audioLatencyHint,
+                    children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
+                      children: /* @__PURE__ */ jsx28(BufferingProvider, {
+                        children
                       })
                     })
                   })
@@ -6216,8 +6232,8 @@ var setupEnvVariables = () => {
 };
 
 // src/use-current-scale.ts
-import React27, { createContext as createContext20 } from "react";
-var CurrentScaleContext = React27.createContext(null);
+import React28, { createContext as createContext20 } from "react";
+var CurrentScaleContext = React28.createContext(null);
 var PreviewSizeContext = createContext20({
   setSize: () => {
     return;
@@ -6242,8 +6258,8 @@ var calculateScale = ({
   return Number(previewSize);
 };
 var useCurrentScale = (options) => {
-  const hasContext = React27.useContext(CurrentScaleContext);
-  const zoomContext = React27.useContext(PreviewSizeContext);
+  const hasContext = React28.useContext(CurrentScaleContext);
+  const zoomContext = React28.useContext(PreviewSizeContext);
   const config = useUnsafeVideoConfig();
   const env = useRemotionEnvironment();
   if (hasContext === null || config === null || zoomContext === null) {
@@ -6279,8 +6295,8 @@ import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
   useContext as useContext32,
-  useEffect as useEffect19,
-  useLayoutEffect as useLayoutEffect9,
+  useEffect as useEffect18,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo28,
   useState as useState19
 } from "react";
@@ -6341,7 +6357,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect19(() => {
+  useEffect18(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -6398,7 +6414,7 @@ var OffthreadVideoForRendering = ({
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -6503,20 +6519,20 @@ var OffthreadVideoForRendering = ({
 import {
   forwardRef as forwardRef9,
   useContext as useContext33,
-  useEffect as useEffect21,
-  useImperativeHandle as useImperativeHandle9,
+  useEffect as useEffect20,
+  useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo29,
   useRef as useRef16,
   useState as useState20
 } from "react";
 
 // src/video/emit-video-frame.ts
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect19 } from "react";
 var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -6657,7 +6673,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     duration,
     fps
   });
-  useImperativeHandle9(ref, () => {
+  useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
   useState20(() => playbackLogging({
@@ -6666,7 +6682,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6697,7 +6713,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef16(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6714,7 +6730,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6943,21 +6959,21 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React31, { useMemo as useMemo30 } from "react";
+import React32, { useMemo as useMemo30 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 function useRemotionContexts() {
-  const compositionManagerCtx = React31.useContext(CompositionManager);
-  const timelineContext = React31.useContext(TimelineContext);
-  const setTimelineContext = React31.useContext(SetTimelineContext);
-  const sequenceContext = React31.useContext(SequenceContext);
-  const nonceContext = React31.useContext(NonceContext);
-  const canUseRemotionHooksContext = React31.useContext(CanUseRemotionHooks);
-  const preloadContext = React31.useContext(PreloadContext);
-  const resolveCompositionContext = React31.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React31.useContext(RenderAssetManager);
-  const sequenceManagerContext = React31.useContext(SequenceManager);
-  const bufferManagerContext = React31.useContext(BufferingContextReact);
-  const logLevelContext = React31.useContext(LogLevelContext);
+  const compositionManagerCtx = React32.useContext(CompositionManager);
+  const timelineContext = React32.useContext(TimelineContext);
+  const setTimelineContext = React32.useContext(SetTimelineContext);
+  const sequenceContext = React32.useContext(SequenceContext);
+  const nonceContext = React32.useContext(NonceContext);
+  const canUseRemotionHooksContext = React32.useContext(CanUseRemotionHooks);
+  const preloadContext = React32.useContext(PreloadContext);
+  const resolveCompositionContext = React32.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React32.useContext(RenderAssetManager);
+  const sequenceManagerContext = React32.useContext(SequenceManager);
+  const bufferManagerContext = React32.useContext(BufferingContextReact);
+  const logLevelContext = React32.useContext(LogLevelContext);
   return useMemo30(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -7030,6 +7046,7 @@ var RemotionContextProvider = (props2) => {
 // src/internals.ts
 var compositionSelectorRef = createRef3();
 var Internals = {
+  MaxMediaCacheSizeContext,
   useUnsafeVideoConfig,
   useFrameForVolumeProp,
   useTimelinePosition,
@@ -7044,7 +7061,7 @@ var Internals = {
   CompositionSetters,
   SequenceManager,
   SequenceVisibilityToggleContext,
-  RemotionRoot,
+  RemotionRootContexts,
   CompositionManagerProvider,
   useVideo,
   getRoot,
@@ -7122,7 +7139,8 @@ var Internals = {
   useIsPlayerBuffering,
   TimelinePosition: exports_timeline_position_state,
   DelayRenderContextType,
-  TimelineContext
+  TimelineContext,
+  RenderAssetManagerProvider
 };
 // src/interpolate-colors.ts
 var NUMBER = "[-+]?\\d*\\.?\\d+";
@@ -7491,11 +7509,11 @@ var validateFrame = ({
 import { Children, forwardRef as forwardRef10, useMemo as useMemo31 } from "react";
 
 // src/series/flatten-children.tsx
-import React32 from "react";
+import React33 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React32.Children.toArray(children);
+  const childrenArray = React33.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React32.Fragment) {
+    if (child.type === React33.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -7504,7 +7522,7 @@ var flattenChildren = (children) => {
 };
 
 // src/series/is-inside-series.tsx
-import React33, { createContext as createContext21 } from "react";
+import React34, { createContext as createContext21 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var IsInsideSeriesContext = createContext21(false);
 var IsInsideSeriesContainer = ({ children }) => {
@@ -7520,7 +7538,7 @@ var IsNotInsideSeriesProvider = ({ children }) => {
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React33.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React34.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -7935,14 +7953,14 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React35 from "react";
+import React36 from "react";
 var Still = (props2) => {
   const newProps = {
     ...props2,
     durationInFrames: 1,
     fps: 1
   };
-  return React35.createElement(Composition, newProps);
+  return React36.createElement(Composition, newProps);
 };
 // src/video/Video.tsx
 import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext35 } from "react";
@@ -7951,9 +7969,9 @@ import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as
 import {
   forwardRef as forwardRef11,
   useContext as useContext34,
-  useEffect as useEffect22,
-  useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect10,
+  useEffect as useEffect21,
+  useImperativeHandle as useImperativeHandle11,
+  useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo32,
   useRef as useRef17
 } from "react";
@@ -8126,7 +8144,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect22(() => {
+  useEffect21(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -8166,10 +8184,10 @@ var VideoForRenderingForwardFunction = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  useImperativeHandle10(ref, () => {
+  useImperativeHandle11(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect22(() => {
+  useEffect21(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -8253,7 +8271,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect10(() => {
+    useLayoutEffect11(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.375";
+var VERSION = "4.0.377";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.375",
+	"version": "4.0.377",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -34,7 +34,7 @@
 		"react-dom": "19.0.0",
 		"webpack": "5.96.1",
 		"zod": "3.22.3",
-		"@remotion/eslint-config-internal": "4.0.375",
+		"@remotion/eslint-config-internal": "4.0.377",
 		"eslint": "9.19.0"
 	},
 	"keywords": [