@remotion/cli 3.3.41 → 3.3.43

package/dist/render-flows/render.js

@@ -14,6 +14,7 @@ const get_cli_options_1 = require("../get-cli-options");
 const get_composition_with_dimension_override_1 = require("../get-composition-with-dimension-override");
 const get_filename_1 = require("../get-filename");
 const get_final_output_codec_1 = require("../get-final-output-codec");
+const get_render_media_options_1 = require("../get-render-media-options");
 const image_formats_1 = require("../image-formats");
 const log_1 = require("../log");
 const parse_command_line_1 = require("../parse-command-line");
@@ -21,7 +22,7 @@ const progress_bar_1 = require("../progress-bar");
 const setup_cache_1 = require("../setup-cache");
 const truthy_1 = require("../truthy");
 const user_passed_output_location_1 = require("../user-passed-output-location");
-const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable, ffprobeExecutable, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, configFileImageFormat, outputLocationFromUI, quality, onProgress, addCleanupCallback, cancelSignal, crf, uiCodec, uiImageFormat, ffmpegOverride, audioBitrate, muted, enforceAudioTrack, proResProfile, pixelFormat, videoBitrate, numberOfGifLoops, }) => {
+const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable, ffprobeExecutable, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, configFileImageFormat, outputLocationFromUI, quality, onProgress, addCleanupCallback, uiCodec, uiImageFormat, cancelSignal, }) => {
     var _a;
     const downloads = [];
     const downloadMap = renderer_1.RenderInternals.makeDownloadMap();
@@ -100,7 +101,7 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
         outName: (0, user_passed_output_location_1.getUserPassedOutputLocation)(argsAfterComposition),
         uiCodec,
     });
-    await (0, get_cli_options_1.validateFfmpegCanUseCodec)(codec, remotionRoot);
+    (0, get_cli_options_1.validateFfmpegCanUseCodec)(codec, remotionRoot);
     renderer_1.RenderInternals.validateEvenDimensionsWithCodec({
         width: config.width,
         height: config.height,
@@ -111,7 +112,7 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
         codec,
         imageSequence: shouldOutputImageSequence,
         compositionName: compositionId,
-        defaultExtension: renderer_1.RenderInternals.getFileExtensionFromCodec(codec),
+        defaultExtension: renderer_1.RenderInternals.getFileExtensionFromCodec(codec, 'final'),
         args: argsAfterComposition,
         indent,
         fromUi: outputLocationFromUI,
@@ -134,7 +135,6 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
     let encodedDoneIn = null;
     let renderedDoneIn = null;
     let stitchStage = 'encoding';
-    const actualConcurrency = renderer_1.RenderInternals.getActualConcurrency(concurrency);
     const updateRenderProgress = () => {
         if (totalFrames.length === 0) {
             throw new Error('totalFrames should not be 0');
@@ -143,7 +143,7 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
             rendering: {
                 frames: renderedFrames,
                 totalFrames: totalFrames.length,
-                concurrency: actualConcurrency,
+                concurrency: renderer_1.RenderInternals.getActualConcurrency(concurrency),
                 doneIn: renderedDoneIn,
                 steps,
             },
@@ -202,7 +202,7 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
             everyNthFrame,
             envVariables,
             frameRange,
-            concurrency: actualConcurrency,
+            concurrency,
             puppeteerInstance,
             quality,
             timeoutInMilliseconds: puppeteerTimeout,
@@ -215,43 +215,17 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
             downloadMap,
         });
         updateRenderProgress();
-        process.stdout.write('\n');
         log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.cyan(`▶ ${absoluteOutputFile}`));
     }
-    await (0, renderer_1.renderMedia)({
+    const options = await (0, get_render_media_options_1.getRenderMediaOptions)({
+        config,
         outputLocation: absoluteOutputFile,
-        composition: {
-            ...config,
-            width: width !== null && width !== void 0 ? width : config.width,
-            height: height !== null && height !== void 0 ? height : config.height,
-        },
-        crf,
-        envVariables,
-        ffmpegExecutable,
-        ffprobeExecutable,
-        frameRange,
-        inputProps,
-        overwrite,
-        pixelFormat,
-        proResProfile,
-        quality,
-        dumpBrowserLogs: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
-        chromiumOptions,
-        timeoutInMilliseconds: config_1.ConfigInternals.getCurrentPuppeteerTimeout(),
-        scale,
-        port,
-        numberOfGifLoops,
-        everyNthFrame,
-        verbose: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
-        muted,
-        enforceAudioTrack,
-        browserExecutable,
-        ffmpegOverride,
-        concurrency,
         serveUrl: urlOrBundle,
         codec,
-        audioBitrate,
-        videoBitrate,
+        remotionRoot,
+    });
+    await (0, renderer_1.renderMedia)({
+        ...options,
         onProgress: (update) => {
             encodedDoneIn = update.encodedDoneIn;
             encodedFrames = update.encodedFrames;
@@ -273,8 +247,7 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
         },
         printLog: (...str) => log_1.Log.verboseAdvanced({ indent, logLevel }, ...str),
     });
-    updateRenderProgress();
-    process.stdout.write('\n');
+    log_1.Log.infoAdvanced({ indent, logLevel });
     log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.cyan(`▶ ${absoluteOutputFile}`));
     for (const line of renderer_1.RenderInternals.perf.getPerf()) {
         log_1.Log.verboseAdvanced({ indent, logLevel }, line);

package/dist/render.js

@@ -13,6 +13,7 @@ const remotion_1 = require("remotion");
 const chalk_1 = require("./chalk");
 const config_1 = require("./config");
 const entry_point_1 = require("./entry-point");
+const get_audio_codec_1 = require("./get-audio-codec");
 const get_cli_options_1 = require("./get-cli-options");
 const get_composition_with_dimension_override_1 = require("./get-composition-with-dimension-override");
 const get_filename_1 = require("./get-filename");
@@ -112,11 +113,11 @@ const render = async (remotionRoot, args) => {
         codec,
         scale,
     });
+    const audioCodec = (0, get_audio_codec_1.getResolvedAudioCodec)();
     const relativeOutputLocation = (0, get_filename_1.getOutputFilename)({
-        codec,
         imageSequence: shouldOutputImageSequence,
         compositionName: compositionId,
-        defaultExtension: renderer_1.RenderInternals.getFileExtensionFromCodec(codec),
+        defaultExtension: renderer_1.RenderInternals.getFileExtensionFromCodec(codec, audioCodec),
         args: argsAfterComposition,
     });
     log_1.Log.info(chalk_1.chalk.gray(`Entry point = ${path_1.default.relative(process.cwd(), file)} (${entryPointReason}), Composition = ${compositionId} (${reason}), Codec = ${codec} (${codecReason}), Output = ${relativeOutputLocation}`));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.3.41",
+	"version": "3.3.43",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -22,16 +22,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.3.41",
-		"@remotion/media-utils": "3.3.41",
-		"@remotion/player": "3.3.41",
-		"@remotion/renderer": "3.3.41",
+		"@remotion/bundler": "3.3.43",
+		"@remotion/media-utils": "3.3.43",
+		"@remotion/player": "3.3.43",
+		"@remotion/renderer": "3.3.43",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
 		"prompts": "2.4.1",
-		"remotion": "3.3.41",
+		"remotion": "3.3.43",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8e408247d151ac824864acf357782f10c89ed5f5"
+	"gitHead": "3585e437a30ba001e983539728eb1914172b729c"
 }

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const EveryNthFrameSetting: React.FC<{
-    everyNthFrame: number;
-    setEveryNthFrameSetting: React.Dispatch<React.SetStateAction<number>>;
-}>;

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

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EveryNthFrameSetting = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const NumberSetting_1 = require("./NumberSetting");
-const EveryNthFrameSetting = ({ everyNthFrame, setEveryNthFrameSetting }) => {
-    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { name: "Every nth frame", min: 1, onValueChanged: setEveryNthFrameSetting, value: everyNthFrame }));
-};
-exports.EveryNthFrameSetting = EveryNthFrameSetting;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const NumberOfLoopsSetting: React.FC<{
-    numberOfGifLoops: number;
-    setNumberOfGifLoops: React.Dispatch<React.SetStateAction<number>>;
-}>;

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

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NumberOfLoopsSetting = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const InputDragger_1 = require("../NewComposition/InputDragger");
-const RemInput_1 = require("../NewComposition/RemInput");
-const layout_1 = require("./layout");
-const min = 0;
-const NumberOfLoopsSetting = ({ numberOfGifLoops, setNumberOfGifLoops }) => {
-    const onNumberOfGifLoopsChangedDirectly = (0, react_1.useCallback)((newConcurrency) => {
-        setNumberOfGifLoops(newConcurrency);
-    }, [setNumberOfGifLoops]);
-    const onNumberOfGifLoopsChanged = (0, react_1.useCallback)((e) => {
-        setNumberOfGifLoops((q) => {
-            const newConcurrency = parseInt(e, 10);
-            if (Number.isNaN(newConcurrency)) {
-                return q;
-            }
-            const newConcurrencyClamped = Math.max(newConcurrency, min);
-            return newConcurrencyClamped;
-        });
-    }, [setNumberOfGifLoops]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Number of loops" }), (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: numberOfGifLoops, onTextChange: onNumberOfGifLoopsChanged, placeholder: `${min}-`, onValueChange: onNumberOfGifLoopsChangedDirectly, name: "number-of-gif-loops", step: 1, min: min }) }) })] }));
-};
-exports.NumberOfLoopsSetting = NumberOfLoopsSetting;

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

@@ -1,9 +0,0 @@
-import React from 'react';
-export declare const NumberSetting: React.FC<{
-    name: string;
-    value: number;
-    onValueChanged: React.Dispatch<React.SetStateAction<number>>;
-    max?: number;
-    min: number;
-    step: number;
-}>;

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

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NumberSetting = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const InputDragger_1 = require("../NewComposition/InputDragger");
-const RemInput_1 = require("../NewComposition/RemInput");
-const layout_1 = require("./layout");
-const NumberSetting = ({ name, value, step, onValueChanged, max, min }) => {
-    const onTextChanged = (0, react_1.useCallback)((e) => {
-        onValueChanged((q) => {
-            const newSetting = parseInt(e, 10);
-            if (Number.isNaN(newSetting)) {
-                return q;
-            }
-            return Math.min(max !== null && max !== void 0 ? max : Infinity, Math.max(newSetting, min));
-        });
-    }, [max, min, onValueChanged]);
-    const onValueChange = (0, react_1.useCallback)((newConcurrency) => {
-        onValueChanged(newConcurrency);
-    }, [onValueChanged]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: name }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: value, name: name.toLowerCase(), onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
-                            .map((f) => (f !== null && f !== undefined ? f : ''))
-                            .join('-'), min: min, max: max }) }) })] }));
-};
-exports.NumberSetting = NumberSetting;

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

@@ -1,11 +0,0 @@
-import React from 'react';
-export declare type RenderType = 'still' | 'video' | 'audio';
-export declare const RenderModalAdvanced: React.FC<{
-    renderMode: RenderType;
-    minConcurrency: number;
-    maxConcurrency: number;
-    setConcurrency: React.Dispatch<React.SetStateAction<number>>;
-    concurrency: number;
-    setVerboseLogging: React.Dispatch<React.SetStateAction<boolean>>;
-    verbose: boolean;
-}>;

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

@@ -1,15 +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 Checkbox_1 = require("../Checkbox");
-const layout_1 = require("./layout");
-const NumberSetting_1 = require("./NumberSetting");
-const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, }) => {
-    const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
-        setVerboseLogging(e.target.checked);
-    }, [setVerboseLogging]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", onValueChanged: setConcurrency, value: concurrency })), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: verbose, onChange: onVerboseLoggingChanged }) })] })] }));
-};
-exports.RenderModalAdvanced = RenderModalAdvanced;

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

@@ -1,13 +0,0 @@
-/// <reference types="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;
-}>;

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

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderModalAudio = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Checkbox_1 = require("../Checkbox");
-const RemInput_1 = require("../NewComposition/RemInput");
-const EnforceAudioTrackSetting_1 = require("./EnforceAudioTrackSetting");
-const layout_1 = require("./layout");
-const MutedSetting_1 = require("./MutedSetting");
-const RenderModalHr_1 = require("./RenderModalHr");
-const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setEnforceAudioTrackState, setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate, setCustomTargetAudioBitrateValue, customTargetAudioBitrate, }) => {
-    const onShouldHaveTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
-        setShouldHaveCustomTargetAudioBitrate(e.target.checked);
-    }, [setShouldHaveCustomTargetAudioBitrate]);
-    // TODO: When rendering, mp3 does not support the "crf" option. Ignoring.
-    const onTargetAudioBitrateChanged = (0, react_1.useCallback)((e) => {
-        setCustomTargetAudioBitrateValue(e.target.value);
-    }, [setCustomTargetAudioBitrateValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'video' && ((0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { muted: muted, setMuted: setMuted })), renderMode === 'video' && ((0, jsx_runtime_1.jsx)(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { 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] }));
-};
-exports.RenderModalAudio = RenderModalAudio;

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

@@ -1,22 +0,0 @@
-import type { Codec, ProResProfile } from '@remotion/renderer';
-import React from 'react';
-import type { TComposition } from 'remotion';
-import type { SegmentedControlItem } from '../SegmentedControl';
-import type { RenderType } from './RenderModalAdvanced';
-export declare const RenderModalBasic: React.FC<{
-    renderMode: RenderType;
-    imageFormatOptions: SegmentedControlItem[];
-    codec: Codec;
-    setCodec: (newCodec: Codec) => void;
-    outName: string;
-    proResProfile: ProResProfile | null;
-    setProResProfile: React.Dispatch<React.SetStateAction<ProResProfile>>;
-    frame: number;
-    setFrame: React.Dispatch<React.SetStateAction<number>>;
-    currentComposition: TComposition<unknown>;
-    setOutName: (value: React.SetStateAction<string>) => void;
-    setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
-    startFrame: number;
-    endFrame: number;
-    setStartFrame: React.Dispatch<React.SetStateAction<number | null>>;
-}>;

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

@@ -1,70 +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 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 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 layout_1 = require("./layout");
-const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setCodec, proResProfile, setProResProfile, frame, setFrame, currentComposition, setOutName, setEndFrame, endFrame, setStartFrame, startFrame, }) => {
-    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: option,
-                onClick: () => setProResProfile(option),
-                key: option,
-                selected: proResProfile === 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", { 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)(SegmentedControl_1.SegmentedControl, { items: proResProfileOptions, needsWrapping: true }) })] })) : 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] }) })] })] }));
-};
-exports.RenderModalBasic = RenderModalBasic;

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

@@ -1 +0,0 @@
-"use strict";

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,16 +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 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", { 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/RenderModalPicture.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-import type { PixelFormat, StillImageFormat } from '@remotion/renderer';
-import type { SegmentedControlItem } from '../SegmentedControl';
-import type { RenderType } from './RenderModalAdvanced';
-declare const qualityControlModes: readonly ["crf", "bitrate"];
-export declare 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;
-    videoImageFormat: StillImageFormat;
-    stillImageFormat: StillImageFormat;
-    setQuality: React.Dispatch<React.SetStateAction<number>>;
-    quality: number;
-    maxCrf: number;
-    minCrf: number;
-    setCrf: React.Dispatch<React.SetStateAction<number>>;
-    shouldDisplayCrfOption: boolean;
-    setCustomTargetVideoBitrateValue: React.Dispatch<React.SetStateAction<string>>;
-    crf: number;
-    customTargetVideoBitrate: string;
-}>;
-export {};

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

@@ -1,51 +0,0 @@
-"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 layout_1 = require("./layout");
-const NumberSetting_1 = require("./NumberSetting");
-const QualitySetting_1 = require("./QualitySetting");
-const RenderModalHr_1 = require("./RenderModalHr");
-const ScaleSetting_1 = require("./ScaleSetting");
-const qualityControlModes = ['crf', 'bitrate'];
-const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setQuality, quality, maxCrf, minCrf, setCrf, shouldDisplayCrfOption, 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", { 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)(QualitySetting_1.QualitySetting, { setQuality: setQuality, quality: quality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(QualitySetting_1.QualitySetting, { setQuality: setQuality, quality: quality })), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), 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, shouldDisplayCrfOption &&
-                qualityControlType === 'crf' &&
-                renderMode !== 'still' ? ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minCrf, max: maxCrf, name: "CRF", onValueChanged: setCrf, value: crf, step: 1 })) : null, qualityControlType === 'bitrate' && 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 video 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: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged }) }) })] })) : null, (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), renderMode === 'video' ? ((0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale })) : null, (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), 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/human-readable-codec.d.ts

@@ -1,2 +0,0 @@
-import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 MKV" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

package/dist/editor/components/RenderModal/human-readable-codec.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.humanReadableCodec = void 0;
-const humanReadableCodec = (codec) => {
-    if (codec === 'aac') {
-        return 'AAC';
-    }
-    if (codec === 'mp3') {
-        return 'MP3';
-    }
-    if (codec === 'gif') {
-        return 'GIF';
-    }
-    if (codec === 'h264') {
-        return 'H.264';
-    }
-    if (codec === 'h264-mkv') {
-        return 'H.264 MKV';
-    }
-    if (codec === 'h265') {
-        return 'H.265';
-    }
-    if (codec === 'prores') {
-        return 'ProRes';
-    }
-    if (codec === 'vp8') {
-        return 'WebM VP8';
-    }
-    if (codec === 'vp9') {
-        return 'WebM VP9';
-    }
-    if (codec === 'wav') {
-        return 'Waveform';
-    }
-};
-exports.humanReadableCodec = humanReadableCodec;

package/dist/editor/icons/audio.d.ts

@@ -1,2 +0,0 @@
-import type { SVGProps } from 'react';
-export declare const AudioIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/audio.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const AudioIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M243 32.32C105.5 39.15 0 157.8 0 295.5v120.4C0 451.3 28.63 480 64 480h32c17.62 0 32-14.38 32-32V288c0-17.62-14.38-32-32-32H64c-10.79 0-20.8 2.9-29.72 7.7 14.2-106.8 100.5-193.9 210.4-199.4 120.5-5.965 221.7 83.92 234 199.9-9.08-5.1-19.48-8.2-30.68-8.2h-32c-17.62 0-32 14.38-32 32v160c0 17.62 14.38 32 32 32h32c35.38 0 64-28.75 64-64.13V287.9c0-145.4-122-262.88-269-255.58zM64 288h32v160H64c-17.62 0-32-14.5-32-32.13v-95.75C32 302.5 46.38 288 64 288zm416 127.9c0 17.6-14.4 32.1-32 32.1h-32V288h32c17.62 0 32 14.5 32 32.13v95.77z" }) }));
-exports.AudioIcon = AudioIcon;