@remotion/cli 3.3.80 → 3.3.81

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

@@ -1,7 +1,29 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateDefaultProps = void 0;
-const prettier_1 = require("prettier");
 const findStarter = ({ input, compositionId, }) => {
     const format1 = input.indexOf(`id="${compositionId}"`);
     if (format1 > -1) {
@@ -25,13 +47,24 @@ const findStarter = ({ input, compositionId, }) => {
     }
     throw new Error(`Could not find composition ID ${compositionId} in file`);
 };
+const findEndPosition = (input, currentPosition) => {
+    const asConstVersion = input
+        .slice(currentPosition + 1)
+        .search(/as\sconst[ \t\n\r]+\}/);
+    if (asConstVersion !== -1) {
+        const nextEnd = input.indexOf('}', asConstVersion + currentPosition + 1);
+        return nextEnd - 1;
+    }
+    const next = input.indexOf('}}', currentPosition + 1);
+    if (next !== -1) {
+        return next;
+    }
+    throw new Error('Could not find end of defaultProps');
+};
 const findEnder = (input, position, maxPosition) => {
     let currentPosition = position;
     while (currentPosition < maxPosition) {
-        const next = input.indexOf('}}', currentPosition + 1);
-        if (next === -1) {
-            throw new Error('Could not find end of defaultProps');
-        }
+        const next = findEndPosition(input, currentPosition);
         currentPosition = next;
         const nextChar = input[next + 1];
         if (nextChar === ',') {
@@ -58,14 +91,17 @@ const stringifyDefaultProps = (props) => {
         if (this[key] instanceof Date) {
             return `__REMOVEQUOTE__new Date('${new Date(this[key]).toISOString()}')__REMOVEQUOTE__`;
         }
+        if (typeof this[key] === 'string') {
+            return `${this[key]}__ADD_AS_CONST__`;
+        }
         return value;
     })
-        .replace('"__REMOVEQUOTE__', '')
-        .replace('__REMOVEQUOTE__"', '');
+        .replace(/"__REMOVEQUOTE__/g, '')
+        .replace(/__REMOVEQUOTE__"/g, '')
+        .replace(/__ADD_AS_CONST__"/g, '" as const');
 };
 // TODO: Add more sanity checks
 // TODO: better error messages
-// TODO: throw if prettier was not found
 const updateDefaultProps = async ({ input, compositionId, newDefaultProps, }) => {
     const starter = findStarter({ input, compositionId });
     const START_TOKEN = 'defaultProps={';
@@ -75,23 +111,33 @@ const updateDefaultProps = async ({ input, compositionId, newDefaultProps, }) =>
     }
     const maxEnd = findTerminators(input, starter);
     const [startPos, endPos] = findEnder(input, start + START_TOKEN.length, maxEnd);
+    // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+    let prettier = null;
+    try {
+        prettier = await Promise.resolve().then(() => __importStar(require('prettier')));
+    }
+    catch (err) {
+        throw new Error('Cannot save default props because Prettier cannot be found in the current project.');
+    }
+    const { format, resolveConfig, resolveConfigFile } = prettier;
     const newFile = input.substring(0, startPos) +
         stringifyDefaultProps(newDefaultProps) +
         input.substring(endPos);
-    const configFilePath = await (0, prettier_1.resolveConfigFile)();
+    const configFilePath = await resolveConfigFile();
     if (!configFilePath) {
         throw new Error('prettier config file not found');
     }
-    const prettierConfig = await (0, prettier_1.resolveConfig)(configFilePath);
+    const prettierConfig = await resolveConfig(configFilePath);
     if (!prettierConfig) {
         throw new Error('Prettier config not found');
     }
-    const prettified = (0, prettier_1.format)(newFile, {
+    const prettified = format(newFile, {
         ...prettierConfig,
         rangeStart: startPos,
         rangeEnd: endPos,
         filepath: 'test.tsx',
         plugins: [],
+        endOfLine: 'auto',
     });
     return prettified;
 };

package/dist/editor/components/CollapsedSidebarExpander.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const caret_1 = require("../icons/caret");
 const z_index_1 = require("../state/z-index");
+// TODO: Add shortcut to toggle both sidebars (similar to zen mode in vs code)
 const CollapsedSidebarExpander = ({ onExpand, direction }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();

package/dist/editor/components/CurrentCompositionSideEffects.js

@@ -33,7 +33,6 @@ const CurrentCompositionKeybindings = () => {
         const renderButton = document.getElementById('render-modal-button');
         renderButton.click();
     }, [type, video]);
-    // TODO: Does not work if the left sidebar is collapsed
     (0, react_1.useEffect)(() => {
         const binding = keybindings.registerKeybinding({
             event: 'keydown',

package/dist/editor/components/InlineAction.js

@@ -24,6 +24,7 @@ const InlineAction = ({ children, onClick }) => {
             justifyContent: 'center',
             alignItems: 'center',
             borderRadius: 3,
+            // TODO: Color does not get propagated to the children
             color: hovered ? 'white' : colors_1.LIGHT_TEXT,
         };
     }, [hovered]);

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

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const z_index_1 = require("../../state/z-index");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const RemInput_1 = require("../NewComposition/RemInput");
 exports.inputBaseStyle = {
     padding: `${RemInput_1.INPUT_HORIZONTAL_PADDING}px 10px`,
@@ -12,7 +13,8 @@ exports.inputBaseStyle = {
     borderStyle: 'solid',
     borderWidth: 1,
     fontSize: 14,
-    resize: 'vertical',
+    resize: 'none',
+    overflowX: 'hidden',
 };
 const RemTextareaFRFunction = ({ status, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
@@ -85,6 +87,6 @@ const RemTextareaFRFunction = ({ status, ...props }, ref) => {
             current.removeEventListener('keydown', onKeyDown);
         };
     }, [inputRef]);
-    return ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, tabIndex: tabIndex, ...props, style: style }));
+    return ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, tabIndex: tabIndex, ...props, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, style: style }));
 };
 exports.RemTextarea = (0, react_1.forwardRef)(RemTextareaFRFunction);

package/dist/editor/components/RenderButton.js

@@ -68,6 +68,6 @@ const RenderButton = ({ composition, visible }) => {
     if (!visible) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }) }));
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { svgProps: iconStyle }) }));
 };
 exports.RenderButton = RenderButton;

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

@@ -7,4 +7,5 @@ export declare const EnvInput: React.FC<{
     onDelete: (index: number) => void;
     index: number;
     autoFocus: boolean;
+    isDuplicate: boolean;
 }>;

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

@@ -28,6 +28,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const layout_1 = require("../layout");
 const RemInput_1 = require("../NewComposition/RemInput");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const InlineEyeIcon_1 = require("./InlineEyeIcon");
 const InlineRemoveButton_1 = require("./InlineRemoveButton");
 const layout_2 = require("./layout");
@@ -35,8 +36,20 @@ const input = {
     flex: 1,
     width: '100%',
 };
-const EnvInput = ({ onEnvKeyChange, onEnvValChange, envKey, envVal, onDelete, index, autoFocus, }) => {
+const validationStyle = {
+    paddingLeft: layout_2.optionRow.paddingLeft,
+    paddingRight: layout_2.optionRow.paddingRight,
+};
+const EnvInput = ({ onEnvKeyChange, onEnvValChange, envKey, envVal, onDelete, index, autoFocus, isDuplicate, }) => {
     const [showInPlainText, setShowInPlainText] = react_1.default.useState(false);
+    const [initialWarningKeyMissing, setKeyWarningEligible] = react_1.default.useState(() => {
+        return envKey.trim() === '' && envVal.trim() !== '';
+    });
+    const [initialWarningValMissing, setValueWarningEligible] = react_1.default.useState(() => {
+        return envKey.trim() !== '' && envVal.trim() === '';
+    });
+    const isKeyMissing = envKey.trim() === '' && initialWarningKeyMissing && envVal.trim() !== '';
+    const isValMissing = envVal.trim() === '' && initialWarningValMissing && envKey.trim() !== '';
     const handleDelete = (0, react_1.useCallback)(() => {
         onDelete(index);
     }, [index, onDelete]);
@@ -49,6 +62,13 @@ const EnvInput = ({ onEnvKeyChange, onEnvValChange, envKey, envVal, onDelete, in
     const handleValueChange = (0, react_1.useCallback)((e) => {
         onEnvValChange(index, e.target.value);
     }, [index, onEnvValChange]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: "ok", type: "text", placeholder: "Key", style: input, value: envKey, autoFocus: autoFocus, onChange: handleKeyChange }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: "ok", placeholder: "Value", type: showInPlainText ? 'text' : 'password', style: input, value: envVal, onChange: handleValueChange }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), (0, jsx_runtime_1.jsx)(InlineEyeIcon_1.InlineEyeButton, { enabled: !showInPlainText, onClick: togglePlainText }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: handleDelete })] }));
+    const makeKeyWarningEligible = (0, react_1.useCallback)(() => {
+        setKeyWarningEligible(true);
+    }, []);
+    const makeValueWarningEligible = (0, react_1.useCallback)(() => {
+        setValueWarningEligible(true);
+    }, []);
+    const isNodeEnvKey = envKey.trim() === 'NODE_ENV';
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: isNodeEnvKey || isDuplicate || isKeyMissing ? 'warning' : 'ok', type: "text", placeholder: "Key", style: input, value: envKey, onBlur: makeKeyWarningEligible, autoFocus: autoFocus, onChange: handleKeyChange }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: isValMissing ? 'warning' : 'ok', placeholder: "Value", type: showInPlainText ? 'text' : 'password', style: input, value: envVal, onBlur: makeValueWarningEligible, onChange: handleValueChange }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), (0, jsx_runtime_1.jsx)(InlineEyeIcon_1.InlineEyeButton, { enabled: !showInPlainText, onClick: togglePlainText }), (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: handleDelete })] }), isNodeEnvKey ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "NODE_ENV will be overwritten by Remotion during the render process." }) })) : null, isDuplicate ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: `${envKey.toUpperCase()} is already defined.` }) })) : null, isKeyMissing ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "Key is missing." }) })) : null, isValMissing ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "Value is missing." }) })) : null] }));
 };
 exports.EnvInput = EnvInput;

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

@@ -4,6 +4,7 @@ exports.InfoTooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const styles_1 = require("../Menu/styles");
 const arrow = {
     height: 7,
@@ -34,6 +35,6 @@ const InfoTooltip = ({ children, arrowDirection }) => {
             display: 'flex',
             flexDirection: arrowDirection === 'up' ? 'column-reverse' : 'column',
             alignItems: 'flex-start',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: container, className: "__remotion-vertical-scrollbar", children: children }), arrowDirection === 'down' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowDown, children: (0, jsx_runtime_1.jsx)("path", { d: `M 14 0 L 7 7 L 0 0`, fill: colors_1.BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowUp, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 7 L 7 0 L 14 7`, fill: colors_1.BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowDown, children: (0, jsx_runtime_1.jsx)("path", { d: `M 14 0 L 7 7 L 0 0`, fill: colors_1.BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowUp, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 7 L 7 0 L 14 7`, fill: colors_1.BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
 };
 exports.InfoTooltip = InfoTooltip;

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

@@ -2,37 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineEyeButton = 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 clearIcon = {
-    height: 16,
+    height: 14,
     color: colors_1.LIGHT_TEXT,
 };
 const InlineEyeButton = ({ onClick, enabled }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const handleClick = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
-        onClick();
-    }, [onClick]);
-    const color = hovered ? 'white' : colors_1.LIGHT_TEXT;
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            display: 'inline-flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            appearance: 'none',
-            padding: 0,
-            cursor: 'pointer',
-            border: 'none',
-            width: 24,
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)("button", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: handleClick, type: "button", children: enabled ? ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 640 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M25.9 3.4C19-2 8.9-.8 3.4 6.1S-.8 23.1 6.1 28.6l608 480c6.9 5.5 17 4.3 22.5-2.6s4.3-17-2.6-22.5L25.9 3.4zM605.5 268.3c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-51.2 0-96 14.8-133.9 36.8l27.3 21.5C244.6 74.2 280.2 64 320 64c70.4 0 127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-9.2 22.1-25.9 52-49.5 81.5l25.1 19.8c25.6-32 43.7-64.4 53.9-89zM88.4 154.7c-25.6 32-43.7 64.4-53.9 89c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c51.2 0 96-14.8 133.9-36.8l-27.3-21.5C395.4 437.8 359.8 448 320 448c-70.4 0-127.7-32-170.8-72C106.1 336 77.3 288 64 256c9.2-22.1 25.9-52 49.5-81.5L88.4 154.7zM320 384c16.7 0 32.7-3.2 47.4-9.1l-30.9-24.4c-5.4 .9-10.9 1.4-16.5 1.4c-51 0-92.8-39.8-95.8-90.1l-30.9-24.4c-.9 6-1.3 12.2-1.3 18.5c0 70.7 57.3 128 128 128zM448 256c0-70.7-57.3-128-128-128c-16.7 0-32.7 3.2-47.4 9.1l30.9 24.4c5.4-.9 10.9-1.4 16.5-1.4c51 0 92.8 39.8 95.8 90.1l30.9 24.4c.9-6 1.3-12.2 1.3-18.5z" }) })) : ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M117.2 136C160.3 96 217.6 64 288 64s127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-13.3 32-42.1 80-85.2 120c-43.1 40-100.4 72-170.8 72s-127.7-32-170.8-72C74.1 336 45.3 288 32 256c13.3-32 42.1-80 85.2-120zM288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM192 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" }) })) }));
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: enabled ? ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 640 512", children: (0, jsx_runtime_1.jsx)("path", { fill: 'currentColor', d: "M25.9 3.4C19-2 8.9-.8 3.4 6.1S-.8 23.1 6.1 28.6l608 480c6.9 5.5 17 4.3 22.5-2.6s4.3-17-2.6-22.5L25.9 3.4zM605.5 268.3c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-51.2 0-96 14.8-133.9 36.8l27.3 21.5C244.6 74.2 280.2 64 320 64c70.4 0 127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-9.2 22.1-25.9 52-49.5 81.5l25.1 19.8c25.6-32 43.7-64.4 53.9-89zM88.4 154.7c-25.6 32-43.7 64.4-53.9 89c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c51.2 0 96-14.8 133.9-36.8l-27.3-21.5C395.4 437.8 359.8 448 320 448c-70.4 0-127.7-32-170.8-72C106.1 336 77.3 288 64 256c9.2-22.1 25.9-52 49.5-81.5L88.4 154.7zM320 384c16.7 0 32.7-3.2 47.4-9.1l-30.9-24.4c-5.4 .9-10.9 1.4-16.5 1.4c-51 0-92.8-39.8-95.8-90.1l-30.9-24.4c-.9 6-1.3 12.2-1.3 18.5c0 70.7 57.3 128 128 128zM448 256c0-70.7-57.3-128-128-128c-16.7 0-32.7 3.2-47.4 9.1l30.9 24.4c5.4-.9 10.9-1.4 16.5-1.4c51 0 92.8 39.8 95.8 90.1l30.9 24.4c.9-6 1.3-12.2 1.3-18.5z" }) })) : ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { fill: 'currentColor', d: "M117.2 136C160.3 96 217.6 64 288 64s127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-13.3 32-42.1 80-85.2 120c-43.1 40-100.4 72-170.8 72s-127.7-32-170.8-72C74.1 336 45.3 288 32 256c13.3-32 42.1-80 85.2-120zM288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM192 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" }) })) }));
 };
 exports.InlineEyeButton = InlineEyeButton;

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

@@ -2,11 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineRemoveButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const clearIcon = {
     height: 14,
-    color: colors_1.LIGHT_TEXT,
 };
 const InlineRemoveButton = ({ onClick }) => {
     return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: clearIcon, children: (0, jsx_runtime_1.jsx)("path", { d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z", fill: "currentcolor" }) }) }));

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

@@ -6,8 +6,10 @@ const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const ShortcutHint_1 = require("../../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
 const convert_env_variables_1 = require("../../helpers/convert-env-variables");
 const render_modal_sections_1 = require("../../helpers/render-modal-sections");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
 const audio_1 = require("../../icons/audio");
 const data_1 = require("../../icons/data");
 const file_1 = require("../../icons/file");
@@ -15,12 +17,13 @@ const frame_1 = require("../../icons/frame");
 const gear_1 = require("../../icons/gear");
 const gif_1 = require("../../icons/gif");
 const modals_1 = require("../../state/modals");
-const layout_1 = require("../layout");
+const sidebar_1 = require("../../state/sidebar");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const ModalContainer_1 = require("../ModalContainer");
 const ModalHeader_1 = require("../ModalHeader");
 const actions_1 = require("../RenderQueue/actions");
+const RightPanel_1 = require("../RightPanel");
 const SegmentedControl_1 = require("../SegmentedControl");
-const SidebarContent_1 = require("../SidebarContent");
 const Tabs_1 = require("../Tabs");
 const CrfSetting_1 = require("./CrfSetting");
 const out_name_checker_1 = require("./out-name-checker");
@@ -57,10 +60,10 @@ const container = {
     width: '100%',
     borderBottom: '1px solid black',
 };
-const scrollPanel = {
+const rightPanel = {
     height: 600,
-    overflow: 'auto',
-    minWidth: 650,
+    width: 650,
+    display: 'flex',
 };
 const horizontalLayout = {
     display: 'flex',
@@ -281,9 +284,12 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         setStillImageFormat(format);
         setDefaultOutName({ type: 'still', imageFormat: format });
     }, [setDefaultOutName]);
+    const { setSidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const onClickStill = (0, react_1.useCallback)(() => {
         var _a;
-        (_a = SidebarContent_1.leftSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        setSidebarCollapsedStateRight('expanded');
+        (0, RightPanel_1.persistSelectedPanel)('renders');
+        (_a = RightPanel_1.rightSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
         dispatchIfMounted({ type: 'start' });
         (0, actions_1.addStillRenderJob)({
             compositionId,
@@ -306,6 +312,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             dispatchIfMounted({ type: 'fail' });
         });
     }, [
+        setSidebarCollapsedStateRight,
         dispatchIfMounted,
         compositionId,
         outName,
@@ -330,7 +337,9 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     const audioCodec = deriveFinalAudioCodec(codec, userSelectedAudioCodec);
     const onClickVideo = (0, react_1.useCallback)(() => {
         var _a;
-        (_a = SidebarContent_1.leftSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        setSidebarCollapsedStateRight('expanded');
+        (0, RightPanel_1.persistSelectedPanel)('renders');
+        (_a = RightPanel_1.rightSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
         dispatchIfMounted({ type: 'start' });
         (0, actions_1.addVideoRenderJob)({
             compositionId,
@@ -367,6 +376,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             dispatchIfMounted({ type: 'fail' });
         });
     }, [
+        setSidebarCollapsedStateRight,
         dispatchIfMounted,
         compositionId,
         outName,
@@ -521,11 +531,36 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         stillImageFormat,
     });
     const { tab, setTab, shownTabs } = (0, render_modal_sections_1.useRenderModalSections)(renderMode, codec);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, 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.jsx)(Button_1.Button, { autoFocus: true, onClick: renderMode === 'still' ? onClickStill : onClickVideo, disabled: state.type === 'load' || !outnameValidation.valid, style: {
+    const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
+    const renderDisabled = state.type === 'load' || !outnameValidation.valid;
+    const trigger = (0, react_1.useCallback)(() => {
+        if (renderDisabled) {
+            return;
+        }
+        if (renderMode === 'still') {
+            onClickStill();
+        }
+        else {
+            onClickVideo();
+        }
+    }, [onClickStill, onClickVideo, renderDisabled, renderMode]);
+    (0, react_1.useEffect)(() => {
+        registerKeybinding({
+            callback() {
+                trigger();
+            },
+            commandCtrlKey: true,
+            key: 'Enter',
+            event: 'keydown',
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+    }, [registerKeybinding, trigger]);
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, 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)',
-                        }, children: state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...' })] }), (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)(Tabs_1.Tab, { 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)(Tabs_1.Tab, { 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)(Tabs_1.Tab, { 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)(Tabs_1.Tab, { 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)(Tabs_1.Tab, { 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)(Tabs_1.Tab, { 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.jsxs)("div", { style: scrollPanel, className: "__remotion-vertical-scrollbar", children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), 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, quality: quality, qualityControlType: qualityControlType, setQuality: setQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, shouldDisplayCrfOption: shouldDisplayCrfOption, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat })) : 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, updateButton: false, showSaveButton: false })) : ((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 })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 })] })] })] }));
+                        }, 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)(Tabs_1.Tab, { 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)(Tabs_1.Tab, { 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)(Tabs_1.Tab, { 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)(Tabs_1.Tab, { 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)(Tabs_1.Tab, { 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)(Tabs_1.Tab, { 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, quality: quality, qualityControlType: qualityControlType, setQuality: setQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, shouldDisplayCrfOption: shouldDisplayCrfOption, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat })) : 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, showSaveButton: false })) : ((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 })) })] })] }));
 };
 exports.RenderModal = RenderModal;

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

@@ -5,11 +5,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkmark_1 = require("../../icons/Checkmark");
 const Checkbox_1 = require("../Checkbox");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const layout_1 = require("./layout");
 const NumberSetting_1 = require("./NumberSetting");
 const RenderModalEnvironmentVariables_1 = require("./RenderModalEnvironmentVariables");
 const RenderModalHr_1 = require("./RenderModalHr");
+const container = {
+    flex: 1,
+    overflowY: 'auto',
+};
 const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, }) => {
     const extendedOpenGlOptions = (0, react_1.useMemo)(() => {
         return ['angle', 'egl', 'swangle', 'swiftshader', 'default'];
@@ -45,7 +50,7 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             };
         });
     }, [extendedOpenGlOptions, openGlOption, setOpenGlOption]);
-    return ((0, jsx_runtime_1.jsxs)("div", { 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
+    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
             // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
             , { 
                 // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts

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

@@ -15,6 +15,9 @@ const layout_1 = require("./layout");
 const MutedSetting_1 = require("./MutedSetting");
 const OptionExplainer_1 = require("./OptionExplainer");
 const RenderModalHr_1 = require("./RenderModalHr");
+const container = {
+    flex: 1,
+};
 const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setEnforceAudioTrackState, setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate, setCustomTargetAudioBitrateValue, customTargetAudioBitrate, audioCodec, codec, setAudioCodec, }) => {
     const onShouldHaveTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
         setShouldHaveCustomTargetAudioBitrate(e.target.checked);
@@ -38,6 +41,6 @@ const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setE
             };
         });
     }, [codec, setAudioCodec]);
-    return ((0, jsx_runtime_1.jsxs)("div", { 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" }) }) })] })) : 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.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" }) }) })] })) : null] }));
 };
 exports.RenderModalAudio = RenderModalAudio;

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

@@ -17,6 +17,9 @@ const InfoBubble_1 = require("./InfoBubble");
 const layout_1 = require("./layout");
 const OptionExplainer_1 = require("./OptionExplainer");
 const RenderModalInput_1 = require("./RenderModalInput");
+const container = {
+    flex: 1,
+};
 const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setVideoCodec: setCodec, proResProfile, setProResProfile, frame, setFrame, currentComposition, setOutName, setEndFrame, endFrame, setStartFrame, startFrame, validationMessage, }) => {
     const existence = (0, use_file_existence_1.useFileExistence)(outName);
     const videoCodecOptions = (0, react_1.useMemo)(() => {
@@ -71,6 +74,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", { 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 }) }) })] })) : 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_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 }) }) })] })) : 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 })] }));
 };
 exports.RenderModalBasic = RenderModalBasic;

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

@@ -5,6 +5,5 @@ export declare const RenderModalData: React.FC<{
     inputProps: unknown;
     setInputProps: React.Dispatch<React.SetStateAction<unknown>>;
     compact: boolean;
-    updateButton: boolean;
     showSaveButton: boolean;
 }>;

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

@@ -3,21 +3,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
-const layout_1 = require("../layout");
+const colors_1 = require("../../helpers/colors");
 const actions_1 = require("../RenderQueue/actions");
 const SegmentedControl_1 = require("../SegmentedControl");
 const RenderModalJSONInputPropsEditor_1 = require("./RenderModalJSONInputPropsEditor");
 const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
 const outer = {
-    padding: '8px 16px',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    overflow: 'hidden',
 };
 const controlContainer = {
-    display: 'flex',
     flexDirection: 'row',
+    display: 'flex',
+    paddingLeft: 12,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
 };
-const RenderModalData = ({ composition, inputProps, setInputProps, compact, updateButton, showSaveButton, }) => {
+const RenderModalData = ({ composition, inputProps, setInputProps, compact, showSaveButton }) => {
     const [mode, setMode] = (0, react_1.useState)('schema');
+    const [valBeforeSafe, setValBeforeSafe] = (0, react_1.useState)(inputProps);
     const zodValidationResult = (0, react_1.useMemo)(() => {
         return composition.schema.safeParse(inputProps);
     }, [composition.schema, inputProps]);
@@ -45,11 +52,12 @@ const RenderModalData = ({ composition, inputProps, setInputProps, compact, upda
         setMode('schema');
     }, []);
     const onUpdate = (0, react_1.useCallback)(() => {
+        setValBeforeSafe(inputProps);
         (0, actions_1.updateDefaultProps)(composition.id, inputProps);
     }, [composition.id, inputProps]);
     const onSave = (0, react_1.useCallback)((updater) => {
         (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps));
     }, [composition.defaultProps, composition.id]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: controlContainer, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: composition.schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: composition.defaultProps, onSave: onSave, showSaveButton: showSaveButton })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONInputPropsEditor_1.RenderModalJSONInputPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema })), updateButton && mode === 'json' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onUpdate, disabled: !zodValidationResult.success, children: "Save" })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: controlContainer, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: composition.schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: composition.defaultProps, onSave: onSave, showSaveButton: showSaveButton })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONInputPropsEditor_1.RenderModalJSONInputPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema, onSave: onUpdate, valBeforeSafe: valBeforeSafe }))] }));
 };
 exports.RenderModalData = RenderModalData;