@remotion/cli 4.0.0-alpha13 → 4.0.0-alpha16

package/dist/progress-types.d.ts

@@ -1,28 +1,28 @@
 import type { Codec, StitchingState } from '@remotion/renderer';
 import type { BundlingState, CopyingState } from './progress-bar';
 import type { RenderStep } from './step';
-export declare type DownloadProgress = {
+export type DownloadProgress = {
     name: string;
     id: number;
     progress: number | null;
     totalBytes: number | null;
     downloaded: number;
 };
-export declare type RenderingProgressInput = {
+export type RenderingProgressInput = {
     frames: number;
     totalFrames: number;
     steps: RenderStep[];
     concurrency: number;
     doneIn: number | null;
 };
-export declare type StitchingProgressInput = {
+export type StitchingProgressInput = {
     frames: number;
     totalFrames: number;
     doneIn: number | null;
     stage: StitchingState;
     codec: Codec;
 };
-export declare type AggregateRenderProgress = {
+export type AggregateRenderProgress = {
     rendering: RenderingProgressInput | null;
     stitching: StitchingProgressInput | null;
     downloads: DownloadProgress[];

package/dist/render-flows/render.js

@@ -48,16 +48,15 @@ const user_passed_output_location_1 = require("../user-passed-output-location");
 const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, inputProps, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, outputLocationFromUI, jpegQuality, onProgress, addCleanupCallback, cancelSignal, crf, uiCodec, uiImageFormat, ffmpegOverride, audioBitrate, muted, enforceAudioTrack, proResProfile, pixelFormat, videoBitrate, numberOfGifLoops, audioCodec, disallowParallelEncoding, }) => {
     var _a;
     const downloads = [];
-    const downloadMap = renderer_1.RenderInternals.makeDownloadMap();
-    addCleanupCallback(() => renderer_1.RenderInternals.cleanDownloadMap(downloadMap));
     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, {
+    const browserInstance = renderer_1.RenderInternals.internalOpenBrowser({
+        browser,
         browserExecutable,
         shouldDumpIo: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
         chromiumOptions,
         forceDeviceScaleFactor: scale,
         indent,
+        viewport: null,
     });
     const updatesDontOverwrite = (0, should_use_non_overlaying_logger_1.shouldUseNonOverlayingLogger)({ logLevel });
     const renderProgress = (0, progress_bar_1.createOverwriteableCliOutput)({
@@ -136,6 +135,16 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
     };
     const puppeteerInstance = await browserInstance;
     addCleanupCallback(() => puppeteerInstance.close(false));
+    const actualConcurrency = renderer_1.RenderInternals.getActualConcurrency(concurrency);
+    const server = renderer_1.RenderInternals.prepareServer({
+        concurrency: actualConcurrency,
+        indent,
+        port,
+        remotionRoot,
+        verbose: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
+        webpackConfigOrServeUrl: urlOrBundle,
+    });
+    addCleanupCallback(() => server.then((s) => s.closeServer(false)));
     const { compositionId, config, reason, argsAfterComposition } = await (0, get_composition_with_dimension_override_1.getCompositionWithDimensionOverride)({
         height,
         width,
@@ -143,7 +152,6 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         compositionIdFromUi,
         browserExecutable,
         chromiumOptions,
-        downloadMap,
         envVariables,
         indent,
         inputProps,
@@ -152,6 +160,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         serveUrlOrWebpackUrl: urlOrBundle,
         timeoutInMilliseconds: puppeteerTimeout,
         verbose: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
+        server: await server,
     });
     const { codec, reason: codecReason } = (0, get_final_output_codec_1.getFinalOutputCodec)({
         cliFlag: parse_command_line_1.parsedCli.codec,
@@ -175,13 +184,12 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         fromUi: outputLocationFromUI,
         logLevel,
     });
-    log_1.Log.verboseAdvanced({ indent, logLevel, tag: 'config' }, chalk_1.chalk.gray(`Entry point = ${fullEntryPoint} (${entryPointReason})`));
+    log_1.Log.verboseAdvanced({ indent, logLevel }, chalk_1.chalk.gray(`Entry point = ${fullEntryPoint} (${entryPointReason})`));
     log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.gray(`Composition = ${compositionId} (${reason}), Codec = ${codec} (${codecReason}), Output = ${relativeOutputLocation}`));
     const absoluteOutputFile = (0, get_cli_options_1.getAndValidateAbsoluteOutputFile)(relativeOutputLocation, overwrite);
     const exists = (0, node_fs_1.existsSync)(absoluteOutputFile);
     const realFrameRange = renderer_1.RenderInternals.getRealFrameRange(config.durationInFrames, frameRange);
     const totalFrames = renderer_1.RenderInternals.getFramesToRender(realFrameRange, everyNthFrame);
-    const actualConcurrency = renderer_1.RenderInternals.getActualConcurrency(concurrency);
     renderingProgress = {
         frames: 0,
         totalFrames: totalFrames.length,
@@ -204,7 +212,8 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
             ? absoluteOutputFile
             : await node_fs_1.default.promises.mkdtemp(node_path_1.default.join(node_os_1.default.tmpdir(), 'react-motion-render'));
         log_1.Log.verboseAdvanced({ indent, logLevel }, 'Output dir', outputDir);
-        await (0, renderer_1.renderFrames)({
+        const verbose = renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose');
+        await renderer_1.RenderInternals.internalRenderFrames({
             imageFormat,
             inputProps,
             onFrameUpdate: (rendered) => {
@@ -212,31 +221,29 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
                 updateRenderProgress(false);
             },
             onStart: () => undefined,
-            onDownload: (src) => {
-                if (src.startsWith('data:')) {
-                    log_1.Log.infoAdvanced({ indent, logLevel }, '\nWriting Data URL to file: ', src.substring(0, 30) + '...');
-                }
-                else {
-                    log_1.Log.infoAdvanced({ indent, logLevel }, '\nDownloading asset... ', src);
-                }
-            },
+            onDownload,
             cancelSignal: cancelSignal !== null && cancelSignal !== void 0 ? cancelSignal : undefined,
             outputDir,
-            serveUrl: urlOrBundle,
-            dumpBrowserLogs: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
+            webpackBundleOrServeUrl: urlOrBundle,
+            dumpBrowserLogs: verbose,
             everyNthFrame,
             envVariables,
             frameRange,
             concurrency: actualConcurrency,
             puppeteerInstance,
-            jpegQuality,
+            jpegQuality: jpegQuality !== null && jpegQuality !== void 0 ? jpegQuality : renderer_1.RenderInternals.DEFAULT_JPEG_QUALITY,
             timeoutInMilliseconds: puppeteerTimeout,
             chromiumOptions,
             scale,
             browserExecutable,
             port,
-            downloadMap,
             composition: config,
+            server: await server,
+            indent,
+            muted,
+            onBrowserLog: null,
+            onFrameBuffer: null,
+            verbose,
         });
         updateRenderProgress(true);
         log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.blue(`▶ ${absoluteOutputFile}`));
@@ -249,21 +256,21 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         totalFrames: totalFrames.length,
         codec,
     };
-    const { slowestFrames } = await (0, renderer_1.renderMedia)({
+    const { slowestFrames } = await renderer_1.RenderInternals.internalRenderMedia({
         outputLocation: absoluteOutputFile,
         composition: {
             ...config,
             width: width !== null && width !== void 0 ? width : config.width,
             height: height !== null && height !== void 0 ? height : config.height,
         },
-        crf,
+        crf: crf !== null && crf !== void 0 ? crf : null,
         envVariables,
         frameRange,
         inputProps,
         overwrite,
         pixelFormat,
         proResProfile,
-        jpegQuality,
+        jpegQuality: jpegQuality !== null && jpegQuality !== void 0 ? jpegQuality : renderer_1.RenderInternals.DEFAULT_JPEG_QUALITY,
         dumpBrowserLogs: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
         chromiumOptions,
         timeoutInMilliseconds: config_1.ConfigInternals.getCurrentPuppeteerTimeout(),
@@ -295,16 +302,16 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         },
         puppeteerInstance,
         onDownload,
-        internal: {
-            onCtrlCExit: addCleanupCallback,
-            downloadMap,
-            indent,
-        },
+        onCtrlCExit: addCleanupCallback,
+        indent,
+        server: await server,
         cancelSignal: cancelSignal !== null && cancelSignal !== void 0 ? cancelSignal : undefined,
         audioCodec,
         preferLossless: false,
         imageFormat,
         disallowParallelEncoding,
+        onBrowserLog: null,
+        onStart: () => undefined,
     });
     log_1.Log.verboseAdvanced({ indent, logLevel });
     log_1.Log.verboseAdvanced({ indent, logLevel }, `Slowest frames:`);

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

@@ -7,7 +7,7 @@ export declare const renderStillFlow: ({ remotionRoot, fullEntryPoint, entryPoin
     remainingArgs: string[];
     inputProps: Record<string, unknown>;
     envVariables: Record<string, string>;
-    jpegQuality: number | undefined;
+    jpegQuality: number;
     browser: Browser;
     stillFrame: number;
     browserExecutable: BrowserExecutable;

package/dist/render-flows/still.js

@@ -44,13 +44,15 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         onProgress({ message, value: progress, ...aggregate });
     };
     log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, 'Browser executable: ', browserExecutable);
-    const shouldDumpIo = renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose');
-    const browserInstance = (0, renderer_1.openBrowser)(browser, {
+    const verbose = renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose');
+    const browserInstance = renderer_1.RenderInternals.internalOpenBrowser({
+        browser,
         browserExecutable,
         chromiumOptions,
-        shouldDumpIo,
+        shouldDumpIo: verbose,
         forceDeviceScaleFactor: scale,
         indent: indentOutput,
+        viewport: null,
     });
     const { cleanup: cleanupBundle, urlOrBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         fullPath: fullEntryPoint,
@@ -72,11 +74,18 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         },
         quietProgress: updatesDontOverwrite,
     });
+    const server = renderer_1.RenderInternals.prepareServer({
+        concurrency: 1,
+        indent: indentOutput,
+        port,
+        remotionRoot,
+        verbose: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
+        webpackConfigOrServeUrl: urlOrBundle,
+    });
+    addCleanupCallback(() => server.then((s) => s.closeServer(false)));
     addCleanupCallback(() => cleanupBundle());
     const puppeteerInstance = await browserInstance;
     addCleanupCallback(() => puppeteerInstance.close(false));
-    const downloadMap = renderer_1.RenderInternals.makeDownloadMap();
-    addCleanupCallback(() => renderer_1.RenderInternals.cleanDownloadMap(downloadMap));
     const { compositionId, config, reason, argsAfterComposition } = await (0, get_composition_with_dimension_override_1.getCompositionWithDimensionOverride)({
         height,
         width,
@@ -84,7 +93,6 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         compositionIdFromUi,
         browserExecutable,
         chromiumOptions,
-        downloadMap,
         envVariables,
         indent: indentOutput,
         inputProps,
@@ -93,6 +101,7 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         serveUrlOrWebpackUrl: urlOrBundle,
         timeoutInMilliseconds: puppeteerTimeout,
         verbose: renderer_1.RenderInternals.isEqualOrBelowLogLevel(logLevel, 'verbose'),
+        server: await server,
     });
     const { format: imageFormat, source } = (0, determine_image_format_1.determineFinalStillImageFormat)({
         cliFlag: (_a = parse_command_line_1.parsedCli['image-format']) !== null && _a !== void 0 ? _a : null,
@@ -114,7 +123,7 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
     (0, node_fs_1.mkdirSync)(node_path_1.default.join(absoluteOutputLocation, '..'), {
         recursive: true,
     });
-    log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel, tag: 'config' }, chalk_1.chalk.gray(`Entry point = ${fullEntryPoint} (${entryPointReason})`));
+    log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, chalk_1.chalk.gray(`Entry point = ${fullEntryPoint} (${entryPointReason})`));
     log_1.Log.infoAdvanced({ indent: indentOutput, logLevel }, chalk_1.chalk.gray(`Composition = ${compositionId} (${reason}), Format = ${imageFormat} (${source}), Output = ${relativeOutputLocation}`));
     renderProgress = (0, progress_bar_1.createOverwriteableCliOutput)({
         quiet: (0, parse_command_line_1.quietFlagProvided)(),
@@ -147,13 +156,13 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
             updateProgress(false);
         };
     };
-    await (0, renderer_1.renderStill)({
+    await renderer_1.RenderInternals.internalRenderStill({
         composition: config,
         frame: stillFrame,
         output: absoluteOutputLocation,
         serveUrl: urlOrBundle,
         jpegQuality,
-        dumpBrowserLogs: shouldDumpIo,
+        dumpBrowserLogs: verbose,
         envVariables,
         imageFormat,
         inputProps,
@@ -164,8 +173,12 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         overwrite,
         onDownload,
         port,
-        downloadMap,
         puppeteerInstance,
+        server: await server,
+        cancelSignal,
+        indent: indentOutput,
+        onBrowserLog: null,
+        verbose,
     });
     aggregate.rendering = {
         frames: 1,

package/dist/required-chromium-options.d.ts

@@ -1,3 +1,3 @@
 import type { ChromiumOptions, OpenGlRenderer } from '@remotion/renderer';
-export declare type RequiredChromiumOptions = Required<ChromiumOptions>;
-export declare type UiOpenGlOptions = OpenGlRenderer | 'default';
+export type RequiredChromiumOptions = Required<ChromiumOptions>;
+export type UiOpenGlOptions = OpenGlRenderer | 'default';

package/dist/server-ready-comment.d.ts

@@ -1,2 +1,2 @@
 export declare const setServerReadyComment: (newMessage: string) => void;
-export declare const printServerReadyComment: () => void;
+export declare const printServerReadyComment: (prefix: string) => void;

package/dist/server-ready-comment.js

@@ -7,7 +7,7 @@ const setServerReadyComment = (newMessage) => {
     message = newMessage;
 };
 exports.setServerReadyComment = setServerReadyComment;
-const printServerReadyComment = () => {
-    log_1.Log.info(message);
+const printServerReadyComment = (prefix) => {
+    log_1.Log.info(`${prefix} - ${message}`);
 };
 exports.printServerReadyComment = printServerReadyComment;

package/dist/setup-cache.js

@@ -10,6 +10,16 @@ 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, }) => {
     if (renderer_1.RenderInternals.isServeUrl(fullPath)) {
+        onProgress({
+            bundling: {
+                doneIn: 0,
+                progress: 1,
+            },
+            copying: {
+                bytes: 0,
+                doneIn: 0,
+            },
+        });
         return {
             urlOrBundle: fullPath,
             cleanup: () => Promise.resolve(undefined),

package/dist/show-compositions-picker.d.ts

@@ -1,5 +1,5 @@
 import type { getCompositions } from '@remotion/renderer';
-declare type Await<T> = T extends PromiseLike<infer U> ? U : T;
+type Await<T> = T extends PromiseLike<infer U> ? U : T;
 export declare const showSingleCompositionsPicker: (validCompositions: Await<ReturnType<typeof getCompositions>>) => Promise<{
     compositionId: string;
     reason: string;

package/dist/step.d.ts

@@ -1 +1 @@
-export declare type RenderStep = 'bundling' | 'rendering' | 'stitching';
+export type RenderStep = 'bundling' | 'rendering' | 'stitching';

package/dist/studio.js

@@ -120,12 +120,12 @@ const studioCommand = async (remotionRoot, args) => {
     (0, live_events_1.setLiveEventsListener)(liveEventsServer);
     const networkAddress = (0, get_network_address_1.getNetworkAddress)();
     if (networkAddress) {
-        (0, server_ready_comment_1.setServerReadyComment)(`Server ready - Local: ${chalk_1.chalk.underline(`http://localhost:${port}`)}, Network: ${chalk_1.chalk.underline(`http://${networkAddress}:${port}`)}`);
+        (0, server_ready_comment_1.setServerReadyComment)(`Local: ${chalk_1.chalk.underline(`http://localhost:${port}`)}, Network: ${chalk_1.chalk.underline(`http://${networkAddress}:${port}`)}`);
     }
     else {
-        (0, server_ready_comment_1.setServerReadyComment)(`Running on http://localhost:${port}`);
+        (0, server_ready_comment_1.setServerReadyComment)(`http://localhost:${port}`);
     }
-    (0, server_ready_comment_1.printServerReadyComment)();
+    (0, server_ready_comment_1.printServerReadyComment)('Server ready');
     const { reasonForBrowserDecision, shouldOpenBrowser } = getShouldOpenBrowser();
     if (shouldOpenBrowser) {
         await (0, better_opn_1.openBrowser)({

package/dist/truthy.d.ts

@@ -1,3 +1,3 @@
-declare type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T;
+type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T;
 export declare function truthy<T>(value: T): value is Truthy<T>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.0-alpha13",
+  "version": "4.0.0-alpha16",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.3.5",
     "source-map": "0.6.1",
-    "@remotion/bundler": "4.0.0-alpha13",
-    "@remotion/renderer": "4.0.0-alpha13",
-    "@remotion/player": "4.0.0-alpha13",
-    "@remotion/media-utils": "4.0.0-alpha13",
-    "remotion": "4.0.0-alpha13"
+    "@remotion/bundler": "4.0.0-alpha16",
+    "remotion": "4.0.0-alpha16",
+    "@remotion/renderer": "4.0.0-alpha16",
+    "@remotion/media-utils": "4.0.0-alpha16",
+    "@remotion/player": "4.0.0-alpha16"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -54,9 +54,7 @@
     "@types/prettier": "^2.7.2",
     "@types/react-dom": "18.0.10",
     "@types/semver": "^7.3.4",
-    "@typescript-eslint/eslint-plugin": "5.18.0",
-    "@typescript-eslint/parser": "5.18.0",
-    "eslint": "8.25.0",
+    "eslint": "8.42.0",
     "eslint-plugin-10x": "1.5.2",
     "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.4.0",
@@ -64,11 +62,11 @@
     "prettier-plugin-organize-imports": "^2.3.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "typescript": "^4.7.0",
+    "typescript": "4.9.5",
     "vitest": "0.31.1",
     "zod": "^3.21.4",
-    "@remotion/zod-types": "4.0.0-alpha13",
-    "@remotion/tailwind": "4.0.0-alpha13"
+    "@remotion/zod-types": "4.0.0-alpha16",
+    "@remotion/tailwind": "4.0.0-alpha16"
   },
   "keywords": [
     "remotion",