@remotion/cli 4.1.0-alpha1 → 4.1.0-alpha11

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemTextarea.d.ts

@@ -3,5 +3,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaEleme
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/editor/components/OpenEditorButton.js

@@ -12,8 +12,11 @@ const svgStyle = {
 };
 const buttonStyle = {
     border: 'none',
-    width: '25px',
-    height: '25px',
+    width: '20px',
+    height: '20px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
 };
 const OpenEditorButton = () => {
     const [hovered, setHovered] = (0, react_1.useState)(false);

package/dist/editor/components/PlayPause.js

@@ -114,11 +114,11 @@ const PlayPause = ({ playbackRate, loop }) => {
         frameForward(1);
     }, [frameForward]);
     const jumpToStart = (0, react_1.useCallback)(() => {
-        seek(0);
-    }, [seek]);
+        seek(inFrame !== null && inFrame !== void 0 ? inFrame : 0);
+    }, [seek, inFrame]);
     const jumpToEnd = (0, react_1.useCallback)(() => {
-        seek((0, imperative_state_1.getCurrentDuration)() - 1);
-    }, [seek]);
+        seek(outFrame !== null && outFrame !== void 0 ? outFrame : (0, imperative_state_1.getCurrentDuration)() - 1);
+    }, [seek, outFrame]);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
         const arrowLeft = keybindings.registerKeybinding({

package/dist/editor/components/PlaybackRateSelector.js

@@ -9,7 +9,7 @@ const playbackrate_1 = require("../state/playbackrate");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
 const commonPlaybackRates = [
-    -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 2, 4,
+    -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 1.5, 2, 4,
 ];
 const getPlaybackRateLabel = (playbackRate) => {
     return `${playbackRate}x`;

package/dist/editor/components/PreviewToolbar.js

@@ -9,6 +9,7 @@ const timeline_layout_1 = require("../helpers/timeline-layout");
 const loop_1 = require("../state/loop");
 const CheckboardToggle_1 = require("./CheckboardToggle");
 const FpsCounter_1 = require("./FpsCounter");
+const FullscreenToggle_1 = require("./FullscreenToggle");
 const layout_1 = require("./layout");
 const LoopToggle_1 = require("./LoopToggle");
 const MuteToggle_1 = require("./MuteToggle");
@@ -45,6 +46,7 @@ const PreviewToolbar = () => {
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
+    const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), isFullscreenSupported && (0, jsx_runtime_1.jsx)(FullscreenToggle_1.FullScreenToggle, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/editor/components/QuickSwitcher/QuickSwitcherResult.js

@@ -98,14 +98,14 @@ const QuickSwitcherResult = ({ result, selected }) => {
             fontSize: 15,
         };
     }, [hovered, result.type, selected]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {
                                 __html: result.titleLine,
-                            } }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+                            }, style: labelStyle }), (0, jsx_runtime_1.jsx)("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {
                                 __html: result.subtitleLine,
-                            } })] })) : ((0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: result.title })) })] }, result.id));
+                            }, style: labelStyle })] })) : ((0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: result.title })) })] }, result.id));
 };
 exports.QuickSwitcherResult = QuickSwitcherResult;

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

@@ -17,4 +17,6 @@ export declare const DataEditor: React.FC<{
     setInputProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     mayShowSaveButton: boolean;
     propsEditType: PropsEditType;
+    saving: boolean;
+    setSaving: React.Dispatch<React.SetStateAction<boolean>>;
 }>;

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

@@ -39,7 +39,6 @@ const SegmentedControl_1 = require("../SegmentedControl");
 const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
 const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
 const extract_enum_json_paths_1 = require("./SchemaEditor/extract-enum-json-paths");
-const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
 const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
 const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
 const WarningIndicatorButton_1 = require("./WarningIndicatorButton");
@@ -88,10 +87,8 @@ const getPersistedShowWarningState = () => {
 const setPersistedShowWarningState = (val) => {
     localStorage.setItem(persistanceKey, String(Boolean(val)));
 };
-const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowSaveButton, propsEditType, }) => {
+const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowSaveButton, propsEditType, saving, setSaving, }) => {
     const [mode, setMode] = (0, react_1.useState)('schema');
-    const [valBeforeSafe, setValBeforeSafe] = (0, react_1.useState)(inputProps);
-    const [saving, setSaving] = (0, react_1.useState)(false);
     const [showWarning, setShowWarningWithoutPersistance] = (0, react_1.useState)(() => getPersistedShowWarningState());
     const inJSONEditor = mode === 'json';
     const serializedJSON = (0, react_1.useMemo)(() => {
@@ -99,7 +96,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             return null;
         }
         const value = inputProps;
-        return (0, input_props_serialization_1.serializeJSONWithDate)({
+        return remotion_1.Internals.serializeJSONWithDate({
             data: value,
             indent: 2,
             staticBase: window.remotion_staticBase,
@@ -215,7 +212,6 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
             return;
         }
-        setValBeforeSafe(inputProps);
         (0, actions_1.updateDefaultProps)(unresolvedComposition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
             if (!response.success) {
                 (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: ' + response.reason);
@@ -224,14 +220,15 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
     }, [unresolvedComposition.id, inputProps, schema, z]);
     (0, react_1.useEffect)(() => {
         setSaving(false);
-    }, [fastRefreshes]);
+    }, [fastRefreshes, setSaving]);
     const onSave = (0, react_1.useCallback)((updater) => {
+        var _a;
         if (schema === 'no-zod' || schema === 'no-schema' || z === null) {
             (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
             return;
         }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater(unresolvedComposition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
+        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater((_a = unresolvedComposition.defaultProps) !== null && _a !== void 0 ? _a : {}), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
             .then((response) => {
             if (!response.success) {
                 console.log(response.stack);
@@ -242,7 +239,13 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
             setSaving(false);
         });
-    }, [unresolvedComposition.defaultProps, unresolvedComposition.id, schema, z]);
+    }, [
+        schema,
+        z,
+        setSaving,
+        unresolvedComposition.id,
+        unresolvedComposition.defaultProps,
+    ]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
     const warnings = (0, react_1.useMemo)(() => {
         return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
@@ -291,6 +294,6 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: tabWrapper, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), warnings.length > 0 ? ((0, jsx_runtime_1.jsx)(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
                         ? warnings.map((warning) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })] }, warning)))
-                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, defaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
+                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, defaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, onSave: onUpdate, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
 };
 exports.DataEditor = DataEditor;

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

@@ -3,13 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FrameRangeSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const InputDragger_1 = require("../NewComposition/InputDragger");
-const RemInput_1 = require("../NewComposition/RemInput");
 const layout_1 = require("./layout");
+const MultiRangeSlider_1 = require("./MultiRangeSlider");
+const numberWrapper = {
+    minWidth: '39px',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    fontSize: '14px',
+};
 const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
-    const maxStartFrame = endFrame - 1;
     const minStartFrame = 0;
-    const minEndFrame = startFrame + 1;
     const maxEndFrame = durationInFrames - 1;
     const onStartFrameChangedDirectly = (0, react_1.useCallback)((newStartFrame) => {
         setStartFrame(newStartFrame);
@@ -17,26 +21,6 @@ const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames
     const onEndFrameChangedDirectly = (0, react_1.useCallback)((newEndFrame) => {
         setEndFrame(newEndFrame);
     }, [setEndFrame]);
-    const onStartFrameChanged = (0, react_1.useCallback)((e) => {
-        setStartFrame((q) => {
-            const newStartFrame = parseInt(e, 10);
-            if (Number.isNaN(newStartFrame)) {
-                return q;
-            }
-            const newStartFrameClamped = Math.min(maxStartFrame, Math.max(newStartFrame, minStartFrame));
-            return newStartFrameClamped;
-        });
-    }, [maxStartFrame, setStartFrame]);
-    const onEndFrameChanged = (0, react_1.useCallback)((e) => {
-        setEndFrame((q) => {
-            const newEndFrame = parseInt(e, 10);
-            if (Number.isNaN(newEndFrame)) {
-                return q;
-            }
-            const newEndFrameClamped = Math.min(maxEndFrame, Math.max(newEndFrame, minEndFrame));
-            return newEndFrameClamped;
-        });
-    }, [maxEndFrame, minEndFrame, setEndFrame]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: startFrame, onTextChange: onStartFrameChanged, placeholder: `${minStartFrame}-${maxStartFrame}`, onValueChange: onStartFrameChangedDirectly, name: "startFrame", step: 1, min: minStartFrame, max: maxStartFrame, status: "ok", rightAlign: true }) }), (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: endFrame, onTextChange: onEndFrameChanged, placeholder: `${minEndFrame}-${maxEndFrame}`, onValueChange: onEndFrameChangedDirectly, name: "endFrame", step: 1, min: minEndFrame, max: maxEndFrame, status: "ok", rightAlign: true }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)("div", { style: numberWrapper, children: startFrame }), (0, jsx_runtime_1.jsx)(MultiRangeSlider_1.MultiRangeSlider, { min: minStartFrame, max: maxEndFrame, start: startFrame, end: endFrame, step: 1, onLeftThumbDrag: onStartFrameChangedDirectly, onRightThumbDrag: onEndFrameChangedDirectly }), (0, jsx_runtime_1.jsx)("div", { style: numberWrapper, children: endFrame })] })] }));
 };
 exports.FrameRangeSetting = FrameRangeSetting;

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

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+interface MultiRangeSliderProps {
+    min: number;
+    max: number;
+    start: number;
+    end: number;
+    step: number;
+    onLeftThumbDrag: (newVal: number) => void;
+    onRightThumbDrag: (newVal: number) => void;
+}
+export declare const MultiRangeSlider: FC<MultiRangeSliderProps>;
+export {};

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiRangeSlider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const container = {
+    borderColor: 'black',
+    borderStyle: 'solid',
+    height: 39,
+    width: 220,
+    position: 'relative',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    marginLeft: 8,
+    marginRight: 8,
+    borderRadius: 2,
+};
+const slider = {
+    position: 'relative',
+    height: 38,
+    width: 220,
+};
+const sliderRange = {
+    position: 'absolute',
+    top: 0,
+    backgroundColor: colors_1.BLUE,
+    height: 39,
+};
+const MultiRangeSlider = ({ min, max, start, end, step, onLeftThumbDrag, onRightThumbDrag, }) => {
+    const getPercent = (0, react_1.useCallback)((value) => Math.round(((value - min) / (max - min)) * 100), [min, max]);
+    const rangeStyle = (0, react_1.useMemo)(() => {
+        const minPercent = getPercent(start);
+        const maxPercent = getPercent(end);
+        return {
+            ...sliderRange,
+            left: `${minPercent}%`,
+            width: `${maxPercent - minPercent}%`,
+        };
+    }, [end, getPercent, start]);
+    const onChangeLeft = (0, react_1.useCallback)((event) => {
+        const value = Math.min(Number(event.target.value), end - 1);
+        onLeftThumbDrag(value);
+    }, [end, onLeftThumbDrag]);
+    const onChangeRight = (0, react_1.useCallback)((event) => {
+        const value = Math.max(Number(event.target.value), start + 1);
+        onRightThumbDrag(value);
+    }, [onRightThumbDrag, start]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)("div", { style: slider, children: [(0, jsx_runtime_1.jsx)("input", { type: "range", min: min, max: max, value: start, step: step, onChange: onChangeLeft, className: "__remotion_thumb" }), (0, jsx_runtime_1.jsx)("input", { type: "range", min: min, max: max, value: end, step: step, onChange: onChangeRight, className: "__remotion_thumb" }), (0, jsx_runtime_1.jsx)("div", { style: rangeStyle })] }) }));
+};
+exports.MultiRangeSlider = MultiRangeSlider;

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,