@remotion/cli 4.0.0-alpha.217 → 4.0.0-alpha4

package/dist/setup-cache.js

@@ -1,37 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bundleOnCliOrTakeServeUrl = void 0;
+exports.bundleOnCli = exports.bundleOnCliOrTakeServeUrl = void 0;
 const bundler_1 = require("@remotion/bundler");
 const renderer_1 = require("@remotion/renderer");
 const config_1 = require("./config");
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
 const progress_bar_1 = require("./progress-bar");
-const bundleOnCliOrTakeServeUrl = async ({ fullPath, remotionRoot, publicDir, onProgress, indentOutput, logLevel, bundlingStep, steps, onDirectoryCreated, }) => {
+const bundleOnCliOrTakeServeUrl = async ({ fullPath, remotionRoot, steps, publicDir, }) => {
     if (renderer_1.RenderInternals.isServeUrl(fullPath)) {
         return {
             urlOrBundle: fullPath,
             cleanup: () => Promise.resolve(undefined),
         };
     }
-    const bundled = await bundleOnCli({
-        fullPath,
-        remotionRoot,
-        publicDir,
-        onProgressCallback: onProgress,
-        indent: indentOutput,
-        logLevel,
-        bundlingStep,
-        steps,
-        onDirectoryCreated,
-    });
+    const bundled = await (0, exports.bundleOnCli)({ fullPath, remotionRoot, steps, publicDir });
     return {
         urlOrBundle: bundled,
         cleanup: () => renderer_1.RenderInternals.deleteDirectory(bundled),
     };
 };
 exports.bundleOnCliOrTakeServeUrl = bundleOnCliOrTakeServeUrl;
-const bundleOnCli = async ({ fullPath, remotionRoot, publicDir, onProgressCallback, indent, logLevel, bundlingStep, steps, onDirectoryCreated, }) => {
+const bundleOnCli = async ({ fullPath, steps, remotionRoot, publicDir, }) => {
     var _a;
     const shouldCache = config_1.ConfigInternals.getWebpackCaching();
     const symlinkState = {
@@ -40,9 +30,14 @@ const bundleOnCli = async ({ fullPath, remotionRoot, publicDir, onProgressCallba
     const onProgress = (progress) => {
         bundlingState = {
             progress: progress / 100,
+            steps,
             doneIn: null,
         };
-        updateProgress(false);
+        bundlingProgress.update((0, progress_bar_1.makeBundlingAndCopyProgress)({
+            bundling: bundlingState,
+            copying: copyingState,
+            symLinks: symlinkState,
+        }));
     };
     let copyingState = {
         bytes: 0,
@@ -54,11 +49,7 @@ const bundleOnCli = async ({ fullPath, remotionRoot, publicDir, onProgressCallba
             bundling: bundlingState,
             copying: copyingState,
             symLinks: symlinkState,
-        }, indent, bundlingStep, steps) + (newline ? '\n' : ''));
-        onProgressCallback({
-            bundling: bundlingState,
-            copying: copyingState,
-        });
+        }) + (newline ? '\n' : ''));
     };
     const onPublicDirCopyProgress = (bytes) => {
         if (copyStart === null) {
@@ -91,20 +82,18 @@ const bundleOnCli = async ({ fullPath, remotionRoot, publicDir, onProgressCallba
     });
     const cacheExistedBefore = bundler_1.BundlerInternals.cacheExists(remotionRoot, 'production', hash);
     if (cacheExistedBefore !== 'does-not-exist' && !shouldCache) {
-        log_1.Log.infoAdvanced({ indent, logLevel }, '🧹 Cache disabled but found. Deleting... ');
+        log_1.Log.info('🧹 Cache disabled but found. Deleting... ');
         await bundler_1.BundlerInternals.clearCache(remotionRoot);
     }
     if (cacheExistedBefore === 'other-exists' && shouldCache) {
-        log_1.Log.infoAdvanced({ indent, logLevel }, '🧹 Webpack config change detected. Clearing cache... ');
+        log_1.Log.info('🧹 Webpack config change detected. Clearing cache... ');
         await bundler_1.BundlerInternals.clearCache(remotionRoot);
     }
     const bundleStartTime = Date.now();
-    const bundlingProgress = (0, progress_bar_1.createOverwriteableCliOutput)({
-        quiet: (0, parse_command_line_1.quietFlagProvided)(),
-        cancelSignal: null,
-    });
+    const bundlingProgress = (0, progress_bar_1.createOverwriteableCliOutput)((0, parse_command_line_1.quietFlagProvided)());
     let bundlingState = {
         progress: 0,
+        steps,
         doneIn: null,
     };
     const bundled = await (0, bundler_1.bundle)({
@@ -112,15 +101,16 @@ const bundleOnCli = async ({ fullPath, remotionRoot, publicDir, onProgressCallba
         onProgress: (progress) => {
             bundlingState = {
                 progress: progress / 100,
+                steps,
                 doneIn: null,
             };
             updateProgress(false);
         },
-        onDirectoryCreated,
         ...options,
     });
     bundlingState = {
         progress: 1,
+        steps,
         doneIn: Date.now() - bundleStartTime,
     };
     copyingState = {
@@ -128,13 +118,14 @@ const bundleOnCli = async ({ fullPath, remotionRoot, publicDir, onProgressCallba
         doneIn: copyStart ? Date.now() - copyStart : null,
     };
     updateProgress(true);
-    log_1.Log.verboseAdvanced({ indent, logLevel }, 'Bundled under', bundled);
+    log_1.Log.verbose('Bundled under', bundled);
     const cacheExistedAfter = bundler_1.BundlerInternals.cacheExists(remotionRoot, 'production', hash) === 'exists';
     if (cacheExistedAfter) {
         if (cacheExistedBefore === 'does-not-exist' ||
             cacheExistedBefore === 'other-exists') {
-            log_1.Log.infoAdvanced({ indent, logLevel }, '⚡️ Cached bundle. Subsequent renders will be faster.');
+            log_1.Log.info('⚡️ Cached bundle. Subsequent renders will be faster.');
         }
     }
     return bundled;
 };
+exports.bundleOnCli = bundleOnCli;

package/dist/still.js

@@ -1,14 +1,28 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.still = void 0;
+const renderer_1 = require("@remotion/renderer");
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const chalk_1 = require("./chalk");
 const cleanup_before_quit_1 = require("./cleanup-before-quit");
-const convert_entry_point_to_serve_url_1 = require("./convert-entry-point-to-serve-url");
+const config_1 = require("./config");
+const determine_image_format_1 = require("./determine-image-format");
 const entry_point_1 = require("./entry-point");
 const get_cli_options_1 = require("./get-cli-options");
+const get_composition_with_dimension_override_1 = require("./get-composition-with-dimension-override");
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
-const still_1 = require("./render-flows/still");
+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 still = async (remotionRoot, args) => {
+    var _a, _b;
+    const startTime = Date.now();
     const { file, remainingArgs, reason: entryPointReason, } = (0, entry_point_1.findEntryPoint)(args, remotionRoot);
     if (!file) {
         log_1.Log.error('No entry point specified. Pass more arguments:');
@@ -16,44 +30,135 @@ const still = async (remotionRoot, args) => {
         log_1.Log.error('Documentation: https://www.remotion.dev/docs/render');
         process.exit(1);
     }
-    const fullEntryPoint = (0, convert_entry_point_to_serve_url_1.convertEntryPointToServeUrl)(file);
     if (parse_command_line_1.parsedCli.frames) {
         log_1.Log.error('--frames flag was passed to the `still` command. This flag only works with the `render` command. Did you mean `--frame`? See reference: https://www.remotion.dev/docs/cli/');
         process.exit(1);
     }
-    const { browser, browserExecutable, chromiumOptions, envVariables, height, inputProps, overwrite, port, publicDir, puppeteerTimeout, jpegQuality, scale, stillFrame, width, logLevel, } = await (0, get_cli_options_1.getCliOptions)({
+    const { inputProps, envVariables, quality, browser, stillFrame, browserExecutable, chromiumOptions, scale, ffmpegExecutable, ffprobeExecutable, overwrite, puppeteerTimeout, port, publicDir, height, width, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'still',
         remotionRoot,
     });
-    await (0, still_1.renderStillFlow)({
-        remotionRoot,
-        entryPointReason,
-        fullEntryPoint,
-        remainingArgs,
-        browser,
+    log_1.Log.verbose('Browser executable: ', browserExecutable);
+    const browserInstance = (0, renderer_1.openBrowser)(browser, {
         browserExecutable,
         chromiumOptions,
+        shouldDumpIo: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
+        forceDeviceScaleFactor: scale,
+    });
+    const steps = [
+        renderer_1.RenderInternals.isServeUrl(file) ? null : 'bundling',
+        'rendering',
+    ].filter(truthy_1.truthy);
+    const { cleanup: cleanupBundle, urlOrBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({ fullPath: file, remotionRoot, steps, publicDir });
+    (0, cleanup_before_quit_1.registerCleanupJob)(() => cleanupBundle());
+    const puppeteerInstance = await browserInstance;
+    const downloadMap = renderer_1.RenderInternals.makeDownloadMap();
+    (0, cleanup_before_quit_1.registerCleanupJob)(() => renderer_1.RenderInternals.cleanDownloadMap(downloadMap));
+    const comps = await (0, renderer_1.getCompositions)(urlOrBundle, {
+        inputProps,
+        puppeteerInstance,
         envVariables,
+        timeoutInMilliseconds: puppeteerTimeout,
+        chromiumOptions,
+        port,
+        browserExecutable,
+        ffmpegExecutable,
+        ffprobeExecutable,
+        downloadMap,
+    });
+    const { compositionId, config, reason, argsAfterComposition } = await (0, get_composition_with_dimension_override_1.getCompositionWithDimensionOverride)({
+        validCompositions: comps,
         height,
+        width,
+        args: remainingArgs,
+    });
+    const { format: imageFormat, source } = (0, determine_image_format_1.determineFinalImageFormat)({
+        cliFlag: (_a = parse_command_line_1.parsedCli['image-format']) !== null && _a !== void 0 ? _a : null,
+        configImageFormat: (_b = config_1.ConfigInternals.getUserPreferredImageFormat()) !== null && _b !== void 0 ? _b : null,
+        downloadName: null,
+        outName: (0, user_passed_output_location_1.getUserPassedOutputLocation)(argsAfterComposition),
+        isLambda: false,
+    });
+    const relativeOutputLocation = (0, user_passed_output_location_1.getOutputLocation)({
+        compositionId,
+        defaultExtension: imageFormat,
+        args: argsAfterComposition,
+        type: 'asset',
+    });
+    const absoluteOutputLocation = (0, get_cli_options_1.getAndValidateAbsoluteOutputFile)(relativeOutputLocation, overwrite);
+    (0, fs_1.mkdirSync)(path_1.default.join(absoluteOutputLocation, '..'), {
+        recursive: true,
+    });
+    log_1.Log.info(chalk_1.chalk.gray(`Entry point = ${file} (${entryPointReason}), Output = ${relativeOutputLocation}, Format = ${imageFormat} (${source}), Composition = ${compositionId} (${reason})`));
+    const renderProgress = (0, progress_bar_1.createOverwriteableCliOutput)((0, parse_command_line_1.quietFlagProvided)());
+    const renderStart = Date.now();
+    const downloads = [];
+    let frames = 0;
+    const totalFrames = 1;
+    const updateProgress = () => {
+        renderProgress.update((0, progress_bar_1.makeRenderingAndStitchingProgress)({
+            rendering: {
+                frames,
+                concurrency: 1,
+                doneIn: frames === totalFrames ? Date.now() - renderStart : null,
+                steps,
+                totalFrames,
+            },
+            downloads,
+            stitching: null,
+        }));
+    };
+    updateProgress();
+    const onDownload = (src) => {
+        const id = Math.random();
+        const download = {
+            id,
+            name: src,
+            progress: 0,
+            downloaded: 0,
+            totalBytes: null,
+        };
+        downloads.push(download);
+        updateProgress();
+        return ({ percent }) => {
+            download.progress = percent;
+            updateProgress();
+        };
+    };
+    await (0, renderer_1.renderStill)({
+        composition: config,
+        frame: stillFrame,
+        output: absoluteOutputLocation,
+        serveUrl: urlOrBundle,
+        quality,
+        dumpBrowserLogs: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
+        envVariables,
+        imageFormat,
         inputProps,
+        chromiumOptions,
+        timeoutInMilliseconds: config_1.ConfigInternals.getCurrentPuppeteerTimeout(),
+        scale,
+        ffmpegExecutable,
+        browserExecutable,
         overwrite,
+        onDownload,
         port,
-        publicDir,
-        puppeteerTimeout,
-        jpegQuality,
-        scale,
-        stillFrame,
-        width,
-        compositionIdFromUi: null,
-        imageFormatFromUi: null,
-        logLevel,
-        onProgress: () => undefined,
-        indentOutput: false,
-        addCleanupCallback: (c) => {
-            (0, cleanup_before_quit_1.registerCleanupJob)(c);
-        },
-        cancelSignal: null,
+        downloadMap,
     });
+    frames = 1;
+    updateProgress();
+    log_1.Log.info();
+    const closeBrowserPromise = puppeteerInstance.close(false);
+    log_1.Log.info(chalk_1.chalk.green('\nYour still frame is ready!'));
+    const seconds = Math.round((Date.now() - startTime) / 1000);
+    log_1.Log.info([
+        '- Total render time:',
+        seconds,
+        seconds === 1 ? 'second' : 'seconds',
+    ].join(' '));
+    log_1.Log.info('-', 'Output can be found at:');
+    log_1.Log.info(chalk_1.chalk.cyan(`▶️ ${absoluteOutputLocation}`));
+    await closeBrowserPromise;
 };
 exports.still = still;

package/dist/user-passed-output-location.js

@@ -2,16 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOutputLocation = exports.getUserPassedOutputLocation = void 0;
 const config_1 = require("./config");
-const get_default_out_name_1 = require("./get-default-out-name");
 const getUserPassedOutputLocation = (args) => {
     var _a;
     const filename = (_a = args[0]) !== null && _a !== void 0 ? _a : config_1.ConfigInternals.getOutputLocation();
     return filename;
 };
 exports.getUserPassedOutputLocation = getUserPassedOutputLocation;
+const getDefaultOutLocation = ({ compositionName, defaultExtension, type, }) => {
+    if (type === 'sequence') {
+        return `out/${compositionName}`;
+    }
+    return `out/${compositionName}.${defaultExtension}`;
+};
 const getOutputLocation = ({ compositionId, defaultExtension, args, type, }) => {
     var _a;
-    return ((_a = (0, exports.getUserPassedOutputLocation)(args)) !== null && _a !== void 0 ? _a : (0, get_default_out_name_1.getDefaultOutLocation)({
+    return ((_a = (0, exports.getUserPassedOutputLocation)(args)) !== null && _a !== void 0 ? _a : getDefaultOutLocation({
         compositionName: compositionId,
         defaultExtension,
         type,

package/package.json

@@ -1,89 +1,73 @@
 {
-	"name": "@remotion/cli",
-	"version": "4.0.0-alpha.217+27eff7599",
-	"description": "CLI for Remotion",
-	"main": "dist/index.js",
-	"sideEffects": false,
-	"bin": {
-		"remotion": "remotion-cli.js"
-	},
-	"scripts": {
-		"lint": "eslint src --ext ts,tsx",
-		"test": "vitest --run",
-		"build": "tsc -d",
-		"watch": "tsc -w"
-	},
-	"repository": {
-		"url": "https://github.com/remotion-dev/remotion"
-	},
-	"bugs": {
-		"url": "https://github.com/remotion-dev/remotion/issues"
-	},
-	"exports": {
-		".": "./dist/index.js",
-		"./config": "./dist/config/index.js",
-		"./package.json": "./package.json"
-	},
-	"typesVersions": {
-		">=1.0": {
-			"config": [
-				"dist/config/index.d.ts"
-			]
-		}
-	},
-	"author": "Jonny Burger <jonny@remotion.dev>",
-	"license": "SEE LICENSE IN LICENSE.md",
-	"dependencies": {
-		"@remotion/bundler": "4.0.0-alpha.217+27eff7599",
-		"@remotion/media-utils": "4.0.0-alpha.217+27eff7599",
-		"@remotion/player": "4.0.0-alpha.217+27eff7599",
-		"@remotion/renderer": "4.0.0-alpha.217+27eff7599",
-		"dotenv": "9.0.2",
-		"memfs": "3.4.3",
-		"minimist": "1.2.6",
-		"open": "^8.4.2",
-		"prompts": "2.4.1",
-		"remotion": "4.0.0-alpha.217+27eff7599",
-		"semver": "7.3.5",
-		"source-map": "0.6.1"
-	},
-	"peerDependencies": {
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0"
-	},
-	"devDependencies": {
-		"@jonny/eslint-config": "3.0.266",
-		"@remotion/z-color": "4.0.0-alpha.217+27eff7599",
-		"@types/minimist": "^1.2.2",
-		"@types/node": "^16.7.5",
-		"@types/prettier": "^2.7.2",
-		"@types/prompts": "^2.4.1",
-		"@types/react": "18.0.26",
-		"@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-plugin-10x": "1.5.2",
-		"eslint-plugin-react": "7.29.4",
-		"eslint-plugin-react-hooks": "4.4.0",
-		"prettier": "^2.7.1",
-		"prettier-plugin-organize-imports": "^2.3.4",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0",
-		"typescript": "^4.7.0",
-		"vitest": "0.24.3",
-		"zod": "^3.21.4"
-	},
-	"keywords": [
-		"remotion",
-		"ffmpeg",
-		"video",
-		"react",
-		"player"
-	],
-	"publishConfig": {
-		"access": "public"
-	},
-	"gitHead": "27eff759935b19b666e29f4f46dd5bdd6214e188"
-}
+  "name": "@remotion/cli",
+  "version": "4.0.0-alpha4",
+  "description": "CLI for Remotion",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "bin": {
+    "remotion": "remotion-cli.js"
+  },
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion"
+  },
+  "bugs": {
+    "url": "https://github.com/remotion-dev/remotion/issues"
+  },
+  "author": "Jonny Burger <jonny@remotion.dev>",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "dependencies": {
+    "@remotion/bundler": "4.0.0-alpha4",
+    "@remotion/media-utils": "4.0.0-alpha4",
+    "@remotion/player": "4.0.0-alpha4",
+    "@remotion/renderer": "4.0.0-alpha4",
+    "dotenv": "9.0.2",
+    "memfs": "3.4.3",
+    "minimist": "1.2.6",
+    "open": "^8.4.2",
+    "prompts": "2.4.1",
+    "remotion": "4.0.0-alpha4",
+    "semver": "7.3.5",
+    "source-map": "0.6.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@jonny/eslint-config": "3.0.266",
+    "@types/minimist": "^1.2.2",
+    "@types/node": "^16.7.5",
+    "@types/prompts": "^2.4.1",
+    "@types/react": "18.0.26",
+    "@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-plugin-10x": "1.5.2",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react-hooks": "4.4.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^4.7.0",
+    "vitest": "0.24.3"
+  },
+  "keywords": [
+    "remotion",
+    "ffmpeg",
+    "video",
+    "react",
+    "player"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint src --ext ts,tsx",
+    "test": "vitest --run",
+    "build": "tsc -d",
+    "watch": "tsc -w"
+  }
+}

package/styles/styles.css

@@ -1,6 +1,5 @@
 html {
-	--blue: #0b84f3;
-	--blue-disabled: #284f73;
+	--blue: #4290f5;
 }
 
 body {
@@ -28,18 +27,9 @@ input::-webkit-inner-spin-button {
 }
 
 input:focus,
-textarea:focus,
 button:focus,
 a:focus {
 	outline: none;
-	box-shadow: inset 1px 1px #555, inset -1px -1px #555, inset 1px -1px #555,
-		inset -1px 1px #555;
-	border-radius: 0 !important;
-}
-
-input[type="color"].__remotion_color_picker::-webkit-color-swatch-wrapper {
-	padding: 0;
-}
-input[type="color"].__remotion_color_picker::-webkit-color-swatch {
-	border: none;
+	box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.35);
+	border-radius: 2px;
 }

package/dist/codemods/update-default-props.d.ts

@@ -1,5 +0,0 @@
-export declare const updateDefaultProps: ({ input, compositionId, newDefaultProps, }: {
-    input: string;
-    compositionId: string;
-    newDefaultProps: unknown;
-}) => Promise<string>;