@remotion/cli 4.0.0-alpha8 → 4.0.0-alpha9

package/dist/codemods/update-default-props.d.ts

@@ -2,6 +2,6 @@ import type { EnumPath } from '../editor/components/RenderModal/SchemaEditor/ext
 export declare const updateDefaultProps: ({ input, compositionId, newDefaultProps, enumPaths, }: {
     input: string;
     compositionId: string;
-    newDefaultProps: unknown;
+    newDefaultProps: Record<string, unknown>;
     enumPaths: EnumPath[];
 }) => Promise<string>;

package/dist/codemods/update-default-props.js

@@ -86,7 +86,6 @@ const findTerminators = (input, position) => {
     }
     return Infinity;
 };
-// TODO: Add more sanity checks
 const updateDefaultProps = async ({ input, compositionId, newDefaultProps, enumPaths, }) => {
     const starter = findStarter({ input, compositionId });
     const START_TOKEN = 'defaultProps={';

package/dist/editor/components/CheckboardToggle.js

@@ -4,6 +4,7 @@ exports.CheckboardToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const truthy_1 = require("../../truthy");
+const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
 const ControlButton_1 = require("./ControlButton");
@@ -20,6 +21,6 @@ const CheckboardToggle = () => {
             return !c;
         });
     }, [setCheckerboard]);
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fill: checkerboard ? 'var(--blue)' : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fill: checkerboard ? colors_1.BLUE : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
 };
 exports.CheckboardToggle = CheckboardToggle;

package/dist/editor/components/InlineAction.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare type RenderInlineAction = (color: string) => React.ReactNode;
 export declare const InlineAction: React.FC<{
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    onClick: React.MouseEventHandler<HTMLAnchorElement>;
     disabled?: boolean;
     renderAction: RenderInlineAction;
 }>;

package/dist/editor/components/InlineAction.js

@@ -17,15 +17,18 @@ const InlineAction = ({ renderAction, onClick, disabled }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             border: 'none',
-            background: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
+            background: disabled
+                ? 'transparent'
+                : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
             height: 24,
             width: 24,
             display: 'inline-flex',
             justifyContent: 'center',
             alignItems: 'center',
             borderRadius: 3,
+            pointerEvents: disabled ? 'none' : 'auto',
         };
-    }, [hovered]);
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, disabled: disabled, children: renderAction(hovered ? 'white' : colors_1.LIGHT_TEXT) }));
+    }, [disabled, hovered]);
+    return ((0, jsx_runtime_1.jsx)("a", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, children: renderAction(hovered ? 'white' : colors_1.LIGHT_TEXT) }));
 };
 exports.InlineAction = InlineAction;

package/dist/editor/components/LoopToggle.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoopToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const loop_1 = require("../state/loop");
 const ControlButton_1 = require("./ControlButton");
@@ -18,6 +19,6 @@ const LoopToggle = ({ loop, setLoop }) => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: (0, jsx_runtime_1.jsx)("path", { fill: loop ? 'var(--blue)' : 'white', d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: (0, jsx_runtime_1.jsx)("path", { fill: loop ? colors_1.BLUE : 'white', d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/editor/components/Menu/MenuItem.js

@@ -87,7 +87,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
         };
     }, [size]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onPointerDown: onPointerDown, onClick: onClick, style: containerStyle, type: "button", className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: itemName }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: outerStyle, children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: outerStyle, children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true, fixedHeight: null }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.MenuItem = MenuItem;

package/dist/editor/components/Menu/SubMenu.js

@@ -9,6 +9,6 @@ const SubMenuComponent = ({ portalStyle, subMenuActivated, subMenu, onQuitFullMe
     return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, className: "css-reset", children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: noop_1.noop, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
                     typeof subMenu.preselectIndex === 'number'
                     ? subMenu.preselectIndex
-                    : false, topItemCanBeUnselected: false }) }) }));
+                    : false, topItemCanBeUnselected: false, fixedHeight: null }) }) }));
 };
 exports.SubMenuComponent = SubMenuComponent;

package/dist/editor/components/NewComposition/ComboBox.js

@@ -91,12 +91,27 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
             current.removeEventListener('click', onClick);
         };
     }, [refresh]);
+    const spaceToBottom = (0, react_1.useMemo)(() => {
+        const margin = 10;
+        if (size && opened) {
+            return size.windowSize.height - (size.top + size.height) - margin;
+        }
+        return 0;
+    }, [opened, size]);
+    const spaceToTop = (0, react_1.useMemo)(() => {
+        const margin = 10;
+        if (size && opened) {
+            return size.top - margin;
+        }
+        return 0;
+    }, [opened, size]);
+    const derivedMaxHeight = (0, react_1.useMemo)(() => {
+        return spaceToTop > spaceToBottom ? spaceToTop : spaceToBottom;
+    }, [spaceToBottom, spaceToTop]);
     const portalStyle = (0, react_1.useMemo)(() => {
         if (!opened || !size) {
             return null;
         }
-        const spaceToBottom = size.windowSize.height - (size.top + size.height);
-        const spaceToTop = size.top;
         const spaceToRight = size.windowSize.width - (size.left + size.width);
         const minSpaceToRightRequired = styles_1.MAX_MENU_WIDTH;
         const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
@@ -119,7 +134,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     right: size.windowSize.width - size.left - size.width,
                 }),
         };
-    }, [opened, size]);
+    }, [opened, size, spaceToBottom, spaceToTop]);
     const selected = values.find((v) => v.id === selectedId);
     const style = (0, react_1.useMemo)(() => {
         return {
@@ -138,7 +153,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         };
     }, [customStyle, hovered, opened]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? ((0, jsx_runtime_1.jsx)("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: label, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.Combobox = Combobox;

package/dist/editor/components/NewComposition/InputDragger.js

@@ -4,6 +4,7 @@ exports.InputDragger = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
 const noop_1 = require("../../helpers/noop");
 const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
 const z_index_1 = require("../../state/z-index");
@@ -19,9 +20,9 @@ const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value,
         };
     }, []);
     const span = (0, react_1.useMemo)(() => ({
-        borderBottom: '1px dotted var(--blue)',
+        borderBottom: '1px dotted ' + colors_1.BLUE,
         paddingBottom: 1,
-        color: 'var(--blue)',
+        color: colors_1.BLUE,
         cursor: 'ew-resize',
         userSelect: 'none',
         fontSize: 13,

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

@@ -8,4 +8,5 @@ export declare const MenuContent: React.FC<{
     leaveLeftSpace: boolean;
     preselectIndex: false | number;
     topItemCanBeUnselected: boolean;
+    fixedHeight: number | null;
 }>;

package/dist/editor/components/NewComposition/MenuContent.js

@@ -19,9 +19,8 @@ const container = {
     overflowX: 'hidden',
     minWidth: 200,
     maxWidth: styles_1.MAX_MENU_WIDTH,
-    maxHeight: 600,
 };
-const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, }) => {
+const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, fixedHeight, }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const containerRef = (0, react_1.useRef)(null);
     const [subMenuActivated, setSubMenuActivated] = (0, react_1.useState)(false);
@@ -107,6 +106,15 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         }
         setSubMenuActivated('without-mouse');
     }, [onNextMenu, selectedItem, values]);
+    const containerWithHeight = (0, react_1.useMemo)(() => {
+        if (fixedHeight === null) {
+            return { ...container, maxHeight: 600 };
+        }
+        return {
+            ...container,
+            maxHeight: fixedHeight,
+        };
+    }, [fixedHeight]);
     (0, react_1.useEffect)(() => {
         const escapeBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -216,7 +224,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         current.addEventListener('pointerleave', onPointerLeave);
         return () => current.removeEventListener('pointerleave', onPointerLeave);
     }, [onHide, subMenuActivated]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: containerWithHeight, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
             if (item.type === 'divider') {
                 return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
             }

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

@@ -4,13 +4,14 @@ exports.EnforceAudioTrackSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("../layout");
 const InfoBubble_1 = require("./InfoBubble");
-const layout_1 = require("./layout");
+const layout_2 = require("./layout");
 const OptionExplainer_1 = require("./OptionExplainer");
 const EnforceAudioTrackSetting = ({ enforceAudioTrack, muted, setEnforceAudioTrack, option }) => {
     const onEnforceAudioTrackChanged = (0, react_1.useCallback)((e) => {
         setEnforceAudioTrack(e.target.checked);
     }, [setEnforceAudioTrack]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Enforce Audio Track", (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: option }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: muted && !enforceAudioTrack, checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Enforce Audio Track", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: option }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: muted && !enforceAudioTrack, checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged }) })] }));
 };
 exports.EnforceAudioTrackSetting = EnforceAudioTrackSetting;

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

@@ -4,13 +4,14 @@ exports.MutedSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("../layout");
 const InfoBubble_1 = require("./InfoBubble");
-const layout_1 = require("./layout");
+const layout_2 = require("./layout");
 const OptionExplainer_1 = require("./OptionExplainer");
 const MutedSetting = ({ muted, setMuted, enforceAudioTrack, hint }) => {
     const onMutedChanged = (0, react_1.useCallback)((e) => {
         setMuted(e.target.checked);
     }, [setMuted]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Muted", (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: hint }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: muted, disabled: enforceAudioTrack && !muted, onChange: onMutedChanged }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Muted", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: hint }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: muted, disabled: enforceAudioTrack && !muted, onChange: onMutedChanged }) })] }));
 };
 exports.MutedSetting = MutedSetting;

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

@@ -31,7 +31,7 @@ export declare const RenderModal: React.FC<{
     initialGl: OpenGlRenderer | null;
     initialIgnoreCertificateErrors: boolean;
     initialHeadless: boolean;
-    defaultProps: unknown;
+    defaultProps: Record<string, unknown>;
     inFrameMark: number | null;
     outFrameMark: number | null;
 }>;

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

@@ -16,6 +16,7 @@ const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
 const gear_1 = require("../../icons/gear");
 const gif_1 = require("../../icons/gif");
+const colors_1 = require("../../helpers/colors");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
 const is_menu_item_1 = require("../Menu/is-menu-item");
@@ -97,7 +98,7 @@ const icon = {
     height: 20,
 };
 const buttonStyle = {
-    backgroundColor: 'var(--blue)',
+    backgroundColor: colors_1.BLUE,
     color: 'white',
 };
 const flexer = {
@@ -218,6 +219,9 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         if (renderMode === 'video') {
             return enforceAudioTrackState;
         }
+        if (renderMode === 'audio') {
+            return enforceAudioTrackState;
+        }
         return false;
     }, [enforceAudioTrackState, renderMode]);
     const proResProfile = (0, react_1.useMemo)(() => {
@@ -587,9 +591,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     }, [registerKeybinding, trigger]);
     return ((0, jsx_runtime_1.jsx)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: (0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (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
-                                    ? 'var(--blue)'
-                                    : 'var(--blue-disabled)',
+                                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, currentComposition: currentComposition, 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)(RenderModalData_1.RenderModalData, { inputProps: inputProps, setInputProps: setInputProps, composition: currentComposition, compact: false, 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 })) })] })] }) }));

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

@@ -51,10 +51,8 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
         });
     }, [extendedOpenGlOptions, openGlOption, setOpenGlOption]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", formatter: (w) => `${w}x`, onValueChanged: setConcurrency, value: concurrency })), (0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting
-            // TODO: Should be right aligned
             // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
             , { 
-                // TODO: Should be right aligned
                 // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
                 min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: verbose, onChange: onVerboseLoggingChanged }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disableWebSecurity, onChange: onDisableWebSecurityChanged }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Ignore certificate errors " }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: ignoreCertificateErrors, onChange: onIgnoreCertificatErrors }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Headless mode" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "OpenGL render backend" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
 };

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

@@ -41,6 +41,6 @@ const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setE
             };
         });
     }, [codec, setAudioCodec]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' && audioCodecOptions(codec).length >= 2 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Audio Codec" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })] })) : null, renderMode === 'video' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: enforceAudioTrack, muted: muted, setMuted: setMuted, hint: client_1.BrowserSafeApis.options.muteOption }), (0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState, option: client_1.BrowserSafeApis.options.enforceAudioOption }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})] })), renderMode === 'still' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Custom audio bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: shouldHaveCustomTargetAudioBitrate, onChange: onShouldHaveTargetAudioBitrateChanged }) })] })), shouldHaveCustomTargetAudioBitrate && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target audio bitrate" }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.audioBitrateOption }) }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetAudioBitrate, onChange: onTargetAudioBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' && audioCodecOptions(codec).length >= 2 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Audio Codec" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: enforceAudioTrack, muted: muted, setMuted: setMuted, hint: client_1.BrowserSafeApis.options.muteOption })) : null, (renderMode === 'video' || renderMode === 'audio') && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState, option: client_1.BrowserSafeApis.options.enforceAudioOption }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})] })), renderMode === 'still' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Custom audio bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: shouldHaveCustomTargetAudioBitrate, onChange: onShouldHaveTargetAudioBitrateChanged }) })] })), shouldHaveCustomTargetAudioBitrate && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target audio bitrate" }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.audioBitrateOption }) }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetAudioBitrate, onChange: onTargetAudioBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null] }));
 };
 exports.RenderModalAudio = RenderModalAudio;

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

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const prores_labels_1 = require("../../helpers/prores-labels");
 const use_file_existence_1 = require("../../helpers/use-file-existence");
 const Checkmark_1 = require("../../icons/Checkmark");
+const layout_1 = require("../layout");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const RemInput_1 = require("../NewComposition/RemInput");
@@ -14,7 +15,7 @@ const SegmentedControl_1 = require("../SegmentedControl");
 const FrameRangeSetting_1 = require("./FrameRangeSetting");
 const human_readable_codec_1 = require("./human-readable-codec");
 const InfoBubble_1 = require("./InfoBubble");
-const layout_1 = require("./layout");
+const layout_2 = require("./layout");
 const OptionExplainer_1 = require("./OptionExplainer");
 const RenderModalInput_1 = require("./RenderModalInput");
 const container = {
@@ -74,6 +75,6 @@ const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setV
     const onValueChange = (0, react_1.useCallback)((e) => {
         setOutName(e.target.value);
     }, [setOutName]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Codec", (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoCodecOption }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, title: "Codec" }) })] })), renderMode === 'still' && currentComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${currentComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: currentComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: proResProfile, selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: currentComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsx)(RenderModalInput_1.RenderModalInput, { existence: existence, inputStyle: layout_1.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoCodecOption }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, title: "Codec" }) })] })), renderMode === 'still' && currentComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${currentComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: currentComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: proResProfile, selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: currentComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsx)(RenderModalInput_1.RenderModalInput, { existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage })] }));
 };
 exports.RenderModalBasic = RenderModalBasic;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { AnyComposition } from 'remotion';
 export declare type State = {
     str: string;
-    value: unknown;
+    value: Record<string, unknown>;
     validJSON: true;
 } | {
     str: string;
@@ -12,8 +12,8 @@ export declare type State = {
 export declare type PropsEditType = 'input-props' | 'default-props';
 export declare const RenderModalData: React.FC<{
     composition: AnyComposition;
-    inputProps: unknown;
-    setInputProps: React.Dispatch<React.SetStateAction<unknown>>;
+    inputProps: Record<string, unknown>;
+    setInputProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     compact: boolean;
     mayShowSaveButton: boolean;
     propsEditType: PropsEditType;

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

@@ -105,7 +105,7 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
         if (!inJSONEditor) {
             return null;
         }
-        const value = inputProps !== null && inputProps !== void 0 ? inputProps : {};
+        const value = inputProps;
         return (0, input_props_serialization_1.serializeJSONWithDate)({
             data: value,
             indent: 2,
@@ -122,7 +122,7 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return 'no-zod';
         }
         if (!composition.schema) {
-            return z.any();
+            return z.object({});
         }
         if (!(typeof composition.schema.safeParse === 'function')) {
             throw new Error('A value which is not a Zod schema was passed to `schema`');
@@ -214,7 +214,11 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return;
         }
         setValBeforeSafe(inputProps);
-        (0, actions_1.updateDefaultProps)(composition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []));
+        (0, actions_1.updateDefaultProps)(composition.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);
+            }
+        });
     }, [composition.id, inputProps, schema, z]);
     (0, react_1.useEffect)(() => {
         setSaving(false);
@@ -225,7 +229,14 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
             return;
         }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).catch((err) => {
+        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
+            .then((response) => {
+            if (!response.success) {
+                console.log(response.stack);
+                (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${response.reason}. See console for more information.`);
+            }
+        })
+            .catch((err) => {
             (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
             setSaving(false);
         });
@@ -272,6 +283,6 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayS
     }
     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, compact: compact, defaultProps: composition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, parseJSON: parseJSON }))] }));
+                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: composition.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, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, parseJSON: parseJSON }))] }));
 };
 exports.RenderModalData = RenderModalData;

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

@@ -4,7 +4,7 @@ import type { SerializedJSONWithCustomFields } from './SchemaEditor/input-props-
 export declare type EditType = 'inputProps' | 'defaultProps';
 export declare const RenderModalJSONPropsEditor: React.FC<{
     value: unknown;
-    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     zodValidationResult: Zod.SafeParseReturnType<unknown, unknown>;
     switchToSchema: () => void;
     onSave: () => void;

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

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

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

@@ -13,7 +13,7 @@ const scrollable = {
     flexDirection: 'column',
     overflowY: 'auto',
 };
-const SchemaEditor = ({ schema, value, setValue, zodValidationResult, compact, defaultProps, onSave, showSaveButton, saving, }) => {
+const SchemaEditor = ({ schema, value, setValue, zodValidationResult, compact, defaultProps, onSave, showSaveButton, saving, saveDisabledByParent, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
@@ -31,9 +31,9 @@ const SchemaEditor = ({ schema, value, setValue, zodValidationResult, compact, d
         }
         return ((0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.InvalidSchema, { reset: reset, zodValidationResult: zodValidationResult }));
     }
-    if (typeName === z.ZodFirstPartyTypeKind.ZodObject) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { value: value, setValue: setValue, jsonPath: [], schema: schema, compact: compact, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving }) }));
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodObject) {
+        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
     }
-    return null;
+    return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { value: value, setValue: setValue, jsonPath: [], schema: schema, compact: compact, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent }) }));
 };
 exports.SchemaEditor = SchemaEditor;

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

@@ -10,3 +10,6 @@ export declare const InvalidSchema: React.FC<{
     zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
     reset: () => void;
 }>;
+export declare const TopLevelZodValue: React.FC<{
+    typeReceived: string;
+}>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InvalidSchema = exports.InvalidDefaultProps = exports.NoDefaultProps = exports.NoSchemaDefined = exports.ZodNotInstalled = void 0;
+exports.TopLevelZodValue = exports.InvalidSchema = exports.InvalidDefaultProps = exports.NoDefaultProps = exports.NoSchemaDefined = exports.ZodNotInstalled = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../../../../preview-server/error-overlay/remotion-overlay/Button");
 const colors_1 = require("../../../helpers/colors");
@@ -24,7 +24,7 @@ const errorExplanation = {
 };
 const codeSnippet = {
     fontSize: 14,
-    color: 'var(--blue)',
+    color: colors_1.BLUE,
     fontFamily: 'monospace',
 };
 const errorContainer = {
@@ -57,3 +57,7 @@ const InvalidSchema = ({ zodValidationResult, reset }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
 };
 exports.InvalidSchema = InvalidSchema;
+const TopLevelZodValue = ({ typeReceived }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The top-level type of the schema must be a pure", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "z.object" }), ". Instead got a schema of type", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: typeReceived })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema by changing the top-level Zod type to an object." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn more" })] }));
+};
+exports.TopLevelZodValue = TopLevelZodValue;

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

@@ -9,8 +9,12 @@ export declare const SchemaLabel: React.FC<{
     showSaveButton: boolean;
     compact: boolean;
     saving: boolean;
+    valid: boolean;
+    saveDisabledByParent: boolean;
 }>;
 export declare const SchemaFieldsetLabel: React.FC<{
     jsonPath: JSONPath;
     onRemove: null | (() => void);
+    isDefaultValue: boolean;
+    onReset: () => void;
 }>;

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

@@ -30,11 +30,12 @@ const labelStyle = {
     color: colors_1.LIGHT_TEXT,
     lineHeight: '40px',
 };
-const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton, compact, onRemove, saving, }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? compactStyles : wideStyles, children: [(0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: (0, get_schema_label_1.getSchemaLabel)(jsonPath) }), compact ? (0, jsx_runtime_1.jsx)(layout_1.Flex, {}) : (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, isSaving: saving })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
+const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton, compact, onRemove, saving, valid, saveDisabledByParent, }) => {
+    const disableSave = saving || !valid || saveDisabledByParent;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? compactStyles : wideStyles, children: [(0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: (0, get_schema_label_1.getSchemaLabel)(jsonPath) }), compact ? (0, jsx_runtime_1.jsx)(layout_1.Flex, {}) : (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
 };
 exports.SchemaLabel = SchemaLabel;
-const SchemaFieldsetLabel = ({ jsonPath, onRemove }) => {
-    return ((0, jsx_runtime_1.jsxs)("legend", { style: layout_2.fieldsetLabel, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), onRemove ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove })] })) : null] }));
+const SchemaFieldsetLabel = ({ jsonPath, onRemove, isDefaultValue, onReset }) => {
+    return ((0, jsx_runtime_1.jsxs)("legend", { style: layout_2.fieldsetLabel, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), onRemove ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove })] })) : null] }));
 };
 exports.SchemaFieldsetLabel = SchemaFieldsetLabel;