@remotion/cli 4.0.148 → 4.0.150

package/dist/benchmark.js

@@ -153,8 +153,6 @@ const benchmarkCommand = async (remotionRoot, args, logLevel) => {
         onProgress: () => undefined,
         indentOutput: false,
         logLevel,
-        bundlingStep: 0,
-        steps: 1,
         onDirectoryCreated: (dir) => {
             (0, cleanup_before_quit_1.registerCleanupJob)(() => renderer_1.RenderInternals.deleteDirectory(dir));
         },
@@ -331,7 +329,6 @@ const benchmarkCommand = async (remotionRoot, args, logLevel) => {
                 binariesDirectory: binariesDirectoryOption.getValue({
                     commandLine: parsed_cli_1.parsedCli,
                 }).value,
-                finishRenderProgress: () => undefined,
                 separateAudioTo: null,
                 forSeamlessAacConcatenation: forSeamlessAacConcatenationOption.getValue({
                     commandLine: parsed_cli_1.parsedCli,

package/dist/bundle.js

@@ -63,11 +63,9 @@ const bundleCommand = async (remotionRoot, args, logLevel) => {
         fullPath: file,
         logLevel,
         onDirectoryCreated: () => { },
-        bundlingStep: 0,
         indent: false,
         quietProgress: updatesDontOverwrite,
         publicDir,
-        steps: 1,
         remotionRoot,
         onProgressCallback: ({ bundling, copying }) => {
             // Handle floating point inaccuracies

package/dist/check-for-npm-run-flag-pass.d.ts

@@ -0,0 +1,5 @@
+import type { LogLevel } from '@remotion/renderer';
+export declare const checkForNpmRunFlagPass: ({ indent, logLevel, }: {
+    indent: boolean;
+    logLevel: LogLevel;
+}) => void;

package/dist/check-for-npm-run-flag-pass.js

@@ -0,0 +1,43 @@
+"use strict";
+// If someone passes --log=verbose to npm run render
+// We don't receive it.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkForNpmRunFlagPass = void 0;
+const log_1 = require("./log");
+const checkForNpmRunFlagPass = ({ indent, logLevel, }) => {
+    if (!process.env.npm_config_log) {
+        return;
+    }
+    log_1.Log.error({ indent, logLevel }, `The environment variable "npm_config_log" is set to "${process.env.npm_config_log}".`);
+    log_1.Log.error({ indent, logLevel }, `This indicates a likely mistake:`);
+    log_1.Log.error({
+        indent,
+        logLevel,
+    }, `--log gets passed to the npm command, however npm has no "log" configuration option.`);
+    log_1.Log.error({
+        indent,
+        logLevel,
+    }, `You most likely wanted to pass --log to the Remotion CLI.`);
+    log_1.Log.error({
+        indent,
+        logLevel,
+    }, `However, arguments passed to "npm run" don't get received by the script, in this case Remotion.`);
+    log_1.Log.error({
+        indent,
+        logLevel,
+    }, `Edit the npm script and pass Remotion flags to "remotion" command instead. Example:`);
+    log_1.Log.error({
+        indent,
+        logLevel,
+    });
+    log_1.Log.error({
+        indent,
+        logLevel,
+    }, `  "render": "remotion render --log=verbose"`);
+    log_1.Log.error({
+        indent,
+        logLevel,
+    });
+    process.exit(1);
+};
+exports.checkForNpmRunFlagPass = checkForNpmRunFlagPass;

package/dist/cloudrun-command.js

@@ -9,7 +9,7 @@ const cloudrunCommand = async (remotionRoot, args, logLevel) => {
             paths: [remotionRoot],
         });
         const { CloudrunInternals } = require(path);
-        await CloudrunInternals.executeCommand(args, remotionRoot);
+        await CloudrunInternals.executeCommand(args, remotionRoot, logLevel);
         process.exit(0);
     }
     catch (err) {

package/dist/compositions.js

@@ -60,8 +60,6 @@ const listCompositionsCommand = async (remotionRoot, args, logLevel) => {
         onProgress: () => undefined,
         indentOutput: false,
         logLevel,
-        bundlingStep: 0,
-        steps: 1,
         onDirectoryCreated: (dir) => {
             (0, cleanup_before_quit_1.registerCleanupJob)(() => renderer_1.RenderInternals.deleteDirectory(dir));
         },

package/dist/download-progress.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeMultiDownloadProgress = exports.getFileSizeDownloadBar = void 0;
 const studio_server_1 = require("@remotion/studio-server");
 const make_progress_bar_1 = require("./make-progress-bar");
+const progress_bar_1 = require("./progress-bar");
 const truthy_1 = require("./truthy");
 const getFileSizeDownloadBar = (downloaded) => {
     const desiredLength = (0, make_progress_bar_1.makeProgressBar)(0).length;
@@ -19,23 +20,23 @@ const makeMultiDownloadProgress = (progresses) => {
             ? progress.name.substring(0, 57) + '...'
             : progress.name;
         return [
-            `    +`,
+            `Downloading assets`.padEnd(progress_bar_1.LABEL_WIDTH, ' '),
             progress.progress
                 ? (0, make_progress_bar_1.makeProgressBar)(progress.progress)
                 : (0, exports.getFileSizeDownloadBar)(progress.downloaded),
-            `Downloading ${truncatedFileName}`,
+            truncatedFileName,
         ]
             .filter(truthy_1.truthy)
             .join(' ');
     }
     const everyFileHasContentLength = progresses.every((p) => p.totalBytes !== null);
     return [
-        `    +`,
+        `Downloading assets`.padEnd(progress_bar_1.LABEL_WIDTH, ' '),
         everyFileHasContentLength
             ? (0, make_progress_bar_1.makeProgressBar)(progresses.reduce((a, b) => a + b.progress, 0) /
                 progresses.length)
             : (0, exports.getFileSizeDownloadBar)(progresses.reduce((a, b) => a + b.downloaded, 0)),
-        `Downloading ${progresses.length} files`,
+        `${progresses.length} files`,
     ]
         .filter(truthy_1.truthy)
         .join(' ');

package/dist/eta-string.d.ts

@@ -0,0 +1 @@
+export declare const formatEtaString: (timeRemainingInMilliseconds: number) => string;

package/dist/eta-string.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatEtaString = void 0;
+const truthy_1 = require("./truthy");
+const formatEtaString = (timeRemainingInMilliseconds) => {
+    // Get render estimated time value and extract hours, minutes, and seconds
+    const remainingTime = timeRemainingInMilliseconds / 1000;
+    const remainingTimeHours = Math.floor(remainingTime / 3600);
+    const remainingTimeMinutes = Math.round((remainingTime % 3600) / 60);
+    const remainingTimeSeconds = Math.round(remainingTime % 60);
+    // Create estimated time string by concatenating them with colons
+    const estimatedTimeString = [
+        remainingTimeHours ? `${remainingTimeHours}h` : null,
+        remainingTimeMinutes ? remainingTimeMinutes + 'm' : null,
+        `${remainingTimeSeconds}s`,
+    ]
+        .filter(truthy_1.truthy)
+        .join(' ');
+    return estimatedTimeString;
+};
+exports.formatEtaString = formatEtaString;

package/dist/index.d.ts

@@ -166,4 +166,12 @@ export declare const CliInternals: {
         logLevel: "verbose" | "info" | "warn" | "error";
         quiet: boolean;
     }) => import("@remotion/renderer").OnBrowserDownload;
+    LABEL_WIDTH: number;
+    printFact: (printLevel: "verbose" | "info" | "warn" | "error") => ({ indent, logLevel, left, right, color, }: {
+        indent: boolean;
+        logLevel: "verbose" | "info" | "warn" | "error";
+        left: string;
+        right: string;
+        color: "blue" | "gray" | undefined;
+    }) => void;
 };

package/dist/index.js

@@ -12,6 +12,7 @@ const browser_1 = require("./browser");
 const browser_download_bar_1 = require("./browser-download-bar");
 const bundle_1 = require("./bundle");
 const chalk_1 = require("./chalk");
+const check_for_npm_run_flag_pass_1 = require("./check-for-npm-run-flag-pass");
 const cleanup_before_quit_1 = require("./cleanup-before-quit");
 const cloudrun_command_1 = require("./cloudrun-command");
 const compositions_1 = require("./compositions");
@@ -69,6 +70,7 @@ const cli = async () => {
         ? 0
         : renderer_1.RenderInternals.registerErrorSymbolicationLock();
     (0, cleanup_before_quit_1.handleCtrlC)({ indent: false, logLevel });
+    (0, check_for_npm_run_flag_pass_1.checkForNpmRunFlagPass)({ indent: false, logLevel });
     try {
         if (command === 'bundle') {
             await (0, bundle_1.bundleCommand)(remotionRoot, args, logLevel);
@@ -159,4 +161,6 @@ exports.CliInternals = {
     shouldUseNonOverlayingLogger: should_use_non_overlaying_logger_1.shouldUseNonOverlayingLogger,
     getCompositionWithDimensionOverride: get_composition_with_dimension_override_1.getCompositionWithDimensionOverride,
     defaultBrowserDownloadProgress: browser_download_bar_1.defaultBrowserDownloadProgress,
+    LABEL_WIDTH: progress_bar_1.LABEL_WIDTH,
+    printFact: progress_bar_1.printFact,
 };

package/dist/make-progress-bar.js

@@ -1,22 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeProgressBar = void 0;
-const full = '─';
-const half = '╴';
+const renderer_1 = require("@remotion/renderer");
+const chalk_1 = require("./chalk");
+const full = '━';
+const half = '╸';
+const half_right = '╺';
+const totalBars = 18;
 const makeProgressBar = (percentage) => {
-    const totalBars = 20;
+    const color = renderer_1.RenderInternals.isColorSupported();
     const barsToShow = Math.floor(percentage * totalBars);
     const extraBar = (percentage * totalBars) % barsToShow;
-    const base = full.repeat(barsToShow) + (extraBar > 0.5 ? half : '');
-    if (percentage === 0) {
-        return `${' '.repeat(totalBars + 1)}`;
+    const grayBars = totalBars - barsToShow;
+    const showHalf = extraBar > 0.5;
+    const base = full.repeat(barsToShow) + (showHalf ? half : '');
+    const gray = (renderer_1.RenderInternals.isColorSupported() ? full : ' ')
+        .repeat(grayBars - (showHalf ? 1 : 0))
+        .split('');
+    if (!showHalf && barsToShow > 0 && gray.length > 0 && color) {
+        gray[0] = half_right;
     }
-    if (percentage > 0 && barsToShow < 1) {
-        return `╷${' '.repeat(totalBars)}`;
-    }
-    if (percentage >= 1) {
-        return `╭${base.substring(0, base.length - 1)}╮`;
-    }
-    return `╭${base.padEnd(totalBars, ' ')}`;
+    return `${chalk_1.chalk.blue(base)}${chalk_1.chalk.dim(gray.join(''))}`;
 };
 exports.makeProgressBar = makeProgressBar;

package/dist/progress-bar.d.ts

@@ -1,8 +1,9 @@
-import type { CancelSignal } from '@remotion/renderer';
+import type { CancelSignal, LogLevel } from '@remotion/renderer';
 import type { AggregateRenderProgress, BundlingState, CopyingState } from '@remotion/studio-server';
 export type OverwriteableCliOutput = {
     update: (up: string, newline: boolean) => boolean;
 };
+export declare const LABEL_WIDTH = 18;
 export declare const createOverwriteableCliOutput: (options: {
     quiet: boolean;
     cancelSignal: CancelSignal | null;
@@ -16,14 +17,19 @@ export declare const makeBundlingAndCopyProgress: ({ bundling, copying, symLinks
     bundling: BundlingState;
     copying: CopyingState;
     symLinks: SymbolicLinksState;
-}, bundlingStep: number, steps: number) => string;
-export declare const makeRenderingAndStitchingProgress: ({ prog, steps, stitchingStep, isUsingParallelEncoding, }: {
+}) => string;
+export declare const makeRenderingAndStitchingProgress: ({ prog, isUsingParallelEncoding, }: {
     prog: AggregateRenderProgress;
-    steps: number;
-    stitchingStep: number;
     isUsingParallelEncoding: boolean;
 }) => {
     output: string;
     progress: number;
     message: string;
 };
+export declare const printFact: (printLevel: LogLevel) => ({ indent, logLevel, left, right, color, }: {
+    indent: boolean;
+    logLevel: LogLevel;
+    left: string;
+    right: string;
+    color: 'blue' | 'gray' | undefined;
+}) => void;

package/dist/progress-bar.js

@@ -1,12 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeRenderingAndStitchingProgress = exports.makeBundlingAndCopyProgress = exports.createOverwriteableCliOutput = void 0;
+exports.printFact = exports.makeRenderingAndStitchingProgress = exports.makeBundlingAndCopyProgress = exports.createOverwriteableCliOutput = exports.LABEL_WIDTH = void 0;
 const renderer_1 = require("@remotion/renderer");
 const studio_server_1 = require("@remotion/studio-server");
 const chalk_1 = require("./chalk");
 const download_progress_1 = require("./download-progress");
+const eta_string_1 = require("./eta-string");
+const log_1 = require("./log");
 const make_progress_bar_1 = require("./make-progress-bar");
 const truthy_1 = require("./truthy");
+exports.LABEL_WIDTH = 18;
 const createOverwriteableCliOutput = (options) => {
     var _a;
     if (options.quiet) {
@@ -51,12 +54,11 @@ const createOverwriteableCliOutput = (options) => {
     };
 };
 exports.createOverwriteableCliOutput = createOverwriteableCliOutput;
-const makeBundlingProgress = ({ bundlingState, bundlingStep, steps, }) => {
+const makeBundlingProgress = ({ bundlingState, }) => {
     const { doneIn, progress } = bundlingState;
     return [
-        `(${bundlingStep + 1}/${steps})`,
+        `${doneIn ? 'Bundled' : 'Bundling'} code`.padEnd(exports.LABEL_WIDTH, ' '),
         (0, make_progress_bar_1.makeProgressBar)(progress),
-        `${doneIn ? 'Bundled' : 'Bundling'} code`,
         doneIn === null
             ? (progress * 100).toFixed(0) + '%'
             : chalk_1.chalk.gray(`${doneIn}ms`),
@@ -70,9 +72,8 @@ const makeCopyingProgress = (options) => {
         return null;
     }
     return [
-        '    +',
+        'Copying public dir'.padEnd(exports.LABEL_WIDTH, ' '),
         options.doneIn ? (0, make_progress_bar_1.makeProgressBar)(1) : (0, download_progress_1.getFileSizeDownloadBar)(options.bytes),
-        'Copying public dir',
         options.doneIn === null ? null : chalk_1.chalk.gray(`${options.doneIn}ms`),
     ]
         .filter(truthy_1.truthy)
@@ -94,12 +95,10 @@ const makeSymlinkProgress = (options) => {
         chalk_1.chalk.gray('      The symlinks will be forwarded in to the bundle.'),
     ].join('\n');
 };
-const makeBundlingAndCopyProgress = ({ bundling, copying, symLinks, }, bundlingStep, steps) => {
+const makeBundlingAndCopyProgress = ({ bundling, copying, symLinks, }) => {
     return [
         makeBundlingProgress({
             bundlingState: bundling,
-            bundlingStep,
-            steps,
         }),
         makeCopyingProgress(copying),
         makeSymlinkProgress(symLinks),
@@ -108,20 +107,29 @@ const makeBundlingAndCopyProgress = ({ bundling, copying, symLinks, }, bundlingS
         .join('\n');
 };
 exports.makeBundlingAndCopyProgress = makeBundlingAndCopyProgress;
-const makeRenderingProgress = ({ frames, totalFrames, steps, concurrency, doneIn, }) => {
+const makeRenderingProgress = ({ frames, totalFrames, doneIn, timeRemainingInMilliseconds, }) => {
     const progress = frames / totalFrames;
     return [
-        `(${steps.indexOf('rendering') + 1}/${steps.length})`,
-        (0, make_progress_bar_1.makeProgressBar)(progress),
-        [doneIn ? 'Rendered' : 'Rendering', `frames (${concurrency}x)`]
+        [doneIn ? 'Rendered' : 'Rendering', totalFrames === 1 ? 'still' : 'frames']
             .filter(truthy_1.truthy)
-            .join(' '),
-        doneIn === null ? `${frames}/${totalFrames}` : chalk_1.chalk.gray(`${doneIn}ms`),
+            .join(' ')
+            .padEnd(exports.LABEL_WIDTH, ' '),
+        (0, make_progress_bar_1.makeProgressBar)(progress),
+        doneIn === null
+            ? [
+                `${String(frames).padStart(String(totalFrames).length, ' ')}/${totalFrames}`,
+                timeRemainingInMilliseconds
+                    ? chalk_1.chalk.gray(`${(0, eta_string_1.formatEtaString)(timeRemainingInMilliseconds)} remaining`)
+                    : null,
+            ]
+                .filter(truthy_1.truthy)
+                .join(' ')
+            : chalk_1.chalk.gray(`${doneIn}ms`),
     ]
         .filter(truthy_1.truthy)
         .join(' ');
 };
-const makeStitchingProgress = ({ stitchingProgress, steps, stitchingStep, isUsingParallelEncoding, }) => {
+const makeStitchingProgress = ({ stitchingProgress, isUsingParallelEncoding, }) => {
     const { frames, totalFrames, doneIn, stage, codec } = stitchingProgress;
     const progress = frames / totalFrames;
     const mediaType = codec === 'gif'
@@ -130,17 +138,18 @@ const makeStitchingProgress = ({ stitchingProgress, steps, stitchingStep, isUsin
             ? 'audio'
             : 'video';
     return [
-        `(${stitchingStep + 1}/${steps})`,
-        (0, make_progress_bar_1.makeProgressBar)(progress),
-        stage === 'muxing' && isUsingParallelEncoding
+        (stage === 'muxing' && isUsingParallelEncoding
             ? `${doneIn ? 'Muxed' : 'Muxing'} ${mediaType}`
-            : `${doneIn ? 'Encoded' : 'Encoding'} ${mediaType}`,
-        doneIn === null ? `${frames}/${totalFrames}` : chalk_1.chalk.gray(`${doneIn}ms`),
+            : `${doneIn ? 'Encoded' : 'Encoding'} ${mediaType}`).padEnd(exports.LABEL_WIDTH, ' '),
+        (0, make_progress_bar_1.makeProgressBar)(progress),
+        doneIn === null
+            ? `${String(frames).padStart(String(totalFrames).length, ' ')}/${totalFrames}`
+            : chalk_1.chalk.gray(`${doneIn}ms`),
     ]
         .filter(truthy_1.truthy)
         .join(' ');
 };
-const makeRenderingAndStitchingProgress = ({ prog, steps, stitchingStep, isUsingParallelEncoding, }) => {
+const makeRenderingAndStitchingProgress = ({ prog, isUsingParallelEncoding, }) => {
     const { rendering, stitching, downloads, bundling } = prog;
     const output = [
         rendering ? makeRenderingProgress(rendering) : null,
@@ -149,8 +158,6 @@ const makeRenderingAndStitchingProgress = ({ prog, steps, stitchingStep, isUsing
             ? null
             : makeStitchingProgress({
                 stitchingProgress: stitching,
-                steps,
-                stitchingStep,
                 isUsingParallelEncoding,
             }),
     ]
@@ -171,15 +178,47 @@ const getGuiProgressSubtitle = (progress) => {
     if (progress.bundling.progress < 0.99999) {
         return `Bundling ${Math.round(progress.bundling.progress * 100)}%`;
     }
+    if (progress.bundling.progress === 1 &&
+        progress.bundling.doneIn === null &&
+        progress.copyingState.bytes === 0) {
+        return `Bundling ${Math.round(progress.bundling.progress * 100)}%`;
+    }
     if (progress.copyingState.doneIn === null) {
         return `Copying public dir ${studio_server_1.StudioServerInternals.formatBytes(progress.copyingState.bytes)}`;
     }
     if (!progress.rendering) {
         return `Getting compositions`;
     }
+    // Get render estimated time value and extract hours, minutes, and seconds
+    const { timeRemainingInMilliseconds } = progress.rendering;
+    // Create estimated time string by concatenating them with colons
+    const estimatedTimeString = timeRemainingInMilliseconds === null
+        ? null
+        : (0, eta_string_1.formatEtaString)(timeRemainingInMilliseconds);
     const allRendered = progress.rendering.frames === progress.rendering.totalFrames;
     if (!allRendered || !progress.stitching || progress.stitching.frames === 0) {
-        return `Rendered ${progress.rendering.frames}/${progress.rendering.totalFrames}`;
+        const etaString = timeRemainingInMilliseconds && timeRemainingInMilliseconds > 0
+            ? `, time remaining: ${estimatedTimeString}`
+            : '';
+        return `Rendered ${progress.rendering.frames}/${progress.rendering.totalFrames}${etaString}`;
     }
     return `Stitched ${progress.stitching.frames}/${progress.stitching.totalFrames}`;
 };
+const printFact = (printLevel) => ({ indent, logLevel, left, right, color, }) => {
+    const fn = (str) => {
+        if (color === 'gray') {
+            return chalk_1.chalk.gray(str);
+        }
+        if (color === 'blue') {
+            return chalk_1.chalk.blue(str);
+        }
+        return str;
+    };
+    if (renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose')) {
+        log_1.Log[printLevel]({ indent, logLevel }, fn(`${left} = ${right}`));
+        return;
+    }
+    const leftPadded = left.padEnd(exports.LABEL_WIDTH, ' ');
+    log_1.Log[printLevel]({ indent, logLevel }, fn(`${leftPadded} ${right}`));
+};
+exports.printFact = printFact;

package/dist/render-flows/render.js

@@ -50,6 +50,16 @@ const truthy_1 = require("../truthy");
 const user_passed_output_location_1 = require("../user-passed-output-location");
 const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, 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, x264Preset, pixelFormat, videoBitrate, encodingMaxRate, encodingBufferSize, numberOfGifLoops, audioCodec, serializedInputPropsWithCustomSchema, disallowParallelEncoding, offthreadVideoCacheSizeInBytes, colorSpace, repro, binariesDirectory, forSeamlessAacConcatenation, separateAudioTo, publicPath, }) => {
     var _a;
+    const isVerbose = renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose');
+    (0, progress_bar_1.printFact)('verbose')({
+        indent,
+        logLevel,
+        left: 'Entry point',
+        right: [fullEntryPoint, isVerbose ? `(${entryPointReason})` : null]
+            .filter(truthy_1.truthy)
+            .join(' '),
+        color: 'gray',
+    });
     const downloads = [];
     const onBrowserDownload = (0, browser_download_bar_1.defaultBrowserDownloadProgress)({
         indent,
@@ -80,11 +90,6 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         updatesDontOverwrite,
         indent,
     });
-    const steps = [
-        renderer_1.RenderInternals.isServeUrl(fullEntryPoint) ? null : 'bundling',
-        'rendering',
-        shouldOutputImageSequence ? null : 'stitching',
-    ].filter(truthy_1.truthy);
     let bundlingProgress = {
         doneIn: null,
         progress: 0,
@@ -105,8 +110,6 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         };
         const { output, message, progress } = (0, progress_bar_1.makeRenderingAndStitchingProgress)({
             prog: aggregateRenderProgress,
-            steps: steps.length,
-            stitchingStep: steps.indexOf('stitching'),
             isUsingParallelEncoding,
         });
         onProgress({ message, value: progress, ...aggregateRenderProgress });
@@ -125,8 +128,6 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         },
         indentOutput: indent,
         logLevel,
-        bundlingStep: steps.indexOf('bundling'),
-        steps: steps.length,
         onDirectoryCreated: (dir) => {
             addCleanupCallback(() => renderer_1.RenderInternals.deleteDirectory(dir));
         },
@@ -208,8 +209,38 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         fromUi: outputLocationFromUI,
         logLevel,
     });
-    log_1.Log.verbose({ indent, logLevel }, chalk_1.chalk.gray(`Entry point = ${fullEntryPoint} (${entryPointReason})`));
-    log_1.Log.info({ indent, logLevel }, chalk_1.chalk.gray(`Composition = ${compositionId} (${reason}), Codec = ${codec} (${codecReason}), Output = ${relativeOutputLocation}`));
+    (0, progress_bar_1.printFact)('info')({
+        indent,
+        logLevel,
+        left: 'Composition',
+        right: [compositionId, isVerbose ? `(${reason})` : null]
+            .filter(truthy_1.truthy)
+            .join(' '),
+        color: 'gray',
+    });
+    (0, progress_bar_1.printFact)('info')({
+        indent,
+        logLevel,
+        left: 'Codec',
+        right: [codec, isVerbose ? `(${codecReason})` : null]
+            .filter(truthy_1.truthy)
+            .join(' '),
+        color: 'gray',
+    });
+    (0, progress_bar_1.printFact)('info')({
+        indent,
+        logLevel,
+        left: 'Output',
+        right: relativeOutputLocation,
+        color: 'gray',
+    });
+    (0, progress_bar_1.printFact)('info')({
+        indent,
+        logLevel,
+        left: 'Concurrency',
+        right: `${actualConcurrency}x`,
+        color: 'gray',
+    });
     const absoluteOutputFile = (0, get_cli_options_1.getAndValidateAbsoluteOutputFile)(relativeOutputLocation, overwrite, logLevel);
     const absoluteSeparateAudioTo = separateAudioTo === null ? null : node_path_1.default.resolve(separateAudioTo);
     const exists = (0, node_fs_1.existsSync)(absoluteOutputFile);
@@ -221,9 +252,8 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
     renderingProgress = {
         frames: 0,
         totalFrames: totalFrames.length,
-        concurrency: actualConcurrency,
         doneIn: null,
-        steps,
+        timeRemainingInMilliseconds: null,
     };
     const imageFormat = (0, image_formats_1.getVideoImageFormat)({
         codec: shouldOutputImageSequence ? undefined : codec,
@@ -284,7 +314,6 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
             forSeamlessAacConcatenation,
             onBrowserDownload,
         });
-        updateRenderProgress({ newline: true, printToConsole: true });
         log_1.Log.info({ indent, logLevel }, chalk_1.chalk.blue(`▶ ${absoluteOutputFile}`));
         return;
     }
@@ -339,6 +368,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
                 update.renderedDoneIn;
             renderingProgress.frames =
                 update.renderedFrames;
+            renderingProgress.timeRemainingInMilliseconds = update.renderEstimatedTime;
             updateRenderProgress({ newline: false, printToConsole: true });
         },
         puppeteerInstance,
@@ -361,18 +391,18 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         offthreadVideoCacheSizeInBytes,
         colorSpace,
         repro: repro !== null && repro !== void 0 ? repro : false,
-        finishRenderProgress: () => {
-            updateRenderProgress({ newline: true, printToConsole: true });
-        },
         binariesDirectory,
         separateAudioTo: absoluteSeparateAudioTo,
         forSeamlessAacConcatenation,
         compositionStart: 0,
         onBrowserDownload,
     });
-    log_1.Log.info({ indent, logLevel }, chalk_1.chalk.blue(`${exists ? '○' : '+'} ${absoluteOutputFile}`));
+    if (!updatesDontOverwrite) {
+        updateRenderProgress({ newline: true, printToConsole: true });
+    }
+    log_1.Log.info({ indent, logLevel }, chalk_1.chalk.blue(`${(exists ? '○' : '+').padEnd(progress_bar_1.LABEL_WIDTH)} ${relativeOutputLocation}`));
     if (absoluteSeparateAudioTo) {
-        log_1.Log.info({ indent, logLevel }, chalk_1.chalk.blue(`${audioExists ? '○' : '+'} ${absoluteSeparateAudioTo}`));
+        log_1.Log.info({ indent, logLevel }, chalk_1.chalk.blue(`${(audioExists ? '○' : '+').padEnd(progress_bar_1.LABEL_WIDTH, ' ')} ${absoluteSeparateAudioTo}`));
     }
     log_1.Log.verbose({ indent, logLevel }, `Slowest frames:`);
     slowestFrames.forEach(({ frame, time }) => {

package/dist/render-flows/still.js

@@ -27,6 +27,8 @@ const truthy_1 = require("../truthy");
 const user_passed_output_location_1 = require("../user-passed-output-location");
 const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason, remainingArgs, browser, browserExecutable, chromiumOptions, envVariables, height, serializedInputPropsWithCustomSchema, overwrite, port, publicDir, puppeteerTimeout, jpegQuality, scale, stillFrame, width, compositionIdFromUi, imageFormatFromUi, logLevel, onProgress, indent, addCleanupCallback, cancelSignal, outputLocationFromUi, offthreadVideoCacheSizeInBytes, binariesDirectory, publicPath, }) => {
     var _a, _b;
+    const isVerbose = renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose');
+    log_1.Log.verbose({ indent, logLevel }, chalk_1.chalk.gray(`Entry point = ${fullEntryPoint} (${entryPointReason})`));
     const aggregate = (0, progress_types_1.initialAggregateRenderProgress)();
     const updatesDontOverwrite = (0, should_use_non_overlaying_logger_1.shouldUseNonOverlayingLogger)({ logLevel });
     const renderProgress = (0, progress_bar_1.createOverwriteableCliOutput)({
@@ -35,15 +37,9 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         updatesDontOverwrite: (0, should_use_non_overlaying_logger_1.shouldUseNonOverlayingLogger)({ logLevel }),
         indent,
     });
-    const steps = [
-        renderer_1.RenderInternals.isServeUrl(fullEntryPoint) ? null : 'bundling',
-        'rendering',
-    ].filter(truthy_1.truthy);
     const updateRenderProgress = ({ newline, printToConsole, isUsingParallelEncoding, }) => {
         const { output, progress, message } = (0, progress_bar_1.makeRenderingAndStitchingProgress)({
             prog: aggregate,
-            steps: steps.length,
-            stitchingStep: steps.indexOf('stitching'),
             isUsingParallelEncoding,
         });
         if (printToConsole) {
@@ -75,7 +71,6 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
     const { cleanup: cleanupBundle, urlOrBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         fullPath: fullEntryPoint,
         remotionRoot,
-        steps: steps.length,
         publicDir,
         onProgress: ({ copying, bundling }) => {
             aggregate.bundling = bundling;
@@ -88,7 +83,6 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         },
         indentOutput: indent,
         logLevel,
-        bundlingStep: steps.indexOf('bundling'),
         onDirectoryCreated: (dir) => {
             (0, cleanup_before_quit_1.registerCleanupJob)(() => {
                 renderer_1.RenderInternals.deleteDirectory(dir);
@@ -158,15 +152,37 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
     (0, node_fs_1.mkdirSync)(node_path_1.default.join(absoluteOutputLocation, '..'), {
         recursive: true,
     });
-    log_1.Log.verbose({ indent, logLevel }, chalk_1.chalk.gray(`Entry point = ${fullEntryPoint} (${entryPointReason})`));
-    log_1.Log.info({ indent, logLevel }, chalk_1.chalk.gray(`Composition = ${compositionId} (${reason}), Format = ${imageFormat} (${source}), Output = ${relativeOutputLocation}`));
+    (0, progress_bar_1.printFact)('info')({
+        indent,
+        left: 'Composition',
+        logLevel,
+        right: [compositionId, isVerbose ? `(${reason})` : null]
+            .filter(truthy_1.truthy)
+            .join(' '),
+        color: 'gray',
+    });
+    (0, progress_bar_1.printFact)('info')({
+        indent,
+        left: 'Format',
+        logLevel,
+        right: [imageFormat, isVerbose ? `(${source})` : null]
+            .filter(truthy_1.truthy)
+            .join(' '),
+        color: 'gray',
+    });
+    (0, progress_bar_1.printFact)('info')({
+        indent,
+        left: 'Output',
+        logLevel,
+        right: relativeOutputLocation,
+        color: 'gray',
+    });
     const renderStart = Date.now();
     aggregate.rendering = {
         frames: 0,
-        concurrency: 1,
         doneIn: null,
-        steps,
         totalFrames: 1,
+        timeRemainingInMilliseconds: null,
     };
     updateRenderProgress({
         newline: false,
@@ -214,16 +230,15 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
     });
     aggregate.rendering = {
         frames: 1,
-        concurrency: 1,
         doneIn: Date.now() - renderStart,
-        steps,
         totalFrames: 1,
+        timeRemainingInMilliseconds: null,
     };
     updateRenderProgress({
         newline: true,
         printToConsole: true,
         isUsingParallelEncoding: false,
     });
-    log_1.Log.info({ indent, logLevel }, chalk_1.chalk.blue(`${exists ? '○' : '+'} ${absoluteOutputLocation}`));
+    log_1.Log.info({ indent, logLevel }, chalk_1.chalk.blue(`${(exists ? '○' : '+').padEnd(progress_bar_1.LABEL_WIDTH)} ${relativeOutputLocation}`));
 };
 exports.renderStillFlow = renderStillFlow;

package/dist/setup-cache.d.ts

@@ -1,7 +1,7 @@
 import type { LogLevel } from '@remotion/renderer';
 import type { BundlingState, CopyingState } from '@remotion/studio-server';
 import type { GitSource } from '@remotion/studio-shared';
-export declare const bundleOnCliOrTakeServeUrl: ({ fullPath, remotionRoot, publicDir, onProgress, indentOutput, logLevel, bundlingStep, steps, onDirectoryCreated, quietProgress, quietFlag, outDir, gitSource, bufferStateDelayInMilliseconds, maxTimelineTracks, publicPath, }: {
+export declare const bundleOnCliOrTakeServeUrl: ({ fullPath, remotionRoot, publicDir, onProgress, indentOutput, logLevel, onDirectoryCreated, quietProgress, quietFlag, outDir, gitSource, bufferStateDelayInMilliseconds, maxTimelineTracks, publicPath, }: {
     fullPath: string;
     remotionRoot: string;
     publicDir: string | null;
@@ -11,8 +11,6 @@ export declare const bundleOnCliOrTakeServeUrl: ({ fullPath, remotionRoot, publi
     }) => void;
     indentOutput: boolean;
     logLevel: LogLevel;
-    bundlingStep: number;
-    steps: number;
     onDirectoryCreated: (path: string) => void;
     quietProgress: boolean;
     quietFlag: boolean;
@@ -25,7 +23,7 @@ export declare const bundleOnCliOrTakeServeUrl: ({ fullPath, remotionRoot, publi
     urlOrBundle: string;
     cleanup: () => void;
 }>;
-export declare const bundleOnCli: ({ fullPath, remotionRoot, publicDir, onProgressCallback, indent, logLevel, bundlingStep, steps, onDirectoryCreated, quietProgress, quietFlag, outDir, gitSource, maxTimelineTracks, bufferStateDelayInMilliseconds, publicPath, }: {
+export declare const bundleOnCli: ({ fullPath, remotionRoot, publicDir, onProgressCallback, indent, logLevel, onDirectoryCreated, quietProgress, quietFlag, outDir, gitSource, maxTimelineTracks, bufferStateDelayInMilliseconds, publicPath, }: {
     fullPath: string;
     remotionRoot: string;
     publicDir: string | null;
@@ -35,8 +33,6 @@ export declare const bundleOnCli: ({ fullPath, remotionRoot, publicDir, onProgre
     }) => void;
     indent: boolean;
     logLevel: LogLevel;
-    bundlingStep: number;
-    steps: number;
     onDirectoryCreated: (path: string) => void;
     quietProgress: boolean;
     quietFlag: boolean;

package/dist/setup-cache.js

@@ -12,7 +12,7 @@ const config_1 = require("./config");
 const log_1 = require("./log");
 const progress_bar_1 = require("./progress-bar");
 const should_use_non_overlaying_logger_1 = require("./should-use-non-overlaying-logger");
-const bundleOnCliOrTakeServeUrl = async ({ fullPath, remotionRoot, publicDir, onProgress, indentOutput, logLevel, bundlingStep, steps, onDirectoryCreated, quietProgress, quietFlag, outDir, gitSource, bufferStateDelayInMilliseconds, maxTimelineTracks, publicPath, }) => {
+const bundleOnCliOrTakeServeUrl = async ({ fullPath, remotionRoot, publicDir, onProgress, indentOutput, logLevel, onDirectoryCreated, quietProgress, quietFlag, outDir, gitSource, bufferStateDelayInMilliseconds, maxTimelineTracks, publicPath, }) => {
     const isServeUrl = renderer_1.RenderInternals.isServeUrl(fullPath);
     const isBundle = (0, fs_1.existsSync)(fullPath) && (0, fs_1.existsSync)(path_1.default.join(fullPath, 'index.html'));
     if (isServeUrl || isBundle) {
@@ -38,8 +38,6 @@ const bundleOnCliOrTakeServeUrl = async ({ fullPath, remotionRoot, publicDir, on
         onProgressCallback: onProgress,
         indent: indentOutput,
         logLevel,
-        bundlingStep,
-        steps,
         onDirectoryCreated,
         quietProgress,
         quietFlag,
@@ -55,7 +53,7 @@ const bundleOnCliOrTakeServeUrl = async ({ fullPath, remotionRoot, publicDir, on
     };
 };
 exports.bundleOnCliOrTakeServeUrl = bundleOnCliOrTakeServeUrl;
-const bundleOnCli = async ({ fullPath, remotionRoot, publicDir, onProgressCallback, indent, logLevel, bundlingStep, steps, onDirectoryCreated, quietProgress, quietFlag, outDir, gitSource, maxTimelineTracks, bufferStateDelayInMilliseconds, publicPath, }) => {
+const bundleOnCli = async ({ fullPath, remotionRoot, publicDir, onProgressCallback, indent, logLevel, onDirectoryCreated, quietProgress, quietFlag, outDir, gitSource, maxTimelineTracks, bufferStateDelayInMilliseconds, publicPath, }) => {
     var _a;
     const shouldCache = config_1.ConfigInternals.getWebpackCaching();
     const symlinkState = {
@@ -78,7 +76,7 @@ const bundleOnCli = async ({ fullPath, remotionRoot, publicDir, onProgressCallba
             bundling: bundlingState,
             copying: copyingState,
             symLinks: symlinkState,
-        }, bundlingStep, steps), newline);
+        }), newline);
         onProgressCallback({
             bundling: bundlingState,
             copying: copyingState,
@@ -157,12 +155,12 @@ const bundleOnCli = async ({ fullPath, remotionRoot, publicDir, onProgressCallba
         progress: 1,
         doneIn: Date.now() - bundleStartTime,
     };
-    log_1.Log.verbose({ logLevel, indent }, 'Bundling done in', bundlingState.doneIn + 'ms');
+    log_1.Log.verbose({ logLevel, indent }, `Bundling done in ${bundlingState.doneIn}ms`);
     copyingState = {
         ...copyingState,
         doneIn: copyStart ? Date.now() - copyStart : 0,
     };
-    log_1.Log.verbose({ logLevel, indent }, 'Copying done in ', copyingState.doneIn + 'ms');
+    log_1.Log.verbose({ logLevel, indent }, `Copying done in ${copyingState.doneIn}ms`);
     updateProgress(true);
     log_1.Log.verbose({ indent, logLevel }, 'Bundled under', bundled);
     const cacheExistedAfter = bundler_1.BundlerInternals.cacheExists(remotionRoot, 'production', hash) === 'exists';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.148",
+  "version": "4.0.150",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -32,14 +32,14 @@
     "dotenv": "9.0.2",
     "minimist": "1.2.6",
     "prompts": "2.4.2",
-    "@remotion/bundler": "4.0.148",
-    "@remotion/media-utils": "4.0.148",
-    "@remotion/player": "4.0.148",
-    "@remotion/renderer": "4.0.148",
-    "@remotion/studio-server": "4.0.148",
-    "@remotion/studio": "4.0.148",
-    "remotion": "4.0.148",
-    "@remotion/studio-shared": "4.0.148"
+    "@remotion/bundler": "4.0.150",
+    "@remotion/media-utils": "4.0.150",
+    "@remotion/renderer": "4.0.150",
+    "@remotion/studio-shared": "4.0.150",
+    "@remotion/player": "4.0.150",
+    "@remotion/studio-server": "4.0.150",
+    "remotion": "4.0.150",
+    "@remotion/studio": "4.0.150"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -64,9 +64,9 @@
     "react-dom": "18.3.1",
     "vitest": "0.31.1",
     "zod": "3.22.3",
-    "@remotion/zod-types": "4.0.148",
-    "@remotion/tailwind": "4.0.148",
-    "@remotion/skia": "4.0.148"
+    "@remotion/zod-types": "4.0.150",
+    "@remotion/tailwind": "4.0.150",
+    "@remotion/skia": "4.0.150"
   },
   "keywords": [
     "remotion",
@@ -81,8 +81,6 @@
   "scripts": {
     "formatting": "prettier src --check",
     "lint": "eslint src --ext ts,tsx",
-    "test": "vitest --run",
-    "build": "tsc -d",
-    "watch": "tsc -w"
+    "test": "vitest --run"
   }
 }