remotion 4.0.0-alpha10 → 4.0.0-alpha12

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/Img.js

@@ -59,35 +59,38 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
         }
         (0, cancel_render_js_1.cancelRender)('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
     }, [maxRetries, onError, retryIn]);
-    (0, react_1.useLayoutEffect)(() => {
-        if (process.env.NODE_ENV === 'test') {
-            return;
-        }
-        const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + src);
-        const { current } = imageRef;
-        const onComplete = () => {
-            var _a, _b, _c, _d;
-            if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
-                delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
-                console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
+            if (process.env.NODE_ENV === 'test') {
+                return;
             }
-            (0, delay_render_js_1.continueRender)(newHandle);
-        };
-        const didLoad = () => {
-            onComplete();
-        };
-        if (current === null || current === void 0 ? void 0 : current.complete) {
-            onComplete();
-        }
-        else {
-            current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
-        }
-        // If tag gets unmounted, clear pending handles because image is not going to load
-        return () => {
-            current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
-            (0, delay_render_js_1.continueRender)(newHandle);
-        };
-    }, [src]);
+            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + src);
+            const { current } = imageRef;
+            const onComplete = () => {
+                var _a, _b, _c, _d;
+                if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
+                    delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
+                    console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
+                }
+                (0, delay_render_js_1.continueRender)(newHandle);
+            };
+            const didLoad = () => {
+                onComplete();
+            };
+            if (current === null || current === void 0 ? void 0 : current.complete) {
+                onComplete();
+            }
+            else {
+                current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
+            }
+            // If tag gets unmounted, clear pending handles because image is not going to load
+            return () => {
+                current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
+                (0, delay_render_js_1.continueRender)(newHandle);
+            };
+        }, [src]);
+    }
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };
 /**

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,9 +1,10 @@
 "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 resolve_video_config_js_1 = require("./resolve-video-config.js");
 exports.ResolveCompositionContext = (0, react_1.createContext)(null);
@@ -96,7 +97,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();
@@ -132,27 +133,42 @@ 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);
     const { compositions, currentComposition } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
     const compositionId = preferredCompositionId !== null && preferredCompositionId !== void 0 ? preferredCompositionId : currentComposition;
     const composition = compositions.find((c) => c.id === compositionId);
-    return (0, react_1.useMemo)(() => {
+    const selectedEditorProps = (0, react_1.useMemo)(() => {
         var _a;
+        return composition ? (_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {} : {};
+    }, [allEditorProps, composition]);
+    return (0, react_1.useMemo)(() => {
+        var _a, _b;
         if (!composition) {
             return null;
         }
-        const needsResolution = composition.calculateMetadata;
-        if (needsResolution === null) {
+        if (!(0, exports.needsResolution)(composition)) {
             return {
                 type: 'success',
-                result: { ...composition, defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {} },
+                result: {
+                    ...composition,
+                    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 : {}),
+                    },
+                },
             };
         }
         if (!context[composition.id]) {
             return null;
         }
         return context[composition.id];
-    }, [composition, context]);
+    }, [composition, context, selectedEditorProps]);
 };
 exports.useResolvedVideoConfig = useResolvedVideoConfig;

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/delay-render.js

@@ -4,7 +4,7 @@ exports.continueRender = exports.delayRender = exports.DELAY_RENDER_CALLSTACK_TO
 const get_environment_js_1 = require("./get-environment.js");
 const truthy_js_1 = require("./truthy.js");
 if (typeof window !== 'undefined') {
-    window.ready = false;
+    window.remotion_renderReady = false;
 }
 let handles = [];
 const timeouts = {};
@@ -43,7 +43,7 @@ const delayRender = (label) => {
         }, timeoutToUse);
     }
     if (typeof window !== 'undefined') {
-        window.ready = false;
+        window.remotion_renderReady = false;
     }
     return handle;
 };
@@ -71,7 +71,7 @@ const continueRender = (handle) => {
         return true;
     });
     if (handles.length === 0 && typeof window !== 'undefined') {
-        window.ready = true;
+        window.remotion_renderReady = true;
     }
 };
 exports.continueRender = continueRender;

package/dist/cjs/get-preview-dom-element.d.ts

@@ -1 +1,2 @@
+export declare const REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 export declare const getPreviewDomElement: () => HTMLElement | null;

package/dist/cjs/get-preview-dom-element.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPreviewDomElement = void 0;
+exports.getPreviewDomElement = exports.REMOTION_STUDIO_CONTAINER_ELEMENT = void 0;
+exports.REMOTION_STUDIO_CONTAINER_ELEMENT = '__remotion-studio-container';
 const getPreviewDomElement = () => {
-    return document.getElementById('container');
+    return document.getElementById(exports.REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
 exports.getPreviewDomElement = getPreviewDomElement;

package/dist/cjs/index.d.ts

@@ -5,7 +5,7 @@ import type { ClipRegion } from './NativeLayers.js';
 import type { VideoConfig } from './video-config.js';
 declare global {
     interface Window {
-        ready: boolean;
+        remotion_renderReady: boolean;
         remotion_cancelledError: string | undefined;
         getStaticCompositions: () => Promise<AnyCompMetadata[]>;
         calculateComposition: (compId: string) => Promise<VideoConfig>;

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, }: {
@@ -124,5 +124,6 @@ export declare const Internals: {
     ResolveCompositionConfig: import("react").FC<import("react").PropsWithChildren<{
         children: import("react").ReactNode;
     }>>;
+    REMOTION_STUDIO_CONTAINER_ELEMENT: string;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, };

package/dist/cjs/internals.js

@@ -44,6 +44,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 +67,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 +80,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,
@@ -112,4 +113,5 @@ exports.Internals = {
     useResolvedVideoConfig: ResolveCompositionConfig_js_1.useResolvedVideoConfig,
     resolveCompositionsRef: ResolveCompositionConfig_js_1.resolveCompositionsRef,
     ResolveCompositionConfig: ResolveCompositionConfig_js_1.ResolveCompositionConfig,
+    REMOTION_STUDIO_CONTAINER_ELEMENT: get_preview_dom_element_js_1.REMOTION_STUDIO_CONTAINER_ELEMENT,
 };

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

@@ -12,7 +12,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
             props: {
                 ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
                 ...(editorPropsOrUndefined !== null && editorPropsOrUndefined !== void 0 ? editorPropsOrUndefined : {}),
-                ...((_c = (0, input_props_js_1.getInputProps)()) !== null && _c !== void 0 ? _c : {}),
+                ...(typeof window === 'undefined' ? {} : (_c = (0, input_props_js_1.getInputProps)()) !== null && _c !== void 0 ? _c : {}),
             },
             abortSignal: signal,
         })

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`');