@remotion/cli 3.3.77 → 3.3.78

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

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const Checkbox: React.FC<{
     checked: boolean;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
 }>;

package/dist/editor/components/Checkbox.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const Checkmark_1 = require("../icons/Checkmark");
 const size = 20;
@@ -10,17 +11,6 @@ const background = {
     width: size,
     position: 'relative',
 };
-const input = {
-    appearance: 'none',
-    background: colors_1.INPUT_BACKGROUND,
-    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-    height: size,
-    width: size,
-    top: 0,
-    left: 0,
-    position: 'absolute',
-    margin: 0,
-};
 const box = {
     display: 'flex',
     justifyContent: 'center',
@@ -32,7 +22,20 @@ const box = {
     left: 0,
     pointerEvents: 'none',
 };
-const Checkbox = ({ checked, onChange }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { style: box, children: checked ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null })] }));
+const Checkbox = ({ checked, onChange, disabled }) => {
+    const input = (0, react_1.useMemo)(() => {
+        return {
+            appearance: 'none',
+            background: disabled ? 'transparent' : colors_1.INPUT_BACKGROUND,
+            border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            height: size,
+            width: size,
+            top: 0,
+            left: 0,
+            position: 'absolute',
+            margin: 0,
+        };
+    }, [disabled]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled }), (0, jsx_runtime_1.jsx)("div", { style: box, children: checked ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null })] }));
 };
 exports.Checkbox = Checkbox;

package/dist/editor/components/Modals.js

@@ -16,7 +16,7 @@ const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = () => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type === 'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialQuality: modalContextType.initialQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialAudioCodec: modalContextType.initialAudioCodec, initialVideoCodec: modalContextType.initialVideoCodec, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialQuality: modalContextType.initialQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-error' && ((0, jsx_runtime_1.jsx)(RenderErrorModal_1.RenderErrorModal, { job: modalContextType.job })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

package/dist/editor/components/RenderButton.js

@@ -42,9 +42,9 @@ const RenderButton = ({ composition, visible }) => {
                 defaultExtension: isVideo ? 'mp4' : 'png',
                 type: 'asset',
             }),
-            initialAudioCodec,
+            initialVideoCodecForAudioTab: initialAudioCodec,
             initialRenderType,
-            initialVideoCodec,
+            initialVideoCodecForVideoTab: initialVideoCodec,
             initialConcurrency: defaults.concurrency,
             maxConcurrency: defaults.maxConcurrency,
             minConcurrency: defaults.minConcurrency,
@@ -57,6 +57,7 @@ const RenderButton = ({ composition, visible }) => {
             initialEveryNthFrame: defaults.everyNthFrame,
             initialNumberOfGifLoops: defaults.numberOfGifLoops,
             initialDelayRenderTimeout: defaults.delayRenderTimeout,
+            initialAudioCodec: defaults.audioCodec,
         });
     }, [composition.id, isVideo, setSelectedModal]);
     if (!visible) {

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

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const EnforceAudioTrackSetting: React.FC<{
     enforceAudioTrack: boolean;
     setEnforceAudioTrack: React.Dispatch<React.SetStateAction<boolean>>;
+    muted: boolean;
 }>;

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

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
 const layout_1 = require("./layout");
-const EnforceAudioTrackSetting = ({ enforceAudioTrack, setEnforceAudioTrack }) => {
+const EnforceAudioTrackSetting = ({ enforceAudioTrack, muted, setEnforceAudioTrack }) => {
     const onEnforceAudioTrackChanged = (0, react_1.useCallback)((e) => {
         setEnforceAudioTrack(e.target.checked);
     }, [setEnforceAudioTrack]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Enforce Audio Track" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Enforce Audio Track" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: muted && !enforceAudioTrack, checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged }) })] }));
 };
 exports.EnforceAudioTrackSetting = EnforceAudioTrackSetting;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const InfoBubble: React.FC<{
+    title: string;
+    children: React.ReactNode;
+}>;

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

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoBubble = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const portals_1 = require("../Menu/portals");
+const styles_1 = require("../Menu/styles");
+const InfoTooltip_1 = require("./InfoTooltip");
+const icon = {
+    color: colors_1.LIGHT_TEXT,
+    height: 15,
+};
+const container = {
+    display: 'inline-block',
+    border: 'none',
+    fontSize: 14,
+    verticalAlign: 'text-bottom',
+};
+const InfoBubble = ({ title, children }) => {
+    const [hovered, setIsHovered] = (0, react_1.useState)(false);
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened(false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        const onPointerDown = (e) => {
+            e.stopPropagation();
+            return setOpened((o) => {
+                if (!o) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                }
+                return !o;
+            });
+        };
+        const onClick = (e) => {
+            e.stopPropagation();
+            const isKeyboardInitiated = e.detail === 0;
+            if (!isKeyboardInitiated) {
+                return;
+            }
+            return setOpened((o) => {
+                return !o;
+            });
+        };
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        current.addEventListener('pointerdown', onPointerDown);
+        current.addEventListener('click', onClick);
+        return () => {
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('pointerdown', onPointerDown);
+            current.removeEventListener('click', onClick);
+        };
+    }, [refresh]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!opened || !size) {
+            return null;
+        }
+        const spaceToBottom = size.windowSize.height - (size.top + size.height);
+        const spaceToTop = size.top;
+        const layout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
+        return {
+            ...(layout === 'top'
+                ? {
+                    position: 'fixed',
+                    top: size.top + size.height,
+                }
+                : {
+                    position: 'fixed',
+                    bottom: size.windowSize.height - size.top,
+                }),
+            left: size.left,
+        };
+    }, [opened, size]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            userSelect: 'none',
+            color: 'white',
+            display: 'inline-flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+        };
+    }, []);
+    // TODO: Can click two info bubbles at the same time
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: ref, tabIndex: tabIndex, style: style, title: title, type: "button", children: (0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }) }) }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(InfoTooltip_1.InfoTooltip, { children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.InfoBubble = InfoBubble;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const InfoTooltip: React.FC<{
+    children: React.ReactNode;
+}>;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoTooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const styles_1 = require("../Menu/styles");
+const container = {
+    padding: '10px 12px',
+    // TODO: Depending on direction
+    boxShadow: styles_1.SHADOW_TOWARDS_TOP,
+    background: colors_1.BACKGROUND,
+    color: 'white',
+    border: '0.5px solid ' + colors_1.BORDER_COLOR,
+    maxHeight: 200,
+    overflow: 'auto',
+};
+const arrow = {
+    height: 7,
+    display: 'block',
+    overflow: 'visible',
+    marginTop: -0.5,
+    marginLeft: 7,
+};
+const InfoTooltip = ({ children }) => {
+    return (
+    // TODO: Down arrow
+    // TODO: not scrolling with portal
+    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: container, children: children }), (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrow, 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 }) })] }));
+};
+exports.InfoTooltip = InfoTooltip;

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

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const MutedSetting: React.FC<{
     muted: boolean;
     setMuted: React.Dispatch<React.SetStateAction<boolean>>;
+    enforceAudioTrack: boolean;
 }>;

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

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
 const layout_1 = require("./layout");
-const MutedSetting = ({ muted, setMuted }) => {
+const MutedSetting = ({ muted, setMuted, enforceAudioTrack }) => {
     const onMutedChanged = (0, react_1.useCallback)((e) => {
         setMuted(e.target.checked);
     }, [setMuted]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Muted" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: muted, onChange: onMutedChanged }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Muted" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: muted, disabled: enforceAudioTrack && !muted, onChange: onMutedChanged }) })] }));
 };
 exports.MutedSetting = MutedSetting;

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

@@ -1,3 +1,4 @@
+import type { RemotionOption } from '@remotion/renderer';
 import React from 'react';
 export declare const NumberSetting: React.FC<{
     name: string;
@@ -6,4 +7,6 @@ export declare const NumberSetting: React.FC<{
     max?: number;
     min: number;
     step: number;
+    formatter?: (value: string | number) => string;
+    hint?: RemotionOption;
 }>;

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

@@ -3,10 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const layout_1 = require("../layout");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const RemInput_1 = require("../NewComposition/RemInput");
-const layout_1 = require("./layout");
-const NumberSetting = ({ name, value, step, onValueChanged, max, min }) => {
+const InfoBubble_1 = require("./InfoBubble");
+const layout_2 = require("./layout");
+const OptionExplainer_1 = require("./OptionExplainer");
+const NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, formatter }) => {
     const onTextChanged = (0, react_1.useCallback)((e) => {
         onValueChanged((q) => {
             const newSetting = parseInt(e, 10);
@@ -19,8 +22,8 @@ const NumberSetting = ({ name, value, step, onValueChanged, max, min }) => {
     const onValueChange = (0, react_1.useCallback)((newConcurrency) => {
         onValueChanged(newConcurrency);
     }, [onValueChanged]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: name }), (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: value, name: name.toLowerCase(), onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: [name, hint ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }), ' ', (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: hint }) })] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: value, name: name.toLowerCase(), onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
                             .map((f) => (f !== null && f !== undefined ? f : ''))
-                            .join('-'), min: min, max: max }) }) })] }));
+                            .join('-'), min: min, max: max, formatter: formatter }) }) })] }));
 };
 exports.NumberSetting = NumberSetting;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { RemotionOption } from '@remotion/renderer';
+export declare const OptionExplainer: React.FC<{
+    option: RemotionOption;
+}>;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionExplainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../layout");
+const MenuDivider_1 = require("../Menu/MenuDivider");
+const container = {
+    fontSize: 14,
+};
+const title = {
+    fontSize: 14,
+};
+const description = {
+    fontSize: 14,
+    maxWidth: 200,
+};
+// TODO: No style of <code>
+const OptionExplainer = ({ option }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, 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, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsxs)("div", { style: description, children: ["CLI flag: ", option.cliFlag] }), (0, jsx_runtime_1.jsxs)("div", { style: description, children: ["Node.JS option: ", option.ssrName] })] }));
+};
+exports.OptionExplainer = OptionExplainer;

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

@@ -1,4 +1,4 @@
-import type { Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 import React from 'react';
 import type { RenderType } from './RenderModalAdvanced';
 export declare const RenderModal: React.FC<{
@@ -11,8 +11,9 @@ export declare const RenderModal: React.FC<{
     initialVerbose: boolean;
     initialOutName: string;
     initialRenderType: RenderType;
-    initialAudioCodec: Codec;
-    initialVideoCodec: Codec;
+    initialVideoCodecForAudioTab: Codec;
+    initialVideoCodecForVideoTab: Codec;
+    initialAudioCodec: AudioCodec | null;
     initialConcurrency: number;
     minConcurrency: number;
     maxConcurrency: number;

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

@@ -6,6 +6,7 @@ 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 render_modal_sections_1 = require("../../helpers/render-modal-sections");
 const audio_1 = require("../../icons/audio");
 const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
@@ -96,7 +97,7 @@ const buttonStyle = {
 const flexer = {
     flex: 1,
 };
-const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialAudioCodec, initialVideoCodec, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, }) => {
+const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialAudioCodec, }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
@@ -107,16 +108,16 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     const [stillImageFormat, setStillImageFormat] = (0, react_1.useState)(() => initialStillImageFormat);
     const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)(() => initialVideoImageFormat);
     const [concurrency, setConcurrency] = (0, react_1.useState)(() => initialConcurrency);
-    const [videoCodec, setVideoSpecificalCodec] = (0, react_1.useState)(() => initialVideoCodec);
-    // TODO replace hardcoded initial codec with derived one
-    const [customAudioCodec, setCustomAudioCodec] = (0, react_1.useState)(null);
-    const [audioCodec, setAudioSpecificalCodec] = (0, react_1.useState)(() => initialAudioCodec);
+    const [videoCodecForVideoTab, setVideoCodecForVideoTab] = (0, react_1.useState)(() => initialVideoCodecForVideoTab);
+    const [userSelectedAudioCodec, setUserSelectedAudioCodec] = (0, react_1.useState)(() => initialAudioCodec);
+    const [videoCodecForAudioTab, setVideoCodecForAudioTab] = (0, react_1.useState)(() => initialVideoCodecForAudioTab);
     const [mutedState, setMuted] = (0, react_1.useState)(() => initialMuted);
     const [enforceAudioTrackState, setEnforceAudioTrackState] = (0, react_1.useState)(() => initialEnforceAudioTrack);
     const [renderMode, setRenderModeState] = (0, react_1.useState)(initialRenderType);
     const [quality, setQuality] = (0, react_1.useState)(() => initialQuality);
     const [scale, setScale] = (0, react_1.useState)(() => initialScale);
     const [verbose, setVerboseLogging] = (0, react_1.useState)(() => initialVerbose);
+    const [disallowParallelEncoding, setDisallowParallelEncoding] = (0, react_1.useState)(false);
     const [outName, setOutName] = (0, react_1.useState)(() => initialOutName);
     const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => null);
     const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => null);
@@ -128,14 +129,13 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     const [customTargetVideoBitrate, setCustomTargetVideoBitrateValue] = (0, react_1.useState)(() => initialVideoBitrate !== null && initialVideoBitrate !== void 0 ? initialVideoBitrate : '1M');
     const [limitNumberOfGifLoops, setLimitNumberOfGifLoops] = (0, react_1.useState)(() => initialNumberOfGifLoops !== null);
     const [numberOfGifLoopsSetting, setNumberOfGifLoopsSetting] = (0, react_1.useState)(() => initialNumberOfGifLoops !== null && initialNumberOfGifLoops !== void 0 ? initialNumberOfGifLoops : 1);
-    // TODO: Allow to modify
-    const [delayRenderTimeout] = (0, react_1.useState)(() => initialDelayRenderTimeout);
+    const [delayRenderTimeout, setDelayRenderTimeout] = (0, react_1.useState)(() => initialDelayRenderTimeout);
     const codec = (0, react_1.useMemo)(() => {
         if (renderMode === 'audio') {
-            return audioCodec;
+            return videoCodecForAudioTab;
         }
-        return videoCodec;
-    }, [audioCodec, renderMode, videoCodec]);
+        return videoCodecForVideoTab;
+    }, [videoCodecForAudioTab, renderMode, videoCodecForVideoTab]);
     const numberOfGifLoops = (0, react_1.useMemo)(() => {
         if (codec === 'gif' && limitNumberOfGifLoops) {
             return numberOfGifLoopsSetting;
@@ -216,7 +216,8 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             client_1.BrowserSafeApis.supportedAudioCodecs[passedVideoCodec].includes(passedAudioCodec)) {
             return passedAudioCodec;
         }
-        return client_1.BrowserSafeApis.defaultAudioCodecs[passedVideoCodec].compressed;
+        return client_1.BrowserSafeApis.defaultAudioCodecs[passedVideoCodec]
+            .compressed;
     }, []);
     const setDefaultOutName = (0, react_1.useCallback)((options) => {
         if (options.type === 'still') {
@@ -227,35 +228,38 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         }
         else {
             setOutName((prev) => {
-                const codecSuffix = client_1.BrowserSafeApis.getFileExtensionFromCodec(options.codec, deriveFinalAudioCodec(options.codec, options.audioCodec) // What happens for null?
-                );
+                const codecSuffix = client_1.BrowserSafeApis.getFileExtensionFromCodec(options.codec, deriveFinalAudioCodec(options.codec, options.audioCodec));
                 const newFileName = getStringBeforeSuffix(prev) + '.' + codecSuffix;
                 return newFileName;
             });
         }
     }, [deriveFinalAudioCodec, getStringBeforeSuffix]);
     const setAudioCodec = (0, react_1.useCallback)((newAudioCodec) => {
-        setCustomAudioCodec(newAudioCodec);
+        setUserSelectedAudioCodec(newAudioCodec);
         setDefaultOutName({
             type: 'render',
-            codec: videoCodec,
+            codec: videoCodecForVideoTab,
             audioCodec: newAudioCodec,
         });
-    }, [setDefaultOutName, videoCodec]);
+    }, [setDefaultOutName, videoCodecForVideoTab]);
     const setCodec = (0, react_1.useCallback)((newCodec) => {
         if (renderMode === 'audio') {
-            setAudioSpecificalCodec(newCodec);
+            setVideoCodecForAudioTab(newCodec);
         }
         else {
-            setVideoSpecificalCodec(newCodec);
+            setVideoCodecForVideoTab(newCodec);
         }
-        // TODO: Audio codec is not implemented and hardcoded
         setDefaultOutName({
             type: 'render',
             codec: newCodec,
-            audioCodec: deriveFinalAudioCodec(newCodec, customAudioCodec),
+            audioCodec: deriveFinalAudioCodec(newCodec, userSelectedAudioCodec),
         });
-    }, [customAudioCodec, deriveFinalAudioCodec, renderMode, setDefaultOutName]);
+    }, [
+        userSelectedAudioCodec,
+        deriveFinalAudioCodec,
+        renderMode,
+        setDefaultOutName,
+    ]);
     const setStillFormat = (0, react_1.useCallback)((format) => {
         setStillImageFormat(format);
         setDefaultOutName({ type: 'still', imageFormat: format });
@@ -298,6 +302,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         }
         return 1;
     }, [codec, everyNthFrameSetting]);
+    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();
@@ -323,7 +328,8 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             everyNthFrame,
             numberOfGifLoops,
             delayRenderTimeout,
-            audioCodec: deriveFinalAudioCodec(codec, customAudioCodec),
+            audioCodec,
+            disallowParallelEncoding,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -356,8 +362,8 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         everyNthFrame,
         numberOfGifLoops,
         delayRenderTimeout,
-        deriveFinalAudioCodec,
-        customAudioCodec,
+        audioCodec,
+        disallowParallelEncoding,
         setSelectedModal,
     ]);
     (0, react_1.useEffect)(() => {
@@ -412,31 +418,29 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     const setRenderMode = (0, react_1.useCallback)((newRenderMode) => {
         setRenderModeState(newRenderMode);
         if (newRenderMode === 'audio') {
-            // TODO: Audio codec is not implemented but hardcoded
             setDefaultOutName({
                 type: 'render',
-                codec: audioCodec,
-                audioCodec: 'pcm-16',
+                codec: videoCodecForAudioTab,
+                audioCodec: deriveFinalAudioCodec(videoCodecForAudioTab, userSelectedAudioCodec),
             });
         }
         if (newRenderMode === 'video') {
-            // TODO: Audio codec is not implemented but hardcoded
             setDefaultOutName({
                 type: 'render',
-                codec: videoCodec,
-                audioCodec: deriveFinalAudioCodec(videoCodec, customAudioCodec),
+                codec: videoCodecForVideoTab,
+                audioCodec: deriveFinalAudioCodec(videoCodecForVideoTab, userSelectedAudioCodec),
             });
         }
         if (newRenderMode === 'still') {
             setDefaultOutName({ type: 'still', imageFormat: stillImageFormat });
         }
     }, [
-        audioCodec,
-        customAudioCodec,
+        videoCodecForAudioTab,
+        userSelectedAudioCodec,
         deriveFinalAudioCodec,
         setDefaultOutName,
         stillImageFormat,
-        videoCodec,
+        videoCodecForVideoTab,
     ]);
     const renderTabOptions = (0, react_1.useMemo)(() => {
         if ((currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames) < 2) {
@@ -478,7 +482,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             },
         ];
     }, [currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames, renderMode, setRenderMode]);
-    const [tab, setTab] = (0, react_1.useState)('general');
-    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', style: buttonStyle, 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: [(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"] }), (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"] }), renderMode === 'still' ? null : ((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"] })), codec === '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, (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"] })] }), (0, jsx_runtime_1.jsxs)("div", { style: scrollPanel, 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, customAudioCodec: deriveFinalAudioCodec(codec, customAudioCodec), currentComposition: currentComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setCodec: setCodec, setAudioCodec: setAudioCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })) : 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, 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 })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 })] })] })] }));
+    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', style: buttonStyle, 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('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, 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 })) : 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 })) : ((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 })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 })] })] })] }));
 };
 exports.RenderModal = RenderModal;

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

@@ -8,4 +8,8 @@ export declare const RenderModalAdvanced: React.FC<{
     concurrency: number;
     setVerboseLogging: React.Dispatch<React.SetStateAction<boolean>>;
     verbose: boolean;
+    delayRenderTimeout: number;
+    setDelayRenderTimeout: React.Dispatch<React.SetStateAction<number>>;
+    disallowParallelEncoding: boolean;
+    setDisallowParallelEncoding: React.Dispatch<React.SetStateAction<boolean>>;
 }>;

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

@@ -6,10 +6,17 @@ const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
 const layout_1 = require("./layout");
 const NumberSetting_1 = require("./NumberSetting");
-const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, }) => {
+const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, }) => {
     const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
         setVerboseLogging(e.target.checked);
     }, [setVerboseLogging]);
-    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", onValueChanged: setConcurrency, value: concurrency })), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: verbose, onChange: onVerboseLoggingChanged }) })] })] }));
+    const onDisallowParallelEncodingChanged = (0, react_1.useCallback)((e) => {
+        setDisallowParallelEncoding(e.target.checked);
+    }, [setDisallowParallelEncoding]);
+    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
+            // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
+            , { 
+                // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
+                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: verbose, onChange: onVerboseLoggingChanged }) })] })] }));
 };
 exports.RenderModalAdvanced = RenderModalAdvanced;