@remotion/cli 3.3.36 → 3.3.37

package/dist/config/log.d.ts

@@ -1,3 +1,3 @@
 import type { LogLevel } from '@remotion/renderer';
-export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn";
+export declare const getLogLevel: () => "verbose" | "error" | "info" | "warn";
 export declare const setLogLevel: (newLogLevel: LogLevel) => void;

package/dist/editor/components/Modals.js

@@ -16,7 +16,7 @@ const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = () => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type === 'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialImageFormat: modalContextType.initialImageFormat, initialQuality: modalContextType.initialQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialCodec: modalContextType.initialCodec })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialQuality: modalContextType.initialQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialAudioCodec: modalContextType.initialAudioCodec, initialVideoCodec: modalContextType.initialVideoCodec, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-error' && ((0, jsx_runtime_1.jsx)(RenderErrorModal_1.RenderErrorModal, { job: modalContextType.job })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

package/dist/editor/components/NewComposition/ComboBox.js

@@ -33,6 +33,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
+    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
     const onHide = (0, react_1.useCallback)(() => {
         setOpened(false);
     }, []);
@@ -45,7 +46,12 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         const onMouseLeave = () => setIsHovered(false);
         const onClick = (e) => {
             e.stopPropagation();
-            return setOpened((o) => !o);
+            return setOpened((o) => {
+                if (!o) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                }
+                return !o;
+            });
         };
         current.addEventListener('mouseenter', onMouseEnter);
         current.addEventListener('mouseleave', onMouseLeave);
@@ -55,7 +61,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
             current.removeEventListener('mouseleave', onMouseLeave);
             current.removeEventListener('click', onClick);
         };
-    }, []);
+    }, [refresh]);
     const portalStyle = (0, react_1.useMemo)(() => {
         if (!opened || !size) {
             return null;

package/dist/editor/components/NewComposition/InputDragger.js

@@ -25,6 +25,7 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, onTextChan
         cursor: 'ew-resize',
         userSelect: 'none',
         fontSize: 13,
+        fontVariantNumeric: 'tabular-nums',
     }), []);
     const onClick = (0, react_1.useCallback)((e) => {
         if (!(0, input_dragger_click_lock_1.getClickLock)()) {

package/dist/editor/components/RenderButton.js

@@ -4,6 +4,7 @@ exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 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 render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
 const InlineAction_1 = require("./InlineAction");
@@ -18,24 +19,44 @@ const RenderButton = ({ composition, visible }) => {
     }, []);
     const isVideo = composition.durationInFrames > 1;
     const onClick = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d, _e;
+        const defaults = window.remotion_renderDefaults;
+        if (!defaults) {
+            throw new Error('expected defaults');
+        }
         e.stopPropagation();
+        const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
+            defaultCodec: defaults.codec,
+            isStill: !isVideo,
+        });
         setSelectedModal({
             type: 'render',
             compositionId: composition.id,
             initialFrame: 0,
-            initialImageFormat: isVideo ? 'jpeg' : 'png',
-            // 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',
+            initialVideoImageFormat: defaults.videoImageFormat,
+            initialStillImageFormat: defaults.stillImageFormat,
+            initialQuality: defaults.quality,
+            initialScale: defaults.scale,
+            initialVerbose: defaults.logLevel === 'verbose',
             initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
                 compositionName: composition.id,
                 defaultExtension: isVideo ? 'mp4' : 'png',
                 type: 'asset',
             }),
-            initialRenderType: isVideo ? 'video' : 'still',
-            initialCodec: 'h264',
+            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,
         });
     }, [composition.id, isVideo, setSelectedModal]);
     if (!visible) {

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

@@ -2,14 +2,14 @@
 import type { Codec } from '@remotion/renderer';
 export declare const useCrfState: (codec: Codec) => {
     crf: number;
-    setCrf: (updater: (prev: number) => number) => void;
+    setCrf: import("react").Dispatch<import("react").SetStateAction<number>>;
     minCrf: number;
     maxCrf: number;
     shouldDisplayOption: boolean;
 };
 export declare const CrfSetting: React.FC<{
     crf: number;
-    setCrf: (value: (prevVal: number) => number) => void;
+    setCrf: React.Dispatch<React.SetStateAction<number>>;
     min: number;
     max: number;
 }>;

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

@@ -4,9 +4,7 @@ exports.CrfSetting = exports.useCrfState = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@remotion/renderer/client");
 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 getDefaultCrfState = () => {
     return client_1.BrowserSafeApis.validCodecs
         .map((c) => {
@@ -22,16 +20,17 @@ const getDefaultCrfState = () => {
 const useCrfState = (codec) => {
     const [state, setState] = (0, react_1.useState)(() => getDefaultCrfState());
     const range = client_1.BrowserSafeApis.getValidCrfRanges(codec);
+    const setCrf = (updater) => {
+        setState((q) => {
+            return {
+                ...q,
+                [codec]: typeof updater === 'number' ? updater : updater(q[codec]),
+            };
+        });
+    };
     return {
         crf: state[codec],
-        setCrf: (updater) => {
-            setState((q) => {
-                return {
-                    ...q,
-                    [codec]: updater(q[codec]),
-                };
-            });
-        },
+        setCrf,
         minCrf: range[0],
         maxCrf: range[1],
         shouldDisplayOption: range[0] !== range[1],
@@ -39,18 +38,6 @@ const useCrfState = (codec) => {
 };
 exports.useCrfState = useCrfState;
 const CrfSetting = ({ crf, setCrf, min, max }) => {
-    const onCrfSetDirectly = (0, react_1.useCallback)((newCrf) => {
-        setCrf(() => newCrf);
-    }, [setCrf]);
-    const onCrfChanged = (0, react_1.useCallback)((e) => {
-        setCrf((q) => {
-            const newCrf = parseFloat(e);
-            if (Number.isNaN(newCrf)) {
-                return q;
-            }
-            return Math.min(max, Math.max(newCrf, min));
-        });
-    }, [max, min, setCrf]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "CRF" }), (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: crf, onTextChange: onCrfChanged, placeholder: `${min}-${max}`, onValueChange: onCrfSetDirectly, name: "crf", step: 1, min: min, max: max }) }) })] }));
+    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: min, max: max, name: "CRF", onValueChanged: setCrf, value: crf, step: 1 }));
 };
 exports.CrfSetting = CrfSetting;

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

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

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

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

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

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

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

@@ -1,14 +1,28 @@
-import type { Codec, StillImageFormat } from '@remotion/renderer';
+import type { Codec, PixelFormat, ProResProfile, StillImageFormat } from '@remotion/renderer';
 import React from 'react';
-export declare type RenderType = 'still' | 'video';
+import type { RenderType } from './RenderModalAdvanced';
 export declare const RenderModal: React.FC<{
     compositionId: string;
     initialFrame: number;
-    initialImageFormat: StillImageFormat;
-    initialQuality: number | null;
+    initialVideoImageFormat: StillImageFormat;
+    initialStillImageFormat: StillImageFormat;
+    initialQuality: number;
     initialScale: number;
     initialVerbose: boolean;
     initialOutName: string;
     initialRenderType: RenderType;
-    initialCodec: Codec;
+    initialAudioCodec: Codec;
+    initialVideoCodec: Codec;
+    initialConcurrency: number;
+    minConcurrency: number;
+    maxConcurrency: number;
+    initialMuted: boolean;
+    initialEnforceAudioTrack: boolean;
+    initialProResProfile: ProResProfile;
+    initialPixelFormat: PixelFormat;
+    initialVideoBitrate: string | null;
+    initialAudioBitrate: string | null;
+    initialEveryNthFrame: number;
+    initialNumberOfGifLoops: number | null;
+    initialDelayRenderTimeout: number;
 }>;