remotion 4.0.0-alpha11 → 4.0.0-alpha13

package/dist/cjs/wrap-remotion-context.js

@@ -29,6 +29,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // such as in React Three Fiber. All the contexts need to be passed again
 // for them to be useable
 const react_1 = __importStar(require("react"));
+const AssetManager_js_1 = require("./AssetManager.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const NativeLayers_js_1 = require("./NativeLayers.js");
@@ -36,6 +37,7 @@ const nonce_js_1 = require("./nonce.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
+const SequenceManager_js_1 = require("./SequenceManager.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 function useRemotionContexts() {
     const compositionManagerCtx = react_1.default.useContext(CompositionManagerContext_js_1.CompositionManager);
@@ -47,6 +49,8 @@ function useRemotionContexts() {
     const nativeLayersContext = react_1.default.useContext(NativeLayers_js_1.NativeLayersContext);
     const preloadContext = react_1.default.useContext(prefetch_state_js_1.PreloadContext);
     const resolveCompositionContext = react_1.default.useContext(ResolveCompositionConfig_js_1.ResolveCompositionContext);
+    const assetManagerContext = react_1.default.useContext(AssetManager_js_1.AssetManager);
+    const sequenceManagerContext = react_1.default.useContext(SequenceManager_js_1.SequenceManager);
     return (0, react_1.useMemo)(() => ({
         compositionManagerCtx,
         timelineContext,
@@ -57,6 +61,8 @@ function useRemotionContexts() {
         nativeLayersContext,
         preloadContext,
         resolveCompositionContext,
+        assetManagerContext,
+        sequenceManagerContext,
     }), [
         compositionManagerCtx,
         nonceContext,
@@ -67,11 +73,13 @@ function useRemotionContexts() {
         nativeLayersContext,
         preloadContext,
         resolveCompositionContext,
+        assetManagerContext,
+        sequenceManagerContext,
     ]);
 }
 exports.useRemotionContexts = useRemotionContexts;
 const RemotionContextProvider = (props) => {
     const { children, contexts } = props;
-    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: (0, jsx_runtime_1.jsx)(AssetManager_js_1.AssetManager.Provider, { value: contexts.assetManagerContext, children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionContextProvider = RemotionContextProvider;

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useMemo, useLayoutEffect, useContext, useEffect, forwardRef, Children, isValidElement, useCallback, createRef, useImperativeHandle, useReducer, useRef, Suspense } from 'react';
+import React, { createContext, useState, useMemo, useLayoutEffect, useContext, useEffect, forwardRef, Children, isValidElement, useRef, useCallback, createRef, useImperativeHandle, useReducer, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.0-alpha11';
+const VERSION = '4.0.0-alpha13';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -208,25 +208,6 @@ const useRemotionEnvironment = () => {
     return getRemotionEnvironment();
 };
 
-const CompositionManager = createContext({
-    compositions: [],
-    registerComposition: () => undefined,
-    unregisterComposition: () => undefined,
-    registerFolder: () => undefined,
-    unregisterFolder: () => undefined,
-    currentComposition: null,
-    setCurrentComposition: () => undefined,
-    setCurrentCompositionMetadata: () => undefined,
-    registerSequence: () => undefined,
-    unregisterSequence: () => undefined,
-    registerAsset: () => undefined,
-    unregisterAsset: () => undefined,
-    sequences: [],
-    assets: [],
-    folders: [],
-    currentCompositionMetadata: null,
-});
-
 const HIDDEN_NAMES = ['__WEBPACK_DEFAULT_EXPORT__'];
 const getTimelineClipName = (children) => {
     var _a;
@@ -255,7 +236,13 @@ const NonceContext = createContext({
 const useNonce = () => {
     const context = useContext(NonceContext);
     const [nonce, setNonce] = useState(() => context.getNonce());
+    const lastContext = useRef(context);
+    // Only if context changes, but not initially
     useEffect(() => {
+        if (lastContext.current === context) {
+            return;
+        }
+        lastContext.current = context;
         setNonce(context.getNonce);
     }, [context]);
     return nonce;
@@ -263,6 +250,48 @@ const useNonce = () => {
 
 const SequenceContext = createContext(null);
 
+const SequenceManager = React.createContext({
+    registerSequence: () => {
+        throw new Error('SequenceManagerContext not initialized');
+    },
+    unregisterSequence: () => {
+        throw new Error('SequenceManagerContext not initialized');
+    },
+    sequences: [],
+});
+const SequenceManagerProvider = ({ children }) => {
+    const [sequences, setSequences] = useState([]);
+    const registerSequence = useCallback((seq) => {
+        setSequences((seqs) => {
+            return [...seqs, seq];
+        });
+    }, []);
+    const unregisterSequence = useCallback((seq) => {
+        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
+    }, []);
+    const context = useMemo(() => {
+        return {
+            registerSequence,
+            sequences,
+            unregisterSequence,
+        };
+    }, [registerSequence, sequences, unregisterSequence]);
+    return (jsx(SequenceManager.Provider, { value: context, children: children }));
+};
+
+const CompositionManager = createContext({
+    compositions: [],
+    registerComposition: () => undefined,
+    unregisterComposition: () => undefined,
+    registerFolder: () => undefined,
+    unregisterFolder: () => undefined,
+    currentComposition: null,
+    setCurrentComposition: () => undefined,
+    setCurrentCompositionMetadata: () => undefined,
+    folders: [],
+    currentCompositionMetadata: null,
+});
+
 let didWarnSSRImport = false;
 const warnOnceSSRImport = () => {
     if (didWarnSSRImport) {
@@ -349,14 +378,18 @@ const validateDurationInFrames = ({ allowFloats, component, durationInFrames, })
 };
 
 const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const calculatedProm = composition.calculateMetadata
         ? composition.calculateMetadata({
             defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
             props: {
                 ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
                 ...(editorPropsOrUndefined !== null && editorPropsOrUndefined !== void 0 ? editorPropsOrUndefined : {}),
-                ...(typeof window === 'undefined' ? {} : (_c = getInputProps()) !== null && _c !== void 0 ? _c : {}),
+                ...(typeof window === 'undefined' ||
+                    getRemotionEnvironment() === 'player-development' ||
+                    getRemotionEnvironment() === 'player-production'
+                    ? {}
+                    : (_c = getInputProps()) !== null && _c !== void 0 ? _c : {}),
             },
             abortSignal: signal,
         })
@@ -375,7 +408,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
                 fps,
                 durationInFrames,
                 id: composition.id,
-                defaultProps: composition.defaultProps,
+                defaultProps: c.props,
             };
         });
     }
@@ -386,7 +419,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
     return {
         ...data,
         id: composition.id,
-        defaultProps: composition.defaultProps,
+        defaultProps: ((_d = calculatedProm === null || calculatedProm === void 0 ? void 0 : calculatedProm.props) !== null && _d !== void 0 ? _d : {}),
     };
 };
 const validateCalculated = ({ composition, calculated, }) => {
@@ -508,7 +541,7 @@ const ResolveCompositionConfig = ({ children }) => {
     }, [allEditorProps, compositions, currentComposition, doResolution]);
     const isTheSame = (selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.id) === (renderModalComposition === null || renderModalComposition === void 0 ? void 0 : renderModalComposition.id);
     useEffect(() => {
-        if (selectedComposition) {
+        if (selectedComposition && needsResolution(selectedComposition)) {
             const controller = doResolution(selectedComposition, selectedEditorProps);
             return () => {
                 controller.abort();
@@ -543,6 +576,9 @@ const ResolveCompositionConfig = ({ children }) => {
     }, [compositions, resolvedConfigs]);
     return (jsx(ResolveCompositionContext.Provider, { value: resolvedConfigsIncludingStaticOnes, children: children }));
 };
+const needsResolution = (composition) => {
+    return Boolean(composition.calculateMetadata);
+};
 const useResolvedVideoConfig = (preferredCompositionId) => {
     const context = useContext(ResolveCompositionContext);
     const { props: allEditorProps } = useContext(EditorPropsContext);
@@ -558,8 +594,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         if (!composition) {
             return null;
         }
-        const needsResolution = composition.calculateMetadata;
-        if (needsResolution === null) {
+        if (!needsResolution(composition)) {
             return {
                 type: 'success',
                 result: {
@@ -567,7 +602,11 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                     defaultProps: {
                         ...((_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {}),
                         ...(selectedEditorProps !== null && selectedEditorProps !== void 0 ? selectedEditorProps : {}),
-                        ...(typeof window === 'undefined' ? {} : (_b = getInputProps()) !== null && _b !== void 0 ? _b : {}),
+                        ...(typeof window === 'undefined' ||
+                            getRemotionEnvironment() === 'player-development' ||
+                            getRemotionEnvironment() === 'player-production'
+                            ? {}
+                            : (_b = getInputProps()) !== null && _b !== void 0 ? _b : {}),
                     },
                 },
             };
@@ -750,7 +789,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         ? Math.min(parentSequence.durationInFrames - from, durationInFrames)
         : durationInFrames;
     const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-    const { registerSequence, unregisterSequence } = useContext(CompositionManager);
+    const { registerSequence, unregisterSequence } = useContext(SequenceManager);
     const contextValue = useMemo(() => {
         var _a;
         return {
@@ -1234,7 +1273,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         : 0;
     const [playing] = usePlayingState();
     const startsAt = useMediaStartsAt();
-    const { registerSequence, unregisterSequence } = useContext(CompositionManager);
+    const { registerSequence, unregisterSequence } = useContext(SequenceManager);
     const [id] = useState(() => String(Math.random()));
     const [initialVolume] = useState(() => volume);
     const nonce = useNonce();
@@ -1952,6 +1991,41 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
 };
 const AudioForDevelopment = forwardRef(AudioForDevelopmentForwardRefFunction);
 
+const AssetManager = createContext({
+    registerAsset: () => undefined,
+    unregisterAsset: () => undefined,
+    assets: [],
+});
+const AssetManagerProvider = ({ children }) => {
+    const [assets, setAssets] = useState([]);
+    const registerAsset = useCallback((asset) => {
+        setAssets((assts) => {
+            return [...assts, asset];
+        });
+    }, []);
+    const unregisterAsset = useCallback((id) => {
+        setAssets((assts) => {
+            return assts.filter((a) => a.id !== id);
+        });
+    }, []);
+    useLayoutEffect(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_collectAssets = () => {
+                setAssets([]); // clear assets at next render
+                return assets;
+            };
+        }
+    }, [assets]);
+    const contextValue = useMemo(() => {
+        return {
+            registerAsset,
+            unregisterAsset,
+            assets,
+        };
+    }, [assets, registerAsset, unregisterAsset]);
+    return (jsx(AssetManager.Provider, { value: contextValue, children: children }));
+};
+
 if (typeof window !== 'undefined') {
     window.remotion_renderReady = false;
 }
@@ -2029,7 +2103,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const volumePropFrame = useFrameForVolumeProp();
     const frame = useCurrentFrame();
     const sequenceContext = useContext(SequenceContext);
-    const { registerAsset, unregisterAsset } = useContext(CompositionManager);
+    const { registerAsset, unregisterAsset } = useContext(AssetManager);
     const environment = useRemotionEnvironment();
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
@@ -2799,9 +2873,7 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     const [compositions, setCompositions] = useState([]);
     const currentcompositionsRef = useRef(compositions);
     const [currentComposition, setCurrentComposition] = useState(null);
-    const [assets, setAssets] = useState([]);
     const [folders, setFolders] = useState([]);
-    const [sequences, setSequences] = useState([]);
     const [currentCompositionMetadata, setCurrentCompositionMetadata] = useState(null);
     const updateCompositions = useCallback((
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2824,29 +2896,11 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
             return value;
         });
     }, [updateCompositions]);
-    const registerSequence = useCallback((seq) => {
-        setSequences((seqs) => {
-            return [...seqs, seq];
-        });
-    }, []);
     const unregisterComposition = useCallback((id) => {
         setCompositions((comps) => {
             return comps.filter((c) => c.id !== id);
         });
     }, []);
-    const unregisterSequence = useCallback((seq) => {
-        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
-    }, []);
-    const registerAsset = useCallback((asset) => {
-        setAssets((assts) => {
-            return [...assts, asset];
-        });
-    }, []);
-    const unregisterAsset = useCallback((id) => {
-        setAssets((assts) => {
-            return assts.filter((a) => a.id !== id);
-        });
-    }, []);
     const registerFolder = useCallback((name, parent) => {
         setFolders((prevFolders) => {
             return [
@@ -2863,14 +2917,6 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
             return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
         });
     }, []);
-    useLayoutEffect(() => {
-        if (typeof window !== 'undefined') {
-            window.remotion_collectAssets = () => {
-                setAssets([]); // clear assets at next render
-                return assets;
-            };
-        }
-    }, [assets]);
     useImperativeHandle(compositionsRef, () => {
         return {
             getCompositions: () => currentcompositionsRef.current,
@@ -2884,12 +2930,6 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
             unregisterComposition,
             currentComposition,
             setCurrentComposition,
-            registerSequence,
-            unregisterSequence,
-            registerAsset,
-            unregisterAsset,
-            sequences,
-            assets,
             folders,
             registerFolder,
             unregisterFolder,
@@ -2901,18 +2941,12 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
         registerComposition,
         unregisterComposition,
         currentComposition,
-        registerSequence,
-        unregisterSequence,
-        registerAsset,
-        unregisterAsset,
-        sequences,
-        assets,
         folders,
         registerFolder,
         unregisterFolder,
         currentCompositionMetadata,
     ]);
-    return (jsx(CompositionManager.Provider, { value: contextValue, children: jsx(ResolveCompositionConfig, { children: jsx(SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }));
+    return (jsx(CompositionManager.Provider, { value: contextValue, children: jsx(SequenceManagerProvider, { children: jsx(AssetManagerProvider, { children: jsx(ResolveCompositionConfig, { children: jsx(SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
 };
 
 const injected = {};
@@ -3408,16 +3442,17 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
     const [fastRefreshes, setFastRefreshes] = useState(0);
     const [playbackRate, setPlaybackRate] = useState(1);
     const audioAndVideoTags = useRef([]);
-    useLayoutEffect(() => {
-        if (typeof window !== 'undefined') {
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useLayoutEffect(() => {
             window.remotion_setFrame = (f) => {
                 const id = delayRender(`Setting the current frame to ${f}`);
                 setFrame(f);
                 requestAnimationFrame(() => continueRender(id));
             };
             window.remotion_isPlayer = false;
-        }
-    }, []);
+        }, []);
+    }
     const timelineContextValue = useMemo(() => {
         return {
             frame,
@@ -3457,7 +3492,6 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
     return (jsx(NonceContext.Provider, { value: nonceContext, children: jsx(TimelineContext.Provider, { value: timelineContextValue, children: jsx(SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx(EditorPropsProvider, { children: jsx(PrefetchProvider, { children: jsx(NativeLayersProvider, { children: jsx(CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: jsx(DurationsContextProvider, { children: children }) }) }) }) }) }) }) }));
 };
 
-const ENV_VARIABLES_ENV_NAME = 'ENV_VARIABLES';
 const getEnvVariables = () => {
     if (getRemotionEnvironment() === 'rendering') {
         const param = window.remotion_envVariables;
@@ -3467,11 +3501,10 @@ const getEnvVariables = () => {
         return { ...JSON.parse(param), NODE_ENV: process.env.NODE_ENV };
     }
     if (getRemotionEnvironment() === 'preview') {
-        // Webpack will convert this to an object at compile time.
-        // Don't convert this syntax to a computed property.
+        // For the Preview, we already set the environment variables in index-html.ts.
+        // We just add NODE_ENV here.
         return {
-            ...process.env.ENV_VARIABLES,
-            NODE_ENV: process.env.NODE_ENV,
+            NODE_ENV: 'development',
         };
     }
     throw new Error('Can only call getEnvVariables() if environment is `rendering` or `preview`');
@@ -3520,6 +3553,8 @@ function useRemotionContexts() {
     const nativeLayersContext = React.useContext(NativeLayersContext);
     const preloadContext = React.useContext(PreloadContext);
     const resolveCompositionContext = React.useContext(ResolveCompositionContext);
+    const assetManagerContext = React.useContext(AssetManager);
+    const sequenceManagerContext = React.useContext(SequenceManager);
     return useMemo(() => ({
         compositionManagerCtx,
         timelineContext,
@@ -3530,6 +3565,8 @@ function useRemotionContexts() {
         nativeLayersContext,
         preloadContext,
         resolveCompositionContext,
+        assetManagerContext,
+        sequenceManagerContext,
     }), [
         compositionManagerCtx,
         nonceContext,
@@ -3540,11 +3577,13 @@ function useRemotionContexts() {
         nativeLayersContext,
         preloadContext,
         resolveCompositionContext,
+        assetManagerContext,
+        sequenceManagerContext,
     ]);
 }
 const RemotionContextProvider = (props) => {
     const { children, contexts } = props;
-    return (jsx(CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx(NonceContext.Provider, { value: contexts.nonceContext, children: jsx(NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: jsx(PreloadContext.Provider, { value: contexts.preloadContext, children: jsx(CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx(ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }));
+    return (jsx(CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx(NonceContext.Provider, { value: contexts.nonceContext, children: jsx(NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: jsx(PreloadContext.Provider, { value: contexts.preloadContext, children: jsx(CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx(SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: jsx(AssetManager.Provider, { value: contexts.assetManagerContext, children: jsx(ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 
 const Timeline = TimelinePosition;
@@ -3554,6 +3593,7 @@ const Internals = {
     useUnsafeVideoConfig,
     Timeline,
     CompositionManager,
+    SequenceManager,
     RemotionRoot,
     useVideo,
     getRoot,
@@ -3566,7 +3606,6 @@ const Internals = {
     RemotionContextProvider,
     CSSUtils,
     setupEnvVariables,
-    ENV_VARIABLES_ENV_NAME,
     MediaVolumeContext,
     SetMediaVolumeContext,
     validateDurationInFrames,
@@ -3601,6 +3640,7 @@ const Internals = {
     resolveCompositionsRef,
     ResolveCompositionConfig,
     REMOTION_STUDIO_CONTAINER_ELEMENT,
+    AssetManager,
 };
 
 const flattenChildren = (children) => {
@@ -4026,7 +4066,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
     const videoConfig = useUnsafeVideoConfig();
     const sequenceContext = useContext(SequenceContext);
     const mediaStartsAt = useMediaStartsAt();
-    const { registerAsset, unregisterAsset } = useContext(CompositionManager);
+    const { registerAsset, unregisterAsset } = useContext(AssetManager);
     if (!src) {
         throw new TypeError('No `src` was passed to <OffthreadVideo>.');
     }
@@ -4298,7 +4338,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     const sequenceContext = useContext(SequenceContext);
     const mediaStartsAt = useMediaStartsAt();
     const environment = useRemotionEnvironment();
-    const { registerAsset, unregisterAsset } = useContext(CompositionManager);
+    const { registerAsset, unregisterAsset } = useContext(AssetManager);
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
     const id = useMemo(() => {

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.0-alpha11';
+const VERSION = '4.0.0-alpha13';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.0-alpha11",
+  "version": "4.0.0-alpha13",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",