@remotion/cli 4.1.0-alpha1 → 4.1.0-alpha10

package/dist/editor/components/RenderModal/RenderModal.js

@@ -118,6 +118,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const isMounted = (0, react_1.useRef)(true);
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
     const [unclampedFrame, setFrame] = (0, react_1.useState)(() => initialFrame);
+    const [saving, setSaving] = (0, react_1.useState)(false);
     const [stillImageFormat, setStillImageFormat] = (0, react_1.useState)(() => initialStillImageFormat);
     const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)(() => initialVideoImageFormat);
     const [concurrency, setConcurrency] = (0, react_1.useState)(() => initialConcurrency);
@@ -567,7 +568,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         }
     }, [onClickStill, onClickVideo, renderDisabled, renderMode]);
     (0, react_1.useEffect)(() => {
-        registerKeybinding({
+        const enter = registerKeybinding({
             callback() {
                 trigger();
             },
@@ -575,13 +576,16 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             key: 'Enter',
             event: 'keydown',
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
+            triggerIfInputFieldFocused: true,
         });
+        return () => {
+            enter.unregister();
+        };
     }, [registerKeybinding, trigger]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...buttonStyle,
                             backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,
-                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: rightPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props" })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables })) })] })] }));
+                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: rightPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables })) })] })] }));
 };
 const RenderModalWithLoader = (props) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);

package/dist/editor/components/RenderModal/RenderModalBasic.d.ts

@@ -1,7 +1,6 @@
 import type { Codec, ProResProfile } from '@remotion/renderer';
 import React from 'react';
-import type { TCompMetadata } from 'remotion';
-import type { AnyZodObject } from 'zod';
+import type { VideoConfig } from 'remotion';
 import type { SegmentedControlItem } from '../SegmentedControl';
 import type { RenderType } from './RenderModalAdvanced';
 export declare const RenderModalBasic: React.FC<{
@@ -14,7 +13,7 @@ export declare const RenderModalBasic: React.FC<{
     setProResProfile: React.Dispatch<React.SetStateAction<ProResProfile>>;
     frame: number;
     setFrame: React.Dispatch<React.SetStateAction<number>>;
-    resolvedComposition: TCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
+    resolvedComposition: VideoConfig;
     setOutName: (value: React.SetStateAction<string>) => void;
     setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
     startFrame: number;

package/dist/editor/components/RenderModal/RenderModalJSONPropsEditor.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
+import type { SerializedJSONWithCustomFields } from 'remotion';
 import type { z } from 'zod';
-import type { SerializedJSONWithCustomFields } from './SchemaEditor/input-props-serialization';
 export type EditType = 'inputProps' | 'defaultProps';
 export declare const RenderModalJSONPropsEditor: React.FC<{
     value: unknown;
     setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     onSave: () => void;
-    valBeforeSafe: unknown;
     showSaveButton: boolean;
     serializedJSON: SerializedJSONWithCustomFields | null;
     defaultProps: Record<string, unknown>;

package/dist/editor/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -26,13 +26,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalJSONPropsEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
 const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
 const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const layout_1 = require("../layout");
 const RemTextarea_1 = require("../NewComposition/RemTextarea");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
-const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
+const deep_equal_1 = require("./SchemaEditor/deep-equal");
 const ZodErrorMessages_1 = require("./SchemaEditor/ZodErrorMessages");
 const style = {
     fontFamily: 'monospace',
@@ -46,7 +47,7 @@ const scrollable = {
 };
 const parseJSON = (str, schema) => {
     try {
-        const value = (0, input_props_serialization_1.deserializeJSONWithCustomFields)(str);
+        const value = remotion_1.Internals.deserializeJSONWithCustomFields(str);
         const zodValidation = schema.safeParse(value);
         return { str, value, validJSON: true, zodValidation };
     }
@@ -54,7 +55,7 @@ const parseJSON = (str, schema) => {
         return { str, validJSON: false, error: e.message };
     }
 };
-const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, valBeforeSafe, showSaveButton, serializedJSON, schema, }) => {
+const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, showSaveButton, serializedJSON, schema, }) => {
     if (serializedJSON === null) {
         throw new Error('expecting serializedJSON to be defined');
     }
@@ -92,8 +93,8 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, val
         }
     }, [schema, setValue]);
     const hasChanged = (0, react_1.useMemo)(() => {
-        return value && JSON.stringify(value) !== JSON.stringify(valBeforeSafe);
-    }, [valBeforeSafe, value]);
+        return !(0, deep_equal_1.deepEqual)(value, defaultProps);
+    }, [defaultProps, value]);
     const onQuickSave = (0, react_1.useCallback)(() => {
         if (hasChanged) {
             onSave();
@@ -117,9 +118,9 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, val
         };
     }, [keybindings, onQuickSave, onSave]);
     const reset = (0, react_1.useCallback)(() => {
-        setLocalValue(parseJSON(serializedJSON.serializedString, schema));
         setValue(defaultProps);
-    }, [defaultProps, schema, serializedJSON.serializedString, setValue]);
+        setLocalValue(parseJSON(JSON.stringify(defaultProps, null, 2), schema));
+    }, [defaultProps, schema, setValue]);
     const textAreaStyle = (0, react_1.useMemo)(() => {
         const fail = !localValue.validJSON || !localValue.zodValidation.success;
         if (!fail) {
@@ -130,10 +131,8 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, val
             borderColor: colors_1.FAIL_COLOR,
         };
     }, [localValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: textAreaStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : localValue.zodValidation.success === false ? ((0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: localValue.zodValidation, viewTab: "json" })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON ||
-                            !(localValue.validJSON && !localValue.zodValidation.success), onClick: reset, children: "Reset" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, disabled: !(localValue.validJSON && localValue.zodValidation.success) ||
+    return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: textAreaStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : localValue.zodValidation.success === false ? ((0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: localValue.zodValidation, viewTab: "json" })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !(hasChanged || !localValue.validJSON), onClick: reset, children: "Reset" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), showSaveButton ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, disabled: !(localValue.validJSON && localValue.zodValidation.success) ||
                             !localValue.validJSON ||
-                            !hasChanged ||
-                            !showSaveButton, children: "Save" })] })] }));
+                            !hasChanged, children: "Save" })) : null] })] }));
 };
 exports.RenderModalJSONPropsEditor = RenderModalJSONPropsEditor;

package/dist/editor/components/RenderModal/SchemaEditor/SchemaEditor.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import type { AnyZodObject, z } from 'zod';
 export declare const SchemaEditor: React.FC<{
     schema: AnyZodObject;
-    value: unknown;
+    value: Record<string, unknown>;
     setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
     defaultProps: Record<string, unknown>;
-    onSave: (updater: (oldState: unknown) => unknown) => void;
+    onSave: (updater: (oldState: Record<string, unknown>) => Record<string, unknown>) => void;
     showSaveButton: boolean;
     saving: boolean;
     saveDisabledByParent: boolean;

package/dist/editor/components/RenderModal/SchemaEditor/SchemaEditor.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const use_keybinding_1 = require("../../../helpers/use-keybinding");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const is_menu_item_1 = require("../../Menu/is-menu-item");
+const deep_equal_1 = require("./deep-equal");
 const SchemaErrorMessages_1 = require("./SchemaErrorMessages");
 const ZodObjectEditor_1 = require("./ZodObjectEditor");
 const scrollable = {
@@ -13,10 +15,34 @@ const scrollable = {
     overflowY: 'auto',
 };
 const SchemaEditor = ({ schema, value, setValue, zodValidationResult, defaultProps, onSave, showSaveButton, saving, saveDisabledByParent, }) => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
     }
+    const hasChanged = (0, react_1.useMemo)(() => {
+        return !(0, deep_equal_1.deepEqual)(defaultProps, value);
+    }, [defaultProps, value]);
+    const onQuickSave = (0, react_1.useCallback)(() => {
+        if (hasChanged && showSaveButton) {
+            onSave(() => {
+                return value;
+            });
+        }
+    }, [hasChanged, onSave, showSaveButton, value]);
+    (0, react_1.useEffect)(() => {
+        const save = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 's',
+            commandCtrlKey: true,
+            callback: onQuickSave,
+            preventDefault: true,
+            triggerIfInputFieldFocused: true,
+        });
+        return () => {
+            save.unregister();
+        };
+    }, [keybindings, onQuickSave, onSave]);
     const def = schema._def;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const typeName = def.typeName;

package/dist/editor/components/RenderModal/SchemaEditor/SchemaErrorMessages.js

@@ -32,9 +32,7 @@ const errorContainer = {
     overflowY: 'auto',
 };
 const openDocs = () => {
-    window.open(
-    // TODO: Make sure to update this link when we release v4
-    'https://v4.remotion.dev/docs/parametrized-rendering#define-a-schema-');
+    window.open('https://www.remotion.dev/docs/parameterized-rendering#define-a-schema-');
 };
 const ZodNotInstalled = () => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Install ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "zod" }), " as a dependency to interactively control the props of the composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));

package/dist/editor/components/RenderModal/SchemaEditor/SchemaLabel.js

@@ -9,7 +9,6 @@ const InlineRemoveButton_1 = require("../InlineRemoveButton");
 const get_schema_label_1 = require("./get-schema-label");
 const SchemaResetButton_1 = require("./SchemaResetButton");
 const SchemaSaveButton_1 = require("./SchemaSaveButton");
-const colors_2 = require("../../../helpers/colors");
 const compactStyles = {
     fontSize: 15,
     color: colors_1.LIGHT_TEXT,
@@ -24,7 +23,7 @@ const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton
         return {
             fontFamily: 'monospace',
             fontSize: 14,
-            color: valid ? colors_1.LIGHT_TEXT : colors_2.FAIL_COLOR,
+            color: valid ? colors_1.LIGHT_TEXT : colors_1.FAIL_COLOR,
             lineHeight: '24px',
         };
     }, [valid]);

package/dist/editor/components/RenderModal/SchemaEditor/SchemaSaveButton.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaSaveButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../../helpers/colors");
 const InlineAction_1 = require("../../InlineAction");
 const icon = {
     height: 14,
@@ -10,7 +11,7 @@ const icon = {
 };
 const SchemaSaveButton = ({ onClick, disabled }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: disabled ? 'grey' : color, d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" }) }));
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: disabled ? colors_1.LIGHT_TEXT : color, d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" }) }));
     }, [disabled]);
     return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, disabled: disabled }));
 };

package/dist/editor/components/RenderModal/SchemaEditor/ZodArrayEditor.js

@@ -26,19 +26,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodArrayEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const plus_1 = require("../../../icons/plus");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const InlineAction_1 = require("../../InlineAction");
+const layout_1 = require("../layout");
 const create_zod_values_1 = require("./create-zod-values");
 const deep_equal_1 = require("./deep-equal");
-const local_state_1 = require("./local-state");
-const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
 const Fieldset_1 = require("./Fieldset");
-const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
-const layout_1 = require("../layout");
+const local_state_1 = require("./local-state");
+const SchemaLabel_1 = require("./SchemaLabel");
 const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
-const InlineAction_1 = require("../../InlineAction");
-const plus_1 = require("../../../icons/plus");
+const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
+const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
-const SchemaLabel_1 = require("./SchemaLabel");
 const ZodArrayEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const { localValue, onChange, RevisionContextProvider, reset } = (0, local_state_1.useLocalState)({
         value,

package/dist/editor/components/RenderModal/SchemaEditor/ZodBooleanEditor.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
+import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
-import type { z } from 'zod';
 export declare const ZodBooleanEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;

package/dist/editor/components/RenderModal/SchemaEditor/ZodBooleanEditor.js

@@ -4,9 +4,9 @@ exports.ZodBooleanEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../../Checkbox");
-const SchemaLabel_1 = require("./SchemaLabel");
 const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
+const SchemaLabel_1 = require("./SchemaLabel");
 const fullWidth = {
     width: '100%',
 };

package/dist/editor/components/RenderModal/SchemaEditor/ZodColorEditor.js

@@ -9,9 +9,9 @@ const layout_1 = require("../../layout");
 const InputDragger_1 = require("../../NewComposition/InputDragger");
 const RemInput_1 = require("../../NewComposition/RemInput");
 const RemInputTypeColor_1 = require("../../NewComposition/RemInputTypeColor");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',

package/dist/editor/components/RenderModal/SchemaEditor/ZodDateEditor.js

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const colors_1 = require("../../../helpers/colors");
 const layout_1 = require("../../layout");
 const RemInput_1 = require("../../NewComposition/RemInput");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',

package/dist/editor/components/RenderModal/SchemaEditor/ZodEffectEditor.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodEffectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
-const local_state_1 = require("./local-state");
-const ZodSwitch_1 = require("./ZodSwitch");
 const Fieldset_1 = require("./Fieldset");
+const local_state_1 = require("./local-state");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
+const ZodSwitch_1 = require("./ZodSwitch");
 const fullWidth = {
     width: '100%',
 };

package/dist/editor/components/RenderModal/SchemaEditor/ZodEnumEditor.js

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const Checkmark_1 = require("../../../icons/Checkmark");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const ComboBox_1 = require("../../NewComposition/ComboBox");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const container = {
     width: '100%',

package/dist/editor/components/RenderModal/SchemaEditor/ZodFieldValidation.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZodFieldValidation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
 const layout_1 = require("../../layout");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
 const InfoBubble_1 = require("../InfoBubble");
 const legend = {
     display: 'flex',

package/dist/editor/components/RenderModal/SchemaEditor/ZodNonEditableValue.js

@@ -4,8 +4,8 @@ exports.ZonNonEditableValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../../helpers/colors");
-const SchemaLabel_1 = require("./SchemaLabel");
 const Fieldset_1 = require("./Fieldset");
+const SchemaLabel_1 = require("./SchemaLabel");
 const fullWidth = {
     width: '100%',
 };

package/dist/editor/components/RenderModal/SchemaEditor/ZodNumberEditor.js

@@ -4,9 +4,9 @@ exports.ZodNumberEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../../NewComposition/InputDragger");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',

package/dist/editor/components/RenderModal/SchemaEditor/ZodObjectEditor.js

@@ -1,21 +1,40 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.ZodObjectEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
-const local_state_1 = require("./local-state");
-const ZodSwitch_1 = require("./ZodSwitch");
+const layout_1 = require("../layout");
+const deep_equal_1 = require("./deep-equal");
 const Fieldset_1 = require("./Fieldset");
+const local_state_1 = require("./local-state");
+const SchemaLabel_1 = require("./SchemaLabel");
 const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
-const layout_1 = require("../layout");
 const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
-const SchemaLabel_1 = require("./SchemaLabel");
-const deep_equal_1 = require("./deep-equal");
+const ZodSwitch_1 = require("./ZodSwitch");
 const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
@@ -43,7 +62,7 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSa
                         return localValue.value;
                     }, false, false);
                 }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success })), (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key, i) => {
-                        return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: localValue.value[key], 
+                        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: localValue.value[key], 
                                     // In case of null | {a: string, b: string} type, we need to fallback to the default value
                                     defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : value)[key], setValue: (val, forceApply) => {
                                         onChange((oldVal) => {

package/dist/editor/components/RenderModal/SchemaEditor/ZodOrNullishEditor.js

@@ -8,10 +8,10 @@ const Checkbox_1 = require("../../Checkbox");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const layout_1 = require("../../layout");
 const create_zod_values_1 = require("./create-zod-values");
-const SchemaLabel_1 = require("./SchemaLabel");
-const ZodSwitch_1 = require("./ZodSwitch");
 const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
+const SchemaLabel_1 = require("./SchemaLabel");
+const ZodSwitch_1 = require("./ZodSwitch");
 const labelStyle = {
     fontFamily: 'sans-serif',
     fontSize: 14,

package/dist/editor/components/RenderModal/SchemaEditor/ZodStaticFileEditor.js

@@ -7,9 +7,9 @@ const remotion_1 = require("remotion");
 const Checkmark_1 = require("../../../icons/Checkmark");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const ComboBox_1 = require("../../NewComposition/ComboBox");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const container = {
     width: '100%',

package/dist/editor/components/RenderModal/SchemaEditor/ZodStringEditor.js

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const RemInput_1 = require("../../NewComposition/RemInput");
+const Fieldset_1 = require("./Fieldset");
 const local_state_1 = require("./local-state");
 const SchemaLabel_1 = require("./SchemaLabel");
-const Fieldset_1 = require("./Fieldset");
 const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const fullWidth = {
     width: '100%',

package/dist/editor/components/RenderModal/SchemaEditor/ZodSwitch.js

@@ -27,7 +27,6 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, defaultValue, onSave, sh
         throw new Error('expected zod');
     }
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
-    // TODO: (Maybe?) enable saving of inserted input props by cmd+s /ctrl + s (also for JSON view)
     if (typeName === z.ZodFirstPartyTypeKind.ZodObject) {
         return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }

package/dist/editor/components/RenderModal/SchemaEditor/local-state.js

@@ -11,16 +11,22 @@ const useLocalState = ({ value, schema, setValue, defaultValue, }) => {
     const parentRevision = (0, react_1.useContext)(RevisionContext).childResetRevision;
     const [resetRevision, setResetRevision] = (0, react_1.useState)(0);
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        return {};
+        return {
+            [parentRevision]: {
+                value,
+                keyStabilityRevision: 0,
+                zodValidation: schema.safeParse(value),
+            },
+        };
     });
     const currentLocalValue = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = localValue[parentRevision]) !== null && _a !== void 0 ? _a : {
             value: defaultValue,
             keyStabilityRevision: 0,
-            zodValidation: schema.safeParse(value),
+            zodValidation: schema.safeParse(defaultValue),
         });
-    }, [defaultValue, localValue, parentRevision, schema, value]);
+    }, [defaultValue, localValue, parentRevision, schema]);
     const stateRef = (0, react_1.useRef)(currentLocalValue);
     stateRef.current = currentLocalValue;
     const onChange = (0, react_1.useCallback)(

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -56,5 +56,5 @@ export declare const openInFileExplorer: ({ directory }: {
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../../preview-server/render-queue/job").CancelRenderResponse>;
 export declare const updateAvailable: (signal: AbortSignal) => Promise<import("../../../preview-server/render-queue/job").UpdateAvailableResponse>;
-export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown, enumPaths: EnumPath[]) => Promise<import("../../../preview-server/render-queue/job").UpdateDefaultPropsResponse>;
+export declare const updateDefaultProps: (compositionId: string, defaultProps: Record<string, unknown>, enumPaths: EnumPath[]) => Promise<import("../../../preview-server/render-queue/job").UpdateDefaultPropsResponse>;
 export declare const canUpdateDefaultProps: (compositionId: string) => Promise<import("../../../preview-server/render-queue/job").CanUpdateDefaultPropsResponse>;

package/dist/editor/components/RenderQueue/actions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
-const input_props_serialization_1 = require("../RenderModal/SchemaEditor/input-props-serialization");
+const remotion_1 = require("remotion");
 const callApi = (endpoint, body, signal) => {
     return new Promise((resolve, reject) => {
         fetch(endpoint, {
@@ -39,7 +39,11 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
         chromiumOptions,
         delayRenderTimeout,
         envVariables,
-        inputProps,
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            data: inputProps,
+            staticBase: window.remotion_staticBase,
+            indent: undefined,
+        }).serializedString,
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
@@ -70,7 +74,11 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
         disallowParallelEncoding,
         chromiumOptions,
         envVariables,
-        inputProps,
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            data: inputProps,
+            staticBase: window.remotion_staticBase,
+            indent: undefined,
+        }).serializedString,
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;
@@ -112,7 +120,7 @@ exports.updateAvailable = updateAvailable;
 const updateDefaultProps = (compositionId, defaultProps, enumPaths) => {
     return callApi('/api/update-default-props', {
         compositionId,
-        defaultProps: (0, input_props_serialization_1.serializeJSONWithDate)({
+        defaultProps: remotion_1.Internals.serializeJSONWithDate({
             data: defaultProps,
             indent: undefined,
             staticBase: window.remotion_staticBase,