remotion 4.0.0-alpha10 → 4.0.0-alpha11

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

@@ -4,6 +4,7 @@ exports.useResolvedVideoConfig = exports.ResolveCompositionConfig = exports.reso
 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);
@@ -134,11 +135,16 @@ const ResolveCompositionConfig = ({ children }) => {
 exports.ResolveCompositionConfig = ResolveCompositionConfig;
 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;
         }
@@ -146,13 +152,20 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         if (needsResolution === null) {
             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/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

@@ -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

@@ -112,4 +112,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/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/version.d.ts

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

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-alpha10';
+exports.VERSION = '4.0.0-alpha11';

package/dist/cjs/warn-about-non-seekable-media.js

@@ -23,7 +23,7 @@ const warnAboutNonSeekableMedia = (ref, type) => {
             console.error(msg);
         }
         else if (type === 'console-warning') {
-            console.warn(`The media ${ref.src} does not support seeking. The video will render fine, but may not play correctly in preview and in the <Player>. See https://remotion.dev/docs/non-seekable-media for an explanation.`);
+            console.warn(`The media ${ref.src} does not support seeking. The video will render fine, but may not play correctly in the Remotion Studio and in the <Player>. See https://remotion.dev/docs/non-seekable-media for an explanation.`);
         }
         else {
             throw new Error(msg);

package/dist/esm/index.mjs

@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.0-alpha10';
+const VERSION = '4.0.0-alpha11';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -263,31 +263,6 @@ const useNonce = () => {
 
 const SequenceContext = createContext(null);
 
-const EditorPropsContext = createContext({
-    props: {},
-    updateProps: () => {
-        throw new Error('Not implemented');
-    },
-});
-const EditorPropsProvider = ({ children }) => {
-    const [props, setProps] = React.useState({});
-    const updateProps = useCallback(({ defaultProps, id, newProps, }) => {
-        setProps((prev) => {
-            var _a;
-            return {
-                ...prev,
-                [id]: typeof newProps === 'function'
-                    ? newProps((_a = prev[id]) !== null && _a !== void 0 ? _a : defaultProps)
-                    : newProps,
-            };
-        });
-    }, []);
-    const ctx = useMemo(() => {
-        return { props, updateProps };
-    }, [props, updateProps]);
-    return (jsx(EditorPropsContext.Provider, { value: ctx, children: children }));
-};
-
 let didWarnSSRImport = false;
 const warnOnceSSRImport = () => {
     if (didWarnSSRImport) {
@@ -315,6 +290,31 @@ const getInputProps = () => {
     return parsed;
 };
 
+const EditorPropsContext = createContext({
+    props: {},
+    updateProps: () => {
+        throw new Error('Not implemented');
+    },
+});
+const EditorPropsProvider = ({ children }) => {
+    const [props, setProps] = React.useState({});
+    const updateProps = useCallback(({ defaultProps, id, newProps, }) => {
+        setProps((prev) => {
+            var _a;
+            return {
+                ...prev,
+                [id]: typeof newProps === 'function'
+                    ? newProps((_a = prev[id]) !== null && _a !== void 0 ? _a : defaultProps)
+                    : newProps,
+            };
+        });
+    }, []);
+    const ctx = useMemo(() => {
+        return { props, updateProps };
+    }, [props, updateProps]);
+    return (jsx(EditorPropsContext.Provider, { value: ctx, children: children }));
+};
+
 const validateDimension = (amount, nameOfProp, location) => {
     if (typeof amount !== 'number') {
         throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
@@ -356,7 +356,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
             props: {
                 ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
                 ...(editorPropsOrUndefined !== null && editorPropsOrUndefined !== void 0 ? editorPropsOrUndefined : {}),
-                ...((_c = getInputProps()) !== null && _c !== void 0 ? _c : {}),
+                ...(typeof window === 'undefined' ? {} : (_c = getInputProps()) !== null && _c !== void 0 ? _c : {}),
             },
             abortSignal: signal,
         })
@@ -545,11 +545,16 @@ const ResolveCompositionConfig = ({ children }) => {
 };
 const useResolvedVideoConfig = (preferredCompositionId) => {
     const context = useContext(ResolveCompositionContext);
+    const { props: allEditorProps } = useContext(EditorPropsContext);
     const { compositions, currentComposition } = useContext(CompositionManager);
     const compositionId = preferredCompositionId !== null && preferredCompositionId !== void 0 ? preferredCompositionId : currentComposition;
     const composition = compositions.find((c) => c.id === compositionId);
-    return useMemo(() => {
+    const selectedEditorProps = useMemo(() => {
         var _a;
+        return composition ? (_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {} : {};
+    }, [allEditorProps, composition]);
+    return useMemo(() => {
+        var _a, _b;
         if (!composition) {
             return null;
         }
@@ -557,14 +562,21 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         if (needsResolution === null) {
             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 = getInputProps()) !== null && _b !== void 0 ? _b : {}),
+                    },
+                },
             };
         }
         if (!context[composition.id]) {
             return null;
         }
         return context[composition.id];
-    }, [composition, context]);
+    }, [composition, context, selectedEditorProps]);
 };
 
 const useVideo = () => {
@@ -1483,7 +1495,7 @@ const warnAboutNonSeekableMedia = (ref, type) => {
             console.error(msg);
         }
         else if (type === 'console-warning') {
-            console.warn(`The media ${ref.src} does not support seeking. The video will render fine, but may not play correctly in preview and in the <Player>. See https://remotion.dev/docs/non-seekable-media for an explanation.`);
+            console.warn(`The media ${ref.src} does not support seeking. The video will render fine, but may not play correctly in the Remotion Studio and in the <Player>. See https://remotion.dev/docs/non-seekable-media for an explanation.`);
         }
         else {
             throw new Error(msg);
@@ -1941,7 +1953,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
 const AudioForDevelopment = forwardRef(AudioForDevelopmentForwardRefFunction);
 
 if (typeof window !== 'undefined') {
-    window.ready = false;
+    window.remotion_renderReady = false;
 }
 let handles = [];
 const timeouts = {};
@@ -1980,7 +1992,7 @@ const delayRender = (label) => {
         }, timeoutToUse);
     }
     if (typeof window !== 'undefined') {
-        window.ready = false;
+        window.remotion_renderReady = false;
     }
     return handle;
 };
@@ -2007,7 +2019,7 @@ const continueRender = (handle) => {
         return true;
     });
     if (handles.length === 0 && typeof window !== 'undefined') {
-        window.ready = true;
+        window.remotion_renderReady = true;
     }
 };
 
@@ -2739,35 +2751,38 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
         }
         cancelRender('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
     }, [maxRetries, onError, retryIn]);
-    useLayoutEffect(() => {
-        if (process.env.NODE_ENV === 'test') {
-            return;
-        }
-        const newHandle = 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
+        useLayoutEffect(() => {
+            if (process.env.NODE_ENV === 'test') {
+                return;
             }
-            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);
-            continueRender(newHandle);
-        };
-    }, [src]);
+            const newHandle = 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`);
+                }
+                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);
+                continueRender(newHandle);
+            };
+        }, [src]);
+    }
     return (jsx("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };
 /**
@@ -2952,8 +2967,9 @@ var CSSUtils = /*#__PURE__*/Object.freeze({
     makeDefaultCSS: makeDefaultCSS
 });
 
+const REMOTION_STUDIO_CONTAINER_ELEMENT = '__remotion-studio-container';
 const getPreviewDomElement = () => {
-    return document.getElementById('container');
+    return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
 
 /**
@@ -3584,6 +3600,7 @@ const Internals = {
     useResolvedVideoConfig,
     resolveCompositionsRef,
     ResolveCompositionConfig,
+    REMOTION_STUDIO_CONTAINER_ELEMENT,
 };
 
 const flattenChildren = (children) => {

package/dist/esm/version.mjs

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

package/package.json

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