@remotion/cli 4.0.0-alpha5 → 4.0.0-alpha6

package/dist/better-opn/index.js

@@ -2,7 +2,7 @@
 // Copied from https://github.com/michaellzc/better-opn#readme
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.openBrowser = void 0;
-const child_process_1 = require("child_process");
+const node_child_process_1 = require("node:child_process");
 const open = require("open");
 const normalizeURLToMatch = (target) => {
     // We may encounter URL parse error but want to fallback to default behavior
@@ -38,7 +38,7 @@ const startBrowserProcess = async ({ browser, url, args, }) => {
             'Arc',
         ];
         const processes = await new Promise((resolve, reject) => {
-            (0, child_process_1.exec)('ps cax', (err, stdout) => {
+            (0, node_child_process_1.exec)('ps cax', (err, stdout) => {
                 if (err) {
                     reject(err);
                 }
@@ -148,7 +148,7 @@ const startBrowserProcess = async ({ browser, url, args, }) => {
   end lookupTabWithUrl
 `.trim();
                 await new Promise((resolve, reject) => {
-                    const proc = (0, child_process_1.exec)(`osascript -`, (error) => {
+                    const proc = (0, node_child_process_1.exec)(`osascript -`, (error) => {
                         if (error) {
                             reject(error);
                         }

package/dist/cloudrun-command.d.ts

@@ -0,0 +1 @@
+export declare const cloudrunCommand: (remotionRoot: string, args: string[]) => Promise<never>;

package/dist/cloudrun-command.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cloudrunCommand = void 0;
+const log_1 = require("./log");
+const get_package_manager_1 = require("./preview-server/get-package-manager");
+const update_available_1 = require("./preview-server/update-available");
+const cloudrunCommand = async (remotionRoot, args) => {
+    try {
+        const path = require.resolve('@remotion/cloudrun', {
+            paths: [remotionRoot],
+        });
+        const { CloudrunInternals } = require(path);
+        await CloudrunInternals.executeCommand(args, remotionRoot);
+        process.exit(0);
+    }
+    catch (err) {
+        const manager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
+        const installCommand = manager === 'unknown' ? 'npm i' : manager.installCommand;
+        log_1.Log.error(err);
+        log_1.Log.error('Remotion CloudRun is not installed.');
+        log_1.Log.info('');
+        log_1.Log.info('You can install it using:');
+        log_1.Log.info(`${installCommand} @remotion/cloudrun@${(0, update_available_1.getRemotionVersion)()}`);
+        process.exit(1);
+    }
+};
+exports.cloudrunCommand = cloudrunCommand;

package/dist/color-math.js

@@ -4,7 +4,9 @@ exports.colorWithNewOpacity = void 0;
 const colorWithNewOpacity = (color, opacity, zodTypes) => {
     const { r, g, b } = zodTypes.ZodZypesInternals.parseColor(color);
     if (opacity >= 255) {
-        return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+        return `#${r.toString(16).padStart(2, '0')}${g
+            .toString(16)
+            .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
     }
     return `rgba(${r}, ${g}, ${b}, ${(opacity / 255).toFixed(2)})`;
 };

package/dist/convert-entry-point-to-serve-url.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertEntryPointToServeUrl = void 0;
 const renderer_1 = require("@remotion/renderer");
-const path_1 = __importDefault(require("path"));
+const node_path_1 = __importDefault(require("node:path"));
 const convertEntryPointToServeUrl = (entryPoint) => {
     const fullPath = renderer_1.RenderInternals.isServeUrl(entryPoint)
         ? entryPoint
-        : path_1.default.resolve(process.cwd(), entryPoint);
+        : node_path_1.default.resolve(process.cwd(), entryPoint);
     return fullPath;
 };
 exports.convertEntryPointToServeUrl = convertEntryPointToServeUrl;

package/dist/editor/components/MenuToolbar.js

@@ -21,6 +21,18 @@ const row = {
     paddingRight: 10,
     backgroundColor: colors_1.BACKGROUND,
 };
+const fixedWidthRight = {
+    minWidth: '350px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+};
+const fixedWidthLeft = {
+    minWidth: '350px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+};
 const flex = {
     flex: 1,
 };
@@ -63,8 +75,8 @@ const MenuToolbar = () => {
     const onItemQuit = (0, react_1.useCallback)(() => {
         setSelected(null);
     }, [setSelected]);
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", className: "css-reset", style: row, children: [structure.map((s) => {
-                return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-            }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {}), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)(MenuBuildIndicator_1.MenuBuildIndicator, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(SidebarCollapserControls_1.SidebarCollapserControls, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { justify: "center", align: "center", className: "css-reset", style: row, children: [(0, jsx_runtime_1.jsxs)("div", { style: fixedWidthLeft, children: [structure.map((s) => {
+                        return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
+                    }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {})] }), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)(MenuBuildIndicator_1.MenuBuildIndicator, {}), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)("div", { style: fixedWidthRight, children: (0, jsx_runtime_1.jsx)(SidebarCollapserControls_1.SidebarCollapserControls, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
 };
 exports.MenuToolbar = MenuToolbar;

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

@@ -2,21 +2,54 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CliCopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const svgStyle = {
+    width: 16,
+    height: 16,
+    verticalAlign: 'sub',
+};
+const copiedStyle = {
+    fontSize: '14px',
+    minHeight: '30px',
+    minWidth: '30px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
 const CliCopyButton = ({ valueToCopy, }) => {
-    const iconStyle = {
-        width: 16,
-        height: 16,
-        color: '#a6a8aa',
-        verticalAlign: 'sub',
-    };
-    const clipBoardIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "#a6a8aa", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const fillColor = (0, react_1.useMemo)(() => {
+        return hovered ? 'white' : colors_1.LIGHT_TEXT;
+    }, [hovered]);
+    const clipboardIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: fillColor, d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
+    const checkSvg = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: fillColor, d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }) }));
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!copied) {
+            return;
+        }
+        const handleClear = () => {
+            setCopied(false);
+            setHovered(false);
+        };
+        const to = setTimeout(() => handleClear(), 2000);
+        return () => clearTimeout(to);
+    }, [copied]);
+    return copied ? ((0, jsx_runtime_1.jsx)("span", { style: copiedStyle, children: checkSvg })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: {
             width: '30px',
             height: '30px',
             border: 'none',
             cursor: 'pointer',
         }, onClick: () => {
             navigator.clipboard.writeText(valueToCopy);
-        }, children: clipBoardIcon }));
+            setCopied(true);
+        }, children: clipboardIcon }));
 };
 exports.CliCopyButton = CliCopyButton;

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

@@ -29,12 +29,13 @@ const InfoTooltip = ({ children, arrowDirection }) => {
             border: '0.5px solid ' + colors_1.BORDER_COLOR,
             maxHeight: 200,
             overflow: 'auto',
+            borderRadius: '4px',
         };
     }, [arrowDirection]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flexDirection: arrowDirection === 'up' ? 'column-reverse' : 'column',
             alignItems: 'flex-start',
-        }, 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] }));
+        }, 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.INPUT_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.INPUT_BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
 };
 exports.InfoTooltip = InfoTooltip;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionExplainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
 const MenuDivider_1 = require("../Menu/MenuDivider");
 const CliCopyButton_1 = require("./CliCopyButton");
@@ -9,10 +10,11 @@ const container = {
     fontSize: 14,
     paddingTop: 10,
     paddingBottom: 10,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
 };
 const padding = {
-    paddingLeft: 12,
-    paddingRight: 12,
+    paddingLeft: 20,
+    paddingRight: 20,
 };
 const title = {
     fontSize: 14,
@@ -39,7 +41,15 @@ const infoRowLabel = {
     fontSize: 14,
     color: 'white',
 };
+const flexSpacer = {
+    display: 'flex',
+    flex: 1,
+};
+const copyWrapper = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+};
 const OptionExplainer = ({ option }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "__remotion-info-button-container", children: [(0, jsx_runtime_1.jsxs)("div", { style: padding, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("strong", { style: title, children: option.name }) }), (0, jsx_runtime_1.jsx)("div", { style: description, children: option.description })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "CLI flag:" }), (0, jsx_runtime_1.jsx)("code", { children: option.cliFlag }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', justifyContent: 'flex-end', flex: 1 }, children: (0, jsx_runtime_1.jsx)(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "Node.JS option:" }), (0, jsx_runtime_1.jsx)("code", { children: option.ssrName })] }), (0, jsx_runtime_1.jsx)("div", { style: infoRow, children: (0, jsx_runtime_1.jsx)("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "__remotion-info-button-container", children: [(0, jsx_runtime_1.jsxs)("div", { style: padding, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { style: title, children: option.name }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" })] }), (0, jsx_runtime_1.jsx)("div", { style: description, children: option.description })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "CLI flag" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsx)("code", { children: option.cliFlag }), (0, jsx_runtime_1.jsx)("div", { style: copyWrapper, children: (0, jsx_runtime_1.jsx)(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "Node.JS option" }), (0, jsx_runtime_1.jsx)("div", { style: flexSpacer }), (0, jsx_runtime_1.jsx)("code", { children: option.ssrName }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 3.75 })] }), (0, jsx_runtime_1.jsx)("div", { style: infoRow })] })] }));
 };
 exports.OptionExplainer = OptionExplainer;

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

@@ -49,6 +49,6 @@ const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixel
     const onTargetVideoBitrateChanged = (0, react_1.useCallback)((e) => {
         setCustomTargetVideoBitrateValue(e.target.value);
     }, [setCustomTargetVideoBitrateValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' && qualityControlType !== null ? ((0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})) : null, shouldDisplayQualityControlPicker && renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, qualityControlType === 'crf' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsx)(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: client_1.BrowserSafeApis.options.crfOption })) : null, qualityControlType === 'bitrate' && 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 video 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.videoBitrate }) }), (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: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null, renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, (0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale }), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' && qualityControlType !== null ? ((0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})) : null, shouldDisplayQualityControlPicker && renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, qualityControlType === 'crf' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsx)(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: client_1.BrowserSafeApis.options.crfOption })) : null, qualityControlType === 'bitrate' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Target video 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.videoBitrate }) })] }), (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: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null, renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, (0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale }), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null] }));
 };
 exports.RenderModalPicture = RenderModalPicture;

package/dist/editor/components/SidebarCollapserControls.js

@@ -7,11 +7,11 @@ const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-over
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
-const layout_1 = require("./layout");
 const TopPanel_1 = require("./TopPanel");
 const style = {
     width: 16,
     height: 16,
+    minWidth: 16,
     border: '1px solid currentColor',
     borderRadius: 3,
     color: 'currentColor',
@@ -118,12 +118,18 @@ const SidebarCollapserControls = () => {
     const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
         ? 'Toggle Right Sidebar'
         : `Toggle Right Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+J)`;
+    const colorStyle = (0, react_1.useCallback)((color) => {
+        return {
+            ...style,
+            color,
+        };
+    }, []);
     const toggleLeftAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("div", { style: style, title: toggleLeftTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon(color) }) }));
-    }, [leftIcon, toggleLeftTooltip]);
+        return ((0, jsx_runtime_1.jsx)("div", { style: colorStyle(color), title: toggleLeftTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: leftIcon(color) }) }));
+    }, [colorStyle, leftIcon, toggleLeftTooltip]);
     const toggleRightAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("div", { style: style, title: toggleRightTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon(color) }) }));
-    }, [rightIcon, toggleRightTooltip]);
-    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })] }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: colorStyle(color), title: toggleRightTooltip, children: (0, jsx_runtime_1.jsx)("div", { style: rightIcon(color) }) }));
+    }, [colorStyle, rightIcon, toggleRightTooltip]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })] }));
 };
 exports.SidebarCollapserControls = SidebarCollapserControls;

package/dist/editor/helpers/colors.d.ts

@@ -3,7 +3,7 @@ export declare const INPUT_BACKGROUND = "#2f363d";
 export declare const BORDER_COLOR = "#000";
 export declare const LIGHT_COLOR = "#ddd";
 export declare const SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
-export declare const LIGHT_TEXT = "rgba(255, 255, 255, 0.6)";
+export declare const LIGHT_TEXT = "#A6A7A9";
 export declare const VERY_LIGHT_TEXT = "rgba(255, 255, 255, 0.3)";
 export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
 export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";

package/dist/editor/helpers/colors.js

@@ -6,7 +6,7 @@ exports.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
 exports.LIGHT_COLOR = '#ddd';
 exports.SELECTED_BACKGROUND = 'hsla(0, 0%, 100%, 0.15)';
-exports.LIGHT_TEXT = 'rgba(255, 255, 255, 0.6)';
+exports.LIGHT_TEXT = '#A6A7A9';
 exports.VERY_LIGHT_TEXT = 'rgba(255, 255, 255, 0.3)';
 const SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
 exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';

package/dist/entry-point.js

@@ -5,20 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findEntryPoint = void 0;
 const renderer_1 = require("@remotion/renderer");
-const fs_1 = require("fs");
-const path_1 = __importDefault(require("path"));
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
 const config_1 = require("./config");
 const log_1 = require("./log");
 const candidates = [
-    path_1.default.join('src', 'index.ts'),
-    path_1.default.join('src', 'index.tsx'),
-    path_1.default.join('src', 'index.js'),
-    path_1.default.join('remotion', 'index.tsx'),
-    path_1.default.join('remotion', 'index.ts'),
-    path_1.default.join('remotion', 'index.js'),
+    node_path_1.default.join('src', 'index.ts'),
+    node_path_1.default.join('src', 'index.tsx'),
+    node_path_1.default.join('src', 'index.js'),
+    node_path_1.default.join('remotion', 'index.tsx'),
+    node_path_1.default.join('remotion', 'index.ts'),
+    node_path_1.default.join('remotion', 'index.js'),
 ];
 const findCommonPath = (remotionRoot) => {
-    return candidates.find((candidate) => (0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, candidate)));
+    return candidates.find((candidate) => (0, node_fs_1.existsSync)(node_path_1.default.resolve(remotionRoot, candidate)));
 };
 const findEntryPoint = (args, remotionRoot) => {
     const result = findEntryPointInner(args, remotionRoot);
@@ -28,10 +28,10 @@ const findEntryPoint = (args, remotionRoot) => {
     if (renderer_1.RenderInternals.isServeUrl(result.file)) {
         return result;
     }
-    if (!(0, fs_1.existsSync)(result.file)) {
+    if (!(0, node_fs_1.existsSync)(result.file)) {
         throw new Error(`${result.file} was chosen as the entry point (reason = ${result.reason}) but it does not exist.`);
     }
-    if ((0, fs_1.lstatSync)(result.file).isDirectory()) {
+    if ((0, node_fs_1.lstatSync)(result.file).isDirectory()) {
         throw new Error(`${result.file} was chosen as the entry point (reason = ${result.reason}) but it is a directory - it needs to be a file.`);
     }
     return result;
@@ -42,10 +42,10 @@ const findEntryPointInner = (args, remotionRoot) => {
     let file = args[0];
     if (file) {
         log_1.Log.verbose('Checking if', file, 'is the entry file');
-        const cwdResolution = path_1.default.resolve(process.cwd(), file);
-        const remotionRootResolution = path_1.default.resolve(remotionRoot, file);
+        const cwdResolution = node_path_1.default.resolve(process.cwd(), file);
+        const remotionRootResolution = node_path_1.default.resolve(remotionRoot, file);
         // Checking if file was found in CWD
-        if ((0, fs_1.existsSync)(cwdResolution)) {
+        if ((0, node_fs_1.existsSync)(cwdResolution)) {
             return {
                 file: cwdResolution,
                 remainingArgs: args.slice(1),
@@ -53,7 +53,7 @@ const findEntryPointInner = (args, remotionRoot) => {
             };
         }
         // Checking if file was found in remotion root
-        if ((0, fs_1.existsSync)(remotionRootResolution)) {
+        if ((0, node_fs_1.existsSync)(remotionRootResolution)) {
             return {
                 file: remotionRootResolution,
                 remainingArgs: args.slice(1),
@@ -69,7 +69,7 @@ const findEntryPointInner = (args, remotionRoot) => {
     if (file) {
         log_1.Log.verbose('Entry point from config file is', file);
         return {
-            file: path_1.default.resolve(remotionRoot, file),
+            file: node_path_1.default.resolve(remotionRoot, file),
             remainingArgs: args,
             reason: 'config file',
         };
@@ -77,7 +77,7 @@ const findEntryPointInner = (args, remotionRoot) => {
     // 3rd priority: Common paths
     const found = findCommonPath(remotionRoot);
     if (found) {
-        const absolutePath = path_1.default.resolve(remotionRoot, found);
+        const absolutePath = node_path_1.default.resolve(remotionRoot, found);
         log_1.Log.verbose('Selected', absolutePath, 'as the entry point because file exists and is a common entry point and no entry point was explicitly selected');
         return {
             file: absolutePath,

package/dist/ffmpeg.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ffprobeCommand = exports.ffmpegCommand = void 0;
 const renderer_1 = require("@remotion/renderer");
-const child_process_1 = require("child_process");
+const node_child_process_1 = require("node:child_process");
+const node_fs_1 = require("node:fs");
 const ffmpegCommand = (_root, args) => {
-    const done = (0, child_process_1.spawnSync)(renderer_1.RenderInternals.getExecutablePath('ffmpeg'), args, {
+    const binary = renderer_1.RenderInternals.getExecutablePath('ffmpeg');
+    (0, node_fs_1.chmodSync)(binary, 0o755);
+    const done = (0, node_child_process_1.spawnSync)(binary, args, {
         ...renderer_1.RenderInternals.dynamicLibraryPathOptions(),
         stdio: 'inherit',
     });
@@ -12,7 +15,9 @@ const ffmpegCommand = (_root, args) => {
 };
 exports.ffmpegCommand = ffmpegCommand;
 const ffprobeCommand = (_root, args) => {
-    const done = (0, child_process_1.spawnSync)(renderer_1.RenderInternals.getExecutablePath('ffprobe'), args, {
+    const binary = renderer_1.RenderInternals.getExecutablePath('ffprobe');
+    (0, node_fs_1.chmodSync)(binary, 0o755);
+    const done = (0, node_child_process_1.spawnSync)(binary, args, {
         ...renderer_1.RenderInternals.dynamicLibraryPathOptions(),
         stdio: 'inherit',
     });

package/dist/file-watcher.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.installFileWatcher = void 0;
-const fs_1 = __importDefault(require("fs"));
+const node_fs_1 = __importDefault(require("node:fs"));
 const installFileWatcher = ({ file, onChange, }) => {
-    const existedAtBeginning = fs_1.default.existsSync(file);
+    const existedAtBeginning = node_fs_1.default.existsSync(file);
     let existedBefore = existedAtBeginning;
     const listener = () => {
-        const existsNow = fs_1.default.existsSync(file);
+        const existsNow = node_fs_1.default.existsSync(file);
         if (!existedBefore && existsNow) {
             onChange('created');
             existedBefore = true;
@@ -24,11 +24,11 @@ const installFileWatcher = ({ file, onChange, }) => {
             onChange('changed');
         }
     };
-    fs_1.default.watchFile(file, { interval: 100 }, listener);
+    node_fs_1.default.watchFile(file, { interval: 100 }, listener);
     return {
         exists: existedAtBeginning,
         unwatch: () => {
-            fs_1.default.unwatchFile(file, listener);
+            node_fs_1.default.unwatchFile(file, listener);
         },
     };
 };

package/dist/get-cli-options.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCliOptions = exports.getAndValidateAbsoluteOutputFile = void 0;
 const renderer_1 = require("@remotion/renderer");
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
 const config_1 = require("./config");
 const get_env_1 = require("./get-env");
 const get_input_props_1 = require("./get-input-props");
@@ -22,8 +22,8 @@ const getAndValidateFrameRange = () => {
 };
 const getBrowser = () => { var _a; return (_a = config_1.ConfigInternals.getBrowser()) !== null && _a !== void 0 ? _a : renderer_1.RenderInternals.DEFAULT_BROWSER; };
 const getAndValidateAbsoluteOutputFile = (relativeOutputLocation, overwrite) => {
-    const absoluteOutputFile = path_1.default.resolve(process.cwd(), relativeOutputLocation);
-    if (fs_1.default.existsSync(absoluteOutputFile) && !overwrite) {
+    const absoluteOutputFile = node_path_1.default.resolve(process.cwd(), relativeOutputLocation);
+    if (node_fs_1.default.existsSync(absoluteOutputFile) && !overwrite) {
         log_1.Log.error(`File at ${absoluteOutputFile} already exists. Use --overwrite to overwrite.`);
         process.exit(1);
     }

package/dist/get-config-file-name.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadConfig = void 0;
-const fs_1 = require("fs");
-const path_1 = __importDefault(require("path"));
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
 const load_config_1 = require("./load-config");
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
@@ -13,8 +13,8 @@ const defaultConfigFileJavascript = 'remotion.config.js';
 const defaultConfigFileTypescript = 'remotion.config.ts';
 const loadConfig = (remotionRoot) => {
     if (parse_command_line_1.parsedCli.config) {
-        const fullPath = path_1.default.resolve(process.cwd(), parse_command_line_1.parsedCli.config);
-        if (!(0, fs_1.existsSync)(fullPath)) {
+        const fullPath = node_path_1.default.resolve(process.cwd(), parse_command_line_1.parsedCli.config);
+        if (!(0, node_fs_1.existsSync)(fullPath)) {
             log_1.Log.error(`You specified a config file location of "${parse_command_line_1.parsedCli.config}" but no file under ${fullPath} was found.`);
             process.exit(1);
         }
@@ -23,10 +23,10 @@ const loadConfig = (remotionRoot) => {
     if (remotionRoot === null) {
         return Promise.resolve(null);
     }
-    if ((0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, defaultConfigFileTypescript))) {
+    if ((0, node_fs_1.existsSync)(node_path_1.default.resolve(remotionRoot, defaultConfigFileTypescript))) {
         return (0, load_config_1.loadConfigFile)(remotionRoot, defaultConfigFileTypescript, false);
     }
-    if ((0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, defaultConfigFileJavascript))) {
+    if ((0, node_fs_1.existsSync)(node_path_1.default.resolve(remotionRoot, defaultConfigFileJavascript))) {
         return (0, load_config_1.loadConfigFile)(remotionRoot, defaultConfigFileJavascript, true);
     }
     return Promise.resolve(null);

package/dist/get-env.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEnvironmentVariables = void 0;
 const renderer_1 = require("@remotion/renderer");
 const dotenv_1 = __importDefault(require("dotenv"));
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
 const chalk_1 = require("./chalk");
 const config_1 = require("./config");
 const file_watcher_1 = require("./file-watcher");
@@ -23,7 +23,7 @@ function getProcessEnv() {
 }
 const watchEnvFile = ({ processEnv, envFile, onUpdate, }) => {
     const updateFile = async () => {
-        const file = await fs_1.default.promises.readFile(envFile, 'utf-8');
+        const file = await node_fs_1.default.promises.readFile(envFile, 'utf-8');
         onUpdate({
             ...processEnv,
             ...dotenv_1.default.parse(file),
@@ -54,7 +54,7 @@ const watchEnvFile = ({ processEnv, envFile, onUpdate, }) => {
 };
 const getEnvForEnvFile = async (processEnv, envFile, onUpdate) => {
     try {
-        const envFileData = await fs_1.default.promises.readFile(envFile);
+        const envFileData = await node_fs_1.default.promises.readFile(envFile);
         if (onUpdate) {
             watchEnvFile({ processEnv, envFile, onUpdate });
         }
@@ -72,8 +72,8 @@ const getEnvForEnvFile = async (processEnv, envFile, onUpdate) => {
 const getEnvironmentVariables = (onUpdate) => {
     const processEnv = getProcessEnv();
     if (parse_command_line_1.parsedCli['env-file']) {
-        const envFile = path_1.default.resolve(process.cwd(), parse_command_line_1.parsedCli['env-file']);
-        if (!fs_1.default.existsSync(envFile)) {
+        const envFile = node_path_1.default.resolve(process.cwd(), parse_command_line_1.parsedCli['env-file']);
+        if (!node_fs_1.default.existsSync(envFile)) {
             log_1.Log.error('You passed a --env-file but it could not be found.');
             log_1.Log.error('We looked for the file at:', envFile);
             log_1.Log.error('Check that your path is correct and try again.');
@@ -84,8 +84,8 @@ const getEnvironmentVariables = (onUpdate) => {
     const remotionRoot = renderer_1.RenderInternals.findRemotionRoot();
     const configFileSetting = config_1.ConfigInternals.getDotEnvLocation();
     if (configFileSetting) {
-        const envFile = path_1.default.resolve(remotionRoot, configFileSetting);
-        if (!fs_1.default.existsSync(envFile)) {
+        const envFile = node_path_1.default.resolve(remotionRoot, configFileSetting);
+        if (!node_fs_1.default.existsSync(envFile)) {
             log_1.Log.error('You specified a custom .env file using `Config.setDotEnvLocation()` in the config file but it could not be found');
             log_1.Log.error('We looked for the file at:', envFile);
             log_1.Log.error('Check that your path is correct and try again.');
@@ -93,8 +93,8 @@ const getEnvironmentVariables = (onUpdate) => {
         }
         return getEnvForEnvFile(processEnv, envFile, onUpdate);
     }
-    const defaultEnvFile = path_1.default.resolve(remotionRoot, '.env');
-    if (!fs_1.default.existsSync(defaultEnvFile)) {
+    const defaultEnvFile = node_path_1.default.resolve(remotionRoot, '.env');
+    if (!node_fs_1.default.existsSync(defaultEnvFile)) {
         if (onUpdate) {
             watchEnvFile({
                 processEnv,