@remotion/studio 4.0.414 → 4.0.415

package/dist/FastRefreshProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const FastRefreshProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/FastRefreshProvider.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FastRefreshProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const fast_refresh_context_1 = require("./fast-refresh-context");
+const FastRefreshProvider = ({ children }) => {
+    const [fastRefreshes, setFastRefreshes] = (0, react_1.useState)(0);
+    const [manualRefreshes, setManualRefreshes] = (0, react_1.useState)(0);
+    const increaseManualRefreshes = (0, react_1.useCallback)(() => {
+        setManualRefreshes((i) => i + 1);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (typeof __webpack_module__ !== 'undefined') {
+            if (__webpack_module__.hot) {
+                __webpack_module__.hot.addStatusHandler((status) => {
+                    if (status === 'idle') {
+                        setFastRefreshes((i) => i + 1);
+                    }
+                });
+            }
+        }
+    }, []);
+    const value = (0, react_1.useMemo)(() => ({ fastRefreshes, manualRefreshes, increaseManualRefreshes }), [fastRefreshes, manualRefreshes, increaseManualRefreshes]);
+    return ((0, jsx_runtime_1.jsx)(fast_refresh_context_1.FastRefreshContext.Provider, { value: value, children: children }));
+};
+exports.FastRefreshProvider = FastRefreshProvider;

package/dist/ResolveCompositionConfigInStudio.d.ts

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+export declare const ResolveCompositionConfigInStudio: React.FC<PropsWithChildren<{
+    readonly children: React.ReactNode;
+}>>;

package/dist/ResolveCompositionConfigInStudio.js

@@ -0,0 +1,273 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResolveCompositionConfigInStudio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const fast_refresh_context_1 = require("./fast-refresh-context");
+const ResolveCompositionConfigInStudio = ({ children }) => {
+    const [currentRenderModalComposition, setCurrentRenderModalComposition] = (0, react_1.useState)(null);
+    const { compositions, canvasContent, currentCompositionMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { fastRefreshes, manualRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
+    // don't do anything, this component should should re-render if the value changes
+    if (manualRefreshes) {
+        /** */
+    }
+    const selectedComposition = (0, react_1.useMemo)(() => {
+        return compositions.find((c) => canvasContent &&
+            canvasContent.type === 'composition' &&
+            canvasContent.compositionId === c.id);
+    }, [canvasContent, compositions]);
+    const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
+    const { props: allEditorProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const env = remotion_1.Internals.getRemotionEnvironment();
+    const inputProps = (0, react_1.useMemo)(() => {
+        var _a;
+        return typeof window === 'undefined' || env.isPlayer
+            ? {}
+            : ((_a = (0, remotion_1.getInputProps)()) !== null && _a !== void 0 ? _a : {});
+    }, [env.isPlayer]);
+    const [resolvedConfigs, setResolvedConfigs] = (0, react_1.useState)({});
+    const selectedEditorProps = (0, react_1.useMemo)(() => {
+        var _a;
+        return selectedComposition
+            ? ((_a = allEditorProps[selectedComposition.id]) !== null && _a !== void 0 ? _a : {})
+            : {};
+    }, [allEditorProps, selectedComposition]);
+    const renderModalProps = (0, react_1.useMemo)(() => {
+        var _a;
+        return renderModalComposition
+            ? ((_a = allEditorProps[renderModalComposition.id]) !== null && _a !== void 0 ? _a : {})
+            : {};
+    }, [allEditorProps, renderModalComposition]);
+    const hasResolution = Boolean(currentCompositionMetadata);
+    const doResolution = (0, react_1.useCallback)(({ calculateMetadata, combinedProps, compositionDurationInFrames, compositionFps, compositionHeight, compositionId, compositionWidth, defaultProps, }) => {
+        const controller = new AbortController();
+        if (hasResolution) {
+            return controller;
+        }
+        const { signal } = controller;
+        const result = remotion_1.Internals.resolveVideoConfigOrCatch({
+            compositionId,
+            calculateMetadata: calculateMetadata,
+            inputProps: combinedProps,
+            signal,
+            defaultProps,
+            compositionDurationInFrames,
+            compositionFps,
+            compositionHeight,
+            compositionWidth,
+        });
+        if (result.type === 'error') {
+            setResolvedConfigs((r) => ({
+                ...r,
+                [compositionId]: {
+                    type: 'error',
+                    error: result.error,
+                },
+            }));
+            return controller;
+        }
+        const promOrNot = result.result;
+        if (typeof promOrNot === 'object' && 'then' in promOrNot) {
+            setResolvedConfigs((r) => {
+                const prev = r[compositionId];
+                if ((prev === null || prev === void 0 ? void 0 : prev.type) === 'success' ||
+                    (prev === null || prev === void 0 ? void 0 : prev.type) === 'success-and-refreshing') {
+                    return {
+                        ...r,
+                        [compositionId]: {
+                            type: 'success-and-refreshing',
+                            result: prev.result,
+                        },
+                    };
+                }
+                return {
+                    ...r,
+                    [compositionId]: {
+                        type: 'loading',
+                    },
+                };
+            });
+            promOrNot
+                .then((c) => {
+                if (controller.signal.aborted) {
+                    return;
+                }
+                setResolvedConfigs((r) => ({
+                    ...r,
+                    [compositionId]: {
+                        type: 'success',
+                        result: c,
+                    },
+                }));
+            })
+                .catch((err) => {
+                if (controller.signal.aborted) {
+                    return;
+                }
+                setResolvedConfigs((r) => ({
+                    ...r,
+                    [compositionId]: {
+                        type: 'error',
+                        error: err,
+                    },
+                }));
+            });
+        }
+        else {
+            setResolvedConfigs((r) => ({
+                ...r,
+                [compositionId]: {
+                    type: 'success',
+                    result: promOrNot,
+                },
+            }));
+        }
+        return controller;
+    }, [hasResolution]);
+    const currentComposition = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
+    (0, react_1.useImperativeHandle)(remotion_1.Internals.resolveCompositionsRef, () => {
+        return {
+            setCurrentRenderModalComposition: (id) => {
+                setCurrentRenderModalComposition(id);
+            },
+            reloadCurrentlySelectedComposition: () => {
+                var _a, _b, _c, _d, _e, _f;
+                if (!currentComposition) {
+                    return;
+                }
+                const composition = compositions.find((c) => c.id === currentComposition);
+                if (!composition) {
+                    throw new Error(`Could not find composition with id ${currentComposition}`);
+                }
+                const editorProps = (_a = allEditorProps[currentComposition]) !== null && _a !== void 0 ? _a : {};
+                const defaultProps = {
+                    ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
+                    ...(editorProps !== null && editorProps !== void 0 ? editorProps : {}),
+                };
+                const props = {
+                    ...defaultProps,
+                    ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+                };
+                doResolution({
+                    defaultProps,
+                    calculateMetadata: composition.calculateMetadata,
+                    combinedProps: props,
+                    compositionDurationInFrames: (_c = composition.durationInFrames) !== null && _c !== void 0 ? _c : null,
+                    compositionFps: (_d = composition.fps) !== null && _d !== void 0 ? _d : null,
+                    compositionHeight: (_e = composition.height) !== null && _e !== void 0 ? _e : null,
+                    compositionWidth: (_f = composition.width) !== null && _f !== void 0 ? _f : null,
+                    compositionId: composition.id,
+                });
+            },
+        };
+    }, [
+        allEditorProps,
+        compositions,
+        currentComposition,
+        doResolution,
+        inputProps,
+    ]);
+    const isTheSame = (selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.id) === (renderModalComposition === null || renderModalComposition === void 0 ? void 0 : renderModalComposition.id);
+    const currentDefaultProps = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            ...((_a = selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.defaultProps) !== null && _a !== void 0 ? _a : {}),
+            ...(selectedEditorProps !== null && selectedEditorProps !== void 0 ? selectedEditorProps : {}),
+        };
+    }, [selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.defaultProps, selectedEditorProps]);
+    const originalProps = (0, react_1.useMemo)(() => {
+        return {
+            ...currentDefaultProps,
+            ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+        };
+    }, [currentDefaultProps, inputProps]);
+    const canResolve = selectedComposition && Boolean(selectedComposition.calculateMetadata);
+    const shouldIgnoreUpdate = typeof window !== 'undefined' &&
+        window.remotion_ignoreFastRefreshUpdate &&
+        fastRefreshes <= window.remotion_ignoreFastRefreshUpdate;
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d;
+        if (shouldIgnoreUpdate) {
+            return;
+        }
+        if (canResolve) {
+            const controller = doResolution({
+                calculateMetadata: selectedComposition.calculateMetadata,
+                combinedProps: originalProps,
+                compositionDurationInFrames: (_a = selectedComposition.durationInFrames) !== null && _a !== void 0 ? _a : null,
+                compositionFps: (_b = selectedComposition.fps) !== null && _b !== void 0 ? _b : null,
+                compositionHeight: (_c = selectedComposition.height) !== null && _c !== void 0 ? _c : null,
+                compositionWidth: (_d = selectedComposition.width) !== null && _d !== void 0 ? _d : null,
+                defaultProps: currentDefaultProps,
+                compositionId: selectedComposition.id,
+            });
+            return () => {
+                controller.abort();
+            };
+        }
+    }, [
+        canResolve,
+        currentDefaultProps,
+        doResolution,
+        originalProps,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.calculateMetadata,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.durationInFrames,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.fps,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.height,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.id,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.width,
+        shouldIgnoreUpdate,
+    ]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d, _e;
+        if (renderModalComposition && !isTheSame) {
+            const combinedProps = {
+                ...((_a = renderModalComposition.defaultProps) !== null && _a !== void 0 ? _a : {}),
+                ...(renderModalProps !== null && renderModalProps !== void 0 ? renderModalProps : {}),
+                ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+            };
+            const controller = doResolution({
+                calculateMetadata: renderModalComposition.calculateMetadata,
+                compositionDurationInFrames: (_b = renderModalComposition.durationInFrames) !== null && _b !== void 0 ? _b : null,
+                compositionFps: (_c = renderModalComposition.fps) !== null && _c !== void 0 ? _c : null,
+                compositionHeight: (_d = renderModalComposition.height) !== null && _d !== void 0 ? _d : null,
+                compositionId: renderModalComposition.id,
+                compositionWidth: (_e = renderModalComposition.width) !== null && _e !== void 0 ? _e : null,
+                defaultProps: currentDefaultProps,
+                combinedProps,
+            });
+            return () => {
+                controller.abort();
+            };
+        }
+    }, [
+        currentDefaultProps,
+        doResolution,
+        inputProps,
+        isTheSame,
+        renderModalComposition,
+        renderModalProps,
+    ]);
+    const resolvedConfigsIncludingStaticOnes = (0, react_1.useMemo)(() => {
+        const staticComps = compositions.filter((c) => {
+            return c.calculateMetadata === null;
+        });
+        return {
+            ...resolvedConfigs,
+            ...staticComps.reduce((acc, curr) => {
+                var _a;
+                return {
+                    ...acc,
+                    [curr.id]: {
+                        type: 'success',
+                        result: { ...curr, defaultProps: (_a = curr.defaultProps) !== null && _a !== void 0 ? _a : {} },
+                    },
+                };
+            }, {}),
+        };
+    }, [compositions, resolvedConfigs]);
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.ResolveCompositionContext.Provider, { value: resolvedConfigsIncludingStaticOnes, children: children }));
+};
+exports.ResolveCompositionConfigInStudio = ResolveCompositionConfigInStudio;

package/dist/Studio.js

@@ -8,17 +8,24 @@ const remotion_1 = require("remotion");
 const Editor_1 = require("./components/Editor");
 const EditorContexts_1 = require("./components/EditorContexts");
 const ServerDisconnected_1 = require("./components/Notifications/ServerDisconnected");
+const fast_refresh_context_1 = require("./fast-refresh-context");
+const FastRefreshProvider_1 = require("./FastRefreshProvider");
 const inject_css_1 = require("./helpers/inject-css");
+const ResolveCompositionConfigInStudio_1 = require("./ResolveCompositionConfigInStudio");
 const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
-const Studio = ({ rootComponent, readOnly }) => {
+const StudioInner = ({ rootComponent, readOnly }) => {
     var _a;
+    const { fastRefreshes, manualRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', nonceContextSeed: fastRefreshes + manualRefreshes, children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
+                            ? null
+                            : (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }));
+};
+const Studio = ({ rootComponent, readOnly }) => {
     (0, react_1.useLayoutEffect)(() => {
         (0, inject_css_1.injectCSS)();
     }, []);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: window.remotion_logLevel, numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_a = window.remotion_audioLatencyHint) !== null && _a !== void 0 ? _a : 'interactive', children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.ResolveCompositionConfigInStudio, { children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
-                            ? null
-                            : (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(FastRefreshProvider_1.FastRefreshProvider, { children: (0, jsx_runtime_1.jsx)(StudioInner, { rootComponent: rootComponent, readOnly: readOnly }) }));
 };
 exports.Studio = Studio;

package/dist/api/visual-control.js

@@ -8,7 +8,7 @@ const visualControl = (key, value, schema) => {
         return value;
     }
     if (!VisualControls_1.visualControlRef.current) {
-        throw new Error('visualControlRef is not set');
+        return value;
     }
     return VisualControls_1.visualControlRef.current.globalVisualControl(key, value, schema);
 };

package/dist/components/GlobalPropsEditorUpdateButton.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const save_default_props_1 = require("../api/save-default-props");
+const fast_refresh_context_1 = require("../fast-refresh-context");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SchemaResetButton_1 = require("./RenderModal/SchemaEditor/SchemaResetButton");
 const SchemaSaveButton_1 = require("./RenderModal/SchemaEditor/SchemaSaveButton");
@@ -46,7 +47,7 @@ const container = {
     flexDirection: 'row',
 };
 const GlobalPropsEditorUpdateButton = ({ compositionId, currentDefaultProps }) => {
-    const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
+    const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const [disabled, setDisabled] = react_1.default.useState(false);
     const onClicked = (0, react_1.useCallback)(() => {
         setDisabled(true);

package/dist/components/RenderModal/DataEditor.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const fast_refresh_context_1 = require("../../fast-refresh-context");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
@@ -156,7 +157,7 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, mayS
             : get_render_modal_warnings_1.defaultTypeCanSaveState;
     }, [canSaveDefaultPropsObjectState, unresolvedComposition.id]);
     const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
-    const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
+    const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const checkIfCanSaveDefaultProps = (0, react_1.useCallback)(async () => {
         try {
             const can = await (0, actions_1.canUpdateDefaultProps)(unresolvedComposition.id, readOnlyStudio);

package/dist/components/VisualControls/VisualControlHandle.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VisualControlHandle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const fast_refresh_context_1 = require("../../fast-refresh-context");
 const VisualControls_1 = require("../../visual-controls/VisualControls");
 const get_current_edited_value_1 = require("../../visual-controls/get-current-edited-value");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
@@ -24,8 +24,7 @@ const VisualControlHandle = ({ value, keyName }) => {
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     const state = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
     const { updateValue } = (0, react_1.useContext)(VisualControls_1.SetVisualControlsContext);
-    const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
-    const { increaseManualRefreshes } = (0, react_1.useContext)(remotion_1.Internals.SetNonceContext);
+    const { fastRefreshes, increaseManualRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
     const [saving, setSaving] = (0, react_1.useState)(false);
     const currentValue = (0, get_current_edited_value_1.getVisualControlEditedValue)({
         handles: state.handles,