@remotion/cli 4.0.0-alpha4 → 4.0.0-alpha5

package/dist/setup-cache.js

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

package/dist/still.js

@@ -1,28 +1,14 @@
 "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 config_1 = require("./config");
-const determine_image_format_1 = require("./determine-image-format");
+const convert_entry_point_to_serve_url_1 = require("./convert-entry-point-to-serve-url");
 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 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_1 = require("./render-flows/still");
 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:');
@@ -30,135 +16,44 @@ 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 { inputProps, envVariables, quality, browser, stillFrame, browserExecutable, chromiumOptions, scale, ffmpegExecutable, ffprobeExecutable, overwrite, puppeteerTimeout, port, publicDir, height, width, } = await (0, get_cli_options_1.getCliOptions)({
+    const { browser, browserExecutable, chromiumOptions, envVariables, height, inputProps, overwrite, port, publicDir, puppeteerTimeout, jpegQuality, scale, stillFrame, width, logLevel, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'still',
         remotionRoot,
     });
-    log_1.Log.verbose('Browser executable: ', browserExecutable);
-    const browserInstance = (0, renderer_1.openBrowser)(browser, {
+    await (0, still_1.renderStillFlow)({
+        remotionRoot,
+        entryPointReason,
+        fullEntryPoint,
+        remainingArgs,
+        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,
-        downloadMap,
+        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,
     });
-    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,21 +2,16 @@
 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 : getDefaultOutLocation({
+    return ((_a = (0, exports.getUserPassedOutputLocation)(args)) !== null && _a !== void 0 ? _a : (0, get_default_out_name_1.getDefaultOutLocation)({
         compositionName: compositionId,
         defaultExtension,
         type,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.0-alpha4",
+  "version": "4.0.0-alpha5",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -13,19 +13,31 @@
   "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-alpha4",
-    "@remotion/media-utils": "4.0.0-alpha4",
-    "@remotion/player": "4.0.0-alpha4",
-    "@remotion/renderer": "4.0.0-alpha4",
+    "@remotion/bundler": "4.0.0-alpha5",
+    "@remotion/media-utils": "4.0.0-alpha5",
+    "@remotion/player": "4.0.0-alpha5",
+    "@remotion/renderer": "4.0.0-alpha5",
     "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",
+    "remotion": "4.0.0-alpha5",
     "semver": "7.3.5",
     "source-map": "0.6.1"
   },
@@ -39,10 +51,12 @@
     "@types/node": "^16.7.5",
     "@types/prompts": "^2.4.1",
     "@types/react": "18.0.26",
+    "@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",
+    "@remotion/zod-types": "4.0.0-alpha5",
     "eslint": "8.25.0",
     "eslint-plugin-10x": "1.5.2",
     "eslint-plugin-react": "7.29.4",
@@ -52,7 +66,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "typescript": "^4.7.0",
-    "vitest": "0.24.3"
+    "vitest": "0.24.3",
+    "zod": "^3.21.4"
   },
   "keywords": [
     "remotion",

package/styles/styles.css

@@ -1,5 +1,6 @@
 html {
-	--blue: #4290f5;
+	--blue: #0b84f3;
+	--blue-disabled: #284f73;
 }
 
 body {
@@ -27,9 +28,18 @@ input::-webkit-inner-spin-button {
 }
 
 input:focus,
+textarea:focus,
 button:focus,
 a:focus {
 	outline: none;
-	box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.35);
-	border-radius: 2px;
+	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;
 }