@remotion/cli 4.0.0-webhook.27 → 4.1.0-alpha1

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

@@ -0,0 +1,59 @@
+"use strict";
+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 is_menu_item_1 = require("../Menu/is-menu-item");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const layout_1 = require("./layout");
+const NumberSetting_1 = require("./NumberSetting");
+const RenderModalEnvironmentVariables_1 = require("./RenderModalEnvironmentVariables");
+const RenderModalHr_1 = require("./RenderModalHr");
+const container = {
+    flex: 1,
+    overflowY: 'auto',
+};
+const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, }) => {
+    const extendedOpenGlOptions = (0, react_1.useMemo)(() => {
+        return ['angle', 'egl', 'swangle', 'swiftshader', 'default'];
+    }, []);
+    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", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", formatter: (w) => `${w}x`, onValueChanged: setConcurrency, value: concurrency })), (0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting
+            // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
+            , { 
+                // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
+                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, name: "disallow-parallel-encoding" }) })] }), (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, name: "verbose-logging" }) })] }), (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, name: "disable-web-security" }) })] }), (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, name: "ignore-certificate-errors" }) })] }), (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, name: "headless" }) })] }), (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.d.ts

@@ -0,0 +1,17 @@
+import type { AudioCodec, Codec } from '@remotion/renderer';
+import React from 'react';
+import type { RenderType } from './RenderModalAdvanced';
+export declare const RenderModalAudio: React.FC<{
+    muted: boolean;
+    setMuted: React.Dispatch<React.SetStateAction<boolean>>;
+    renderMode: RenderType;
+    enforceAudioTrack: boolean;
+    setEnforceAudioTrackState: React.Dispatch<React.SetStateAction<boolean>>;
+    shouldHaveCustomTargetAudioBitrate: boolean;
+    setShouldHaveCustomTargetAudioBitrate: React.Dispatch<React.SetStateAction<boolean>>;
+    setCustomTargetAudioBitrateValue: React.Dispatch<React.SetStateAction<string>>;
+    customTargetAudioBitrate: string;
+    audioCodec: AudioCodec;
+    setAudioCodec: (newAudioCodec: AudioCodec) => void;
+    codec: Codec;
+}>;

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalAudio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const react_1 = require("react");
+const Checkmark_1 = require("../../icons/Checkmark");
+const Checkbox_1 = require("../Checkbox");
+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 container = {
+    flex: 1,
+};
+const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setEnforceAudioTrackState, setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate, setCustomTargetAudioBitrateValue, customTargetAudioBitrate, audioCodec, codec, setAudioCodec, }) => {
+    const onShouldHaveTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
+        setShouldHaveCustomTargetAudioBitrate(e.target.checked);
+    }, [setShouldHaveCustomTargetAudioBitrate]);
+    const onTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
+        setCustomTargetAudioBitrateValue(e.target.value);
+    }, [setCustomTargetAudioBitrateValue]);
+    const audioCodecOptions = (0, react_1.useCallback)((currentCodec) => {
+        return client_1.BrowserSafeApis.supportedAudioCodecs[currentCodec].map((audioCodecOption) => {
+            return {
+                label: (0, human_readable_audio_codecs_1.humanReadableAudioCodec)(audioCodecOption),
+                onClick: () => setAudioCodec(audioCodecOption),
+                key: audioCodecOption,
+                leftItem: codec === audioCodecOption ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: audioCodecOption,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: audioCodecOption,
+            };
+        });
+    }, [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.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, name: "custom-audio-bitrate" }) })] })), 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

@@ -0,0 +1,24 @@
+import type { Codec, ProResProfile } from '@remotion/renderer';
+import React from 'react';
+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<{
+    renderMode: RenderType;
+    imageFormatOptions: SegmentedControlItem[];
+    codec: Codec;
+    setVideoCodec: (newCodec: Codec) => void;
+    outName: string;
+    proResProfile: ProResProfile | null;
+    setProResProfile: React.Dispatch<React.SetStateAction<ProResProfile>>;
+    frame: number;
+    setFrame: React.Dispatch<React.SetStateAction<number>>;
+    resolvedComposition: TCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
+    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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalBasic = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+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");
+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_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, 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
+            .filter((c) => {
+            return client_1.BrowserSafeApis.isAudioCodec(c) === (renderMode === 'audio');
+        })
+            .map((codecOption) => {
+            return {
+                label: (0, human_readable_codec_1.humanReadableCodec)(codecOption),
+                onClick: () => setCodec(codecOption),
+                key: codecOption,
+                leftItem: codec === codecOption ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: codecOption,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: codecOption,
+            };
+        });
+    }, [renderMode, setCodec, codec]);
+    const proResProfileOptions = (0, react_1.useMemo)(() => {
+        return client_1.BrowserSafeApis.proResProfileOptions.map((option) => {
+            return {
+                label: (0, prores_labels_1.labelProResProfile)(option),
+                onClick: () => setProResProfile(option),
+                key: option,
+                selected: proResProfile === option,
+                type: 'item',
+                id: option,
+                keyHint: null,
+                leftItem: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: option,
+            };
+        });
+    }, [proResProfile, setProResProfile]);
+    const onFrameSetDirectly = (0, react_1.useCallback)((newFrame) => {
+        setFrame(newFrame);
+    }, [setFrame]);
+    const onFrameChanged = (0, react_1.useCallback)((e) => {
+        setFrame((q) => {
+            const newFrame = parseFloat(e);
+            if (Number.isNaN(newFrame)) {
+                return q;
+            }
+            return newFrame;
+        });
+    }, [setFrame]);
+    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_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/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,55 @@
+"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,
+};
+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]);
+    const usedKeys = [];
+    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) => {
+                let isDuplicate = false;
+                if (usedKeys.includes(env[0].toUpperCase())) {
+                    isDuplicate = true;
+                }
+                usedKeys.push(env[0].toUpperCase());
+                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, isDuplicate: isDuplicate, 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" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true })] }));
+};
+exports.RenderModalEnvironmentVariables = RenderModalEnvironmentVariables;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const RenderModalGif: React.FC<{
+    limitNumberOfGifLoops: boolean;
+    setLimitNumberOfGifLoops: (value: React.SetStateAction<boolean>) => void;
+    numberOfGifLoopsSetting: number;
+    setNumberOfGifLoopsSetting: React.Dispatch<React.SetStateAction<number>>;
+    everyNthFrame: number;
+    setEveryNthFrameSetting: React.Dispatch<React.SetStateAction<number>>;
+}>;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalGif = 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 NumberOfLoopsSetting_1 = require("./NumberOfLoopsSetting");
+const NumberSetting_1 = require("./NumberSetting");
+const container = {
+    flex: 1,
+};
+const RenderModalGif = ({ everyNthFrame, limitNumberOfGifLoops, numberOfGifLoopsSetting, setEveryNthFrameSetting, setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting, }) => {
+    const onShouldLimitNumberOfGifLoops = (0, react_1.useCallback)((e) => {
+        setLimitNumberOfGifLoops(e.target.checked);
+    }, [setLimitNumberOfGifLoops]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { name: "Every nth frame", min: 1, onValueChanged: setEveryNthFrameSetting, value: everyNthFrame, step: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Limit GIF loops" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: limitNumberOfGifLoops, onChange: onShouldLimitNumberOfGifLoops, name: "limitNumberOfGifLoops" }) })] }), limitNumberOfGifLoops ? ((0, jsx_runtime_1.jsx)(NumberOfLoopsSetting_1.NumberOfLoopsSetting, { numberOfGifLoops: numberOfGifLoopsSetting, setNumberOfGifLoops: setNumberOfGifLoopsSetting })) : null] }));
+};
+exports.RenderModalGif = RenderModalGif;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RenderModalHr: React.FC;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalHr = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hrStyle = {
+    margin: '0 0 0 0',
+    padding: '0 0 0 0',
+    border: 'none',
+    borderTop: '1px solid #000',
+    marginRight: 16,
+    marginLeft: 16,
+    marginTop: 8,
+    marginBottom: 8,
+};
+const RenderModalHr = () => {
+    return (0, jsx_runtime_1.jsx)("div", { style: hrStyle });
+};
+exports.RenderModalHr = RenderModalHr;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+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.jsx)(layout_1.Column, { children: (0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Output name" }) }), (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, rightAlign: true }), 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/RenderModalJSONPropsEditor.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { SerializedJSONWithCustomFields } from './SchemaEditor/input-props-serialization';
+export type EditType = 'inputProps' | 'defaultProps';
+export declare const RenderModalJSONPropsEditor: React.FC<{
+    value: unknown;
+    setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
+    onSave: () => void;
+    valBeforeSafe: unknown;
+    showSaveButton: boolean;
+    serializedJSON: SerializedJSONWithCustomFields | null;
+    defaultProps: Record<string, unknown>;
+    schema: z.ZodTypeAny;
+}>;

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

@@ -0,0 +1,139 @@
+"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.RenderModalJSONPropsEditor = 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 colors_1 = require("../../helpers/colors");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const layout_1 = require("../layout");
+const RemTextarea_1 = require("../NewComposition/RemTextarea");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
+const ZodErrorMessages_1 = require("./SchemaEditor/ZodErrorMessages");
+const style = {
+    fontFamily: 'monospace',
+    flex: 1,
+};
+const scrollable = {
+    padding: '8px 12px',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+};
+const parseJSON = (str, schema) => {
+    try {
+        const value = (0, input_props_serialization_1.deserializeJSONWithCustomFields)(str);
+        const zodValidation = schema.safeParse(value);
+        return { str, value, validJSON: true, zodValidation };
+    }
+    catch (e) {
+        return { str, validJSON: false, error: e.message };
+    }
+};
+const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, valBeforeSafe, showSaveButton, serializedJSON, schema, }) => {
+    if (serializedJSON === null) {
+        throw new Error('expecting serializedJSON to be defined');
+    }
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const [localValue, setLocalValue] = react_1.default.useState(() => {
+        return parseJSON(serializedJSON.serializedString, schema);
+    });
+    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, setLocalValue]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        const parsed = parseJSON(e.target.value, schema);
+        if (parsed.validJSON) {
+            const validationResult = schema.safeParse(parsed.value);
+            setLocalValue({
+                str: e.target.value,
+                value: parsed.value,
+                validJSON: parsed.validJSON,
+                zodValidation: validationResult,
+            });
+            if (validationResult.success) {
+                setValue(parsed.value);
+            }
+        }
+        else {
+            setLocalValue({
+                str: e.target.value,
+                validJSON: parsed.validJSON,
+                error: parsed.error,
+            });
+        }
+    }, [schema, setValue]);
+    const hasChanged = (0, react_1.useMemo)(() => {
+        return value && JSON.stringify(value) !== JSON.stringify(valBeforeSafe);
+    }, [valBeforeSafe, value]);
+    const onQuickSave = (0, react_1.useCallback)(() => {
+        if (hasChanged) {
+            onSave();
+        }
+    }, [hasChanged, onSave]);
+    // If schema is changed in code
+    (0, react_1.useEffect)(() => {
+        setLocalValue(parseJSON(localValue.str, schema));
+    }, [localValue.str, schema]);
+    (0, react_1.useEffect)(() => {
+        const save = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 's',
+            commandCtrlKey: true,
+            callback: onQuickSave,
+            preventDefault: true,
+            triggerIfInputFieldFocused: true,
+        });
+        return () => {
+            save.unregister();
+        };
+    }, [keybindings, onQuickSave, onSave]);
+    const reset = (0, react_1.useCallback)(() => {
+        setLocalValue(parseJSON(serializedJSON.serializedString, schema));
+        setValue(defaultProps);
+    }, [defaultProps, schema, serializedJSON.serializedString, setValue]);
+    const textAreaStyle = (0, react_1.useMemo)(() => {
+        const fail = !localValue.validJSON || !localValue.zodValidation.success;
+        if (!fail) {
+            return style;
+        }
+        return {
+            ...style,
+            borderColor: colors_1.FAIL_COLOR,
+        };
+    }, [localValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: textAreaStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : localValue.zodValidation.success === false ? ((0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: localValue.zodValidation, viewTab: "json" })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON ||
+                            !(localValue.validJSON && !localValue.zodValidation.success), onClick: reset, children: "Reset" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, disabled: !(localValue.validJSON && localValue.zodValidation.success) ||
+                            !localValue.validJSON ||
+                            !hasChanged ||
+                            !showSaveButton, children: "Save" })] })] }));
+};
+exports.RenderModalJSONPropsEditor = RenderModalJSONPropsEditor;

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

@@ -0,0 +1,28 @@
+import type { PixelFormat, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import React from 'react';
+import type { SegmentedControlItem } from '../SegmentedControl';
+import type { RenderType } from './RenderModalAdvanced';
+declare const qualityControlModes: readonly ["crf", "bitrate"];
+export type QualityControl = typeof qualityControlModes[number];
+export declare const RenderModalPicture: React.FC<{
+    renderMode: RenderType;
+    scale: number;
+    setScale: React.Dispatch<React.SetStateAction<number>>;
+    pixelFormat: PixelFormat;
+    setPixelFormat: React.Dispatch<React.SetStateAction<PixelFormat>>;
+    imageFormatOptions: SegmentedControlItem[];
+    setQualityControl: React.Dispatch<React.SetStateAction<QualityControl>>;
+    qualityControlType: QualityControl | null;
+    videoImageFormat: VideoImageFormat;
+    stillImageFormat: StillImageFormat;
+    setJpegQuality: React.Dispatch<React.SetStateAction<number>>;
+    jpegQuality: number;
+    maxCrf: number;
+    minCrf: number;
+    setCrf: React.Dispatch<React.SetStateAction<number>>;
+    setCustomTargetVideoBitrateValue: React.Dispatch<React.SetStateAction<string>>;
+    crf: number;
+    customTargetVideoBitrate: string;
+    shouldDisplayQualityControlPicker: boolean;
+}>;
+export {};

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalPicture = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const react_1 = require("react");
+const Checkmark_1 = require("../../icons/Checkmark");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const RemInput_1 = require("../NewComposition/RemInput");
+const SegmentedControl_1 = require("../SegmentedControl");
+const CrfSetting_1 = require("./CrfSetting");
+const InfoBubble_1 = require("./InfoBubble");
+const JpegQualitySetting_1 = require("./JpegQualitySetting");
+const layout_1 = require("./layout");
+const OptionExplainer_1 = require("./OptionExplainer");
+const RenderModalHr_1 = require("./RenderModalHr");
+const ScaleSetting_1 = require("./ScaleSetting");
+const qualityControlModes = ['crf', 'bitrate'];
+const container = {
+    flex: 1,
+};
+const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setJpegQuality, jpegQuality, maxCrf, minCrf, setCrf, shouldDisplayQualityControlPicker, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, }) => {
+    const pixelFormatOptions = (0, react_1.useMemo)(() => {
+        return client_1.BrowserSafeApis.validPixelFormats.map((option) => {
+            return {
+                label: option,
+                onClick: () => setPixelFormat(option),
+                key: option,
+                id: option,
+                keyHint: null,
+                leftItem: pixelFormat === option ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: option,
+            };
+        });
+    }, [pixelFormat, setPixelFormat]);
+    const qualityControlOptions = (0, react_1.useMemo)(() => {
+        return qualityControlModes.map((option) => {
+            return {
+                label: option === 'crf' ? 'CRF' : 'Bitrate',
+                onClick: () => setQualityControl(option),
+                key: option,
+                selected: qualityControlType === option,
+            };
+        });
+    }, [qualityControlType, setQualityControl]);
+    const onTargetVideoBitrateChanged = (0, react_1.useCallback)((e) => {
+        setCustomTargetVideoBitrateValue(e.target.value);
+    }, [setCustomTargetVideoBitrateValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' && qualityControlType !== null ? ((0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})) : null, shouldDisplayQualityControlPicker && renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, qualityControlType === 'crf' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsx)(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: client_1.BrowserSafeApis.options.crfOption })) : null, qualityControlType === 'bitrate' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Target video bitrate", (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoBitrate }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null, renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, (0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale }), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null] }));
+};
+exports.RenderModalPicture = RenderModalPicture;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const RenderStatusModal: React.FC<{
+    jobId: string;
+}>;