@remotion/cli 4.0.0-alpha.217 → 4.0.0-alpha10

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

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

package/dist/editor/components/RenderModal/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,
@@ -26,6 +28,7 @@ const link = {
     maxWidth: 200,
     color: '#0b84f3',
     wordWrap: 'break-word',
+    textDecoration: 'none',
 };
 const infoRow = {
     ...padding,
@@ -39,7 +42,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/RenderModal.d.ts

@@ -1,7 +1,7 @@
 import type { AudioCodec, Codec, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 import React from 'react';
 import type { RenderType } from './RenderModalAdvanced';
-export declare const RenderModal: React.FC<{
+declare type RenderModalProps = {
     compositionId: string;
     initialFrame: number;
     initialVideoImageFormat: VideoImageFormat;
@@ -31,5 +31,9 @@ export declare const RenderModal: React.FC<{
     initialGl: OpenGlRenderer | null;
     initialIgnoreCertificateErrors: boolean;
     initialHeadless: boolean;
-    defaultProps: unknown;
-}>;
+    defaultProps: Record<string, unknown>;
+    inFrameMark: number | null;
+    outFrameMark: number | null;
+};
+export declare const RenderModalWithLoader: React.FC<RenderModalProps>;
+export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderModal = void 0;
+exports.RenderModalWithLoader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
@@ -16,21 +16,25 @@ const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
 const gear_1 = require("../../icons/gear");
 const gif_1 = require("../../icons/gif");
+const colors_1 = require("../../helpers/colors");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
+const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const styles_1 = require("../Menu/styles");
 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 Spinner_1 = require("../Spinner");
 const vertical_1 = require("../Tabs/vertical");
 const CrfSetting_1 = require("./CrfSetting");
+const DataEditor_1 = require("./DataEditor");
 const out_name_checker_1 = require("./out-name-checker");
 const RenderModalAdvanced_1 = require("./RenderModalAdvanced");
 const RenderModalAudio_1 = require("./RenderModalAudio");
 const RenderModalBasic_1 = require("./RenderModalBasic");
-const RenderModalData_1 = require("./RenderModalData");
 const RenderModalGif_1 = require("./RenderModalGif");
 const RenderModalPicture_1 = require("./RenderModalPicture");
 const initialState = { type: 'idle' };
@@ -62,12 +66,12 @@ const container = {
 const rightPanel = {
     display: 'flex',
     width: '100%',
-    height: 600,
 };
 const horizontalLayout = {
     display: 'flex',
     flexDirection: 'row',
     overflowY: 'auto',
+    flex: 1,
 };
 const leftSidebar = {
     padding: 12,
@@ -97,7 +101,7 @@ const icon = {
     height: 20,
 };
 const buttonStyle = {
-    backgroundColor: 'var(--blue)',
+    backgroundColor: colors_1.BLUE,
     color: 'white',
 };
 const flexer = {
@@ -107,12 +111,10 @@ const outer = {
     width: (0, ModalContainer_1.getMaxModalWidth)(1000),
     height: (0, ModalContainer_1.getMaxModalHeight)(640),
     overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
 };
-const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialAudioCodec, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, defaultProps, }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onQuit = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
+const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialAudioCodec, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, defaultProps, inFrameMark, outFrameMark, onClose, resolvedComposition, unresolvedComposition, }) => {
     const isMounted = (0, react_1.useRef)(true);
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
     const [unclampedFrame, setFrame] = (0, react_1.useState)(() => initialFrame);
@@ -145,11 +147,11 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         };
     }, [headless, disableWebSecurity, ignoreCertificateErrors, openGlOption]);
     const [outName, setOutName] = (0, react_1.useState)(() => initialOutName);
-    const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => null);
-    const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => null);
+    const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => outFrameMark !== null && outFrameMark !== void 0 ? outFrameMark : null);
+    const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => inFrameMark !== null && inFrameMark !== void 0 ? inFrameMark : null);
     const [proResProfileSetting, setProResProfile] = (0, react_1.useState)(() => initialProResProfile);
     const [pixelFormat, setPixelFormat] = (0, react_1.useState)(() => initialPixelFormat);
-    const [qualityControlType, setQualityControl] = (0, react_1.useState)(() => initialVideoBitrate === null ? 'crf' : 'bitrate');
+    const [preferredQualityControlType, setQualityControl] = (0, react_1.useState)(() => initialVideoBitrate === null ? 'crf' : 'bitrate');
     const [shouldHaveCustomTargetAudioBitrate, setShouldHaveCustomTargetAudioBitrate,] = (0, react_1.useState)(() => initialAudioBitrate !== null);
     const [customTargetAudioBitrate, setCustomTargetAudioBitrateValue] = (0, react_1.useState)(() => initialAudioBitrate !== null && initialAudioBitrate !== void 0 ? initialAudioBitrate : '320K');
     const [customTargetVideoBitrate, setCustomTargetVideoBitrateValue] = (0, react_1.useState)(() => initialVideoBitrate !== null && initialVideoBitrate !== void 0 ? initialVideoBitrate : '1M');
@@ -174,13 +176,35 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         }
         return null;
     }, [customTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate]);
+    const supportsCrf = client_1.BrowserSafeApis.codecSupportsCrf(codec);
+    const supportsVideoBitrate = client_1.BrowserSafeApis.codecSupportsVideoBitrate(codec);
+    const supportsBothQualityControls = (0, react_1.useMemo)(() => {
+        return supportsCrf && supportsVideoBitrate;
+    }, [supportsCrf, supportsVideoBitrate]);
+    const qualityControlType = (0, react_1.useMemo)(() => {
+        if (supportsBothQualityControls) {
+            return preferredQualityControlType;
+        }
+        if (supportsCrf) {
+            return 'crf';
+        }
+        if (supportsVideoBitrate) {
+            return 'bitrate';
+        }
+        return null;
+    }, [
+        preferredQualityControlType,
+        supportsBothQualityControls,
+        supportsCrf,
+        supportsVideoBitrate,
+    ]);
     const videoBitrate = (0, react_1.useMemo)(() => {
         if (qualityControlType === 'bitrate') {
             return customTargetVideoBitrate;
         }
         return null;
     }, [customTargetVideoBitrate, qualityControlType]);
-    const { crf, maxCrf, minCrf, setCrf, shouldDisplayOption: shouldDisplayCrfOption, } = (0, CrfSetting_1.useCrfState)(codec);
+    const { crf, maxCrf, minCrf, setCrf } = (0, CrfSetting_1.useCrfState)(codec);
     const dispatchIfMounted = (0, react_1.useCallback)((payload) => {
         if (isMounted.current === false)
             return;
@@ -196,6 +220,9 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         if (renderMode === 'video') {
             return enforceAudioTrackState;
         }
+        if (renderMode === 'audio') {
+            return enforceAudioTrackState;
+        }
         return false;
     }, [enforceAudioTrackState, renderMode]);
     const proResProfile = (0, react_1.useMemo)(() => {
@@ -204,25 +231,13 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         }
         return null;
     }, [codec, proResProfileSetting, renderMode]);
-    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const currentComposition = (0, react_1.useMemo)(() => {
-        for (const composition of compositions) {
-            if (composition.id === compositionId) {
-                return composition;
-            }
-        }
-        return null;
-    }, [compositionId, compositions]);
-    if (currentComposition === null) {
-        throw new Error('This composition does not exist');
-    }
     const [inputProps, setInputProps] = (0, react_1.useState)(() => defaultProps);
     const endFrame = (0, react_1.useMemo)(() => {
         if (endFrameOrNull === null) {
-            return currentComposition.durationInFrames - 1;
+            return resolvedComposition.durationInFrames - 1;
         }
-        return Math.max(0, Math.min(currentComposition.durationInFrames - 1, endFrameOrNull));
-    }, [currentComposition.durationInFrames, endFrameOrNull]);
+        return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, endFrameOrNull));
+    }, [resolvedComposition.durationInFrames, endFrameOrNull]);
     const startFrame = (0, react_1.useMemo)(() => {
         if (startFrameOrNull === null) {
             return 0;
@@ -231,8 +246,8 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     }, [endFrame, startFrameOrNull]);
     const frame = (0, react_1.useMemo)(() => {
         const parsed = Math.floor(unclampedFrame);
-        return Math.max(0, Math.min(currentComposition.durationInFrames - 1, parsed));
-    }, [currentComposition.durationInFrames, unclampedFrame]);
+        return Math.max(0, Math.min(resolvedComposition.durationInFrames - 1, parsed));
+    }, [resolvedComposition.durationInFrames, unclampedFrame]);
     const getStringBeforeSuffix = (0, react_1.useCallback)((fileName) => {
         const dotPos = fileName.lastIndexOf('.');
         const bitBeforeDot = fileName.substring(0, dotPos);
@@ -299,7 +314,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         (_a = RightPanel_1.rightSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
         dispatchIfMounted({ type: 'start' });
         (0, actions_1.addStillRenderJob)({
-            compositionId,
+            compositionId: resolvedComposition.id,
             outName,
             imageFormat: stillImageFormat,
             jpegQuality: stillImageFormat === 'jpeg' ? jpegQuality : null,
@@ -313,7 +328,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
-            setSelectedModal(null);
+            onClose();
         })
             .catch(() => {
             dispatchIfMounted({ type: 'fail' });
@@ -321,7 +336,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     }, [
         setSidebarCollapsedState,
         dispatchIfMounted,
-        compositionId,
+        resolvedComposition.id,
         outName,
         stillImageFormat,
         jpegQuality,
@@ -332,7 +347,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         delayRenderTimeout,
         envVariables,
         inputProps,
-        setSelectedModal,
+        onClose,
     ]);
     const [everyNthFrameSetting, setEveryNthFrameSetting] = (0, react_1.useState)(() => initialEveryNthFrame);
     const everyNthFrame = (0, react_1.useMemo)(() => {
@@ -349,7 +364,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         (_a = RightPanel_1.rightSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
         dispatchIfMounted({ type: 'start' });
         (0, actions_1.addVideoRenderJob)({
-            compositionId,
+            compositionId: resolvedComposition.id,
             outName,
             imageFormat: videoImageFormat,
             jpegQuality: stillImageFormat === 'jpeg' ? jpegQuality : null,
@@ -377,7 +392,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
-            setSelectedModal(null);
+            onClose();
         })
             .catch(() => {
             dispatchIfMounted({ type: 'fail' });
@@ -385,7 +400,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     }, [
         setSidebarCollapsedState,
         dispatchIfMounted,
-        compositionId,
+        resolvedComposition.id,
         outName,
         videoImageFormat,
         stillImageFormat,
@@ -412,7 +427,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         chromiumOptions,
         envVariables,
         inputProps,
-        setSelectedModal,
+        onClose,
     ]);
     (0, react_1.useEffect)(() => {
         return () => {
@@ -491,7 +506,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         videoCodecForVideoTab,
     ]);
     const renderTabOptions = (0, react_1.useMemo)(() => {
-        if ((currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames) < 2) {
+        if ((resolvedComposition === null || resolvedComposition === void 0 ? void 0 : resolvedComposition.durationInFrames) < 2) {
             return [
                 {
                     label: 'Still',
@@ -529,7 +544,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
                 selected: renderMode === 'audio',
             },
         ];
-    }, [currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames, renderMode, setRenderMode]);
+    }, [resolvedComposition === null || resolvedComposition === void 0 ? void 0 : resolvedComposition.durationInFrames, renderMode, setRenderMode]);
     const outnameValidation = (0, out_name_checker_1.validateOutnameGui)({
         outName,
         codec,
@@ -563,13 +578,57 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             triggerIfInputFieldFocused: false,
         });
     }, [registerKeybinding, trigger]);
-    return ((0, jsx_runtime_1.jsx)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: (0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
-                                ...buttonStyle,
-                                backgroundColor: outnameValidation.valid
-                                    ? 'var(--blue)'
-                                    : 'var(--blue-disabled)',
-                            }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: rightPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, currentComposition: currentComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid
-                                    ? null
-                                    : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, 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, mayShowSaveButton: 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 })) })] })] }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
+                            ...buttonStyle,
+                            backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,
+                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: rightPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, compact: false, mayShowSaveButton: false, propsEditType: "input-props" })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables })) })] })] }));
+};
+const RenderModalWithLoader = (props) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onQuit = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    (0, react_1.useEffect)(() => {
+        const { current } = remotion_1.Internals.resolveCompositionsRef;
+        if (!current) {
+            throw new Error('resolveCompositionsRef');
+        }
+        current.setCurrentRenderModalComposition(props.compositionId);
+        return () => {
+            current.setCurrentRenderModalComposition(null);
+        };
+    }, [props.compositionId]);
+    const resolved = remotion_1.Internals.useResolvedVideoConfig(props.compositionId);
+    const unresolvedContext = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const unresolved = unresolvedContext.compositions.find((c) => props.compositionId === c.id);
+    if (!unresolved) {
+        throw new Error('Composition not found: ' + props.compositionId);
+    }
+    if (!resolved) {
+        return null;
+    }
+    if (resolved.type === 'loading') {
+        return ((0, jsx_runtime_1.jsx)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: (0, jsx_runtime_1.jsxs)("div", { style: loaderContainer, children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 1, size: 30 }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: loaderLabel, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" })] })] }) }));
+    }
+    if (resolved.type === 'error') {
+        return ((0, jsx_runtime_1.jsx)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: (0, jsx_runtime_1.jsxs)("div", { style: loaderContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: loaderLabel, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), ' ', "yielded an error:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", { style: loaderLabel, children: resolved.error.message || 'Unknown error' })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: (0, jsx_runtime_1.jsx)(RenderModal, { unresolvedComposition: unresolved, ...props, onClose: onQuit, resolvedComposition: resolved.result }) }));
+};
+exports.RenderModalWithLoader = RenderModalWithLoader;
+const loaderContainer = {
+    paddingTop: 40,
+    paddingBottom: 40,
+    paddingLeft: 100,
+    paddingRight: 100,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+};
+const loaderLabel = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
 };
-exports.RenderModal = RenderModal;

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

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

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

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

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

@@ -1,6 +1,7 @@
 import type { Codec, ProResProfile } from '@remotion/renderer';
 import React from 'react';
-import type { AnyComposition } from 'remotion';
+import type { TCompMetadata } from 'remotion';
+import type { AnyZodObject } from 'zod';
 import type { SegmentedControlItem } from '../SegmentedControl';
 import type { RenderType } from './RenderModalAdvanced';
 export declare const RenderModalBasic: React.FC<{
@@ -13,7 +14,7 @@ export declare const RenderModalBasic: React.FC<{
     setProResProfile: React.Dispatch<React.SetStateAction<ProResProfile>>;
     frame: number;
     setFrame: React.Dispatch<React.SetStateAction<number>>;
-    currentComposition: AnyComposition;
+    resolvedComposition: TCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
     setOutName: (value: React.SetStateAction<string>) => void;
     setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
     startFrame: number;

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

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

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

@@ -1,9 +1,21 @@
 import React from 'react';
 import type { AnyComposition } from 'remotion';
-export declare const RenderModalData: React.FC<{
-    composition: AnyComposition;
-    inputProps: unknown;
-    setInputProps: React.Dispatch<React.SetStateAction<unknown>>;
+export declare type State = {
+    str: string;
+    value: Record<string, unknown>;
+    validJSON: true;
+    zodValidation: Zod.SafeParseReturnType<unknown, unknown>;
+} | {
+    str: string;
+    validJSON: false;
+    error: string;
+};
+export declare type PropsEditType = 'input-props' | 'default-props';
+export declare const DataEditor: React.FC<{
+    unresolvedComposition: AnyComposition;
+    inputProps: Record<string, unknown>;
+    setInputProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     compact: boolean;
     mayShowSaveButton: boolean;
+    propsEditType: PropsEditType;
 }>;