@remotion/cli 3.3.92 → 3.3.94

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

@@ -1,61 +0,0 @@
-"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
-            // TODO: Should be right aligned
-            // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
-            , { 
-                // TODO: Should be right aligned
-                // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
-                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: verbose, onChange: onVerboseLoggingChanged }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disableWebSecurity, onChange: onDisableWebSecurityChanged }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Ignore certificate errors " }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: ignoreCertificateErrors, onChange: onIgnoreCertificatErrors }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Headless mode" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "OpenGL render backend" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
-};
-exports.RenderModalAdvanced = RenderModalAdvanced;

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

@@ -1,17 +0,0 @@
-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

@@ -1,46 +0,0 @@
-"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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: enforceAudioTrack, muted: muted, setMuted: setMuted, hint: client_1.BrowserSafeApis.options.muteOption }), (0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState, option: client_1.BrowserSafeApis.options.enforceAudioOption }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})] })), renderMode === 'still' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Custom audio bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: shouldHaveCustomTargetAudioBitrate, onChange: onShouldHaveTargetAudioBitrateChanged }) })] })), shouldHaveCustomTargetAudioBitrate && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target audio bitrate" }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.audioBitrateOption }) }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetAudioBitrate, onChange: onTargetAudioBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null] }));
-};
-exports.RenderModalAudio = RenderModalAudio;

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

@@ -1,23 +0,0 @@
-import type { Codec, ProResProfile } from '@remotion/renderer';
-import React from 'react';
-import type { AnyComposition } from 'remotion';
-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>>;
-    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

@@ -1,79 +0,0 @@
-"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 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_1 = require("./layout");
-const OptionExplainer_1 = require("./OptionExplainer");
-const RenderModalInput_1 = require("./RenderModalInput");
-const container = {
-    flex: 1,
-};
-const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setVideoCodec: setCodec, proResProfile, setProResProfile, frame, setFrame, currentComposition, setOutName, setEndFrame, endFrame, setStartFrame, startFrame, validationMessage, }) => {
-    const 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_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Codec", (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoCodecOption }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, title: "Codec" }) })] })), renderMode === 'still' && currentComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${currentComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: currentComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: proResProfile, selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: currentComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsx)(RenderModalInput_1.RenderModalInput, { existence: existence, inputStyle: layout_1.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage })] }));
-};
-exports.RenderModalBasic = RenderModalBasic;

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

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

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

@@ -1,249 +0,0 @@
-"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.RenderModalData = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const remotion_1 = require("remotion");
-const colors_1 = require("../../helpers/colors");
-const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
-const client_id_1 = require("../../helpers/client-id");
-const get_zod_if_possible_1 = require("../get-zod-if-possible");
-const layout_1 = require("../layout");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const actions_1 = require("../RenderQueue/actions");
-const SegmentedControl_1 = require("../SegmentedControl");
-const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
-const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
-const date_serialization_1 = require("./SchemaEditor/date-serialization");
-const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
-const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
-const WarningIndicatorButton_1 = require("./WarningIndicatorButton");
-const errorExplanation = {
-    fontSize: 14,
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    lineHeight: 1.5,
-};
-const explainer = {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    padding: '0 12px',
-    justifyContent: 'center',
-    alignItems: 'center',
-    textAlign: 'center',
-};
-const outer = {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    overflow: 'hidden',
-};
-const controlContainer = {
-    flexDirection: 'column',
-    display: 'flex',
-    padding: 12,
-    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
-};
-const tabWrapper = {
-    display: 'flex',
-    marginBottom: '4px',
-    flexDirection: 'row',
-    alignItems: 'center',
-};
-const persistanceKey = 'remotion.show-render-modalwarning';
-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 getPersistedShowWarningState = () => {
-    const val = localStorage.getItem(persistanceKey);
-    if (!val) {
-        return true;
-    }
-    return val === 'true';
-};
-const setPersistedShowWarningState = (val) => {
-    localStorage.setItem(persistanceKey, String(Boolean(val)));
-};
-const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayShowSaveButton, propsEditType, }) => {
-    const [mode, setMode] = (0, react_1.useState)('schema');
-    const [valBeforeSafe, setValBeforeSafe] = (0, react_1.useState)(inputProps);
-    const [saving, setSaving] = (0, react_1.useState)(false);
-    const [showWarning, setShowWarningWithoutPersistance] = (0, react_1.useState)(() => getPersistedShowWarningState());
-    const inJSONEditor = mode === 'json';
-    const serializedJSON = (0, react_1.useMemo)(() => {
-        if (!inJSONEditor) {
-            return null;
-        }
-        const value = inputProps !== null && inputProps !== void 0 ? inputProps : {};
-        return (0, date_serialization_1.serializeJSONWithDate)(value, 2);
-    }, [inJSONEditor, inputProps]);
-    const cliProps = (0, remotion_1.getInputProps)();
-    const [canSaveDefaultProps, setCanSaveDefaultProps] = (0, react_1.useState)({
-        canUpdate: false,
-        reason: 'Loading...',
-        determined: false,
-    });
-    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
-    const schema = (0, react_1.useMemo)(() => {
-        if (!z) {
-            return 'no-zod';
-        }
-        if (!composition.schema) {
-            return z.any();
-        }
-        if (!(typeof composition.schema.safeParse === 'function')) {
-            throw new Error('A value which is not a Zod schema was passed to `schema`');
-        }
-        return composition.schema;
-    }, [composition.schema, z]);
-    const zodValidationResult = (0, react_1.useMemo)(() => {
-        if (schema === 'no-zod') {
-            return 'no-zod';
-        }
-        return schema.safeParse(inputProps);
-    }, [inputProps, schema]);
-    const setShowWarning = (0, react_1.useCallback)((val) => {
-        setShowWarningWithoutPersistance((prevVal) => {
-            if (typeof val === 'boolean') {
-                setPersistedShowWarningState(val);
-                return val;
-            }
-            setPersistedShowWarningState(val(prevVal));
-            return val(prevVal);
-        });
-    }, []);
-    const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
-    const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
-    (0, react_1.useEffect)(() => {
-        (0, actions_1.canUpdateDefaultProps)(composition.id)
-            .then((can) => {
-            if (can.canUpdate) {
-                setCanSaveDefaultProps({
-                    canUpdate: true,
-                });
-            }
-            else {
-                setCanSaveDefaultProps({
-                    canUpdate: false,
-                    reason: can.reason,
-                    determined: true,
-                });
-            }
-        })
-            .catch((err) => {
-            setCanSaveDefaultProps({
-                canUpdate: false,
-                reason: err.message,
-                determined: true,
-            });
-        });
-    }, [composition.id]);
-    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)(() => {
-        setValBeforeSafe(inputProps);
-        (0, actions_1.updateDefaultProps)(composition.id, inputProps);
-    }, [composition.id, inputProps]);
-    (0, react_1.useEffect)(() => {
-        setSaving(false);
-    }, [fastRefreshes]);
-    const onSave = (0, react_1.useCallback)((updater) => {
-        setSaving(true);
-        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps)).catch((err) => {
-            (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
-            setSaving(false);
-        });
-    }, [composition.defaultProps, composition.id]);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
-    const warnings = (0, react_1.useMemo)(() => {
-        return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
-            canSaveDefaultProps,
-            cliProps,
-            isCustomDateUsed: serializedJSON ? serializedJSON.customDateUsed : false,
-            inJSONEditor,
-            propsEditType,
-        });
-    }, [
-        canSaveDefaultProps,
-        cliProps,
-        inJSONEditor,
-        propsEditType,
-        serializedJSON,
-    ]);
-    if (connectionStatus === 'disconnected') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The preview server has disconnected. Reconnect to edit the schema." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
-    }
-    if (schema === 'no-zod') {
-        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.ZodNotInstalled, {});
-    }
-    if (!z) {
-        throw new Error('expected zod');
-    }
-    if (zodValidationResult === 'no-zod') {
-        throw new Error('expected zod');
-    }
-    const def = schema._def;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const typeName = def.typeName;
-    if (typeName === z.ZodFirstPartyTypeKind.ZodAny) {
-        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoSchemaDefined, {});
-    }
-    if (!composition.defaultProps) {
-        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoDefaultProps, {});
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: tabWrapper, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), warnings.length > 0 ? ((0, jsx_runtime_1.jsx)(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
-                        ? warnings.map((warning) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })] }, warning)))
-                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: composition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, parseJSON: parseJSON }))] }));
-};
-exports.RenderModalData = RenderModalData;

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

@@ -1,5 +0,0 @@
-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

@@ -1,55 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-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

@@ -1,19 +0,0 @@
-"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 }) })] }), 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

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

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

@@ -1,18 +0,0 @@
-"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

@@ -1,10 +0,0 @@
-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 {};