@remotion/cli 3.3.36 → 3.3.37

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

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

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

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

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,16 @@
+"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

@@ -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/RenderModalPicture.d.ts

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

@@ -0,0 +1,51 @@
+"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/ScaleSetting.js

@@ -2,26 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScaleSetting = 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_1 = require("./NumberSetting");
 const MIN_SCALE = 0.1;
 const MAX_SCALE = 10;
 const ScaleSetting = ({ scale, setScale }) => {
-    const onScaleSetDirectly = (0, react_1.useCallback)((newScale) => {
-        setScale(newScale);
-    }, [setScale]);
-    const onScaleChanged = (0, react_1.useCallback)((e) => {
-        setScale((q) => {
-            const newScale = parseFloat(e);
-            if (Number.isNaN(newScale)) {
-                return q;
-            }
-            const newScaleClamped = Math.min(MAX_SCALE, Math.max(newScale, MIN_SCALE));
-            return newScaleClamped;
-        });
-    }, [setScale]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Scale" }), (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: scale, onTextChange: onScaleChanged, placeholder: `${MIN_SCALE}-${MAX_SCALE}`, onValueChange: onScaleSetDirectly, name: "scale", step: 0.1, min: MIN_SCALE, max: MAX_SCALE }) }) })] }));
+    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: MIN_SCALE, max: MAX_SCALE, step: 0.1, name: "Scale", onValueChanged: setScale, value: scale }));
 };
 exports.ScaleSetting = ScaleSetting;

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

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

@@ -0,0 +1,36 @@
+"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/components/RenderModal/layout.d.ts

@@ -2,3 +2,4 @@
 export declare const optionRow: React.CSSProperties;
 export declare const label: React.CSSProperties;
 export declare const rightRow: React.CSSProperties;
+export declare const input: React.CSSProperties;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.rightRow = exports.label = exports.optionRow = void 0;
+exports.input = exports.rightRow = exports.label = exports.optionRow = void 0;
 const colors_1 = require("../../helpers/colors");
 exports.optionRow = {
     display: 'flex',
@@ -9,10 +9,12 @@ exports.optionRow = {
     minHeight: 40,
     paddingLeft: 16,
     paddingRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
 };
 exports.label = {
     width: 150,
-    fontSize: 14,
+    fontSize: 15,
     lineHeight: '40px',
     color: colors_1.LIGHT_TEXT,
 };
@@ -23,3 +25,7 @@ exports.rightRow = {
     alignSelf: 'center',
     flex: 1,
 };
+exports.input = {
+    minWidth: 250,
+    textAlign: 'right',
+};

package/dist/editor/components/RenderQueue/RenderQueueRemoveItem.js

@@ -4,11 +4,12 @@ exports.RenderQueueRemoveItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InlineAction_1 = require("../InlineAction");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
 const RenderQueueRemoveItem = ({ job }) => {
     const onClick = (0, react_1.useCallback)(() => {
         (0, actions_1.removeRenderJob)(job).catch((err) => {
-            // TODO: Handle error
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not remove item: ${err.message}`);
             console.log(err);
         });
     }, [job]);

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -1,4 +1,4 @@
-import type { Codec, StillImageFormat } from '@remotion/renderer';
+import type { Codec, PixelFormat, ProResProfile, StillImageFormat } from '@remotion/renderer';
 import type { ApiRoutes } from '../../../preview-server/api-types';
 import type { RenderJob } from '../../../preview-server/render-queue/job';
 export declare const callApi: <Endpoint extends keyof ApiRoutes>(endpoint: Endpoint, body: ApiRoutes[Endpoint]["Request"]) => Promise<ApiRoutes[Endpoint]["Response"]>;
@@ -11,7 +11,7 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     scale: number;
     verbose: boolean;
 }) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, }: {
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, }: {
     compositionId: string;
     outName: string;
     imageFormat: StillImageFormat;
@@ -19,6 +19,19 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     scale: number;
     verbose: boolean;
     codec: Codec;
+    concurrency: number;
+    crf: number | null;
+    startFrame: number;
+    endFrame: number;
+    muted: boolean;
+    enforceAudioTrack: boolean;
+    proResProfile: ProResProfile | null;
+    pixelFormat: PixelFormat;
+    audioBitrate: string | null;
+    videoBitrate: string | null;
+    everyNthFrame: number;
+    numberOfGifLoops: number | null;
+    delayRenderTimeout: number;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;

package/dist/editor/components/RenderQueue/actions.js

@@ -38,7 +38,7 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, quality, frame
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
-const addVideoRenderJob = ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, }) => {
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, }) => {
     return (0, exports.callApi)('/api/render', {
         compositionId,
         type: 'video',
@@ -48,6 +48,19 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, quality, scale
         scale,
         verbose,
         codec,
+        concurrency,
+        crf,
+        endFrame,
+        startFrame,
+        muted,
+        enforceAudioTrack,
+        proResProfile,
+        pixelFormat,
+        audioBitrate,
+        videoBitrate,
+        everyNthFrame,
+        numberOfGifLoops,
+        delayRenderTimeout,
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;

package/dist/editor/components/RenderToolbarIcon.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_default_out_name_1 = require("../../get-default-out-name");
+const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
 const client_id_1 = require("../helpers/client-id");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
@@ -25,27 +26,48 @@ const RenderStillButton = () => {
     const video = remotion_1.Internals.useVideo();
     const frame = (0, remotion_1.useCurrentFrame)();
     const onClick = (0, react_1.useCallback)(() => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b;
         if (!video) {
             return null;
         }
         const isVideo = video.durationInFrames > 1;
+        const defaults = window.remotion_renderDefaults;
+        if (!defaults) {
+            throw new TypeError('Expected defaults');
+        }
+        const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
+            defaultCodec: defaults.codec,
+            isStill: !isVideo,
+        });
         setSelectedModal({
             type: 'render',
             compositionId: video.id,
             initialFrame: frame,
-            initialImageFormat: isVideo ? 'jpeg' : 'png',
+            initialStillImageFormat: defaults.stillImageFormat,
+            initialVideoImageFormat: defaults.videoImageFormat,
             initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
                 compositionName: video.id,
                 defaultExtension: isVideo ? 'mp4' : 'png',
                 type: 'asset',
             }),
-            // TODO: Determine defaults from config file
-            initialQuality: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.quality) !== null && _b !== void 0 ? _b : 80,
-            initialScale: (_d = (_c = window.remotion_renderDefaults) === null || _c === void 0 ? void 0 : _c.scale) !== null && _d !== void 0 ? _d : 1,
-            initialVerbose: ((_e = window.remotion_renderDefaults) === null || _e === void 0 ? void 0 : _e.logLevel) === 'verbose',
-            initialRenderType: isVideo ? 'video' : 'still',
-            initialCodec: 'h264',
+            initialQuality: defaults.quality,
+            initialScale: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1,
+            initialVerbose: defaults.logLevel === 'verbose',
+            initialAudioCodec,
+            initialRenderType,
+            initialVideoCodec,
+            initialConcurrency: defaults.concurrency,
+            maxConcurrency: defaults.maxConcurrency,
+            minConcurrency: defaults.minConcurrency,
+            initialMuted: defaults.muted,
+            initialEnforceAudioTrack: defaults.enforceAudioTrack,
+            initialProResProfile: defaults.proResProfile,
+            initialPixelFormat: defaults.pixelFormat,
+            initialAudioBitrate: defaults.audioBitrate,
+            initialVideoBitrate: defaults.videoBitrate,
+            initialEveryNthFrame: defaults.everyNthFrame,
+            initialNumberOfGifLoops: defaults.numberOfGifLoops,
+            initialDelayRenderTimeout: defaults.delayRenderTimeout,
         });
     }, [video, frame, setSelectedModal]);
     if (!video) {

package/dist/editor/components/SegmentedControl.js

@@ -16,7 +16,7 @@ const container = {
 };
 const item = {
     display: 'flex',
-    fontSize: 13,
+    fontSize: 15,
     padding: '4px 12px',
     cursor: 'pointer',
     appearance: 'none',

package/dist/editor/components/SidebarContent.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const CompositionSelector_1 = require("./CompositionSelector");
+const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
 const RenderQueue_1 = require("./RenderQueue");
 const context_1 = require("./RenderQueue/context");
 const RendersTab_1 = require("./RendersTab");
@@ -46,6 +47,6 @@ const SidebarContent = () => {
             },
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [shouldRender ? ((0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) })) : null, panel === 'renders' && shouldRender ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [shouldRender ? ((0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) })) : null, panel === 'renders' && shouldRender ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {})), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.SidebarContent = SidebarContent;

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

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

package/dist/editor/icons/audio.js

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

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

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

package/dist/editor/icons/file.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FileIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M0 64C0 28.65 28.65 0 64 0h156.1c12.7 0 25 5.057 34 14.06L369.9 129.9c9 9 14.1 21.3 14.1 34V448c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V64zm352 128H240c-26.5 0-48-21.5-48-48V32H64c-17.67 0-32 14.33-32 32v384c0 17.7 14.33 32 32 32h256c17.7 0 32-14.3 32-32V192zm-4.7-39.4L231.4 36.69c-2-2.07-4.6-3.51-7.4-4.21V144c0 8.8 7.2 16 16 16h111.5c-.7-2.8-2.1-5.4-4.2-7.4z" }) }));
+exports.FileIcon = FileIcon;

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

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

package/dist/editor/icons/frame.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PicIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PicIcon = (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: "M324.9 157.8c-11.38-17.38-39.89-17.31-51.23-.063L200.5 268.5l-16.4-22.6c-11.4-16.8-38.2-16-49.7 0l-64.52 89.16c-6.797 9.406-7.75 21.72-2.547 32C72.53 377.5 83.05 384 94.75 384h322.5c11.41 0 21.8-6.281 27.14-16.38a30.922 30.922 0 0 0-1.516-31.56L324.9 157.8zM95.8 352l62.39-87.38 29.91 41.34c3.1 4.24 8.3 7.24 13.3 6.64 5.25-.125 10.12-2.781 13.02-7.188l83.83-129.9L415 352H95.8zM447.1 32h-384C28.65 32-.01 60.65-.01 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96c.01-35.35-27.79-64-63.99-64zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h384c17.64 0 32 14.36 32 32v320zM144 192c26.5 0 48-21.5 48-48s-21.5-48-48-48-48 21.5-48 48 21.5 48 48 48zm0-64c8.822 0 15.1 7.178 15.1 16s-6.3 16-15.1 16-16-7.2-16-16 7.2-16 16-16z" }) }));
+exports.PicIcon = PicIcon;

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

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

package/dist/editor/icons/gear.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GearIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const GearIcon = (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: "M168 255.1c0-47.7 39.4-88 88-88s88 40.3 88 88c0 49.5-39.4 88.9-88 88.9s-88-39.4-88-88.9zm88-56c-30.9 0-56 26-56 56 0 31.8 25.1 56 56 56s56-24.2 56-56c0-30-25.1-56-56-56zM65.67 230.6l-40.33-36.8c-11.12-10.1-13.68-26.6-6.16-39.6l30.24-52.4c7.52-13.02 23.09-19.05 37.42-14.48l51.96 16.58c13.4-10.34 28.2-18.94 44-25.47l11.7-53.27C197.7 10.47 210.7 0 225.8 0h60.4c15.1 0 28.1 10.47 31.3 25.16l11.7 53.27c14.9 6.53 30.6 15.13 44 25.47l52-16.58c14.3-4.57 29.9 1.46 37.4 14.48l30.2 52.4c7.5 13 5 29.5-6.1 39.6l-40.4 36.8c1.1 8.3 1.7 16.8 1.7 24.5 0 9.5-.6 18-1.7 26.3l40.4 36.8c11.1 10.1 13.6 26.6 6.1 39.6l-30.2 52.4c-7.5 13-23.1 19-37.4 14.5l-52-16.6c-13.4 10.3-29.1 18.9-44 25.5l-11.7 53.2c-3.2 14.7-16.2 25.2-31.3 25.2h-60.4c-15.1 0-28.1-10.5-31.3-25.2l-11.7-53.2c-15.8-6.6-30.6-15.2-44-25.5l-51.96 16.6c-14.33 4.5-29.9-1.5-37.42-14.5l-30.24-52.4c-7.52-13-4.96-29.5 6.16-39.6l40.33-36.8c-1.1-8.3-1.67-16.8-1.67-26.3 0-7.7.57-16.2 1.67-24.5zm92.73-101.4-13.3 10.3-67.97-21.7-30.24 52.4 52.69 48-2.19 16.6c-.92 6.9-1.39 14-1.39 20.3 0 8.1.47 15.2 1.39 22.1l2.19 16.6-52.69 48 30.24 52.4 67.97-21.7 13.3 10.3c11.1 8.6 23.5 15.8 36.6 20.3l15.5 7.3 15.3 69.6h60.4l15.3-69.6 14.6-7.3c14-4.5 26.4-11.7 37.5-20.3l13.3-10.3 68 21.7 30.2-52.4-52.7-48 2.2-16.6c.9-6.9 1.4-14 1.4-21.2 0-7.2-.5-14.3-1.4-21.2l-2.2-16.6 52.7-48-30.2-52.4-68 21.7-13.3-10.3c-11.1-8.6-23.5-15.8-37.5-21.2l-14.6-6.4L286.2 32h-60.4l-15.3 69.6L195 108c-13.1 5.4-25.5 12.6-36.6 21.2z" }) }));
+exports.GearIcon = GearIcon;

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

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

package/dist/editor/icons/gif.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GifIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const GifIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M512 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h448c35.35 0 64-28.65 64-64V96c0-35.35-28.7-64-64-64zm32 384c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h448c17.64 0 32 14.36 32 32v320zm-80-256h-96c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16v-64h56c8.844 0 16-7.156 16-16s-7.156-16-16-16h-56v-48h80c8.8 0 16-7.2 16-16s-7.2-16-16-16zm-160 0c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16V176c0-8.8-7.2-16-16-16zm-64 80h-64c-8.8 0-16 7.2-16 16s7.156 16 16 16h48v33.45c-24.83 19.91-69.13 18.16-91.48-4.203-24.95-24.95-24.95-65.55 0-90.5 25.03-25 64.19-25 89.22 0 6.25 6.25 16.38 6.25 22.62 0s6.25-16.38 0-22.62c-37.69-37.72-96.78-37.72-134.5 0-37.42 37.42-37.42 98.33 0 135.8C127.8 341.8 153.5 352 180.6 352c27.06 0 52.84-10.25 70.7-28.12 3-2.98 4.7-7.08 4.7-11.28V256c0-8.8-7.2-16-16-16z" }) }));
+exports.GifIcon = GifIcon;

package/dist/get-cli-options.d.ts

@@ -30,7 +30,7 @@ export declare const getCliOptions: (options: {
     browserExecutable: BrowserExecutable;
     ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
     ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-    logLevel: "error" | "verbose" | "info" | "warn";
+    logLevel: "verbose" | "error" | "info" | "warn";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/index.d.ts

@@ -88,7 +88,7 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
         ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "error" | "info" | "warn";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;

package/dist/preview-server/render-queue/get-default-video-contexts.d.ts

@@ -1,5 +1,5 @@
 import type { Codec } from '@remotion/renderer';
-import type { RenderType } from '../../editor/components/RenderModal/RenderModal';
+import type { RenderType } from '../../editor/components/RenderModal/RenderModalAdvanced';
 export declare const getDefaultCodecs: ({ defaultCodec, isStill, }: {
     defaultCodec: Codec;
     isStill: boolean;