@remotion/cli 4.1.0-alpha3 → 4.1.0-alpha5

package/dist/benchmark.js

@@ -103,11 +103,11 @@ const benchmarkCommand = async (remotionRoot, args) => {
     const browserInstance = renderer_1.RenderInternals.internalOpenBrowser({
         browser,
         browserExecutable,
-        shouldDumpIo: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
         chromiumOptions,
         forceDeviceScaleFactor: scale,
         indent: false,
         viewport: null,
+        logLevel,
     });
     const { urlOrBundle: bundleLocation, cleanup: cleanupBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         fullPath: fullEntryPoint,
@@ -125,7 +125,6 @@ const benchmarkCommand = async (remotionRoot, args) => {
     });
     (0, cleanup_before_quit_1.registerCleanupJob)(() => cleanupBundle());
     const puppeteerInstance = await browserInstance;
-    const verbose = renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose');
     const comps = await renderer_1.RenderInternals.internalGetCompositions({
         serveUrlOrWebpackUrl: bundleLocation,
         inputProps,
@@ -139,7 +138,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
         onBrowserLog: null,
         //  Intentionally disabling server to not cache results
         server: undefined,
-        verbose,
+        logLevel,
     });
     const ids = (remainingArgs[0]
         ? remainingArgs[0]
@@ -197,14 +196,13 @@ const benchmarkCommand = async (remotionRoot, args) => {
                 pixelFormat,
                 proResProfile,
                 jpegQuality,
-                dumpBrowserLogs: verbose,
                 chromiumOptions,
                 timeoutInMilliseconds: config_1.ConfigInternals.getCurrentPuppeteerTimeout(),
                 scale: configFileScale,
                 port,
                 numberOfGifLoops,
                 everyNthFrame,
-                verbose,
+                logLevel,
                 muted,
                 enforceAudioTrack,
                 browserExecutable,

package/dist/chalk/index.d.ts

@@ -1,5 +1,5 @@
 export declare const chalk: {
-    enabled: boolean;
+    enabled: () => boolean;
     visible: boolean;
     styles: Record<string, {
         codes: [number, number];
@@ -23,6 +23,7 @@ export declare const chalk: {
     yellow: (str: string) => string;
     blue: (str: string) => string;
     magenta: (str: string) => string;
+    cyan: (str: string) => string;
     white: (str: string) => string;
     gray: (str: string) => string;
     bgBlack: (str: string) => string;

package/dist/compositions.js

@@ -17,7 +17,7 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         log_1.Log.error('See https://www.remotion.dev/docs/register-root for more information.');
         process.exit(1);
     }
-    const verbose = renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose');
+    const logLevel = config_1.ConfigInternals.Logging.getLogLevel();
     log_1.Log.verbose('Entry point:', file, 'reason:', reason);
     const { browserExecutable, chromiumOptions, envVariables, inputProps, puppeteerTimeout, port, publicDir, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
@@ -30,7 +30,7 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         publicDir,
         onProgress: () => undefined,
         indentOutput: false,
-        logLevel: config_1.ConfigInternals.Logging.getLogLevel(),
+        logLevel,
         bundlingStep: 0,
         steps: 1,
         onDirectoryCreated: (dir) => {
@@ -50,7 +50,7 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         indent: false,
         onBrowserLog: null,
         puppeteerInstance: undefined,
-        verbose,
+        logLevel,
         server: undefined,
     });
     (0, print_compositions_1.printCompositions)(compositions);

package/dist/config/image-format.d.ts

@@ -2,4 +2,4 @@ import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 export declare const setStillImageFormat: (format: StillImageFormat) => void;
 export declare const setVideoImageFormat: (format: VideoImageFormat) => void;
 export declare const getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-export declare const getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
+export declare const getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;

package/dist/config/index.d.ts

@@ -245,6 +245,30 @@ type FlatConfig = RemotionConfigObject & RemotionBundlingOptions & {
      * See the Encoding guide in the docs for defaults and available options.
      */
     setAudioCodec: (codec: 'pcm-16' | 'aac' | 'mp3' | 'opus') => void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Bundling.*()` calls to `Config.*()` in your config file.'
+     */
+    Bundling: void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Preview.*()` calls to `Config.*()` in your config file.'
+     */
+    Preview: void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Log.*()` calls to `Config.*()` in your config file.'
+     */
+    Log: void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Puppeteer.*()` calls to `Config.*()` in your config file.'
+     */
+    Puppeteer: void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Rendering.*()` calls to `Config.*()` in your config file.'
+     */
+    Rendering: void;
+    /**
+     * @deprecated 'The config format has changed. Change `Config.Output.*()` calls to `Config.*()` in your config file.'
+     */
+    Output: void;
 };
 export declare const Config: FlatConfig;
 export type { Concurrency, WebpackConfiguration, WebpackOverrideFn };
@@ -273,7 +297,7 @@ export declare const ConfigInternals: {
     getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
     getDotEnvLocation: () => string | null;
     getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-    getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
+    getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getWebpackCaching: () => boolean;
     getOutputLocation: () => string | null;

package/dist/config/index.js

@@ -83,6 +83,24 @@ const webpack_caching_2 = require("./webpack-caching");
 const webpack_poll_1 = require("./webpack-poll");
 const width_1 = require("./width");
 exports.Config = {
+    get Bundling() {
+        throw new Error('The config format has changed. Change `Config.Bundling.*()` calls to `Config.*()` in your config file.');
+    },
+    get Rendering() {
+        throw new Error('The config format has changed. Change `Config.Rendering.*()` calls to `Config.*()` in your config file.');
+    },
+    get Output() {
+        throw new Error('The config format has changed. Change `Config.Output.*()` calls to `Config.*()` in your config file.');
+    },
+    get Log() {
+        throw new Error('The config format has changed. Change `Config.Log.*()` calls to `Config.*()` in your config file.');
+    },
+    get Preview() {
+        throw new Error('The config format has changed. Change `Config.Preview.*()` calls to `Config.*()` in your config file.');
+    },
+    get Puppeteer() {
+        throw new Error('The config format has changed. Change `Config.Puppeteer.*()` calls to `Config.*()` in your config file.');
+    },
     setMaxTimelineTracks: max_timeline_tracks_2.setMaxTimelineTracks,
     setKeyboardShortcutsEnabled: keyboard_shortcuts_1.setKeyboardShortcutsEnabled,
     setNumberOfSharedAudioTags: number_of_shared_audio_tags_1.setNumberOfSharedAudioTags,
@@ -108,7 +126,7 @@ exports.Config = {
         throw new Error('setQuality() has been renamed - use setJpegQuality() instead.');
     },
     setImageFormat: () => {
-        throw new Error('setImageFormat() has been renamed - use setVideoImageFormat() or setStillImageFormat() instead.');
+        throw new Error('Config.setImageFormat() has been renamed - use Config.setVideoImageFormat() instead (default "jpeg"). For rendering stills, use Config.setStillImageFormat() (default "png")');
     },
     setJpegQuality: jpeg_quality_2.setJpegQuality,
     setStillImageFormat: image_format_1.setStillImageFormat,

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

@@ -9,6 +9,9 @@ const noop_1 = require("../../helpers/noop");
 const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
 const z_index_1 = require("../../state/z-index");
 const RemInput_1 = require("./RemInput");
+const isInt = (num) => {
+    return num % 1 === 0;
+};
 const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -99,8 +102,17 @@ const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value,
             (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.select();
         }
     }, [inputFallback]);
+    const deriveStep = (0, react_1.useMemo)(() => {
+        if (_step !== undefined) {
+            return _step;
+        }
+        if (typeof _min === 'number' && isInt(_min)) {
+            return 1;
+        }
+        return 0.0001;
+    }, [_min, _step]);
     if (inputFallback) {
-        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, step: _step, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props }) }));
+        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props }) }));
     }
     return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: formatter(value) }) }));
 };

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
+}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.05)" | "rgba(0, 0, 0, 0.6)" | "#ff3232" | "#f1c40f";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -14,7 +14,7 @@ export declare const RenderModalBasic: React.FC<{
     setProResProfile: React.Dispatch<React.SetStateAction<ProResProfile>>;
     frame: number;
     setFrame: React.Dispatch<React.SetStateAction<number>>;
-    resolvedComposition: TCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
+    resolvedComposition: TCompMetadata<AnyZodObject, Record<string, unknown>>;
     setOutName: (value: React.SetStateAction<string>) => void;
     setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
     startFrame: number;

package/dist/editor/components/RenderModal/SchemaEditor/local-state.js

@@ -11,16 +11,22 @@ const useLocalState = ({ value, schema, setValue, defaultValue, }) => {
     const parentRevision = (0, react_1.useContext)(RevisionContext).childResetRevision;
     const [resetRevision, setResetRevision] = (0, react_1.useState)(0);
     const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        return {};
+        return {
+            [parentRevision]: {
+                value,
+                keyStabilityRevision: 0,
+                zodValidation: schema.safeParse(value),
+            },
+        };
     });
     const currentLocalValue = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = localValue[parentRevision]) !== null && _a !== void 0 ? _a : {
             value: defaultValue,
             keyStabilityRevision: 0,
-            zodValidation: schema.safeParse(value),
+            zodValidation: schema.safeParse(defaultValue),
         });
-    }, [defaultValue, localValue, parentRevision, schema, value]);
+    }, [defaultValue, localValue, parentRevision, schema]);
     const stateRef = (0, react_1.useRef)(currentLocalValue);
     stateRef.current = currentLocalValue;
     const onChange = (0, react_1.useCallback)(

package/dist/editor/helpers/colors.d.ts

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.25)";

package/dist/editor/helpers/render-modal-sections.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';

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

@@ -33,5 +33,5 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
-    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+    configFileImageFormat: "none" | "png" | "jpeg" | undefined;
 }>;

package/dist/get-composition-id.d.ts

@@ -1,6 +1,6 @@
-import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, RemotionServer } from '@remotion/renderer';
-import type { AnyCompMetadata } from 'remotion';
-export declare const getCompositionId: ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, verbose, indent, server, }: {
+import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, LogLevel, RemotionServer } from '@remotion/renderer';
+import type { VideoConfig } from 'remotion';
+export declare const getCompositionId: ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, }: {
     args: string[];
     compositionIdFromUi: string | null;
     inputProps: Record<string, unknown>;
@@ -11,12 +11,12 @@ export declare const getCompositionId: ({ args, compositionIdFromUi, inputProps,
     port: number | null;
     browserExecutable: BrowserExecutable;
     serveUrlOrWebpackUrl: string;
-    verbose: boolean;
+    logLevel: LogLevel;
     indent: boolean;
     server: RemotionServer;
 }) => Promise<{
     compositionId: string;
     reason: string;
-    config: AnyCompMetadata;
+    config: VideoConfig;
     argsAfterComposition: string[];
 }>;

package/dist/get-composition-id.js

@@ -4,6 +4,7 @@ exports.getCompositionId = void 0;
 const renderer_1 = require("@remotion/renderer");
 const log_1 = require("./log");
 const show_compositions_picker_1 = require("./show-compositions-picker");
+const format_bytes_1 = require("./format-bytes");
 const getCompName = ({ cliArgs, compositionIdFromUi, }) => {
     if (compositionIdFromUi) {
         return {
@@ -15,13 +16,13 @@ const getCompName = ({ cliArgs, compositionIdFromUi, }) => {
     const [compName, ...remainingArgs] = cliArgs;
     return { compName, remainingArgs, reason: 'Passed as argument' };
 };
-const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, verbose, indent, server, }) => {
+const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, }) => {
     const { compName, remainingArgs, reason: compReason, } = getCompName({
         cliArgs: args,
         compositionIdFromUi,
     });
     if (compName) {
-        const config = await renderer_1.RenderInternals.internalSelectComposition({
+        const { metadata: config, propsSize } = await renderer_1.RenderInternals.internalSelectComposition({
             id: compName,
             inputProps,
             puppeteerInstance,
@@ -31,11 +32,14 @@ const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppete
             browserExecutable,
             chromiumOptions,
             port,
-            verbose,
+            logLevel,
             server,
             indent,
             onBrowserLog: null,
         });
+        if (propsSize > 10000000) {
+            log_1.Log.warn(`The props of your composition are large (${(0, format_bytes_1.formatBytes)(propsSize)}). This may cause slowdown.`);
+        }
         if (!config) {
             throw new Error(`Cannot find composition with ID "${compName}"`);
         }
@@ -55,7 +59,7 @@ const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppete
             chromiumOptions,
             port,
             browserExecutable,
-            verbose,
+            logLevel,
             indent,
             server,
             serveUrlOrWebpackUrl,

package/dist/get-composition-with-dimension-override.d.ts

@@ -1,6 +1,6 @@
-import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, RemotionServer } from '@remotion/renderer';
-import type { AnyCompMetadata } from 'remotion';
-export declare const getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, verbose, server, }: {
+import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, LogLevel, RemotionServer } from '@remotion/renderer';
+import type { VideoConfig } from 'remotion';
+export declare const getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, logLevel, server, }: {
     height: number | null;
     width: number | null;
     args: string[];
@@ -13,12 +13,12 @@ export declare const getCompositionWithDimensionOverride: ({ height, width, args
     browserExecutable: BrowserExecutable | null;
     serveUrlOrWebpackUrl: string;
     indent: boolean;
-    verbose: boolean;
+    logLevel: LogLevel;
     inputProps: Record<string, unknown>;
     server: RemotionServer;
 }) => Promise<{
     compositionId: string;
     reason: string;
-    config: AnyCompMetadata;
+    config: VideoConfig;
     argsAfterComposition: string[];
 }>;

package/dist/get-composition-with-dimension-override.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositionWithDimensionOverride = void 0;
 const get_composition_id_1 = require("./get-composition-id");
-const getCompositionWithDimensionOverride = async ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, verbose, server, }) => {
+const getCompositionWithDimensionOverride = async ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, logLevel, server, }) => {
     const returnValue = await (0, get_composition_id_1.getCompositionId)({
         args,
         compositionIdFromUi,
         indent,
         serveUrlOrWebpackUrl,
-        verbose,
+        logLevel,
         browserExecutable,
         chromiumOptions,
         envVariables,

package/dist/handle-common-errors.js

@@ -48,5 +48,9 @@ const handleCommonError = async (err, logLevel) => {
         log_1.Log.info('   Oftentimes, this happens if the component is missing the `export` keyword');
         log_1.Log.info('   or if the component was renamed and the import statement not properly adjusted.');
     }
+    if (err.message.includes('GLIBC_')) {
+        log_1.Log.info('💡 Remotion requires at least Libc 2.34.');
+        log_1.Log.info('💡 Get help for this issue: https://github.com/remotion-dev/remotion/issues/2439');
+    }
 };
 exports.handleCommonError = handleCommonError;

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export declare const CliInternals: {
         indent: boolean;
     }) => import("./progress-bar").OverwriteableCliOutput;
     chalk: {
-        enabled: boolean;
+        enabled: () => boolean;
         visible: boolean;
         styles: Record<string, {
             codes: [number, number];
@@ -33,6 +33,7 @@ export declare const CliInternals: {
         yellow: (str: string) => string;
         blue: (str: string) => string;
         magenta: (str: string) => string;
+        cyan: (str: string) => string;
         white: (str: string) => string;
         gray: (str: string) => string;
         bgBlack: (str: string) => string;
@@ -65,7 +66,6 @@ export declare const CliInternals: {
             logLevel: "verbose" | "info" | "warn" | "error";
         } & {
             tag?: string | undefined;
-            secondTag?: string | undefined;
         }, message?: any, ...optionalParams: any[]) => void;
         info: (message?: any, ...optionalParams: any[]) => void;
         infoAdvanced: (options: {
@@ -112,7 +112,7 @@ export declare const CliInternals: {
         videoBitrate: string | null;
         height: number | null;
         width: number | null;
-        configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+        configFileImageFormat: "none" | "png" | "jpeg" | undefined;
     }>;
     loadConfig: (remotionRoot: string) => Promise<string | null>;
     initializeCli: (remotionRoot: string) => Promise<void>;
@@ -121,7 +121,7 @@ export declare const CliInternals: {
     parsedCli: {
         "browser-executable": import("@remotion/renderer").BrowserExecutable;
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-        "image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
+        "image-format": "none" | "png" | "jpeg" | "pdf" | "webp";
         "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
         "bundle-cache": string;
         "env-file": string;
@@ -185,7 +185,7 @@ export declare const CliInternals: {
         downloadName: string | null;
         outName: string | null;
         configImageFormat: "png" | "jpeg" | "pdf" | "webp" | null;
-        cliFlag: "png" | "jpeg" | "pdf" | "webp" | "none" | null;
+        cliFlag: "none" | "png" | "jpeg" | "pdf" | "webp" | null;
         isLambda: boolean;
         fromUi: "png" | "jpeg" | "pdf" | "webp" | null;
     }) => {
@@ -200,8 +200,8 @@ export declare const CliInternals: {
     };
     getVideoImageFormat: ({ codec, uiImageFormat, }: {
         codec: import("@remotion/renderer").CodecOrUndefined;
-        uiImageFormat: "png" | "jpeg" | "none" | null;
-    }) => "png" | "jpeg" | "none";
+        uiImageFormat: "none" | "png" | "jpeg" | null;
+    }) => "none" | "png" | "jpeg";
     printCompositions: (compositions: import("remotion").AnyCompMetadata[]) => void;
     getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, }: {
         cliFlag: import("@remotion/renderer").CodecOrUndefined;
@@ -217,7 +217,7 @@ export declare const CliInternals: {
     shouldUseNonOverlayingLogger: ({ logLevel, }: {
         logLevel: "verbose" | "info" | "warn" | "error";
     }) => boolean;
-    getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, verbose, server, }: {
+    getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, logLevel, server, }: {
         height: number | null;
         width: number | null;
         args: string[];
@@ -230,13 +230,13 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         serveUrlOrWebpackUrl: string;
         indent: boolean;
-        verbose: boolean;
+        logLevel: "verbose" | "info" | "warn" | "error";
         inputProps: Record<string, unknown>;
         server: import("@remotion/renderer").RemotionServer;
     }) => Promise<{
         compositionId: string;
         reason: string;
-        config: import("remotion").AnyCompMetadata;
+        config: import("remotion").VideoConfig;
         argsAfterComposition: string[];
     }>;
 };

package/dist/log.d.ts

@@ -5,7 +5,6 @@ export declare const Log: {
         logLevel: "verbose" | "info" | "warn" | "error";
     } & {
         tag?: string | undefined;
-        secondTag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;
     info: (message?: any, ...optionalParams: any[]) => void;
     infoAdvanced: (options: {

package/dist/preview-server/dev-middleware/setup-hooks.js

@@ -23,7 +23,7 @@ function setupHooks(context) {
             logger.log('Compilation finished');
             const statsOptions = {
                 preset: 'errors-warnings',
-                colors: renderer_1.RenderInternals.isColorSupported,
+                colors: renderer_1.RenderInternals.isColorSupported(),
             };
             const printedStats = stats.toString(statsOptions);
             const lines = printedStats

package/dist/preview-server/routes.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { LiveEventsServer } from './live-events';
 export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, }: {

package/dist/progress-bar.js

@@ -24,7 +24,7 @@ const createOverwriteableCliOutput = (options) => {
                         .map((l) => {
                         return `${renderer_1.RenderInternals.INDENT_TOKEN} ${l}`;
                     })
-                        .join('\n'));
+                        .join('\n') + '\n');
                 }
                 else {
                     process.stdout.write(up + '\n');
@@ -171,16 +171,13 @@ const getGuiProgressSubtitle = (progress) => {
         return `Bundling ${Math.round(progress.bundling.progress * 100)}%`;
     }
     if (progress.copyingState.doneIn === null) {
-        if (progress.copyingState.bytes < 100000000) {
-            return 'Bundling 100%';
-        }
         const bytes = new Intl.NumberFormat('en', {
             notation: 'compact',
             style: 'unit',
             unit: 'byte',
             unitDisplay: 'narrow',
         });
-        return `Copying ${bytes.format(progress.copyingState.bytes)}`;
+        return `Copying public dir ${bytes.format(progress.copyingState.bytes)}`;
     }
     if (!progress.rendering) {
         return `Getting compositions`;

package/dist/render-flows/render.js

@@ -48,15 +48,17 @@ const user_passed_output_location_1 = require("../user-passed-output-location");
 const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, outputLocationFromUI, jpegQuality, onProgress, addCleanupCallback, cancelSignal, crf, uiCodec, uiImageFormat, ffmpegOverride, audioBitrate, muted, enforceAudioTrack, proResProfile, pixelFormat, videoBitrate, numberOfGifLoops, audioCodec, disallowParallelEncoding, }) => {
     var _a;
     const downloads = [];
-    log_1.Log.verboseAdvanced({ indent, logLevel }, 'Browser executable: ', browserExecutable);
+    if (browserExecutable) {
+        log_1.Log.verboseAdvanced({ indent, logLevel }, 'Browser executable: ', browserExecutable);
+    }
     const browserInstance = renderer_1.RenderInternals.internalOpenBrowser({
         browser,
         browserExecutable,
-        shouldDumpIo: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
         chromiumOptions,
         forceDeviceScaleFactor: scale,
         indent,
         viewport: null,
+        logLevel,
     });
     const updatesDontOverwrite = (0, should_use_non_overlaying_logger_1.shouldUseNonOverlayingLogger)({ logLevel });
     const renderProgress = (0, progress_bar_1.createOverwriteableCliOutput)({
@@ -134,14 +136,14 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         };
     };
     const puppeteerInstance = await browserInstance;
-    addCleanupCallback(() => puppeteerInstance.close(false));
+    addCleanupCallback(() => puppeteerInstance.close(false, logLevel, indent));
     const actualConcurrency = renderer_1.RenderInternals.getActualConcurrency(concurrency);
     const server = renderer_1.RenderInternals.prepareServer({
         concurrency: actualConcurrency,
         indent,
         port,
         remotionRoot,
-        verbose: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
+        logLevel,
         webpackConfigOrServeUrl: urlOrBundle,
     });
     addCleanupCallback(() => server.then((s) => s.closeServer(false)));
@@ -159,7 +161,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         puppeteerInstance,
         serveUrlOrWebpackUrl: urlOrBundle,
         timeoutInMilliseconds: puppeteerTimeout,
-        verbose: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
+        logLevel,
         server: await server,
     });
     const { codec, reason: codecReason } = (0, get_final_output_codec_1.getFinalOutputCodec)({
@@ -212,7 +214,6 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
             ? absoluteOutputFile
             : await node_fs_1.default.promises.mkdtemp(node_path_1.default.join(node_os_1.default.tmpdir(), 'react-motion-render'));
         log_1.Log.verboseAdvanced({ indent, logLevel }, 'Output dir', outputDir);
-        const verbose = renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose');
         await renderer_1.RenderInternals.internalRenderFrames({
             imageFormat,
             inputProps,
@@ -225,7 +226,6 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
             cancelSignal: cancelSignal !== null && cancelSignal !== void 0 ? cancelSignal : undefined,
             outputDir,
             webpackBundleOrServeUrl: urlOrBundle,
-            dumpBrowserLogs: verbose,
             everyNthFrame,
             envVariables,
             frameRange,
@@ -243,7 +243,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
             muted,
             onBrowserLog: null,
             onFrameBuffer: null,
-            verbose,
+            logLevel,
         });
         updateRenderProgress(true);
         log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.blue(`▶ ${absoluteOutputFile}`));
@@ -271,14 +271,13 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         pixelFormat,
         proResProfile,
         jpegQuality: jpegQuality !== null && jpegQuality !== void 0 ? jpegQuality : renderer_1.RenderInternals.DEFAULT_JPEG_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'),
+        logLevel,
         muted,
         enforceAudioTrack,
         browserExecutable,
@@ -313,13 +312,12 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         onBrowserLog: null,
         onStart: () => undefined,
     });
-    log_1.Log.verboseAdvanced({ indent, logLevel });
+    updateRenderProgress(true);
+    log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.blue(`${exists ? '○' : '+'} ${absoluteOutputFile}`));
     log_1.Log.verboseAdvanced({ indent, logLevel }, `Slowest frames:`);
     slowestFrames.forEach(({ frame, time }) => {
-        log_1.Log.verboseAdvanced({ indent, logLevel }, `Frame ${frame} (${time.toFixed(3)}ms)`);
+        log_1.Log.verboseAdvanced({ indent, logLevel }, `  Frame ${frame} (${time.toFixed(3)}ms)`);
     });
-    updateRenderProgress(true);
-    log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.blue(`${exists ? '○' : '+'} ${absoluteOutputFile}`));
     for (const line of renderer_1.RenderInternals.perf.getPerf()) {
         log_1.Log.verboseAdvanced({ indent, logLevel }, line);
     }