@remotion/cli 4.1.0-alpha10 → 4.1.0-alpha12

package/dist/make-on-download.d.ts

@@ -0,0 +1,12 @@
+import type { LogLevel, RenderMediaOnDownload } from '@remotion/renderer';
+import type { DownloadProgress } from './progress-types';
+export declare const makeOnDownload: ({ indent, logLevel, updatesDontOverwrite, downloads, updateRenderProgress, }: {
+    indent: boolean;
+    logLevel: LogLevel;
+    updatesDontOverwrite: boolean;
+    downloads: DownloadProgress[];
+    updateRenderProgress: (progress: {
+        newline: boolean;
+        printToConsole: boolean;
+    }) => void;
+}) => RenderMediaOnDownload;

package/dist/make-on-download.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeOnDownload = void 0;
+const format_bytes_1 = require("./format-bytes");
+const log_1 = require("./log");
+const makeOnDownload = ({ indent, logLevel, updatesDontOverwrite, downloads, updateRenderProgress, }) => {
+    return (src) => {
+        const id = Math.random();
+        const download = {
+            id,
+            name: src,
+            progress: 0,
+            downloaded: 0,
+            totalBytes: null,
+        };
+        const nextDownloadIndex = downloads.length;
+        downloads.push(download);
+        log_1.Log.verboseAdvanced({ indent, logLevel }, `Starting download [${nextDownloadIndex}]:`, src);
+        updateRenderProgress({
+            newline: false,
+            printToConsole: !updatesDontOverwrite,
+        });
+        let lastUpdate = Date.now();
+        return ({ percent, downloaded, totalSize }) => {
+            download.progress = percent;
+            download.totalBytes = totalSize;
+            download.downloaded = downloaded;
+            if (lastUpdate + 1000 > Date.now() && updatesDontOverwrite) {
+                return;
+            }
+            lastUpdate = Date.now();
+            log_1.Log.verboseAdvanced({ indent, logLevel }, `Download [${nextDownloadIndex}]:`, percent ? `${(percent * 100).toFixed(1)}%` : (0, format_bytes_1.formatBytes)(downloaded));
+            updateRenderProgress({
+                newline: false,
+                printToConsole: !updatesDontOverwrite,
+            });
+        };
+    };
+};
+exports.makeOnDownload = makeOnDownload;

package/dist/parse-command-line.d.ts

@@ -11,6 +11,7 @@ type CommandLineOptions = {
     ['every-nth-frame']: number;
     ['number-of-gif-loops']: number;
     ['number-of-shared-audio-tags']: number;
+    version: string;
     codec: Codec;
     concurrency: number;
     timeout: number;

package/dist/preview-server/public-folder.js

@@ -38,12 +38,15 @@ const watchPublicFolder = ({ publicDir, onUpdate, staticHash, }) => {
                     onUpdate,
                     staticHash,
                 });
+                onUpdate();
                 watcher.close();
             }
         };
         const watcher = (0, node_fs_1.watch)(parentDir, {}, onDirChange);
         return;
     }
+    // Known bug: If whole public folder is deleted, this will not be called on macOS.
+    // This is not severe, so a wontfix for now.
     (0, node_fs_1.watch)(publicDir, { recursive: (0, env_supports_fs_recursive_1.envSupportsFsRecursive)() }, () => {
         (0, exports.fetchFolder)({ publicDir, staticHash });
         onUpdate();

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

@@ -37,7 +37,7 @@ const processStill = async ({ job, remotionRoot, entryPoint, onProgress, addClea
         imageFormatFromUi: job.imageFormat,
         logLevel: job.verbose ? 'verbose' : 'info',
         onProgress,
-        indentOutput: true,
+        indent: true,
         addCleanupCallback,
         cancelSignal: job.cancelToken.cancelSignal,
         outputLocationFromUi: job.outName,

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

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { LiveEventsServer } from './live-events';
 export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, }: {

package/dist/preview-server/routes.js

@@ -96,6 +96,7 @@ const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputPro
             ignoreCertificateErrors,
             openGlRenderer,
         },
+        publicFolderExists: (0, node_fs_1.existsSync)(publicDir) ? publicDir : null,
     }));
 };
 const handleProjectInfo = async (remotionRoot, _, response) => {

package/dist/progress-bar.js

@@ -5,6 +5,7 @@ const renderer_1 = require("@remotion/renderer");
 const ansi_diff_1 = require("./ansi/ansi-diff");
 const chalk_1 = require("./chalk");
 const download_progress_1 = require("./download-progress");
+const format_bytes_1 = require("./format-bytes");
 const make_progress_bar_1 = require("./make-progress-bar");
 const truthy_1 = require("./truthy");
 const createOverwriteableCliOutput = (options) => {
@@ -171,13 +172,7 @@ const getGuiProgressSubtitle = (progress) => {
         return `Bundling ${Math.round(progress.bundling.progress * 100)}%`;
     }
     if (progress.copyingState.doneIn === null) {
-        const bytes = new Intl.NumberFormat('en', {
-            notation: 'compact',
-            style: 'unit',
-            unit: 'byte',
-            unitDisplay: 'narrow',
-        });
-        return `Copying public dir ${bytes.format(progress.copyingState.bytes)}`;
+        return `Copying public dir ${(0, format_bytes_1.formatBytes)(progress.copyingState.bytes)}`;
     }
     if (!progress.rendering) {
         return `Getting compositions`;

package/dist/render-flows/render.js

@@ -40,6 +40,7 @@ const get_filename_1 = require("../get-filename");
 const get_final_output_codec_1 = require("../get-final-output-codec");
 const image_formats_1 = require("../image-formats");
 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 setup_cache_1 = require("../setup-cache");
@@ -83,7 +84,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         bytes: 0,
         doneIn: null,
     };
-    const updateRenderProgress = (newline) => {
+    const updateRenderProgress = ({ newline, printToConsole, }) => {
         const aggregateRenderProgress = {
             rendering: renderingProgress,
             stitching: shouldOutputImageSequence ? null : stitchingProgress,
@@ -97,7 +98,9 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
             stitchingStep: steps.indexOf('stitching'),
         });
         onProgress({ message, value: progress, ...aggregateRenderProgress });
-        return renderProgress.update(updatesDontOverwrite ? message : output, newline);
+        if (printToConsole) {
+            renderProgress.update(updatesDontOverwrite ? message : output, newline);
+        }
     };
     const { urlOrBundle, cleanup: cleanupBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         fullPath: fullEntryPoint,
@@ -106,7 +109,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         onProgress: ({ bundling, copying }) => {
             bundlingProgress = bundling;
             copyingState = copying;
-            updateRenderProgress(false);
+            updateRenderProgress({ newline: false, printToConsole: true });
         },
         indentOutput: indent,
         logLevel,
@@ -118,24 +121,13 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         quietProgress: updatesDontOverwrite,
     });
     addCleanupCallback(() => cleanupBundle());
-    const onDownload = (src) => {
-        const id = Math.random();
-        const download = {
-            id,
-            name: src,
-            progress: 0,
-            downloaded: 0,
-            totalBytes: null,
-        };
-        downloads.push(download);
-        updateRenderProgress(false);
-        return ({ percent, downloaded, totalSize }) => {
-            download.progress = percent;
-            download.totalBytes = totalSize;
-            download.downloaded = downloaded;
-            updateRenderProgress(false);
-        };
-    };
+    const onDownload = (0, make_on_download_1.makeOnDownload)({
+        downloads,
+        indent,
+        logLevel,
+        updateRenderProgress,
+        updatesDontOverwrite,
+    });
     const puppeteerInstance = await browserInstance;
     addCleanupCallback(() => puppeteerInstance.close(false, logLevel, indent));
     const actualConcurrency = renderer_1.RenderInternals.getActualConcurrency(concurrency);
@@ -220,7 +212,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
             serializedInputPropsWithCustomSchema,
             onFrameUpdate: (rendered) => {
                 renderingProgress.frames = rendered;
-                updateRenderProgress(false);
+                updateRenderProgress({ newline: false, printToConsole: true });
             },
             onStart: () => undefined,
             onDownload,
@@ -251,7 +243,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
                 data: config.props,
             }).serializedString,
         });
-        updateRenderProgress(true);
+        updateRenderProgress({ newline: true, printToConsole: true });
         log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.blue(`▶ ${absoluteOutputFile}`));
         return;
     }
@@ -303,7 +295,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
                 update.renderedDoneIn;
             renderingProgress.frames =
                 update.renderedFrames;
-            updateRenderProgress(false);
+            updateRenderProgress({ newline: false, printToConsole: true });
         },
         puppeteerInstance,
         onDownload,
@@ -323,7 +315,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
             staticBase: null,
         }).serializedString,
     });
-    updateRenderProgress(true);
+    updateRenderProgress({ newline: true, printToConsole: true });
     log_1.Log.infoAdvanced({ indent, logLevel }, chalk_1.chalk.blue(`${exists ? '○' : '+'} ${absoluteOutputFile}`));
     log_1.Log.verboseAdvanced({ indent, logLevel }, `Slowest frames:`);
     slowestFrames.forEach(({ frame, time }) => {

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

@@ -1,6 +1,6 @@
 import type { Browser, BrowserExecutable, CancelSignal, ChromiumOptions, 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, height, serializedInputPropsWithCustomSchema, overwrite, port, publicDir, puppeteerTimeout, jpegQuality, scale, stillFrame, width, compositionIdFromUi, imageFormatFromUi, logLevel, onProgress, indentOutput, addCleanupCallback, cancelSignal, outputLocationFromUi, }: {
+export declare const renderStillFlow: ({ 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, }: {
     remotionRoot: string;
     fullEntryPoint: string;
     entryPointReason: string;
@@ -23,7 +23,7 @@ export declare const renderStillFlow: ({ remotionRoot, fullEntryPoint, entryPoin
     imageFormatFromUi: StillImageFormat | null;
     logLevel: LogLevel;
     onProgress: JobProgressCallback;
-    indentOutput: boolean;
+    indent: boolean;
     addCleanupCallback: (cb: () => void) => void;
     cancelSignal: CancelSignal | null;
     outputLocationFromUi: string | null;

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-alpha10",
+  "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/media-utils": "4.1.0-alpha10",
-    "@remotion/player": "4.1.0-alpha10",
-    "@remotion/renderer": "4.1.0-alpha10",
-    "@remotion/bundler": "4.1.0-alpha10",
-    "remotion": "4.1.0-alpha10"
+    "@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/tailwind": "4.1.0-alpha10",
-    "@remotion/zod-types": "4.1.0-alpha10"
+    "@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;
-}

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.d.ts

@@ -1,14 +0,0 @@
-export type SerializedJSONWithCustomFields = {
-    serializedString: string;
-    customDateUsed: boolean;
-    customFileUsed: boolean;
-    mapUsed: boolean;
-    setUsed: boolean;
-};
-export declare const FILE_TOKEN = "remotion-file:";
-export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
-    data: unknown;
-    indent: number | undefined;
-    staticBase: string;
-}) => SerializedJSONWithCustomFields;
-export declare const deserializeJSONWithCustomFields: (data: string) => any;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = void 0;
-const DATE_TOKEN = 'remotion-date:';
-exports.FILE_TOKEN = 'remotion-file:';
-const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
-    let customDateUsed = false;
-    let customFileUsed = false;
-    let mapUsed = false;
-    let setUsed = false;
-    const serializedString = JSON.stringify(data, function (key, value) {
-        const item = this[key];
-        if (item instanceof Date) {
-            customDateUsed = true;
-            return `${DATE_TOKEN}${item.toISOString()}`;
-        }
-        if (item instanceof Map) {
-            mapUsed = true;
-            return value;
-        }
-        if (item instanceof Set) {
-            setUsed = true;
-            return value;
-        }
-        if (typeof item === 'string' && item.startsWith(staticBase)) {
-            customFileUsed = true;
-            return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
-        }
-        return value;
-    }, indent);
-    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
-};
-exports.serializeJSONWithDate = serializeJSONWithDate;
-const deserializeJSONWithCustomFields = (data) => {
-    return JSON.parse(data, (_, value) => {
-        if (typeof value === 'string' && value.startsWith(DATE_TOKEN)) {
-            return new Date(value.replace(DATE_TOKEN, ''));
-        }
-        return value;
-    });
-};
-exports.deserializeJSONWithCustomFields = deserializeJSONWithCustomFields;

package/dist/error-with-stack-frame.d.ts

@@ -1,19 +0,0 @@
-import type { Page, SymbolicatedStackFrame } from '@remotion/renderer';
-export declare class ErrorWithStackFrame extends Error {
-    symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
-    frame: number | null;
-    name: string;
-    delayRenderCall: SymbolicatedStackFrame[] | null;
-    constructor({ message, symbolicatedStackFrames, frame, name, delayRenderCall, }: {
-        message: string;
-        symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
-        frame: number | null;
-        name: string;
-        delayRenderCall: SymbolicatedStackFrame[] | null;
-    });
-}
-export declare const handleJavascriptException: ({ page, onError, frame, }: {
-    page: Page;
-    frame: number | null;
-    onError: (err: Error) => void;
-}) => () => void;