@remotion/cli 3.3.19 → 3.3.26

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

@@ -4,10 +4,10 @@ exports.processVideoJob = void 0;
 const convert_entry_point_to_serve_url_1 = require("../../convert-entry-point-to-serve-url");
 const get_cli_options_1 = require("../../get-cli-options");
 const render_1 = require("../../render-flows/render");
-const processVideoJob = async ({ job, remotionRoot, entryPoint, onProgress, }) => {
+const processVideoJob = async ({ job, remotionRoot, entryPoint, onProgress, addCleanupCallback, }) => {
     var _a;
     if (job.type !== 'video') {
-        throw new Error('Expected still job');
+        throw new Error('Expected video job');
     }
     const { publicDir, browserExecutable, ffmpegExecutable, ffprobeExecutable, chromiumOptions, envVariables, inputProps, port, browser, puppeteerTimeout, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
@@ -39,7 +39,7 @@ const processVideoJob = async ({ job, remotionRoot, entryPoint, onProgress, }) =
         configFileImageFormat: undefined,
         logLevel: job.verbose ? 'verbose' : 'info',
         onProgress,
-        indentOutput: true,
+        indent: true,
         // TODO: Make configurable
         concurrency: null,
         // TODO: Make configurable
@@ -48,6 +48,10 @@ const processVideoJob = async ({ job, remotionRoot, entryPoint, onProgress, }) =
         frameRange: null,
         quiet: false,
         shouldOutputImageSequence: false,
+        addCleanupCallback,
+        outputLocationFromUI: job.outName,
+        uiCodec: job.codec,
+        uiImageFormat: job.imageFormat,
     });
     // TODO: Allow cancel signal
     // TODO: Accept CLI options

package/dist/preview-server/render-queue/queue.d.ts

@@ -1,11 +1,12 @@
 import type { JobProgressCallback, RenderJob, RenderJobWithCleanup } from './job';
 export declare const getRenderQueue: () => RenderJob[];
 export declare const notifyClientsOfJobUpdate: () => void;
-export declare const processJob: ({ job, remotionRoot, entryPoint, onProgress, }: {
+export declare const processJob: ({ job, remotionRoot, entryPoint, onProgress, addCleanupCallback, }: {
     job: RenderJob;
     remotionRoot: string;
     entryPoint: string;
     onProgress: JobProgressCallback;
+    addCleanupCallback: (cb: () => Promise<void>) => void;
 }) => Promise<void>;
 export declare const addJob: ({ job, entryPoint, remotionRoot, }: {
     job: RenderJobWithCleanup;

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

@@ -37,13 +37,25 @@ const notifyClientsOfJobUpdate = () => {
     });
 };
 exports.notifyClientsOfJobUpdate = notifyClientsOfJobUpdate;
-const processJob = async ({ job, remotionRoot, entryPoint, onProgress, }) => {
+const processJob = async ({ job, remotionRoot, entryPoint, onProgress, addCleanupCallback, }) => {
     if (job.type === 'still') {
-        await (0, process_still_1.processStill)({ job, remotionRoot, entryPoint, onProgress });
+        await (0, process_still_1.processStill)({
+            job,
+            remotionRoot,
+            entryPoint,
+            onProgress,
+            addCleanupCallback,
+        });
         return;
     }
     if (job.type === 'video') {
-        await (0, process_video_1.processVideoJob)({ job, remotionRoot, entryPoint, onProgress });
+        await (0, process_video_1.processVideoJob)({
+            job,
+            remotionRoot,
+            entryPoint,
+            onProgress,
+            addCleanupCallback,
+        });
         return;
     }
     throw new Error(`Unknown job ${JSON.stringify(job)}`);
@@ -75,6 +87,7 @@ const processJobIfPossible = async ({ remotionRoot, entryPoint, }) => {
     if (!nextJob) {
         return;
     }
+    const jobCleanups = [];
     try {
         updateJob(nextJob.id, (job) => {
             return {
@@ -100,6 +113,9 @@ const processJobIfPossible = async ({ remotionRoot, entryPoint, }) => {
                     };
                 });
             },
+            addCleanupCallback: (cleanup) => {
+                jobCleanups.push(cleanup);
+            },
         });
         log_1.Log.info(chalk_1.chalk.gray('╰─ Done in ' + (Date.now() - startTime) + 'ms.'));
         const { unwatch } = (0, file_watcher_1.installFileWatcher)({
@@ -146,5 +162,8 @@ const processJobIfPossible = async ({ remotionRoot, entryPoint, }) => {
             });
         });
     }
+    finally {
+        await Promise.all(jobCleanups.map((c) => c()));
+    }
 };
 exports.processJobIfPossible = processJobIfPossible;

package/dist/preview-server/routes/add-render.js

@@ -10,8 +10,7 @@ const handleAddRender = ({ input, entryPoint, remotionRoot, }) => {
             remotionRoot,
             job: {
                 cleanup: [],
-                // TODO: Allow to change codec
-                codec: 'h264',
+                codec: input.codec,
                 compositionId: input.compositionId,
                 deletedOutputLocation: false,
                 type: 'video',

package/dist/preview-server/routes/subscribe-to-file-existence.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToFileExistence = void 0;
 const file_existence_watchers_1 = require("../file-existence-watchers");
-const subscribeToFileExistence = ({ input: { file }, remotionRoot }) => {
-    // TODO: What if the user reloads the page? The file watcher doesn't get cleared
+const subscribeToFileExistence = ({ input: { file, clientId }, remotionRoot }) => {
     const { exists } = (0, file_existence_watchers_1.subscribeToFileExistenceWatchers)({
         file,
         remotionRoot,
+        clientId,
     });
     return Promise.resolve({ exists });
 };

package/dist/preview-server/routes/unsubscribe-from-file-existence.js

@@ -3,7 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.unsubscribeFromFileExistence = void 0;
 const file_existence_watchers_1 = require("../file-existence-watchers");
 const unsubscribeFromFileExistence = ({ input, remotionRoot }) => {
-    (0, file_existence_watchers_1.unsubscribeFromFileExistenceWatchers)({ file: input.file, remotionRoot });
+    (0, file_existence_watchers_1.unsubscribeFromFileExistenceWatchers)({
+        file: input.file,
+        clientId: input.clientId,
+        remotionRoot,
+    });
     return Promise.resolve(undefined);
 };
 exports.unsubscribeFromFileExistence = unsubscribeFromFileExistence;

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

@@ -1,6 +1,6 @@
 import type { IncomingMessage, ServerResponse } from 'http';
 import type { LiveEventsServer } from './live-events';
-export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, userPassedPublicDir, }: {
+export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, publicDir, }: {
     hash: string;
     hashPrefix: string;
     request: IncomingMessage;
@@ -9,5 +9,5 @@ export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveE
     getCurrentInputProps: () => object;
     getEnvVariables: () => Record<string, string>;
     remotionRoot: string;
-    userPassedPublicDir: string | null;
+    publicDir: string;
 }) => void | Promise<void>;

package/dist/preview-server/routes.js

@@ -14,6 +14,7 @@ const get_file_source_1 = require("./error-overlay/react-overlay/utils/get-file-
 const open_in_editor_1 = require("./error-overlay/react-overlay/utils/open-in-editor");
 const get_package_manager_1 = require("./get-package-manager");
 const project_info_1 = require("./project-info");
+const public_folder_1 = require("./public-folder");
 const serve_static_1 = require("./serve-static");
 const update_available_1 = require("./update-available");
 const handleUpdate = async (remotionRoot, _, response) => {
@@ -27,13 +28,14 @@ const static404 = (response) => {
     response.writeHead(404);
     response.end('The static/ prefix has been changed, this URL is no longer valid.');
 };
-const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputProps, getEnvVariables, }) => {
+const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputProps, getEnvVariables, publicDir, }) => {
     var _a;
     const [edit] = await editorGuess;
     const displayName = (0, open_in_editor_1.getDisplayNameForEditor)(edit ? edit.command : null);
     response.setHeader('content-type', 'text/html');
     response.writeHead(200);
     const packageManager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
+    (0, public_folder_1.fetchFolder)({ publicDir, staticHash: hash });
     response.end(bundler_1.BundlerInternals.indexHtml({
         staticHash: hash,
         baseDir: '/',
@@ -43,6 +45,7 @@ const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputPro
         remotionRoot,
         previewServerCommand: packageManager === 'unknown' ? null : packageManager.startCommand,
         numberOfAudioTags: (_a = parse_command_line_1.parsedCli['number-of-shared-audio-tags']) !== null && _a !== void 0 ? _a : (0, number_of_shared_audio_tags_1.getNumberOfSharedAudioTags)(),
+        publicFiles: (0, public_folder_1.getFiles)(),
         includeFavicon: true,
         title: 'Remotion Preview',
     }));
@@ -124,7 +127,7 @@ const handleFavicon = (_, response) => {
     const readStream = (0, fs_1.createReadStream)(filePath);
     readStream.pipe(response);
 };
-const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, userPassedPublicDir, }) => {
+const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, publicDir, }) => {
     const url = new URL(request.url, 'http://localhost');
     if (url.pathname === '/api/update') {
         return handleUpdate(remotionRoot, request, response);
@@ -150,9 +153,6 @@ const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, g
         return liveEventsServer.router(request, response);
     }
     if (url.pathname.startsWith(hash)) {
-        const publicDir = userPassedPublicDir
-            ? path_1.default.resolve(remotionRoot, userPassedPublicDir)
-            : path_1.default.join(remotionRoot, 'public');
         return (0, serve_static_1.serveStatic)(publicDir, hash, request, response);
     }
     if (url.pathname.startsWith(hashPrefix)) {
@@ -164,6 +164,7 @@ const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, g
         response,
         getCurrentInputProps,
         getEnvVariables,
+        publicDir,
     });
 };
 exports.handleRoutes = handleRoutes;

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

@@ -1,6 +1,8 @@
 import type { WebpackOverrideFn } from 'remotion';
 import type { LiveEventsServer } from './live-events';
-export declare const startServer: (entry: string, userDefinedComponent: string, options: {
+export declare const startServer: (options: {
+    entry: string;
+    userDefinedComponent: string;
     webpackOverride: WebpackOverrideFn;
     getCurrentInputProps: () => object;
     getEnvVariables: () => Record<string, string>;
@@ -8,8 +10,11 @@ export declare const startServer: (entry: string, userDefinedComponent: string,
     maxTimelineTracks?: number;
     remotionRoot: string;
     keyboardShortcutsEnabled: boolean;
+    publicDir: string;
     userPassedPublicDir: string | null;
     poll: number | null;
+    hash: string;
+    hashPrefix: string;
 }) => Promise<{
     port: number;
     liveEventsServer: LiveEventsServer;

package/dist/preview-server/start-server.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.startServer = void 0;
 const bundler_1 = require("@remotion/bundler");
 const renderer_1 = require("@remotion/renderer");
-const crypto_1 = __importDefault(require("crypto"));
 const fs_1 = __importDefault(require("fs"));
 const http_1 = __importDefault(require("http"));
 const os_1 = __importDefault(require("os"));
@@ -17,12 +16,12 @@ const dev_middleware_1 = require("./dev-middleware");
 const hot_middleware_1 = require("./hot-middleware");
 const live_events_1 = require("./live-events");
 const routes_1 = require("./routes");
-const startServer = async (entry, userDefinedComponent, options) => {
+const startServer = async (options) => {
     var _a, _b, _c, _d;
     const tmpDir = await fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'react-motion-graphics'));
     const [, config] = bundler_1.BundlerInternals.webpackConfig({
-        entry,
-        userDefinedComponent,
+        entry: options.entry,
+        userDefinedComponent: options.userDefinedComponent,
         outDir: tmpDir,
         environment: 'development',
         webpackOverride: (_a = options === null || options === void 0 ? void 0 : options.webpackOverride) !== null && _a !== void 0 ? _a : config_1.ConfigInternals.getWebpackOverrideFn(),
@@ -37,8 +36,6 @@ const startServer = async (entry, userDefinedComponent, options) => {
         poll: options.poll,
     });
     const compiler = (0, bundler_1.webpack)(config);
-    const hashPrefix = '/static-';
-    const hash = `${hashPrefix}${crypto_1.default.randomBytes(6).toString('hex')}`;
     const wdmMiddleware = (0, dev_middleware_1.wdm)(compiler);
     const whm = (0, hot_middleware_1.webpackHotMiddleware)(compiler);
     const liveEventsServer = (0, live_events_1.makeLiveEventsRouter)();
@@ -57,15 +54,15 @@ const startServer = async (entry, userDefinedComponent, options) => {
         })
             .then(() => {
             return (0, routes_1.handleRoutes)({
-                hash,
-                hashPrefix,
+                hash: options.hash,
+                hashPrefix: options.hashPrefix,
                 request,
                 response,
                 liveEventsServer,
                 getCurrentInputProps: options.getCurrentInputProps,
                 getEnvVariables: options.getEnvVariables,
                 remotionRoot: options.remotionRoot,
-                userPassedPublicDir: options.userPassedPublicDir,
+                publicDir: options.publicDir,
             });
         })
             .catch((err) => {

package/dist/preview.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.previewCommand = void 0;
 const better_opn_1 = __importDefault(require("better-opn"));
+const crypto_1 = __importDefault(require("crypto"));
 const path_1 = __importDefault(require("path"));
 const chalk_1 = require("./chalk");
 const config_1 = require("./config");
@@ -14,6 +15,8 @@ const get_input_props_1 = require("./get-input-props");
 const get_network_address_1 = require("./get-network-address");
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
+const get_absolute_public_dir_1 = require("./preview-server/get-absolute-public-dir");
+const public_folder_1 = require("./preview-server/public-folder");
 const start_server_1 = require("./preview-server/start-server");
 const noop = () => undefined;
 let liveEventsListener = null;
@@ -79,16 +82,40 @@ const previewCommand = async (remotionRoot, args) => {
             });
         });
     });
-    const { port, liveEventsServer } = await (0, start_server_1.startServer)(path_1.default.resolve(__dirname, 'previewEntry.js'), fullPath, {
+    const publicDir = (0, get_absolute_public_dir_1.getAbsolutePublicDir)({
+        userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
+        remotionRoot,
+    });
+    const hashPrefix = '/static-';
+    const staticHash = `${hashPrefix}${crypto_1.default.randomBytes(6).toString('hex')}`;
+    (0, public_folder_1.initPublicFolderWatch)({
+        publicDir,
+        remotionRoot,
+        onUpdate: () => {
+            waitForLiveEventsListener().then((listener) => {
+                listener.sendEventToClient({
+                    type: 'new-public-folder',
+                    files: (0, public_folder_1.getFiles)(),
+                });
+            });
+        },
+        staticHash,
+    });
+    const { port, liveEventsServer } = await (0, start_server_1.startServer)({
+        entry: path_1.default.resolve(__dirname, 'previewEntry.js'),
+        userDefinedComponent: fullPath,
         getCurrentInputProps: () => inputProps,
         getEnvVariables: () => envVariables,
         port: desiredPort,
         maxTimelineTracks: config_1.ConfigInternals.getMaxTimelineTracks(),
         remotionRoot,
         keyboardShortcutsEnabled: config_1.ConfigInternals.getKeyboardShortcutsEnabled(),
-        userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
+        publicDir,
         webpackOverride: config_1.ConfigInternals.getWebpackOverrideFn(),
         poll: config_1.ConfigInternals.getWebpackPolling(),
+        userPassedPublicDir: config_1.ConfigInternals.getPublicDir(),
+        hash: staticHash,
+        hashPrefix,
     });
     setLiveEventsListener(liveEventsServer);
     const networkAddress = (0, get_network_address_1.getNetworkAddress)();

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

@@ -1,6 +1,6 @@
-import type { Browser, BrowserExecutable, ChromiumOptions, FfmpegExecutable, FrameRange, ImageFormat, LogLevel } from '@remotion/renderer';
+import type { Browser, BrowserExecutable, ChromiumOptions, Codec, FfmpegExecutable, FrameRange, ImageFormat, LogLevel } from '@remotion/renderer';
 import type { JobProgressCallback } from '../preview-server/render-queue/job';
-export declare const renderCompFlow: ({ remotionRoot, fullEntryPoint, ffmpegExecutable, ffprobeExecutable, indentOutput, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, configFileImageFormat, quality, onProgress, }: {
+export declare const renderCompFlow: ({ remotionRoot, fullEntryPoint, ffmpegExecutable, ffprobeExecutable, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, configFileImageFormat, outputLocationFromUI, quality, onProgress, addCleanupCallback, uiCodec, uiImageFormat, }: {
     remotionRoot: string;
     fullEntryPoint: string;
     entryPointReason: string;
@@ -11,7 +11,7 @@ export declare const renderCompFlow: ({ remotionRoot, fullEntryPoint, ffmpegExec
     logLevel: LogLevel;
     browser: Browser;
     scale: number;
-    indentOutput: boolean;
+    indent: boolean;
     shouldOutputImageSequence: boolean;
     publicDir: string | null;
     inputProps: object;
@@ -22,6 +22,7 @@ export declare const renderCompFlow: ({ remotionRoot, fullEntryPoint, ffmpegExec
     width: number | null;
     remainingArgs: string[];
     compositionIdFromUi: string | null;
+    outputLocationFromUI: string | null;
     overwrite: boolean;
     quiet: boolean;
     concurrency: number | null;
@@ -30,4 +31,7 @@ export declare const renderCompFlow: ({ remotionRoot, fullEntryPoint, ffmpegExec
     configFileImageFormat: ImageFormat | undefined;
     quality: number | undefined;
     onProgress: JobProgressCallback;
+    addCleanupCallback: (cb: () => Promise<void>) => void;
+    uiCodec: Codec | null;
+    uiImageFormat: ImageFormat | null;
 }) => Promise<void>;

package/dist/render-flows/render.js

@@ -9,32 +9,37 @@ const fs_1 = __importDefault(require("fs"));
 const os_1 = __importDefault(require("os"));
 const path_1 = __importDefault(require("path"));
 const chalk_1 = require("../chalk");
+const config_1 = require("../config");
 const get_cli_options_1 = require("../get-cli-options");
 const get_composition_with_dimension_override_1 = require("../get-composition-with-dimension-override");
 const get_filename_1 = require("../get-filename");
+const get_final_output_codec_1 = require("../get-final-output-codec");
 const get_render_media_options_1 = require("../get-render-media-options");
 const image_formats_1 = require("../image-formats");
 const log_1 = require("../log");
+const parse_command_line_1 = require("../parse-command-line");
 const progress_bar_1 = require("../progress-bar");
 const setup_cache_1 = require("../setup-cache");
 const truthy_1 = require("../truthy");
 const user_passed_output_location_1 = require("../user-passed-output-location");
-const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable, ffprobeExecutable, indentOutput, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, configFileImageFormat, quality, onProgress, }) => {
+const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable, ffprobeExecutable, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, configFileImageFormat, outputLocationFromUI, quality, onProgress, addCleanupCallback, uiCodec, uiImageFormat, }) => {
+    var _a;
     const downloads = [];
     const downloadMap = renderer_1.RenderInternals.makeDownloadMap();
+    addCleanupCallback(() => renderer_1.RenderInternals.cleanDownloadMap(downloadMap));
     const ffmpegVersion = await renderer_1.RenderInternals.getFfmpegVersion({
         ffmpegExecutable,
         remotionRoot,
     });
-    log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, 'FFMPEG Version:', ffmpegVersion ? ffmpegVersion.join('.') : 'Built from source');
-    log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, 'Browser executable: ', browserExecutable);
-    log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, 'Asset dirs', downloadMap.assetDir);
+    log_1.Log.verboseAdvanced({ indent, logLevel }, 'FFMPEG Version:', ffmpegVersion ? ffmpegVersion.join('.') : 'Built from source');
+    log_1.Log.verboseAdvanced({ indent, logLevel }, 'Browser executable: ', browserExecutable);
+    log_1.Log.verboseAdvanced({ indent, logLevel }, 'Asset dirs', downloadMap.assetDir);
     const browserInstance = (0, renderer_1.openBrowser)(browser, {
         browserExecutable,
         shouldDumpIo: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
         chromiumOptions,
         forceDeviceScaleFactor: scale,
-        indentationString: indentOutput ? log_1.INDENT_TOKEN + ' ' : '',
+        indentationString: indent ? log_1.INDENT_TOKEN + ' ' : '',
     });
     const steps = [
         renderer_1.RenderInternals.isServeUrl(fullEntryPoint) ? null : 'bundling',
@@ -48,9 +53,10 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
         publicDir,
         // TODO: Implement onProgress
         onProgress: () => undefined,
-        indentOutput,
+        indentOutput: indent,
         logLevel,
     });
+    addCleanupCallback(cleanupBundle);
     const onDownload = (src) => {
         const id = Math.random();
         const download = {
@@ -70,6 +76,7 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
         };
     };
     const puppeteerInstance = await browserInstance;
+    addCleanupCallback(() => puppeteerInstance.close(false));
     const comps = await (0, renderer_1.getCompositions)(urlOrBundle, {
         inputProps,
         puppeteerInstance,
@@ -87,10 +94,12 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
         args: remainingArgs,
         compositionIdFromUi,
     });
-    // TODO: Should use codec from UI if explicitly specified
-    const { codec, reason: codecReason } = (0, get_cli_options_1.getFinalCodec)({
+    const { codec, reason: codecReason } = (0, get_final_output_codec_1.getFinalOutputCodec)({
+        cliFlag: parse_command_line_1.parsedCli.codec,
+        configFile: (_a = config_1.ConfigInternals.getOutputCodecOrUndefined()) !== null && _a !== void 0 ? _a : null,
         downloadName: null,
         outName: (0, user_passed_output_location_1.getUserPassedOutputLocation)(argsAfterComposition),
+        uiCodec,
     });
     (0, get_cli_options_1.validateFfmepgCanUseCodec)(codec, remotionRoot);
     renderer_1.RenderInternals.validateEvenDimensionsWithCodec({
@@ -99,20 +108,22 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
         codec,
         scale,
     });
-    // TODO: Should use output location from UI if explicitly specified
     const relativeOutputLocation = (0, get_filename_1.getOutputFilename)({
         codec,
         imageSequence: shouldOutputImageSequence,
         compositionName: compositionId,
         defaultExtension: renderer_1.RenderInternals.getFileExtensionFromCodec(codec, 'final'),
         args: argsAfterComposition,
+        indent,
+        fromUi: outputLocationFromUI,
+        logLevel,
     });
-    log_1.Log.infoAdvanced({ indent: indentOutput, logLevel }, chalk_1.chalk.gray(`Entry point = ${fullEntryPoint} (${entryPointReason}), Composition = ${compositionId} (${reason}), Codec = ${codec} (${codecReason}), Output = ${relativeOutputLocation}`));
+    log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.gray(`Entry point = ${fullEntryPoint} (${entryPointReason}), Composition = ${compositionId} (${reason}), Codec = ${codec} (${codecReason}), Output = ${relativeOutputLocation}`));
     const absoluteOutputFile = (0, get_cli_options_1.getAndValidateAbsoluteOutputFile)(relativeOutputLocation, overwrite);
     const outputDir = shouldOutputImageSequence
         ? absoluteOutputFile
         : await fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'react-motion-render'));
-    log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, 'Output dir', outputDir);
+    log_1.Log.verboseAdvanced({ indent, logLevel }, 'Output dir', outputDir);
     const renderProgress = (0, progress_bar_1.createOverwriteableCliOutput)({
         quiet,
     });
@@ -150,12 +161,15 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
                 message: 'Bundled',
                 progress: 1,
             },
-        }, indentOutput);
+        }, indent);
         onProgress({ progress, message });
         return renderProgress.update(output);
     };
-    // TODO: Should take the one from the UI instead
-    const imageFormat = (0, image_formats_1.getImageFormat)(shouldOutputImageSequence ? undefined : codec, configFileImageFormat);
+    const imageFormat = (0, image_formats_1.getImageFormat)({
+        codec: shouldOutputImageSequence ? undefined : codec,
+        configFileImageFormat,
+        uiImageFormat,
+    });
     if (shouldOutputImageSequence) {
         fs_1.default.mkdirSync(absoluteOutputFile, {
             recursive: true,
@@ -174,10 +188,10 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
             onStart: () => undefined,
             onDownload: (src) => {
                 if (src.startsWith('data:')) {
-                    log_1.Log.infoAdvanced({ indent: indentOutput, logLevel }, '\nWriting Data URL to file: ', src.substring(0, 30) + '...');
+                    log_1.Log.infoAdvanced({ indent, logLevel }, '\nWriting Data URL to file: ', src.substring(0, 30) + '...');
                 }
                 else {
-                    log_1.Log.infoAdvanced({ indent: indentOutput, logLevel }, '\nDownloading asset... ', src);
+                    log_1.Log.infoAdvanced({ indent, logLevel }, '\nDownloading asset... ', src);
                 }
             },
             outputDir,
@@ -199,8 +213,8 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
             downloadMap,
         });
         updateRenderProgress();
-        log_1.Log.infoAdvanced({ indent: indentOutput, logLevel });
-        log_1.Log.infoAdvanced({ indent: indentOutput, logLevel }, chalk_1.chalk.cyan(`▶ ${absoluteOutputFile}`));
+        log_1.Log.infoAdvanced({ indent, logLevel });
+        log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.cyan(`▶ ${absoluteOutputFile}`));
     }
     const options = await (0, get_render_media_options_1.getRenderMediaOptions)({
         config,
@@ -223,29 +237,18 @@ const renderCompFlow = async ({ remotionRoot, fullEntryPoint, ffmpegExecutable,
         onDownload,
         downloadMap,
         onSlowestFrames: (slowestFrames) => {
-            log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel });
-            log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, `Slowest frames:`);
+            log_1.Log.verboseAdvanced({ indent, logLevel });
+            log_1.Log.verboseAdvanced({ indent, logLevel }, `Slowest frames:`);
             slowestFrames.forEach(({ frame, time }) => {
-                log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, `Frame ${frame} (${time.toFixed(3)}ms)`);
+                log_1.Log.verboseAdvanced({ indent, logLevel }, `Frame ${frame} (${time.toFixed(3)}ms)`);
             });
         },
-        printLog: (...str) => log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, ...str),
+        printLog: (...str) => log_1.Log.verboseAdvanced({ indent, logLevel }, ...str),
     });
-    log_1.Log.infoAdvanced({ indent: indentOutput, logLevel });
-    log_1.Log.infoAdvanced({ indent: indentOutput, logLevel }, chalk_1.chalk.cyan(`▶ ${absoluteOutputFile}`));
-    try {
-        await cleanupBundle();
-        await renderer_1.RenderInternals.cleanDownloadMap(downloadMap);
-        log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, 'Cleaned up', downloadMap.assetDir);
-    }
-    catch (err) {
-        log_1.Log.warnAdvanced({ indent: indentOutput, logLevel }, 'Could not clean up directory.');
-        log_1.Log.warnAdvanced({ indent: indentOutput, logLevel }, err);
-        log_1.Log.warnAdvanced({ indent: indentOutput, logLevel }, 'Do you have minimum required Node.js version?');
-    }
-    // TODO: This will not indent
-    if (renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose')) {
-        renderer_1.RenderInternals.perf.logPerf();
+    log_1.Log.infoAdvanced({ indent, logLevel });
+    log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.cyan(`▶ ${absoluteOutputFile}`));
+    for (const line of renderer_1.RenderInternals.perf.getPerf()) {
+        log_1.Log.verboseAdvanced({ indent, logLevel }, line);
     }
 };
 exports.renderCompFlow = renderCompFlow;

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

@@ -1,6 +1,6 @@
 import type { Browser, BrowserExecutable, ChromiumOptions, FfmpegExecutable, ImageFormat, 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, ffmpegExecutable, ffprobeExecutable, height, inputProps, overwrite, port, publicDir, puppeteerTimeout, quality, scale, stillFrame, width, compositionIdFromUi, imageFormatFromUi, logLevel, configFileImageFormat, onProgress, indentOutput, }: {
+export declare const renderStillFlow: ({ remotionRoot, fullEntryPoint, entryPointReason, remainingArgs, browser, browserExecutable, chromiumOptions, envVariables, ffmpegExecutable, ffprobeExecutable, height, inputProps, overwrite, port, publicDir, puppeteerTimeout, quality, scale, stillFrame, width, compositionIdFromUi, imageFormatFromUi, logLevel, configFileImageFormat, onProgress, indentOutput, addCleanupCallback, }: {
     remotionRoot: string;
     fullEntryPoint: string;
     entryPointReason: string;
@@ -27,4 +27,5 @@ export declare const renderStillFlow: ({ remotionRoot, fullEntryPoint, entryPoin
     configFileImageFormat: ImageFormat | undefined;
     onProgress: JobProgressCallback;
     indentOutput: boolean;
+    addCleanupCallback: (cb: () => Promise<void>) => void;
 }) => Promise<void>;

package/dist/render-flows/still.js

@@ -18,7 +18,7 @@ const progress_bar_1 = require("../progress-bar");
 const setup_cache_1 = require("../setup-cache");
 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, ffmpegExecutable, ffprobeExecutable, height, inputProps, overwrite, port, publicDir, puppeteerTimeout, quality, scale, stillFrame, width, compositionIdFromUi, imageFormatFromUi, logLevel, configFileImageFormat, onProgress, indentOutput, }) => {
+const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason, remainingArgs, browser, browserExecutable, chromiumOptions, envVariables, ffmpegExecutable, ffprobeExecutable, height, inputProps, overwrite, port, publicDir, puppeteerTimeout, quality, scale, stillFrame, width, compositionIdFromUi, imageFormatFromUi, logLevel, configFileImageFormat, onProgress, indentOutput, addCleanupCallback, }) => {
     var _a;
     const downloads = [];
     const aggregate = {
@@ -63,8 +63,11 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         indentOutput,
         logLevel,
     });
+    addCleanupCallback(cleanupBundle);
     const puppeteerInstance = await browserInstance;
+    addCleanupCallback(() => puppeteerInstance.close(false));
     const downloadMap = renderer_1.RenderInternals.makeDownloadMap();
+    addCleanupCallback(() => renderer_1.RenderInternals.cleanDownloadMap(downloadMap));
     const comps = await (0, renderer_1.getCompositions)(urlOrBundle, {
         inputProps,
         puppeteerInstance,
@@ -160,11 +163,6 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
     };
     updateProgress();
     log_1.Log.infoAdvanced({ indent: indentOutput, logLevel });
-    const closeBrowserPromise = puppeteerInstance.close(false);
     log_1.Log.infoAdvanced({ indent: indentOutput, logLevel }, chalk_1.chalk.cyan(`▶️ ${absoluteOutputLocation}`));
-    await closeBrowserPromise;
-    await renderer_1.RenderInternals.cleanDownloadMap(downloadMap);
-    await cleanupBundle();
-    log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, 'Cleaned up', downloadMap.assetDir);
 };
 exports.renderStillFlow = renderStillFlow;