@remotion/cli 3.3.78 → 3.3.80

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

@@ -6,8 +6,10 @@ const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const convert_env_variables_1 = require("../../helpers/convert-env-variables");
 const render_modal_sections_1 = require("../../helpers/render-modal-sections");
 const audio_1 = require("../../icons/audio");
+const data_1 = require("../../icons/data");
 const file_1 = require("../../icons/file");
 const frame_1 = require("../../icons/frame");
 const gear_1 = require("../../icons/gear");
@@ -21,9 +23,11 @@ const SegmentedControl_1 = require("../SegmentedControl");
 const SidebarContent_1 = require("../SidebarContent");
 const Tabs_1 = require("../Tabs");
 const CrfSetting_1 = require("./CrfSetting");
+const out_name_checker_1 = require("./out-name-checker");
 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' };
@@ -54,8 +58,7 @@ const container = {
     borderBottom: '1px solid black',
 };
 const scrollPanel = {
-    minHeight: '35vh',
-    maxHeight: '50vh',
+    height: 600,
     overflow: 'auto',
     minWidth: 650,
 };
@@ -97,7 +100,7 @@ const buttonStyle = {
 const flexer = {
     flex: 1,
 };
-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 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, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
@@ -110,6 +113,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     const [concurrency, setConcurrency] = (0, react_1.useState)(() => initialConcurrency);
     const [videoCodecForVideoTab, setVideoCodecForVideoTab] = (0, react_1.useState)(() => initialVideoCodecForVideoTab);
     const [userSelectedAudioCodec, setUserSelectedAudioCodec] = (0, react_1.useState)(() => initialAudioCodec);
+    const [envVariables, setEnvVariables] = (0, react_1.useState)(() => (0, convert_env_variables_1.envVariablesObjectToArray)(initialEnvVariables).filter(([key]) => key !== 'NODE_ENV'));
     const [videoCodecForAudioTab, setVideoCodecForAudioTab] = (0, react_1.useState)(() => initialVideoCodecForAudioTab);
     const [mutedState, setMuted] = (0, react_1.useState)(() => initialMuted);
     const [enforceAudioTrackState, setEnforceAudioTrackState] = (0, react_1.useState)(() => initialEnforceAudioTrack);
@@ -118,6 +122,18 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     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 [disableWebSecurity, setDisableWebSecurity] = (0, react_1.useState)(() => initialDisableWebSecurity);
+    const [headless, setHeadless] = (0, react_1.useState)(() => initialHeadless);
+    const [ignoreCertificateErrors, setIgnoreCertificateErrors] = (0, react_1.useState)(() => initialIgnoreCertificateErrors);
+    const [openGlOption, setOpenGlOption] = (0, react_1.useState)(() => initialGl !== null && initialGl !== void 0 ? initialGl : 'default');
+    const chromiumOptions = (0, react_1.useMemo)(() => {
+        return {
+            headless,
+            disableWebSecurity,
+            ignoreCertificateErrors,
+            gl: openGlOption === 'default' ? null : openGlOption,
+        };
+    }, [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);
@@ -125,7 +141,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     const [pixelFormat, setPixelFormat] = (0, react_1.useState)(() => initialPixelFormat);
     const [qualityControlType, 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 : '256K');
+    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');
     const [limitNumberOfGifLoops, setLimitNumberOfGifLoops] = (0, react_1.useState)(() => initialNumberOfGifLoops !== null);
     const [numberOfGifLoopsSetting, setNumberOfGifLoopsSetting] = (0, react_1.useState)(() => initialNumberOfGifLoops !== null && initialNumberOfGifLoops !== void 0 ? initialNumberOfGifLoops : 1);
@@ -190,6 +206,7 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
     if (currentComposition === null) {
         throw new Error('This composition does not exist');
     }
+    const [inputProps, setInputProps] = (0, react_1.useState)(() => currentComposition.defaultProps);
     const endFrame = (0, react_1.useMemo)(() => {
         if (endFrameOrNull === null) {
             return currentComposition.durationInFrames - 1;
@@ -276,6 +293,10 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             frame,
             scale,
             verbose,
+            chromiumOptions,
+            delayRenderTimeout,
+            envVariables: (0, convert_env_variables_1.envVariablesArrayToObject)(envVariables),
+            inputProps,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -285,15 +306,19 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             dispatchIfMounted({ type: 'fail' });
         });
     }, [
-        compositionId,
         dispatchIfMounted,
-        frame,
-        stillImageFormat,
+        compositionId,
         outName,
+        stillImageFormat,
         quality,
+        frame,
         scale,
-        setSelectedModal,
         verbose,
+        chromiumOptions,
+        delayRenderTimeout,
+        envVariables,
+        inputProps,
+        setSelectedModal,
     ]);
     const [everyNthFrameSetting, setEveryNthFrameSetting] = (0, react_1.useState)(() => initialEveryNthFrame);
     const everyNthFrame = (0, react_1.useMemo)(() => {
@@ -330,6 +355,9 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             delayRenderTimeout,
             audioCodec,
             disallowParallelEncoding,
+            chromiumOptions,
+            envVariables: (0, convert_env_variables_1.envVariablesArrayToObject)(envVariables),
+            inputProps,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -364,6 +392,9 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
         delayRenderTimeout,
         audioCodec,
         disallowParallelEncoding,
+        chromiumOptions,
+        envVariables,
+        inputProps,
         setSelectedModal,
     ]);
     (0, react_1.useEffect)(() => {
@@ -482,7 +513,19 @@ const RenderModal = ({ compositionId, initialFrame, initialVideoImageFormat, ini
             },
         ];
     }, [currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames, renderMode, setRenderMode]);
+    const outnameValidation = (0, out_name_checker_1.validateOutnameGui)({
+        outName,
+        codec,
+        audioCodec,
+        renderMode,
+        stillImageFormat,
+    });
     const { tab, setTab, shownTabs } = (0, render_modal_sections_1.useRenderModalSections)(renderMode, codec);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: renderMode === 'still' ? onClickStill : onClickVideo, disabled: state.type === 'load', 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 })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: renderMode === 'still' ? onClickStill : onClickVideo, disabled: state.type === 'load' || !outnameValidation.valid, style: {
+                            ...buttonStyle,
+                            backgroundColor: outnameValidation.valid
+                                ? 'var(--blue)'
+                                : 'var(--blue-disabled)',
+                        }, children: state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...' })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsxs)("div", { style: scrollPanel, className: "__remotion-vertical-scrollbar", children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, currentComposition: currentComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, quality: quality, qualityControlType: qualityControlType, setQuality: setQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, shouldDisplayCrfOption: shouldDisplayCrfOption, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(RenderModalData_1.RenderModalData, { inputProps: inputProps, setInputProps: setInputProps, composition: currentComposition, compact: false, updateButton: false, showSaveButton: false })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 })] })] })] }));
 };
 exports.RenderModal = RenderModal;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { UiOpenGlOptions } from '../../../required-chromium-options';
 export declare type RenderType = 'still' | 'video' | 'audio';
 export declare const RenderModalAdvanced: React.FC<{
     renderMode: RenderType;
@@ -12,4 +13,14 @@ export declare const RenderModalAdvanced: React.FC<{
     setDelayRenderTimeout: React.Dispatch<React.SetStateAction<number>>;
     disallowParallelEncoding: boolean;
     setDisallowParallelEncoding: React.Dispatch<React.SetStateAction<boolean>>;
+    setDisableWebSecurity: React.Dispatch<React.SetStateAction<boolean>>;
+    setIgnoreCertificateErrors: React.Dispatch<React.SetStateAction<boolean>>;
+    setHeadless: React.Dispatch<React.SetStateAction<boolean>>;
+    headless: boolean;
+    ignoreCertificateErrors: boolean;
+    disableWebSecurity: boolean;
+    openGlOption: UiOpenGlOptions;
+    setOpenGlOption: React.Dispatch<React.SetStateAction<UiOpenGlOptions>>;
+    envVariables: [string, string][];
+    setEnvVariables: React.Dispatch<React.SetStateAction<[string, string][]>>;
 }>;

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

@@ -3,20 +3,52 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalAdvanced = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Checkmark_1 = require("../../icons/Checkmark");
 const Checkbox_1 = require("../Checkbox");
+const ComboBox_1 = require("../NewComposition/ComboBox");
 const layout_1 = require("./layout");
 const NumberSetting_1 = require("./NumberSetting");
-const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, }) => {
+const RenderModalEnvironmentVariables_1 = require("./RenderModalEnvironmentVariables");
+const RenderModalHr_1 = require("./RenderModalHr");
+const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, }) => {
+    const extendedOpenGlOptions = (0, react_1.useMemo)(() => {
+        return ['angle', 'egl', 'swangle', 'swiftshader', 'default'];
+    }, []);
     const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
         setVerboseLogging(e.target.checked);
     }, [setVerboseLogging]);
     const onDisallowParallelEncodingChanged = (0, react_1.useCallback)((e) => {
         setDisallowParallelEncoding(e.target.checked);
     }, [setDisallowParallelEncoding]);
+    const onDisableWebSecurityChanged = (0, react_1.useCallback)((e) => {
+        setDisableWebSecurity(e.target.checked);
+    }, [setDisableWebSecurity]);
+    const onIgnoreCertificatErrors = (0, react_1.useCallback)((e) => {
+        setIgnoreCertificateErrors(e.target.checked);
+    }, [setIgnoreCertificateErrors]);
+    const onHeadless = (0, react_1.useCallback)((e) => {
+        setHeadless(e.target.checked);
+    }, [setHeadless]);
+    const openGlOptions = (0, react_1.useMemo)(() => {
+        return extendedOpenGlOptions.map((option) => {
+            return {
+                label: option === 'default' ? 'Default' : option,
+                onClick: () => setOpenGlOption(option),
+                key: option,
+                leftItem: openGlOption === option ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: option,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: option,
+            };
+        });
+    }, [extendedOpenGlOptions, openGlOption, setOpenGlOption]);
     return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", formatter: (w) => `${w}x`, onValueChanged: setConcurrency, value: concurrency })), (0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting
             // 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 }) })] })] }));
+                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 })] }));
 };
 exports.RenderModalAdvanced = RenderModalAdvanced;

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

@@ -10,8 +10,10 @@ const ComboBox_1 = require("../NewComposition/ComboBox");
 const RemInput_1 = require("../NewComposition/RemInput");
 const EnforceAudioTrackSetting_1 = require("./EnforceAudioTrackSetting");
 const human_readable_audio_codecs_1 = require("./human-readable-audio-codecs");
+const InfoBubble_1 = require("./InfoBubble");
 const layout_1 = require("./layout");
 const MutedSetting_1 = require("./MutedSetting");
+const OptionExplainer_1 = require("./OptionExplainer");
 const RenderModalHr_1 = require("./RenderModalHr");
 const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setEnforceAudioTrackState, setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate, setCustomTargetAudioBitrateValue, customTargetAudioBitrate, audioCodec, codec, setAudioCodec, }) => {
     const onShouldHaveTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
@@ -36,6 +38,6 @@ const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setE
             };
         });
     }, [codec, setAudioCodec]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'video' && audioCodecOptions(codec).length >= 2 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Audio Codec" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })] })) : null, renderMode === 'video' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: enforceAudioTrack, muted: muted, setMuted: setMuted }), (0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState }), (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)("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 }) }) })] })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'video' && audioCodecOptions(codec).length >= 2 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Audio Codec" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })] })) : null, renderMode === 'video' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: enforceAudioTrack, muted: muted, setMuted: setMuted, hint: client_1.BrowserSafeApis.options.muteOption }), (0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState, option: client_1.BrowserSafeApis.options.enforceAudioOption }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})] })), renderMode === 'still' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Custom audio bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: shouldHaveCustomTargetAudioBitrate, onChange: onShouldHaveTargetAudioBitrateChanged }) })] })), shouldHaveCustomTargetAudioBitrate && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target audio bitrate" }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.audioBitrateOption }) }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetAudioBitrate, onChange: onTargetAudioBitrateChanged, status: "ok" }) }) })] })) : null] }));
 };
 exports.RenderModalAudio = RenderModalAudio;

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

@@ -1,6 +1,6 @@
 import type { Codec, ProResProfile } from '@remotion/renderer';
 import React from 'react';
-import type { TComposition } from 'remotion';
+import type { AnyComposition } from 'remotion';
 import type { SegmentedControlItem } from '../SegmentedControl';
 import type { RenderType } from './RenderModalAdvanced';
 export declare const RenderModalBasic: React.FC<{
@@ -13,10 +13,11 @@ export declare const RenderModalBasic: React.FC<{
     setProResProfile: React.Dispatch<React.SetStateAction<ProResProfile>>;
     frame: number;
     setFrame: React.Dispatch<React.SetStateAction<number>>;
-    currentComposition: TComposition<unknown>;
+    currentComposition: AnyComposition;
     setOutName: (value: React.SetStateAction<string>) => void;
     setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
     startFrame: number;
     endFrame: number;
     setStartFrame: React.Dispatch<React.SetStateAction<number | null>>;
+    validationMessage: string | null;
 }>;

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

@@ -10,12 +10,14 @@ const Checkmark_1 = require("../../icons/Checkmark");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const RemInput_1 = require("../NewComposition/RemInput");
-const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 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 RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setVideoCodec: setCodec, proResProfile, setProResProfile, frame, setFrame, currentComposition, setOutName, setEndFrame, endFrame, setStartFrame, startFrame, }) => {
+const OptionExplainer_1 = require("./OptionExplainer");
+const RenderModalInput_1 = require("./RenderModalInput");
+const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setVideoCodec: setCodec, proResProfile, setProResProfile, frame, setFrame, currentComposition, setOutName, setEndFrame, endFrame, setStartFrame, startFrame, validationMessage, }) => {
     const existence = (0, use_file_existence_1.useFileExistence)(outName);
     const videoCodecOptions = (0, react_1.useMemo)(() => {
         return client_1.BrowserSafeApis.validCodecs
@@ -69,10 +71,6 @@ const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setV
     const onValueChange = (0, react_1.useCallback)((e) => {
         setOutName(e.target.value);
     }, [setOutName]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Codec" }), (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, max: currentComposition.durationInFrames - 1 }) }) })] })) : null, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: proResProfile, selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: currentComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Output name" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput
-                                // TODO: Validate and reject folders or weird file names
-                                , { 
-                                    // TODO: Validate and reject folders or weird file names
-                                    warning: existence, style: layout_1.input, type: "text", value: outName, onChange: onValueChange }), existence ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten" })) : null] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Codec", (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoCodecOption }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, title: "Codec" }) })] })), renderMode === 'still' && currentComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${currentComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: currentComposition.durationInFrames - 1 }) }) })] })) : null, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: proResProfile, selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: currentComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsx)(RenderModalInput_1.RenderModalInput, { existence: existence, inputStyle: layout_1.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage })] }));
 };
 exports.RenderModalBasic = RenderModalBasic;

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

@@ -0,0 +1,10 @@
+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>>;
+    compact: boolean;
+    updateButton: boolean;
+    showSaveButton: boolean;
+}>;

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalData = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const layout_1 = require("../layout");
+const actions_1 = require("../RenderQueue/actions");
+const SegmentedControl_1 = require("../SegmentedControl");
+const RenderModalJSONInputPropsEditor_1 = require("./RenderModalJSONInputPropsEditor");
+const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
+const outer = {
+    padding: '8px 16px',
+};
+const controlContainer = {
+    display: 'flex',
+    flexDirection: 'row',
+};
+const RenderModalData = ({ composition, inputProps, setInputProps, compact, updateButton, showSaveButton, }) => {
+    const [mode, setMode] = (0, react_1.useState)('schema');
+    const zodValidationResult = (0, react_1.useMemo)(() => {
+        return composition.schema.safeParse(inputProps);
+    }, [composition.schema, inputProps]);
+    const modeItems = (0, react_1.useMemo)(() => {
+        return [
+            {
+                key: 'schema',
+                label: 'Schema',
+                onClick: () => {
+                    setMode('schema');
+                },
+                selected: mode === 'schema',
+            },
+            {
+                key: 'json',
+                label: 'JSON',
+                onClick: () => {
+                    setMode('json');
+                },
+                selected: mode === 'json',
+            },
+        ];
+    }, [mode]);
+    const switchToSchema = (0, react_1.useCallback)(() => {
+        setMode('schema');
+    }, []);
+    const onUpdate = (0, react_1.useCallback)(() => {
+        (0, actions_1.updateDefaultProps)(composition.id, inputProps);
+    }, [composition.id, inputProps]);
+    const onSave = (0, react_1.useCallback)((updater) => {
+        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps));
+    }, [composition.defaultProps, composition.id]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: controlContainer, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: composition.schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: composition.defaultProps, onSave: onSave, showSaveButton: showSaveButton })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONInputPropsEditor_1.RenderModalJSONInputPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema })), updateButton && mode === 'json' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onUpdate, disabled: !zodValidationResult.success, children: "Save" })) : null] }));
+};
+exports.RenderModalData = RenderModalData;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const RenderModalEnvironmentVariables: React.FC<{
+    envVariables: [string, string][];
+    setEnvVariables: React.Dispatch<React.SetStateAction<[string, string][]>>;
+}>;

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalEnvironmentVariables = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const colors_1 = require("../../helpers/colors");
+const layout_1 = require("../layout");
+const EnvInput_1 = require("./EnvInput");
+const title = {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: colors_1.LIGHT_TEXT,
+    marginLeft: 16,
+};
+const container = {
+    marginTop: 20,
+};
+const button = {
+    marginLeft: 16,
+};
+// TODO: should warn if XOR key XOR value is empty
+// TODO: Should warn if trying to set the same key twice
+// TODO: Should warn if trying to set NODE_ENV
+const RenderModalEnvironmentVariables = ({ envVariables, setEnvVariables }) => {
+    const onEnvValChange = (0, react_1.useCallback)((index, value) => {
+        setEnvVariables((oldEnv) => {
+            const newEnv = [...oldEnv];
+            newEnv[index][1] = value;
+            return newEnv;
+        });
+    }, [setEnvVariables]);
+    const onEnvKeyChange = (0, react_1.useCallback)((index, value) => {
+        setEnvVariables((oldEnv) => {
+            const newEnv = [...oldEnv];
+            newEnv[index][0] = value;
+            return newEnv;
+        });
+    }, [setEnvVariables]);
+    const onDelete = (0, react_1.useCallback)((index) => {
+        setEnvVariables((oldEnv) => oldEnv.filter((_, idx) => idx !== index));
+    }, [setEnvVariables]);
+    const addField = (0, react_1.useCallback)(() => {
+        setEnvVariables((oldEnv) => [...oldEnv, ['', '']]);
+    }, [setEnvVariables]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("strong", { style: title, children: "Environment variables" }), envVariables.map((env, i) => {
+                return ((0, jsx_runtime_1.jsx)(EnvInput_1.EnvInput
+                // eslint-disable-next-line react/no-array-index-key
+                , { onEnvKeyChange: onEnvKeyChange, onEnvValChange: onEnvValChange, envKey: env[0], envVal: env[1], onDelete: onDelete, index: i, autoFocus: i === envVariables.length - 1 && env[0] === '' }, i));
+            }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { style: button, onClick: addField, children: "+ Add env variable" })] }));
+};
+exports.RenderModalEnvironmentVariables = RenderModalEnvironmentVariables;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type Props = {
+    existence: boolean;
+    inputStyle: React.CSSProperties;
+    outName: string;
+    onValueChange: React.ChangeEventHandler<HTMLInputElement>;
+    validationMessage: string | null;
+};
+export declare function RenderModalInput({ existence, inputStyle, outName, onValueChange, validationMessage, }: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../layout");
+const RemInput_1 = require("../NewComposition/RemInput");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const layout_2 = require("./layout");
+// eslint-disable-next-line react/function-component-definition
+function RenderModalInput({ existence, inputStyle, outName, onValueChange, validationMessage, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Output name" }), validationMessage || existence ? ((0, jsx_runtime_1.jsx)("div", { style: { height: '25px' } })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange }), validationMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: 'error' })] })) : existence ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten", type: 'warning' })] })) : null] }) })] }));
+}
+exports.RenderModalInput = RenderModalInput;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { z } from 'remotion';
+export declare const RenderModalJSONInputPropsEditor: React.FC<{
+    value: unknown;
+    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
+    switchToSchema: () => void;
+}>;

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

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalJSONInputPropsEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const RemTextarea_1 = require("../NewComposition/RemTextarea");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const date_serialization_1 = require("./SchemaEditor/date-serialization");
+const parseJSON = (str) => {
+    try {
+        const value = (0, date_serialization_1.deserializeJSONWithDate)(str);
+        return { str, value, validJSON: true };
+    }
+    catch (e) {
+        return { str, validJSON: false, error: e.message };
+    }
+};
+const style = {
+    fontFamily: 'monospace',
+    height: 400,
+};
+const schemaButton = {
+    border: 'none',
+    padding: 0,
+    display: 'inline-block',
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+};
+// TODO: Note if custom 'remotion-date:' pattern has been used
+const RenderModalJSONInputPropsEditor = ({ setValue, value, zodValidationResult, switchToSchema }) => {
+    const [localValue, setLocalValue] = react_1.default.useState(() => {
+        return parseJSON((0, date_serialization_1.serializeJSONWithDate)(value, 2));
+    });
+    const onPretty = (0, react_1.useCallback)(() => {
+        if (!localValue.validJSON) {
+            return;
+        }
+        const parsed = JSON.parse(localValue.str);
+        setLocalValue({ ...localValue, str: JSON.stringify(parsed, null, 2) });
+    }, [localValue]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        const parsed = parseJSON(e.target.value);
+        if (parsed.validJSON) {
+            setLocalValue({
+                str: e.target.value,
+                value: parsed.value,
+                validJSON: parsed.validJSON,
+            });
+        }
+        else {
+            setLocalValue({
+                str: e.target.value,
+                validJSON: parsed.validJSON,
+                error: parsed.error,
+            });
+        }
+        if (parsed.validJSON) {
+            setValue(parsed.value);
+        }
+    }, [setValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: style }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : zodValidationResult.success === false ? ((0, jsx_runtime_1.jsx)("button", { type: "button", style: schemaButton, onClick: switchToSchema, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: "Does not match schema", type: "warning" }) })) : null, (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format JSON" })] }));
+};
+exports.RenderModalJSONInputPropsEditor = RenderModalJSONInputPropsEditor;