remotion 4.0.0-alpha11 → 4.0.0-alpha13

package/dist/cjs/AssetManager.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { TAsset } from './CompositionManager.js';
+export declare type AssetManagerContext = {
+    registerAsset: (asset: TAsset) => void;
+    unregisterAsset: (id: string) => void;
+    assets: TAsset[];
+};
+export declare const AssetManager: import("react").Context<AssetManagerContext>;
+export declare const AssetManagerProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/cjs/AssetManager.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetManagerProvider = exports.AssetManager = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.AssetManager = (0, react_1.createContext)({
+    registerAsset: () => undefined,
+    unregisterAsset: () => undefined,
+    assets: [],
+});
+const AssetManagerProvider = ({ children }) => {
+    const [assets, setAssets] = (0, react_1.useState)([]);
+    const registerAsset = (0, react_1.useCallback)((asset) => {
+        setAssets((assts) => {
+            return [...assts, asset];
+        });
+    }, []);
+    const unregisterAsset = (0, react_1.useCallback)((id) => {
+        setAssets((assts) => {
+            return assts.filter((a) => a.id !== id);
+        });
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_collectAssets = () => {
+                setAssets([]); // clear assets at next render
+                return assets;
+            };
+        }
+    }, [assets]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            registerAsset,
+            unregisterAsset,
+            assets,
+        };
+    }, [assets, registerAsset, unregisterAsset]);
+    return ((0, jsx_runtime_1.jsx)(exports.AssetManager.Provider, { value: contextValue, children: children }));
+};
+exports.AssetManagerProvider = AssetManagerProvider;

package/dist/cjs/CompositionManager.js

@@ -26,9 +26,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionManagerProvider = exports.compositionsRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const AssetManager_js_1 = require("./AssetManager.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
+const SequenceManager_js_1 = require("./SequenceManager.js");
 exports.compositionsRef = react_1.default.createRef();
 const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     var _a;
@@ -37,9 +39,7 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     const [compositions, setCompositions] = (0, react_1.useState)([]);
     const currentcompositionsRef = (0, react_1.useRef)(compositions);
     const [currentComposition, setCurrentComposition] = (0, react_1.useState)(null);
-    const [assets, setAssets] = (0, react_1.useState)([]);
     const [folders, setFolders] = (0, react_1.useState)([]);
-    const [sequences, setSequences] = (0, react_1.useState)([]);
     const [currentCompositionMetadata, setCurrentCompositionMetadata] = (0, react_1.useState)(null);
     const updateCompositions = (0, react_1.useCallback)((
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -62,29 +62,11 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
             return value;
         });
     }, [updateCompositions]);
-    const registerSequence = (0, react_1.useCallback)((seq) => {
-        setSequences((seqs) => {
-            return [...seqs, seq];
-        });
-    }, []);
     const unregisterComposition = (0, react_1.useCallback)((id) => {
         setCompositions((comps) => {
             return comps.filter((c) => c.id !== id);
         });
     }, []);
-    const unregisterSequence = (0, react_1.useCallback)((seq) => {
-        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
-    }, []);
-    const registerAsset = (0, react_1.useCallback)((asset) => {
-        setAssets((assts) => {
-            return [...assts, asset];
-        });
-    }, []);
-    const unregisterAsset = (0, react_1.useCallback)((id) => {
-        setAssets((assts) => {
-            return assts.filter((a) => a.id !== id);
-        });
-    }, []);
     const registerFolder = (0, react_1.useCallback)((name, parent) => {
         setFolders((prevFolders) => {
             return [
@@ -101,14 +83,6 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
             return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
         });
     }, []);
-    (0, react_1.useLayoutEffect)(() => {
-        if (typeof window !== 'undefined') {
-            window.remotion_collectAssets = () => {
-                setAssets([]); // clear assets at next render
-                return assets;
-            };
-        }
-    }, [assets]);
     (0, react_1.useImperativeHandle)(exports.compositionsRef, () => {
         return {
             getCompositions: () => currentcompositionsRef.current,
@@ -122,12 +96,6 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
             unregisterComposition,
             currentComposition,
             setCurrentComposition,
-            registerSequence,
-            unregisterSequence,
-            registerAsset,
-            unregisterAsset,
-            sequences,
-            assets,
             folders,
             registerFolder,
             unregisterFolder,
@@ -139,17 +107,11 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
         registerComposition,
         unregisterComposition,
         currentComposition,
-        registerSequence,
-        unregisterSequence,
-        registerAsset,
-        unregisterAsset,
-        sequences,
-        assets,
         folders,
         registerFolder,
         unregisterFolder,
         currentCompositionMetadata,
     ]);
-    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(AssetManager_js_1.AssetManagerProvider, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/CompositionManagerContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { AnyZodObject } from 'zod';
-import type { AnyCompMetadata, AnyComposition, TAsset, TComposition, TSequence } from './CompositionManager.js';
+import type { AnyCompMetadata, AnyComposition, TComposition } from './CompositionManager.js';
 import type { TFolder } from './Folder.js';
 export declare type BaseMetadata = Pick<AnyCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
 export declare type CompositionManagerContext = {
@@ -13,12 +13,6 @@ export declare type CompositionManagerContext = {
     setCurrentComposition: (curr: string) => void;
     setCurrentCompositionMetadata: (metadata: BaseMetadata) => void;
     currentCompositionMetadata: BaseMetadata | null;
-    registerSequence: (seq: TSequence) => void;
-    unregisterSequence: (id: string) => void;
-    registerAsset: (asset: TAsset) => void;
-    unregisterAsset: (id: string) => void;
-    sequences: TSequence[];
-    assets: TAsset[];
     folders: TFolder[];
 };
 export declare const CompositionManager: import("react").Context<CompositionManagerContext>;

package/dist/cjs/CompositionManagerContext.js

@@ -11,12 +11,6 @@ exports.CompositionManager = (0, react_1.createContext)({
     currentComposition: null,
     setCurrentComposition: () => undefined,
     setCurrentCompositionMetadata: () => undefined,
-    registerSequence: () => undefined,
-    unregisterSequence: () => undefined,
-    registerAsset: () => undefined,
-    unregisterAsset: () => undefined,
-    sequences: [],
-    assets: [],
     folders: [],
     currentCompositionMetadata: null,
 });

package/dist/cjs/RemotionRoot.js

@@ -21,16 +21,17 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
     const [fastRefreshes, setFastRefreshes] = (0, react_1.useState)(0);
     const [playbackRate, setPlaybackRate] = (0, react_1.useState)(1);
     const audioAndVideoTags = (0, react_1.useRef)([]);
-    (0, react_1.useLayoutEffect)(() => {
-        if (typeof window !== 'undefined') {
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
             window.remotion_setFrame = (f) => {
                 const id = (0, delay_render_js_1.delayRender)(`Setting the current frame to ${f}`);
                 setFrame(f);
                 requestAnimationFrame(() => (0, delay_render_js_1.continueRender)(id));
             };
             window.remotion_isPlayer = false;
-        }
-    }, []);
+        }, []);
+    }
     const timelineContextValue = (0, react_1.useMemo)(() => {
         return {
             frame,

package/dist/cjs/ResolveCompositionConfig.d.ts

@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from 'react';
+import type { AnyComposition } from './CompositionManager.js';
 import type { VideoConfig } from './video-config.js';
 declare type ResolveCompositionConfigContect = Record<string, VideoConfigState | undefined>;
 export declare const ResolveCompositionContext: import("react").Context<ResolveCompositionConfigContect | null>;
@@ -18,5 +19,6 @@ declare type VideoConfigState = {
 export declare const ResolveCompositionConfig: React.FC<PropsWithChildren<{
     children: React.ReactNode;
 }>>;
+export declare const needsResolution: (composition: AnyComposition) => boolean;
 export declare const useResolvedVideoConfig: (preferredCompositionId: string | null) => VideoConfigState | null;
 export {};

package/dist/cjs/ResolveCompositionConfig.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResolvedVideoConfig = exports.ResolveCompositionConfig = exports.resolveCompositionsRef = exports.ResolveCompositionContext = void 0;
+exports.useResolvedVideoConfig = exports.needsResolution = exports.ResolveCompositionConfig = exports.resolveCompositionsRef = exports.ResolveCompositionContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const input_props_js_1 = require("./config/input-props.js");
 const EditorProps_js_1 = require("./EditorProps.js");
+const get_environment_js_1 = require("./get-environment.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
 exports.ResolveCompositionContext = (0, react_1.createContext)(null);
 exports.resolveCompositionsRef = (0, react_1.createRef)();
@@ -97,7 +98,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);
     (0, react_1.useEffect)(() => {
-        if (selectedComposition) {
+        if (selectedComposition && (0, exports.needsResolution)(selectedComposition)) {
             const controller = doResolution(selectedComposition, selectedEditorProps);
             return () => {
                 controller.abort();
@@ -133,6 +134,10 @@ const ResolveCompositionConfig = ({ children }) => {
     return ((0, jsx_runtime_1.jsx)(exports.ResolveCompositionContext.Provider, { value: resolvedConfigsIncludingStaticOnes, children: children }));
 };
 exports.ResolveCompositionConfig = ResolveCompositionConfig;
+const needsResolution = (composition) => {
+    return Boolean(composition.calculateMetadata);
+};
+exports.needsResolution = needsResolution;
 const useResolvedVideoConfig = (preferredCompositionId) => {
     const context = (0, react_1.useContext)(exports.ResolveCompositionContext);
     const { props: allEditorProps } = (0, react_1.useContext)(EditorProps_js_1.EditorPropsContext);
@@ -148,8 +153,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         if (!composition) {
             return null;
         }
-        const needsResolution = composition.calculateMetadata;
-        if (needsResolution === null) {
+        if (!(0, exports.needsResolution)(composition)) {
             return {
                 type: 'success',
                 result: {
@@ -157,7 +161,11 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                     defaultProps: {
                         ...((_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {}),
                         ...(selectedEditorProps !== null && selectedEditorProps !== void 0 ? selectedEditorProps : {}),
-                        ...(typeof window === 'undefined' ? {} : (_b = (0, input_props_js_1.getInputProps)()) !== null && _b !== void 0 ? _b : {}),
+                        ...(typeof window === 'undefined' ||
+                            (0, get_environment_js_1.getRemotionEnvironment)() === 'player-development' ||
+                            (0, get_environment_js_1.getRemotionEnvironment)() === 'player-production'
+                            ? {}
+                            : (_b = (0, input_props_js_1.getInputProps)()) !== null && _b !== void 0 ? _b : {}),
                     },
                 },
             };

package/dist/cjs/Sequence.js

@@ -4,11 +4,11 @@ exports.Sequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
-const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const get_environment_js_1 = require("./get-environment.js");
 const get_timeline_clip_name_js_1 = require("./get-timeline-clip-name.js");
 const nonce_js_1 = require("./nonce.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");
 const use_video_config_js_1 = require("./use-video-config.js");
 const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, loopDisplay, ...other }, ref) => {
@@ -46,7 +46,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 } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const contextValue = (0, react_1.useMemo)(() => {
         var _a;
         return {

package/dist/cjs/SequenceManager.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { TSequence } from './CompositionManager.js';
+export declare type SequenceManagerContext = {
+    registerSequence: (seq: TSequence) => void;
+    unregisterSequence: (id: string) => void;
+    sequences: TSequence[];
+};
+export declare const SequenceManager: React.Context<SequenceManagerContext>;
+export declare const SequenceManagerProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/cjs/SequenceManager.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceManagerProvider = exports.SequenceManager = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.SequenceManager = react_1.default.createContext({
+    registerSequence: () => {
+        throw new Error('SequenceManagerContext not initialized');
+    },
+    unregisterSequence: () => {
+        throw new Error('SequenceManagerContext not initialized');
+    },
+    sequences: [],
+});
+const SequenceManagerProvider = ({ children }) => {
+    const [sequences, setSequences] = (0, react_1.useState)([]);
+    const registerSequence = (0, react_1.useCallback)((seq) => {
+        setSequences((seqs) => {
+            return [...seqs, seq];
+        });
+    }, []);
+    const unregisterSequence = (0, react_1.useCallback)((seq) => {
+        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
+    }, []);
+    const context = (0, react_1.useMemo)(() => {
+        return {
+            registerSequence,
+            sequences,
+            unregisterSequence,
+        };
+    }, [registerSequence, sequences, unregisterSequence]);
+    return ((0, jsx_runtime_1.jsx)(exports.SequenceManager.Provider, { value: context, children: children }));
+};
+exports.SequenceManagerProvider = SequenceManagerProvider;

package/dist/cjs/audio/AudioForRendering.js

@@ -4,7 +4,7 @@ exports.AudioForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
-const CompositionManagerContext_js_1 = require("../CompositionManagerContext.js");
+const AssetManager_js_1 = require("../AssetManager.js");
 const delay_render_js_1 = require("../delay-render.js");
 const get_environment_js_1 = require("../get-environment.js");
 const random_js_1 = require("../random.js");
@@ -19,7 +19,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(AssetManager_js_1.AssetManager);
     const environment = (0, get_environment_js_1.useRemotionEnvironment)();
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads

package/dist/cjs/internals.d.ts

@@ -15,6 +15,7 @@ export declare const Internals: {
     useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
     Timeline: typeof TimelinePosition;
     CompositionManager: import("react").Context<CompositionManagerContext>;
+    SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
     RemotionRoot: import("react").FC<{
         children: import("react").ReactNode;
         numberOfAudioTags: number;
@@ -34,7 +35,6 @@ export declare const Internals: {
     RemotionContextProvider: (props: import("./wrap-remotion-context.js").RemotionContextProviderProps) => JSX.Element;
     CSSUtils: typeof CSSUtils;
     setupEnvVariables: () => void;
-    ENV_VARIABLES_ENV_NAME: "ENV_VARIABLES";
     MediaVolumeContext: import("react").Context<MediaVolumeContextValue>;
     SetMediaVolumeContext: import("react").Context<SetMediaVolumeContextValue>;
     validateDurationInFrames: ({ allowFloats, component, durationInFrames, }: {
@@ -125,5 +125,6 @@ export declare const Internals: {
         children: import("react").ReactNode;
     }>>;
     REMOTION_STUDIO_CONTAINER_ELEMENT: string;
+    AssetManager: import("react").Context<import("./AssetManager.js").AssetManagerContext>;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, };

package/dist/cjs/internals.js

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Internals = void 0;
+const AssetManager_js_1 = require("./AssetManager.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
@@ -44,6 +45,7 @@ const RemotionRoot_js_1 = require("./RemotionRoot.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
+const SequenceManager_js_1 = require("./SequenceManager.js");
 const setup_env_variables_js_1 = require("./setup-env-variables.js");
 const TimelinePosition = __importStar(require("./timeline-position-state.js"));
 const truthy_js_1 = require("./truthy.js");
@@ -66,6 +68,7 @@ exports.Internals = {
     useUnsafeVideoConfig: use_unsafe_video_config_js_1.useUnsafeVideoConfig,
     Timeline,
     CompositionManager: CompositionManagerContext_js_1.CompositionManager,
+    SequenceManager: SequenceManager_js_1.SequenceManager,
     RemotionRoot: RemotionRoot_js_1.RemotionRoot,
     useVideo: use_video_js_1.useVideo,
     getRoot: register_root_js_1.getRoot,
@@ -78,7 +81,6 @@ exports.Internals = {
     RemotionContextProvider: wrap_remotion_context_js_1.RemotionContextProvider,
     CSSUtils,
     setupEnvVariables: setup_env_variables_js_1.setupEnvVariables,
-    ENV_VARIABLES_ENV_NAME: setup_env_variables_js_1.ENV_VARIABLES_ENV_NAME,
     MediaVolumeContext: volume_position_state_js_1.MediaVolumeContext,
     SetMediaVolumeContext: volume_position_state_js_1.SetMediaVolumeContext,
     validateDurationInFrames: validate_duration_in_frames_js_1.validateDurationInFrames,
@@ -113,4 +115,5 @@ exports.Internals = {
     resolveCompositionsRef: ResolveCompositionConfig_js_1.resolveCompositionsRef,
     ResolveCompositionConfig: ResolveCompositionConfig_js_1.ResolveCompositionConfig,
     REMOTION_STUDIO_CONTAINER_ELEMENT: get_preview_dom_element_js_1.REMOTION_STUDIO_CONTAINER_ELEMENT,
+    AssetManager: AssetManager_js_1.AssetManager,
 };

package/dist/cjs/nonce.js

@@ -9,7 +9,13 @@ exports.NonceContext = (0, react_1.createContext)({
 const useNonce = () => {
     const context = (0, react_1.useContext)(exports.NonceContext);
     const [nonce, setNonce] = (0, react_1.useState)(() => context.getNonce());
+    const lastContext = (0, react_1.useRef)(context);
+    // Only if context changes, but not initially
     (0, react_1.useEffect)(() => {
+        if (lastContext.current === context) {
+            return;
+        }
+        lastContext.current = context;
         setNonce(context.getNonce);
     }, [context]);
     return nonce;

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

@@ -2,17 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveVideoConfig = void 0;
 const input_props_js_1 = require("./config/input-props.js");
+const get_environment_js_1 = require("./get-environment.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
 const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
 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 = (0, input_props_js_1.getInputProps)()) !== null && _c !== void 0 ? _c : {}),
+                ...(typeof window === 'undefined' ||
+                    (0, get_environment_js_1.getRemotionEnvironment)() === 'player-development' ||
+                    (0, get_environment_js_1.getRemotionEnvironment)() === 'player-production'
+                    ? {}
+                    : (_c = (0, input_props_js_1.getInputProps)()) !== null && _c !== void 0 ? _c : {}),
             },
             abortSignal: signal,
         })
@@ -31,7 +36,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
                 fps,
                 durationInFrames,
                 id: composition.id,
-                defaultProps: composition.defaultProps,
+                defaultProps: c.props,
             };
         });
     }
@@ -42,7 +47,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 : {}),
     };
 };
 exports.resolveVideoConfig = resolveVideoConfig;

package/dist/cjs/setup-env-variables.d.ts

@@ -1,2 +1 @@
-export declare const ENV_VARIABLES_ENV_NAME: "ENV_VARIABLES";
 export declare const setupEnvVariables: () => void;

package/dist/cjs/setup-env-variables.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setupEnvVariables = exports.ENV_VARIABLES_ENV_NAME = void 0;
+exports.setupEnvVariables = void 0;
 const get_environment_js_1 = require("./get-environment.js");
-exports.ENV_VARIABLES_ENV_NAME = 'ENV_VARIABLES';
 const getEnvVariables = () => {
     if ((0, get_environment_js_1.getRemotionEnvironment)() === 'rendering') {
         const param = window.remotion_envVariables;
@@ -12,11 +11,10 @@ const getEnvVariables = () => {
         return { ...JSON.parse(param), NODE_ENV: process.env.NODE_ENV };
     }
     if ((0, get_environment_js_1.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`');

package/dist/cjs/use-media-in-timeline.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaInTimeline = void 0;
 const react_1 = require("react");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
-const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
 const get_environment_js_1 = require("./get-environment.js");
 const nonce_js_1 = require("./nonce.js");
 const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.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");
 const use_video_config_js_1 = require("./use-video-config.js");
 const volume_prop_js_1 = require("./volume-prop.js");
@@ -29,7 +29,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         : 0;
     const [playing] = (0, timeline_position_state_js_1.usePlayingState)();
     const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
-    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const [initialVolume] = (0, react_1.useState)(() => volume);
     const nonce = (0, nonce_js_1.useNonce)();

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.0-alpha11";
+export declare const VERSION = "4.0.0-alpha13";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '4.0.0-alpha11';
+exports.VERSION = '4.0.0-alpha13';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -4,8 +4,8 @@ exports.OffthreadVideoForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
+const AssetManager_js_1 = require("../AssetManager.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
-const CompositionManagerContext_js_1 = require("../CompositionManagerContext.js");
 const default_css_js_1 = require("../default-css.js");
 const Img_js_1 = require("../Img.js");
 const random_js_1 = require("../random.js");
@@ -23,7 +23,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
     const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
-    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(AssetManager_js_1.AssetManager);
     if (!src) {
         throw new TypeError('No `src` was passed to <OffthreadVideo>.');
     }

package/dist/cjs/video/VideoForRendering.js

@@ -4,8 +4,8 @@ exports.VideoForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
+const AssetManager_js_1 = require("../AssetManager.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
-const CompositionManagerContext_js_1 = require("../CompositionManagerContext.js");
 const delay_render_js_1 = require("../delay-render.js");
 const get_environment_js_1 = require("../get-environment.js");
 const is_approximately_the_same_js_1 = require("../is-approximately-the-same.js");
@@ -26,7 +26,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const environment = (0, get_environment_js_1.useRemotionEnvironment)();
-    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(AssetManager_js_1.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 = (0, react_1.useMemo)(() => {

package/dist/cjs/wrap-remotion-context.d.ts

@@ -21,6 +21,8 @@ export declare function useRemotionContexts(): {
             error: Error;
         }) | undefined;
     } | null;
+    assetManagerContext: import("./AssetManager.js").AssetManagerContext;
+    sequenceManagerContext: import("./SequenceManager.js").SequenceManagerContext;
 };
 export interface RemotionContextProviderProps {
     contexts: ReturnType<typeof useRemotionContexts>;