@remotion/cli 4.1.0-alpha11 → 4.1.0-alpha12

package/dist/render-flows/still.js

@@ -16,6 +16,7 @@ const determine_image_format_1 = require("../determine-image-format");
 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 make_on_download_1 = require("../make-on-download");
 const parse_command_line_1 = require("../parse-command-line");
 const progress_bar_1 = require("../progress-bar");
 const progress_types_1 = require("../progress-types");
@@ -23,36 +24,40 @@ const setup_cache_1 = require("../setup-cache");
 const should_use_non_overlaying_logger_1 = require("../should-use-non-overlaying-logger");
 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, height, serializedInputPropsWithCustomSchema, overwrite, port, publicDir, puppeteerTimeout, jpegQuality, scale, stillFrame, width, compositionIdFromUi, imageFormatFromUi, logLevel, onProgress, indentOutput, addCleanupCallback, cancelSignal, outputLocationFromUi, }) => {
+const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason, remainingArgs, browser, browserExecutable, chromiumOptions, envVariables, height, serializedInputPropsWithCustomSchema, overwrite, port, publicDir, puppeteerTimeout, jpegQuality, scale, stillFrame, width, compositionIdFromUi, imageFormatFromUi, logLevel, onProgress, indent, addCleanupCallback, cancelSignal, outputLocationFromUi, }) => {
     var _a, _b;
-    const downloads = [];
     const aggregate = (0, progress_types_1.initialAggregateRenderProgress)();
     const updatesDontOverwrite = (0, should_use_non_overlaying_logger_1.shouldUseNonOverlayingLogger)({ logLevel });
-    let renderProgress = null;
+    const renderProgress = (0, progress_bar_1.createOverwriteableCliOutput)({
+        quiet: (0, parse_command_line_1.quietFlagProvided)(),
+        cancelSignal,
+        updatesDontOverwrite: (0, should_use_non_overlaying_logger_1.shouldUseNonOverlayingLogger)({ logLevel }),
+        indent,
+    });
     const steps = [
         renderer_1.RenderInternals.isServeUrl(fullEntryPoint) ? null : 'bundling',
         'rendering',
     ].filter(truthy_1.truthy);
-    const updateProgress = (newline) => {
+    const updateRenderProgress = ({ newline, printToConsole, }) => {
         const { output, progress, message } = (0, progress_bar_1.makeRenderingAndStitchingProgress)({
             prog: aggregate,
             steps: steps.length,
             stitchingStep: steps.indexOf('stitching'),
         });
-        if (renderProgress) {
+        if (printToConsole) {
             renderProgress.update(updatesDontOverwrite ? message : output, newline);
         }
         onProgress({ message, value: progress, ...aggregate });
     };
     if (browserExecutable) {
-        log_1.Log.verboseAdvanced({ indent: indentOutput, logLevel }, 'Browser executable: ', browserExecutable);
+        log_1.Log.verboseAdvanced({ indent, logLevel }, 'Browser executable: ', browserExecutable);
     }
     const browserInstance = renderer_1.RenderInternals.internalOpenBrowser({
         browser,
         browserExecutable,
         chromiumOptions,
         forceDeviceScaleFactor: scale,
-        indent: indentOutput,
+        indent,
         viewport: null,
         logLevel,
     });
@@ -64,9 +69,9 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         onProgress: ({ copying, bundling }) => {
             aggregate.bundling = bundling;
             aggregate.copyingState = copying;
-            updateProgress(false);
+            updateRenderProgress({ newline: false, printToConsole: true });
         },
-        indentOutput,
+        indentOutput: indent,
         logLevel,
         bundlingStep: steps.indexOf('bundling'),
         onDirectoryCreated: (dir) => {
@@ -78,7 +83,7 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
     });
     const server = await renderer_1.RenderInternals.prepareServer({
         concurrency: 1,
-        indent: indentOutput,
+        indent,
         port,
         remotionRoot,
         logLevel,
@@ -87,7 +92,7 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
     addCleanupCallback(() => server.closeServer(false));
     addCleanupCallback(() => cleanupBundle());
     const puppeteerInstance = await browserInstance;
-    addCleanupCallback(() => puppeteerInstance.close(false, logLevel, indentOutput));
+    addCleanupCallback(() => puppeteerInstance.close(false, logLevel, indent));
     const { compositionId, config, reason, argsAfterComposition } = await (0, get_composition_with_dimension_override_1.getCompositionWithDimensionOverride)({
         height,
         width,
@@ -96,7 +101,7 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         browserExecutable,
         chromiumOptions,
         envVariables,
-        indent: indentOutput,
+        indent,
         serializedInputPropsWithCustomSchema,
         port,
         puppeteerInstance,
@@ -125,14 +130,8 @@ 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 }, 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)(),
-        cancelSignal,
-        updatesDontOverwrite: (0, should_use_non_overlaying_logger_1.shouldUseNonOverlayingLogger)({ logLevel }),
-        indent: indentOutput,
-    });
+    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}), Format = ${imageFormat} (${source}), Output = ${relativeOutputLocation}`));
     const renderStart = Date.now();
     aggregate.rendering = {
         frames: 0,
@@ -141,23 +140,14 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         steps,
         totalFrames: 1,
     };
-    updateProgress(false);
-    const onDownload = (src) => {
-        const id = Math.random();
-        const download = {
-            id,
-            name: src,
-            progress: 0,
-            downloaded: 0,
-            totalBytes: null,
-        };
-        downloads.push(download);
-        updateProgress(false);
-        return ({ percent }) => {
-            download.progress = percent;
-            updateProgress(false);
-        };
-    };
+    updateRenderProgress({ newline: false, printToConsole: true });
+    const onDownload = (0, make_on_download_1.makeOnDownload)({
+        downloads: aggregate.downloads,
+        indent,
+        logLevel,
+        updateRenderProgress,
+        updatesDontOverwrite,
+    });
     await renderer_1.RenderInternals.internalRenderStill({
         composition: config,
         frame: stillFrame,
@@ -177,7 +167,7 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         puppeteerInstance,
         server: await server,
         cancelSignal,
-        indent: indentOutput,
+        indent,
         onBrowserLog: null,
         logLevel,
         serializedResolvedPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
@@ -193,7 +183,7 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         steps,
         totalFrames: 1,
     };
-    updateProgress(true);
-    log_1.Log.infoAdvanced({ indent: indentOutput, logLevel }, chalk_1.chalk.blue(`${exists ? '○' : '+'} ${absoluteOutputLocation}`));
+    updateRenderProgress({ newline: true, printToConsole: true });
+    log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.blue(`${exists ? '○' : '+'} ${absoluteOutputLocation}`));
 };
 exports.renderStillFlow = renderStillFlow;

package/dist/still.js

@@ -54,7 +54,7 @@ const still = async (remotionRoot, args) => {
         imageFormatFromUi: null,
         logLevel,
         onProgress: () => undefined,
-        indentOutput: false,
+        indent: false,
         addCleanupCallback: (c) => {
             (0, cleanup_before_quit_1.registerCleanupJob)(c);
         },

package/dist/studio.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.studioCommand = void 0;
 const node_crypto_1 = __importDefault(require("node:crypto"));
+const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const better_opn_1 = require("./better-opn");
 const chalk_1 = require("./chalk");
@@ -92,9 +93,15 @@ const studioCommand = async (remotionRoot, args) => {
         remotionRoot,
         onUpdate: () => {
             (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+                const files = (0, public_folder_1.getFiles)();
                 listener.sendEventToClient({
                     type: 'new-public-folder',
-                    files: (0, public_folder_1.getFiles)(),
+                    files,
+                    folderExists: files.length > 0
+                        ? publicDir
+                        : (0, node_fs_1.existsSync)(publicDir)
+                            ? publicDir
+                            : null,
                 });
             });
         },

package/dist/upgrade.d.ts

@@ -1 +1 @@
-export declare const upgrade: (remotionRoot: string, packageManager: string | undefined) => Promise<void>;
+export declare const upgrade: (remotionRoot: string, packageManager: string | undefined, version: string | undefined) => Promise<void>;

package/dist/upgrade.js

@@ -20,7 +20,7 @@ const getUpgradeCommand = ({ manager, packages, version, }) => {
     };
     return commands[manager];
 };
-const upgrade = async (remotionRoot, packageManager) => {
+const upgrade = async (remotionRoot, packageManager, version) => {
     var _a, _b, _c, _d;
     const packageJsonFilePath = node_path_1.default.join(remotionRoot, 'package.json');
     const packageJson = require(packageJsonFilePath);
@@ -28,8 +28,15 @@ const upgrade = async (remotionRoot, packageManager) => {
     const devDependencies = Object.keys((_a = packageJson.devDependencies) !== null && _a !== void 0 ? _a : {});
     const optionalDependencies = Object.keys((_b = packageJson.optionalDependencies) !== null && _b !== void 0 ? _b : {});
     const peerDependencies = Object.keys((_c = packageJson.peerDependencies) !== null && _c !== void 0 ? _c : {});
-    const latestRemotionVersion = await (0, get_latest_remotion_version_1.getLatestRemotionVersion)();
-    log_1.Log.info('Newest Remotion version is', latestRemotionVersion);
+    let targetVersion;
+    if (version) {
+        targetVersion = version;
+        log_1.Log.info('Upgrading to specified version: ' + version);
+    }
+    else {
+        targetVersion = await (0, get_latest_remotion_version_1.getLatestRemotionVersion)();
+        log_1.Log.info('Newest Remotion version is', targetVersion);
+    }
     const manager = (0, get_package_manager_1.getPackageManager)(remotionRoot, packageManager);
     if (manager === 'unknown') {
         throw new Error(`No lockfile was found in your project (one of ${get_package_manager_1.lockFilePaths
@@ -43,7 +50,7 @@ const upgrade = async (remotionRoot, packageManager) => {
     const prom = renderer_1.RenderInternals.execa(manager.manager, getUpgradeCommand({
         manager: manager.manager,
         packages: toUpgrade,
-        version: latestRemotionVersion,
+        version: targetVersion,
     }), {
         stdio: 'inherit',
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.1.0-alpha11",
+  "version": "4.1.0-alpha12",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.5.3",
     "source-map": "0.6.1",
-    "@remotion/bundler": "4.1.0-alpha11",
-    "@remotion/media-utils": "4.1.0-alpha11",
-    "remotion": "4.1.0-alpha11",
-    "@remotion/renderer": "4.1.0-alpha11",
-    "@remotion/player": "4.1.0-alpha11"
+    "@remotion/bundler": "4.1.0-alpha12",
+    "@remotion/media-utils": "4.1.0-alpha12",
+    "remotion": "4.1.0-alpha12",
+    "@remotion/renderer": "4.1.0-alpha12",
+    "@remotion/player": "4.1.0-alpha12"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -65,8 +65,8 @@
     "typescript": "4.9.5",
     "vitest": "0.31.1",
     "zod": "^3.21.4",
-    "@remotion/zod-types": "4.1.0-alpha11",
-    "@remotion/tailwind": "4.1.0-alpha11"
+    "@remotion/zod-types": "4.1.0-alpha12",
+    "@remotion/tailwind": "4.1.0-alpha12"
   },
   "keywords": [
     "remotion",

package/styles/styles.css

@@ -54,17 +54,18 @@ input[type='color'].__remotion_color_picker::-webkit-color-swatch {
 	position: absolute;
 	height: 0;
 	outline: none;
-	top: 51%;
-	width: 100%;
+	top: 15.5px;
+	width: 221px;
+	margin-left: -2px;
 	z-index: 2;
 }
 
 /* For Firefox browsers */
 .__remotion_thumb::-moz-range-thumb {
-	border: none;
-	border-radius: 0;
+	border: 1px solid black;
+	border-radius: 2px;
 	cursor: pointer;
-	height: 40px;
+	height: 37px;
 	width: 10px;
 	pointer-events: all;
 	border-color: black;
@@ -72,26 +73,15 @@ input[type='color'].__remotion_color_picker::-webkit-color-swatch {
 	position: relative;
 }
 
-.__remotion_thumb::-moz-range-thumb {
-	border-width: 1px;
-	border-style: solid;
-}
-
 /* For Chrome browsers */
 .__remotion_thumb::-webkit-slider-thumb {
 	border: 1px solid black;
 	border-radius: 2px;
 	cursor: pointer;
-	height: 40px;
+	height: 39px;
 	width: 10px;
 	pointer-events: all;
 	border-color: black;
 	background-color: white;
 	position: relative;
 }
-
-.__remotion_thumb::-webkit-slider-thumb {
-	border-width: 1px;
-	border-style: solid;
-	border-color: black;
-}