@remotion/cli 4.1.0-alpha11 → 4.1.0-alpha12

package/dist/editor/helpers/document-title.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setRenderJobs = exports.setUnsavedProps = exports.setCurrentVideoId = void 0;
+const truthy_1 = require("../../truthy");
+let currentVideoId = null;
+let unsavedProps = false;
+let tabInactive = false;
+let renderJobs = [];
+const setCurrentVideoId = (id) => {
+    currentVideoId = id;
+    updateTitle();
+};
+exports.setCurrentVideoId = setCurrentVideoId;
+const setUnsavedProps = (unsaved) => {
+    unsavedProps = unsaved;
+};
+exports.setUnsavedProps = setUnsavedProps;
+const setRenderJobs = (jobs) => {
+    renderJobs = jobs;
+    updateTitle();
+};
+exports.setRenderJobs = setRenderJobs;
+document.addEventListener('visibilitychange', () => {
+    tabInactive = document.visibilityState === 'hidden';
+    updateTitle();
+});
+const productName = 'Remotion Studio';
+const suffix = `- ${productName}`;
+const updateTitle = () => {
+    if (!currentVideoId) {
+        document.title = productName;
+        return;
+    }
+    const currentCompTitle = `${currentVideoId} / ${window.remotion_projectName}`;
+    document.title = [
+        getProgressInBrackets(currentVideoId, renderJobs),
+        unsavedProps && tabInactive ? '✏️' : null,
+        `${currentCompTitle} ${suffix}`,
+    ]
+        .filter(truthy_1.truthy)
+        .join(' ');
+};
+const getProgressInBrackets = (selectedCompositionId, jobs) => {
+    const currentRender = jobs.find((job) => job.status === 'running');
+    if (!currentRender) {
+        return null;
+    }
+    if (currentRender.status !== 'running') {
+        throw new Error('expected running job');
+    }
+    const progInPercent = Math.ceil(currentRender.progress.value * 100);
+    const progressInBrackets = currentRender.compositionId === selectedCompositionId
+        ? `[${progInPercent}%]`
+        : `[${progInPercent}% ${currentRender.compositionId}]`;
+    return progressInBrackets;
+};
+document.addEventListener('visibilitychange', () => {
+    tabInactive = document.visibilityState === 'hidden';
+    updateTitle();
+});

package/dist/editor/helpers/pick-color.js

@@ -11,13 +11,18 @@ const pickColor = () => {
     const open = new EyeDropper().open();
     open
         .then((color) => {
-        var _a;
-        (0, copy_text_1.copyText)(color.sRGBHex);
-        (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorDot_1.ColorDot, { color: color.sRGBHex }), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " Copied", ' ', color.sRGBHex] })),
-            created: Date.now(),
-            duration: 2000,
-            id: String(Math.random()),
+        (0, copy_text_1.copyText)(color.sRGBHex)
+            .then(() => {
+            var _a;
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorDot_1.ColorDot, { color: color.sRGBHex }), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " Copied", ' ', color.sRGBHex] })),
+                created: Date.now(),
+                duration: 2000,
+                id: String(Math.random()),
+            });
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
         });
     })
         .catch((err) => {

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/editor/icons/clipboard.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const ClipboardIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color?: string;
+}>;

package/dist/editor/icons/clipboard.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClipboardIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ClipboardIcon = ({ color, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 384 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
+exports.ClipboardIcon = ClipboardIcon;

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

@@ -1,2 +1,4 @@
 import type { SVGProps } from 'react';
-export declare const FileIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const FileIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color?: string;
+}>;

package/dist/editor/icons/file.js

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

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

@@ -6,3 +6,6 @@ export declare const CollapsedFolderIcon: React.FC<SVGProps<SVGSVGElement> & {
 export declare const ExpandedFolderIcon: React.FC<SVGProps<SVGSVGElement> & {
     color: string;
 }>;
+export declare const ExpandedFolderIconSolid: React.FC<SVGProps<SVGSVGElement> & {
+    color: string;
+}>;

package/dist/editor/icons/folder.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpandedFolderIcon = exports.CollapsedFolderIcon = void 0;
+exports.ExpandedFolderIconSolid = exports.ExpandedFolderIcon = exports.CollapsedFolderIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CollapsedFolderIcon = ({ color, ...props }) => {
     return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M447.1 96H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H63.1c-35.35 0-64 28.65-64 64v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V160C511.1 124.7 483.3 96 447.1 96zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h117.5c8.549 0 16.58 3.328 22.63 9.375L258.7 128H448c17.64 0 32 14.36 32 32V416z" }) }));
@@ -10,3 +10,7 @@ const ExpandedFolderIcon = ({ color, ...props }) => {
     return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M566.6 211.6C557.5 199.1 543.4 192 527.1 192H134.2C114.3 192 96.2 204.5 89.23 223.1L32 375.8V96c0-17.64 14.36-32 32-32h117.5c8.549 0 16.58 3.328 22.63 9.375L258.7 128H448c17.64 0 32 14.36 32 32h32c0-35.35-28.65-64-64-64H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h403.1c21.11 0 39.53-13.53 45.81-33.69l60-192C578.4 239.6 575.8 224 566.6 211.6zM543.2 244.8l-60 192C481.1 443.5 475 448 467.1 448H64c-3.322 0-6.357-.9551-9.373-1.898c-2.184-1.17-4.109-2.832-5.596-4.977c-3.031-4.375-3.703-9.75-1.828-14.73l72-192C121.5 228.2 127.5 224 134.2 224h393.8c5.141 0 9.844 2.375 12.89 6.516C543.9 234.7 544.8 239.9 543.2 244.8z" }) }));
 };
 exports.ExpandedFolderIcon = ExpandedFolderIcon;
+const ExpandedFolderIconSolid = ({ color, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M384 480h48c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224H144c-11.4 0-21.9 6-27.6 15.9L48 357.1V96c0-8.8 7.2-16 16-16H181.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8H416c8.8 0 16 7.2 16 16v32h48V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H87.7 384z" }) }));
+};
+exports.ExpandedFolderIconSolid = ExpandedFolderIconSolid;

package/dist/event-source-events.d.ts

@@ -27,4 +27,5 @@ export type EventSourceEvent = {
 } | {
     type: 'new-public-folder';
     files: StaticFile[];
+    folderExists: string | null;
 };

package/dist/event-source.js

@@ -36,6 +36,7 @@ const openEventSource = () => {
         }
         if (newEvent.type === 'new-public-folder') {
             window.remotion_staticFiles = newEvent.files;
+            window.remotion_publicFolderExists = newEvent.folderExists;
         }
         listeners.forEach((l) => {
             if (l.type === newEvent.type) {

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-input-props.js

@@ -33,7 +33,8 @@ const getInputProps = (onUpdate) => {
         return JSON.parse(parse_command_line_1.parsedCli.props);
     }
     catch (err) {
-        log_1.Log.error('You passed --props but it was neither valid JSON nor a file path to a valid JSON file.');
+        log_1.Log.error('You passed --props but it was neither valid JSON nor a file path to a valid JSON file. Provided value: ' +
+            parse_command_line_1.parsedCli.props);
         log_1.Log.info('Got the following value:', parse_command_line_1.parsedCli.props);
         log_1.Log.error('Check that your input is parseable using `JSON.parse` and try again.');
         if (node_os_1.default.platform() === 'win32') {

package/dist/handle-common-errors.js

@@ -27,8 +27,8 @@ const handleCommonError = async (err, logLevel) => {
     }
     if (err.message.includes('Error creating WebGL context')) {
         log_1.Log.info();
-        log_1.Log.info('💡 You might need to set the OpenGL renderer to "angle"');
-        log_1.Log.info('💡 Get help for this issue at https://www.remotion.dev/docs/three');
+        log_1.Log.warn('💡 You might need to set the OpenGL renderer to "angle" (or "swangle" if rendering on lambda). Learn why at https://www.remotion.dev/docs/three');
+        log_1.Log.warn("💡 Check how it's done at https://www.remotion.dev/docs/chromium-flags#--gl");
     }
     if (err.message.includes('The bucket does not allow ACLs')) {
         log_1.Log.info();

package/dist/index.d.ts

@@ -118,7 +118,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>;
@@ -127,7 +127,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;
@@ -136,6 +136,7 @@ export declare const CliInternals: {
         "every-nth-frame": number;
         "number-of-gif-loops": number;
         "number-of-shared-audio-tags": number;
+        version: string;
         codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
         concurrency: number;
         timeout: number;
@@ -191,7 +192,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;
     }) => {
@@ -206,8 +207,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").VideoConfig[]) => void;
     getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, }: {
         cliFlag: import("@remotion/renderer").CodecOrUndefined;

package/dist/index.js

@@ -94,7 +94,7 @@ const cli = async () => {
             (0, ffmpeg_1.ffprobeCommand)(remotionRoot, process.argv.slice(3));
         }
         else if (command === 'upgrade') {
-            await (0, upgrade_1.upgrade)(remotionRoot, parse_command_line_1.parsedCli['package-manager']);
+            await (0, upgrade_1.upgrade)(remotionRoot, parse_command_line_1.parsedCli['package-manager'], parse_command_line_1.parsedCli.version);
         }
         else if (command === versions_1.VERSIONS_COMMAND) {
             await (0, versions_1.versionsCommand)(remotionRoot);

package/dist/make-on-download.d.ts

@@ -0,0 +1,12 @@
+import type { LogLevel, RenderMediaOnDownload } from '@remotion/renderer';
+import type { DownloadProgress } from './progress-types';
+export declare const makeOnDownload: ({ indent, logLevel, updatesDontOverwrite, downloads, updateRenderProgress, }: {
+    indent: boolean;
+    logLevel: LogLevel;
+    updatesDontOverwrite: boolean;
+    downloads: DownloadProgress[];
+    updateRenderProgress: (progress: {
+        newline: boolean;
+        printToConsole: boolean;
+    }) => void;
+}) => RenderMediaOnDownload;

package/dist/make-on-download.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeOnDownload = void 0;
+const format_bytes_1 = require("./format-bytes");
+const log_1 = require("./log");
+const makeOnDownload = ({ indent, logLevel, updatesDontOverwrite, downloads, updateRenderProgress, }) => {
+    return (src) => {
+        const id = Math.random();
+        const download = {
+            id,
+            name: src,
+            progress: 0,
+            downloaded: 0,
+            totalBytes: null,
+        };
+        const nextDownloadIndex = downloads.length;
+        downloads.push(download);
+        log_1.Log.verboseAdvanced({ indent, logLevel }, `Starting download [${nextDownloadIndex}]:`, src);
+        updateRenderProgress({
+            newline: false,
+            printToConsole: !updatesDontOverwrite,
+        });
+        let lastUpdate = Date.now();
+        return ({ percent, downloaded, totalSize }) => {
+            download.progress = percent;
+            download.totalBytes = totalSize;
+            download.downloaded = downloaded;
+            if (lastUpdate + 1000 > Date.now() && updatesDontOverwrite) {
+                return;
+            }
+            lastUpdate = Date.now();
+            log_1.Log.verboseAdvanced({ indent, logLevel }, `Download [${nextDownloadIndex}]:`, percent ? `${(percent * 100).toFixed(1)}%` : (0, format_bytes_1.formatBytes)(downloaded));
+            updateRenderProgress({
+                newline: false,
+                printToConsole: !updatesDontOverwrite,
+            });
+        };
+    };
+};
+exports.makeOnDownload = makeOnDownload;

package/dist/parse-command-line.d.ts

@@ -11,6 +11,7 @@ type CommandLineOptions = {
     ['every-nth-frame']: number;
     ['number-of-gif-loops']: number;
     ['number-of-shared-audio-tags']: number;
+    version: string;
     codec: Codec;
     concurrency: number;
     timeout: number;

package/dist/preview-server/public-folder.js

@@ -38,12 +38,15 @@ const watchPublicFolder = ({ publicDir, onUpdate, staticHash, }) => {
                     onUpdate,
                     staticHash,
                 });
+                onUpdate();
                 watcher.close();
             }
         };
         const watcher = (0, node_fs_1.watch)(parentDir, {}, onDirChange);
         return;
     }
+    // Known bug: If whole public folder is deleted, this will not be called on macOS.
+    // This is not severe, so a wontfix for now.
     (0, node_fs_1.watch)(publicDir, { recursive: (0, env_supports_fs_recursive_1.envSupportsFsRecursive)() }, () => {
         (0, exports.fetchFolder)({ publicDir, staticHash });
         onUpdate();

package/dist/preview-server/render-queue/process-still.js

@@ -37,7 +37,7 @@ const processStill = async ({ job, remotionRoot, entryPoint, onProgress, addClea
         imageFormatFromUi: job.imageFormat,
         logLevel: job.verbose ? 'verbose' : 'info',
         onProgress,
-        indentOutput: true,
+        indent: true,
         addCleanupCallback,
         cancelSignal: job.cancelToken.cancelSignal,
         outputLocationFromUi: job.outName,

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/preview-server/routes.js

@@ -96,6 +96,7 @@ const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputPro
             ignoreCertificateErrors,
             openGlRenderer,
         },
+        publicFolderExists: (0, node_fs_1.existsSync)(publicDir) ? publicDir : null,
     }));
 };
 const handleProjectInfo = async (remotionRoot, _, response) => {

package/dist/progress-bar.js

@@ -5,6 +5,7 @@ const renderer_1 = require("@remotion/renderer");
 const ansi_diff_1 = require("./ansi/ansi-diff");
 const chalk_1 = require("./chalk");
 const download_progress_1 = require("./download-progress");
+const format_bytes_1 = require("./format-bytes");
 const make_progress_bar_1 = require("./make-progress-bar");
 const truthy_1 = require("./truthy");
 const createOverwriteableCliOutput = (options) => {
@@ -171,13 +172,7 @@ const getGuiProgressSubtitle = (progress) => {
         return `Bundling ${Math.round(progress.bundling.progress * 100)}%`;
     }
     if (progress.copyingState.doneIn === null) {
-        const bytes = new Intl.NumberFormat('en', {
-            notation: 'compact',
-            style: 'unit',
-            unit: 'byte',
-            unitDisplay: 'narrow',
-        });
-        return `Copying public dir ${bytes.format(progress.copyingState.bytes)}`;
+        return `Copying public dir ${(0, format_bytes_1.formatBytes)(progress.copyingState.bytes)}`;
     }
     if (!progress.rendering) {
         return `Getting compositions`;

package/dist/render-flows/render.js

@@ -40,6 +40,7 @@ const get_filename_1 = require("../get-filename");
 const get_final_output_codec_1 = require("../get-final-output-codec");
 const image_formats_1 = require("../image-formats");
 const log_1 = require("../log");
+const make_on_download_1 = require("../make-on-download");
 const parse_command_line_1 = require("../parse-command-line");
 const progress_bar_1 = require("../progress-bar");
 const setup_cache_1 = require("../setup-cache");
@@ -83,7 +84,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         bytes: 0,
         doneIn: null,
     };
-    const updateRenderProgress = (newline) => {
+    const updateRenderProgress = ({ newline, printToConsole, }) => {
         const aggregateRenderProgress = {
             rendering: renderingProgress,
             stitching: shouldOutputImageSequence ? null : stitchingProgress,
@@ -97,7 +98,9 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
             stitchingStep: steps.indexOf('stitching'),
         });
         onProgress({ message, value: progress, ...aggregateRenderProgress });
-        return renderProgress.update(updatesDontOverwrite ? message : output, newline);
+        if (printToConsole) {
+            renderProgress.update(updatesDontOverwrite ? message : output, newline);
+        }
     };
     const { urlOrBundle, cleanup: cleanupBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         fullPath: fullEntryPoint,
@@ -106,7 +109,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         onProgress: ({ bundling, copying }) => {
             bundlingProgress = bundling;
             copyingState = copying;
-            updateRenderProgress(false);
+            updateRenderProgress({ newline: false, printToConsole: true });
         },
         indentOutput: indent,
         logLevel,
@@ -118,24 +121,13 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         quietProgress: updatesDontOverwrite,
     });
     addCleanupCallback(() => cleanupBundle());
-    const onDownload = (src) => {
-        const id = Math.random();
-        const download = {
-            id,
-            name: src,
-            progress: 0,
-            downloaded: 0,
-            totalBytes: null,
-        };
-        downloads.push(download);
-        updateRenderProgress(false);
-        return ({ percent, downloaded, totalSize }) => {
-            download.progress = percent;
-            download.totalBytes = totalSize;
-            download.downloaded = downloaded;
-            updateRenderProgress(false);
-        };
-    };
+    const onDownload = (0, make_on_download_1.makeOnDownload)({
+        downloads,
+        indent,
+        logLevel,
+        updateRenderProgress,
+        updatesDontOverwrite,
+    });
     const puppeteerInstance = await browserInstance;
     addCleanupCallback(() => puppeteerInstance.close(false, logLevel, indent));
     const actualConcurrency = renderer_1.RenderInternals.getActualConcurrency(concurrency);
@@ -220,7 +212,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
             serializedInputPropsWithCustomSchema,
             onFrameUpdate: (rendered) => {
                 renderingProgress.frames = rendered;
-                updateRenderProgress(false);
+                updateRenderProgress({ newline: false, printToConsole: true });
             },
             onStart: () => undefined,
             onDownload,
@@ -251,7 +243,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
                 data: config.props,
             }).serializedString,
         });
-        updateRenderProgress(true);
+        updateRenderProgress({ newline: true, printToConsole: true });
         log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.blue(`▶ ${absoluteOutputFile}`));
         return;
     }
@@ -303,7 +295,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
                 update.renderedDoneIn;
             renderingProgress.frames =
                 update.renderedFrames;
-            updateRenderProgress(false);
+            updateRenderProgress({ newline: false, printToConsole: true });
         },
         puppeteerInstance,
         onDownload,
@@ -323,7 +315,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
             staticBase: null,
         }).serializedString,
     });
-    updateRenderProgress(true);
+    updateRenderProgress({ newline: true, printToConsole: 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 }) => {

package/dist/render-flows/still.d.ts

@@ -1,6 +1,6 @@
 import type { Browser, BrowserExecutable, CancelSignal, ChromiumOptions, LogLevel, StillImageFormat } from '@remotion/renderer';
 import type { JobProgressCallback } from '../preview-server/render-queue/job';
-export declare const renderStillFlow: ({ remotionRoot, fullEntryPoint, entryPointReason, remainingArgs, browser, browserExecutable, chromiumOptions, envVariables, height, serializedInputPropsWithCustomSchema, overwrite, port, publicDir, puppeteerTimeout, jpegQuality, scale, stillFrame, width, compositionIdFromUi, imageFormatFromUi, logLevel, onProgress, indentOutput, addCleanupCallback, cancelSignal, outputLocationFromUi, }: {
+export declare const renderStillFlow: ({ 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, }: {
     remotionRoot: string;
     fullEntryPoint: string;
     entryPointReason: string;
@@ -23,7 +23,7 @@ export declare const renderStillFlow: ({ remotionRoot, fullEntryPoint, entryPoin
     imageFormatFromUi: StillImageFormat | null;
     logLevel: LogLevel;
     onProgress: JobProgressCallback;
-    indentOutput: boolean;
+    indent: boolean;
     addCleanupCallback: (cb: () => void) => void;
     cancelSignal: CancelSignal | null;
     outputLocationFromUi: string | null;