@remotion/cli 3.3.43 → 3.3.44

package/dist/code-frame.js

@@ -25,8 +25,12 @@ const printCodeFrame = (frame) => {
     const alignLeftAmount = Math.min(...frame.originalScriptCode.map((c) => c.content.length - c.content.trimStart().length));
     log_1.Log.info(`${frame.originalScriptCode
         .map((c) => {
-        const content = `${String(c.lineNumber).padStart(longestLineNumber, ' ')} | ${c.content.substring(alignLeftAmount)}`;
-        return c.highlight ? content : chalk_1.chalk.gray(content);
+        const left = String(c.lineNumber).padStart(longestLineNumber, ' ');
+        const right = c.content.substring(alignLeftAmount);
+        if (c.highlight) {
+            return `${left} │ ${right}`;
+        }
+        return `${chalk_1.chalk.gray(left)} │ ${chalk_1.chalk.gray(right)}`;
     })
         .join('\n')}`);
 };
@@ -40,7 +44,7 @@ const logLine = (frame) => {
         .join(' ')));
 };
 const printCodeFrameAndStack = (err) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (!err.symbolicatedStackFrames ||
         err.symbolicatedStackFrames.length === 0) {
         log_1.Log.error(err.stack);
@@ -54,16 +58,23 @@ const printCodeFrameAndStack = (err) => {
         if (frame === firstFrame) {
             continue;
         }
-        logLine(frame);
+        const isUserCode = !((_a = frame.originalFileName) === null || _a === void 0 ? void 0 : _a.includes('node_modules')) &&
+            !((_b = frame.originalFileName) === null || _b === void 0 ? void 0 : _b.startsWith('webpack/'));
+        if (isUserCode) {
+            printCodeFrame(frame);
+        }
+        else {
+            logLine(frame);
+        }
     }
     if (err.delayRenderCall) {
         log_1.Log.error();
         log_1.Log.error('🕧 The delayRender() call is located at:');
         for (const frame of err.delayRenderCall) {
-            const showCodeFrame = (!((_a = frame.originalFileName) === null || _a === void 0 ? void 0 : _a.includes('node_modules')) &&
-                !((_b = frame.originalFileName) === null || _b === void 0 ? void 0 : _b.startsWith('webpack/'))) ||
+            const showCodeFrame = (!((_c = frame.originalFileName) === null || _c === void 0 ? void 0 : _c.includes('node_modules')) &&
+                !((_d = frame.originalFileName) === null || _d === void 0 ? void 0 : _d.startsWith('webpack/'))) ||
                 frame === err.delayRenderCall[0] ||
-                ((_c = frame.originalScriptCode) === null || _c === void 0 ? void 0 : _c.map((c) => c.content).join('').includes('delayRender'));
+                ((_e = frame.originalScriptCode) === null || _e === void 0 ? void 0 : _e.map((c) => c.content).join('').includes('delayRender'));
             if (showCodeFrame) {
                 printCodeFrame(frame);
             }

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/derive-codec-from-file-extension.d.ts

@@ -0,0 +1 @@
+export declare const makeFileExtensionMap: () => Record<string, ("h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif")[]>;

package/dist/derive-codec-from-file-extension.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeFileExtensionMap = void 0;
+const renderer_1 = require("@remotion/renderer");
+const makeFileExtensionMap = () => {
+    const map = {};
+    Object.keys(renderer_1.RenderInternals.defaultFileExtensionMap).forEach((_codec) => {
+        const codec = _codec;
+        const fileExtMap = renderer_1.RenderInternals.defaultFileExtensionMap[codec];
+        const audioCodecs = Object.keys(fileExtMap.forAudioCodec);
+        const possibleExtensionsForAudioCodec = audioCodecs.map((audioCodec) => fileExtMap.forAudioCodec[audioCodec].possible);
+        const allPossibleExtensions = [
+            fileExtMap.default,
+            ...possibleExtensionsForAudioCodec.flat(1),
+        ];
+        for (const extension of allPossibleExtensions) {
+            if (!map[extension]) {
+                map[extension] = [];
+            }
+            if (!map[extension].includes(codec)) {
+                map[extension].push(codec);
+            }
+        }
+    });
+    return map;
+};
+exports.makeFileExtensionMap = makeFileExtensionMap;

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/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;
 }>;