@remotion/cli 3.0.29 → 3.1.0

package/dist/preview-server/fast-refresh/index.js

@@ -0,0 +1,86 @@
+"use strict";
+/**
+ * Source code is adapted from https://github.com/WebHotelier/webpack-fast-refresh#readme and rewritten in Typescript. This file is MIT licensed.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactFreshWebpackPlugin = void 0;
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 Vercel, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// This file is copied from the @vercel/next.js, with removed TS annotations
+// minor tweaks, and removed all webpack v4-related functionality
+//
+// https://github.com/vercel/next.js/blob/canary/packages/react-refresh-utils/ReactRefreshWebpackPlugin.ts
+const webpack_1 = require("webpack");
+class ReactRefreshRuntimeModule extends webpack_1.RuntimeModule {
+    constructor() {
+        super('react refresh', 5);
+    }
+    generate() {
+        const { runtimeTemplate } = this.compilation;
+        return webpack_1.Template.asString([
+            `${webpack_1.RuntimeGlobals.interceptModuleExecution}.push(${runtimeTemplate.basicFunction('options', [
+                `const originalFactory = options.factory;`,
+                `options.factory = ${runtimeTemplate.basicFunction('moduleObject, moduleExports, webpackRequire', [
+                    // Legacy CSS implementations will `eval` browser code in a Node.js
+                    // context to extract CSS. For backwards compatibility, we need to check
+                    // we're in a browser context before continuing.
+                    `const hasRefresh = typeof self !== "undefined" && !!self.$RefreshInterceptModuleExecution$;`,
+                    `const cleanup = hasRefresh ? self.$RefreshInterceptModuleExecution$(moduleObject.id) : () => {};`,
+                    'try {',
+                    webpack_1.Template.indent('originalFactory.call(this, moduleObject, moduleExports, webpackRequire);'),
+                    '} finally {',
+                    webpack_1.Template.indent(`cleanup();`),
+                    '}',
+                ])}`,
+            ])})`,
+        ]);
+    }
+}
+class ReactFreshWebpackPlugin {
+    apply(compiler) {
+        const webpackMajorVersion = parseInt(webpack_1.version !== null && webpack_1.version !== void 0 ? webpack_1.version : '', 10);
+        if (webpackMajorVersion < 5) {
+            throw new Error(`ReactFreshWebpackPlugin does not support webpack v${webpackMajorVersion}.`);
+        }
+        compiler.hooks.compilation.tap(this.constructor.name, (compilation) => {
+            compilation.mainTemplate.hooks.localVars.tap(this.constructor.name, (source) => webpack_1.Template.asString([
+                source,
+                '',
+                '// noop fns to prevent runtime errors during initialization',
+                'if (typeof self !== "undefined") {',
+                webpack_1.Template.indent('self.$RefreshReg$ = function () {};'),
+                webpack_1.Template.indent('self.$RefreshSig$ = function () {'),
+                webpack_1.Template.indent(webpack_1.Template.indent('return function (type) {')),
+                webpack_1.Template.indent(webpack_1.Template.indent(webpack_1.Template.indent('return type;'))),
+                webpack_1.Template.indent(webpack_1.Template.indent('};')),
+                webpack_1.Template.indent('};'),
+                '}',
+            ]));
+            compilation.hooks.additionalTreeRuntimeRequirements.tap(this.constructor.name, (chunk) => {
+                compilation.addRuntimeModule(chunk, new ReactRefreshRuntimeModule());
+            });
+        });
+    }
+}
+exports.ReactFreshWebpackPlugin = ReactFreshWebpackPlugin;

package/dist/preview-server/fast-refresh/loader.d.ts

@@ -0,0 +1,35 @@
+/**
+ * ⚠️ Be careful when refactoring this file!
+ * This gets injected into every file of the browser.
+ * You cannot have returns, optional chains, inverse the if statement etc.
+ * Check the Typescript output in dist/ to see that no extra `var` statements were produced
+ */
+/**
+ * Source code is adapted from https://github.com/WebHotelier/webpack-fast-refresh#readme and rewritten in Typescript. This file is MIT licensed.
+ */
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 Vercel, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { LoaderDefinition } from 'webpack';
+declare const ReactRefreshLoader: LoaderDefinition;
+export default ReactRefreshLoader;

package/dist/preview-server/fast-refresh/loader.js

@@ -0,0 +1,81 @@
+"use strict";
+/**
+ * ⚠️ Be careful when refactoring this file!
+ * This gets injected into every file of the browser.
+ * You cannot have returns, optional chains, inverse the if statement etc.
+ * Check the Typescript output in dist/ to see that no extra `var` statements were produced
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+// This file is copied from the @vercel/next.js, with removed TS annotations
+//
+// https://github.com/vercel/next.js/blob/canary/packages/react-refresh-utils/loader.ts
+// This function gets unwrapped into global scope, which is why we don't invert
+// if-blocks. Also, you cannot use `return`.
+function RefreshModuleRuntime() {
+    // Legacy CSS implementations will `eval` browser code in a Node.js context
+    // to extract CSS. For backwards compatibility, we need to check we're in a
+    // browser context before continuing.
+    if (typeof self !== 'undefined' &&
+        // AMP / No-JS mode does not inject these helpers:
+        '$RefreshHelpers$' in self) {
+        // @ts-expect-error
+        // eslint-disable-next-line no-proto
+        const currentExports = module.__proto__.exports;
+        let prevExports = null;
+        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+        if (module.hot && module.hot.data && module.hot.data.prevExports) {
+            prevExports = module.hot.data.prevExports;
+        }
+        // This cannot happen in MainTemplate because the exports mismatch between
+        // templating and execution.
+        self.$RefreshHelpers$.registerExportsForReactRefresh(currentExports, module.id);
+        // A module can be accepted automatically based on its exports, e.g. when
+        // it is a Refresh Boundary.
+        if (self.$RefreshHelpers$.isReactRefreshBoundary(currentExports)) {
+            // Save the previous exports on update so we can compare the boundary
+            // signatures.
+            module.hot.dispose((data) => {
+                data.prevExports = currentExports;
+            });
+            // Unconditionally accept an update to this module, we'll check if it's
+            // still a Refresh Boundary later.
+            module.hot.accept();
+            // This field is set when the previous version of this module was a
+            // Refresh Boundary, letting us know we need to check for invalidation or
+            // enqueue an update.
+            if (prevExports !== null) {
+                // A boundary can become ineligible if its exports are incompatible
+                // with the previous exports.
+                //
+                // For example, if you add/remove/change exports, we'll want to
+                // re-execute the importing modules, and force those components to
+                // re-render. Similarly, if you convert a class component to a
+                // function, we want to invalidate the boundary.
+                if (self.$RefreshHelpers$.shouldInvalidateReactRefreshBoundary(prevExports, currentExports)) {
+                    // @ts-expect-error
+                    module.hot.invalidate();
+                }
+                else {
+                    self.$RefreshHelpers$.scheduleUpdate();
+                }
+            }
+        }
+        else {
+            // Since we just executed the code for the module, it's possible that the
+            // new exports made it ineligible for being a boundary.
+            // We only care about the case when we were _previously_ a boundary,
+            // because we already accepted this update (accidental side effect).
+            const isNoLongerABoundary = prevExports !== null;
+            if (isNoLongerABoundary) {
+                // @ts-expect-error
+                module.hot.invalidate();
+            }
+        }
+    }
+}
+let refreshModuleRuntime = RefreshModuleRuntime.toString();
+refreshModuleRuntime = refreshModuleRuntime.slice(refreshModuleRuntime.indexOf('{') + 1, refreshModuleRuntime.lastIndexOf('}'));
+const ReactRefreshLoader = function (source, inputSourceMap) {
+    this.callback(null, `${source}\n\n;${refreshModuleRuntime}`, inputSourceMap);
+};
+exports.default = ReactRefreshLoader;

package/dist/preview-server/fast-refresh/runtime.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Source code is adapted from https://github.com/WebHotelier/webpack-fast-refresh#readme and rewritten in Typescript. This file is MIT licensed.
+ */
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 Vercel, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+declare global {
+    interface Window {
+        $RefreshReg$: (type: string, id?: string) => void;
+        $RefreshSig$: () => (type: string) => unknown;
+        $RefreshHelpers$: typeof RefreshHelpers;
+        $RefreshInterceptModuleExecution$: (webpackId: unknown) => () => void;
+    }
+}
+import RefreshHelpers from './helpers';

package/dist/preview-server/fast-refresh/runtime.js

@@ -0,0 +1,32 @@
+"use strict";
+/**
+ * Source code is adapted from https://github.com/WebHotelier/webpack-fast-refresh#readme and rewritten in Typescript. This file is MIT licensed.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const RefreshRuntime = require('react-refresh/runtime');
+const helpers_1 = __importDefault(require("./helpers"));
+// Hook into ReactDOM initialization
+RefreshRuntime.injectIntoGlobalHook(self);
+// noop fns to prevent runtime errors during initialization
+self.$RefreshReg$ = () => undefined;
+self.$RefreshSig$ = () => (type) => type;
+// Register global helpers
+self.$RefreshHelpers$ = helpers_1.default;
+// Register a helper for module execution interception
+self.$RefreshInterceptModuleExecution$ = function (webpackModuleId) {
+    const prevRefreshReg = self.$RefreshReg$;
+    const prevRefreshSig = self.$RefreshSig$;
+    self.$RefreshReg$ = (type, id) => {
+        RefreshRuntime.register(type, webpackModuleId + ' ' + id);
+    };
+    self.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
+    // Modeled after `useEffect` cleanup pattern:
+    // https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup
+    return () => {
+        self.$RefreshReg$ = prevRefreshReg;
+        self.$RefreshSig$ = prevRefreshSig;
+    };
+};

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

@@ -0,0 +1 @@
+export declare const indexHtml: (staticHash: string, baseDir: string, editorName: string | null) => string;

package/dist/preview-server/static-preview.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.indexHtml = void 0;
+const path_1 = __importDefault(require("path"));
+const indexHtml = (staticHash, baseDir, editorName) => `
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" />
+		<link rel="icon" type="image/png" href="/remotion.png" />
+		<title>Remotion Preview</title>
+	</head>
+	<body>
+    <script>window.remotion_staticBase = "${staticHash}";</script>
+		<div id="video-container"></div>
+		<div id="explainer-container"></div>
+		${editorName
+    ? `<script>window.remotion_editorName = "${editorName}";</script>`
+    : '<script>window.remotion_editorName = null;</script>'}
+		<script>window.remotion_projectName = ${JSON.stringify(path_1.default.basename(process.cwd()))};</script>
+		<script>window.remotion_cwd = ${JSON.stringify(process.cwd())};</script>
+		
+		<div id="container"></div>
+		<div id="menuportal-0"></div>
+		<div id="menuportal-1"></div>
+		<div id="menuportal-2"></div>
+		<div id="menuportal-3"></div>
+		<div id="menuportal-4"></div>
+		<div id="menuportal-5"></div>
+		<div id="remotion-error-overlay"></div>
+		<script src="${baseDir}bundle.js"></script>
+	</body>
+</html>
+`.trim();
+exports.indexHtml = indexHtml;

package/dist/preview-server/webpack-cache.d.ts

@@ -0,0 +1,12 @@
+declare type Environment = 'development' | 'production';
+declare global {
+    namespace NodeJS {
+        interface ProcessVersions {
+            pnp?: string;
+        }
+    }
+}
+export declare const clearCache: (environment: Environment, inputProps: object | null) => Promise<void>;
+export declare const getWebpackCacheName: (environment: Environment, inputProps: object | null) => string;
+export declare const cacheExists: (environment: Environment, inputProps: object | null) => boolean;
+export {};

package/dist/preview-server/webpack-cache.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cacheExists = exports.getWebpackCacheName = exports.clearCache = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const remotion_1 = require("remotion");
+// Inlined from https://github.com/webpack/webpack/blob/4c2ee7a4ddb8db2362ca83b6c4190523387ba7ee/lib/config/defaults.js#L265
+// An algorithm to determine where Webpack will cache the depencies
+const getWebpackCacheDir = () => {
+    const cwd = process.cwd();
+    let dir = cwd;
+    for (;;) {
+        try {
+            if (fs_1.default.statSync(path_1.default.join(dir, 'package.json')).isFile()) {
+                break;
+            }
+            // eslint-disable-next-line no-empty
+        }
+        catch (e) { }
+        const parent = path_1.default.dirname(dir);
+        if (dir === parent) {
+            dir = undefined;
+            break;
+        }
+        dir = parent;
+    }
+    if (!dir) {
+        return path_1.default.resolve(cwd, '.cache/webpack');
+    }
+    if (process.versions.pnp === '1') {
+        return path_1.default.resolve(dir, '.pnp/.cache/webpack');
+    }
+    if (process.versions.pnp === '3') {
+        return path_1.default.resolve(dir, '.yarn/.cache/webpack');
+    }
+    return path_1.default.resolve(dir, 'node_modules/.cache/webpack');
+};
+const remotionCacheLocation = (environment, inputProps) => {
+    return path_1.default.join(getWebpackCacheDir(), (0, exports.getWebpackCacheName)(environment, inputProps));
+};
+const clearCache = (environment, inputProps) => {
+    var _a;
+    return ((_a = fs_1.default.promises.rm) !== null && _a !== void 0 ? _a : fs_1.default.promises.rmdir)(remotionCacheLocation(environment, inputProps), {
+        recursive: true,
+    });
+};
+exports.clearCache = clearCache;
+const getWebpackCacheName = (environment, inputProps) => {
+    // In development, let's reset the cache when input props
+    // are changing, because they are injected using Webpack and if changed,
+    // it will get the cached version
+    if (environment === 'development') {
+        return `remotion-v3-${environment}-${(0, remotion_1.random)(JSON.stringify(inputProps))}`;
+    }
+    // In production, the cache is independent from input props because
+    // they are passed over URL params. Speed is mostly important in production.
+    return `remotion-v3-${environment}`;
+};
+exports.getWebpackCacheName = getWebpackCacheName;
+const cacheExists = (environment, inputProps) => {
+    return fs_1.default.existsSync(remotionCacheLocation(environment, inputProps));
+};
+exports.cacheExists = cacheExists;

package/dist/progress-bar.d.ts

@@ -1,4 +1,5 @@
 import type { StitchingState } from '@remotion/renderer';
+import type { Codec } from 'remotion';
 import type { RenderStep } from './step';
 export declare const createProgressBar: (quiet: boolean) => {
     update: (str: string) => boolean;
@@ -25,8 +26,9 @@ declare type StitchingProgressInput = {
     steps: RenderStep[];
     doneIn: number | null;
     stage: StitchingState;
+    codec: Codec;
 };
-export declare const makeStitchingProgress: ({ frames, totalFrames, steps, doneIn, stage, }: StitchingProgressInput) => string;
+export declare const makeStitchingProgress: ({ frames, totalFrames, steps, doneIn, stage, codec, }: StitchingProgressInput) => string;
 export declare type DownloadProgress = {
     name: string;
     id: number;

package/dist/progress-bar.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeRenderingAndStitchingProgress = exports.makeStitchingProgress = exports.makeRenderingProgress = exports.makeBundlingProgress = exports.createOverwriteableCliOutput = exports.createProgressBar = void 0;
+const renderer_1 = require("@remotion/renderer");
 const remotion_1 = require("remotion");
 const ansi_diff_1 = require("./ansi/ansi-diff");
 const chalk_1 = require("./chalk");
@@ -46,14 +47,14 @@ const makeRenderingProgress = ({ frames, totalFrames, steps, concurrency, doneIn
     ].join(' ');
 };
 exports.makeRenderingProgress = makeRenderingProgress;
-const makeStitchingProgress = ({ frames, totalFrames, steps, doneIn, stage, }) => {
+const makeStitchingProgress = ({ frames, totalFrames, steps, doneIn, stage, codec, }) => {
     const progress = frames / totalFrames;
     return [
         `(${steps.indexOf('stitching') + 1}/${steps.length})`,
         (0, make_progress_bar_1.makeProgressBar)(progress),
-        stage === 'muxing'
+        stage === 'muxing' && renderer_1.RenderInternals.canUseParallelEncoding(codec)
             ? `${doneIn ? 'Muxed' : 'Muxing'} audio`
-            : `${doneIn ? 'Encoded' : 'Encoding'} video`,
+            : `${doneIn ? 'Encoded' : 'Encoding'} ${codec === 'gif' ? 'GIF' : 'video'}`,
         doneIn === null ? `${frames}/${totalFrames}` : chalk_1.chalk.gray(`${doneIn}ms`),
     ].join(' ');
 };

package/dist/render.js

@@ -31,7 +31,7 @@ const render = async () => {
         ? file
         : path_1.default.join(process.cwd(), file);
     await (0, initialize_render_cli_1.initializeRenderCli)('sequence');
-    const { codec, proResProfile, parallelism, frameRange, shouldOutputImageSequence, absoluteOutputFile, overwrite, inputProps, envVariables, quality, browser, crf, pixelFormat, imageFormat, browserExecutable, ffmpegExecutable, ffprobeExecutable, scale, chromiumOptions, port, puppeteerTimeout, } = await (0, get_cli_options_1.getCliOptions)({ isLambda: false, type: 'series' });
+    const { codec, proResProfile, parallelism, frameRange, shouldOutputImageSequence, absoluteOutputFile, overwrite, inputProps, envVariables, quality, browser, crf, pixelFormat, imageFormat, browserExecutable, ffmpegExecutable, ffprobeExecutable, scale, chromiumOptions, port, numberOfGifLoops, everyNthFrame, puppeteerTimeout, } = await (0, get_cli_options_1.getCliOptions)({ isLambda: false, type: 'series' });
     if (!absoluteOutputFile) {
         throw new Error('assertion error - expected absoluteOutputFile to not be null');
     }
@@ -52,7 +52,7 @@ const render = async () => {
     ].filter(remotion_1.Internals.truthy);
     const urlOrBundle = renderer_1.RenderInternals.isServeUrl(fullPath)
         ? fullPath
-        : await (0, setup_cache_1.bundleOnCli)(fullPath, steps);
+        : await (0, setup_cache_1.bundleOnCli)({ fullPath, steps });
     const onDownload = (src) => {
         const id = Math.random();
         const download = {
@@ -96,7 +96,8 @@ const render = async () => {
         : await fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'react-motion-render'));
     log_1.Log.verbose('Output dir', outputDir);
     const renderProgress = (0, progress_bar_1.createOverwriteableCliOutput)((0, parse_command_line_1.quietFlagProvided)());
-    let totalFrames = renderer_1.RenderInternals.getDurationFromFrameRange(frameRange, config.durationInFrames);
+    const realFrameRange = renderer_1.RenderInternals.getRealFrameRange(config.durationInFrames, frameRange);
+    const totalFrames = renderer_1.RenderInternals.getFramesToRender(realFrameRange, everyNthFrame);
     let encodedFrames = 0;
     let renderedFrames = 0;
     let encodedDoneIn = null;
@@ -104,13 +105,13 @@ const render = async () => {
     let stitchStage = 'encoding';
     const downloads = [];
     const updateRenderProgress = () => {
-        if (totalFrames === null) {
+        if (totalFrames.length === 0) {
             throw new Error('totalFrames should not be 0');
         }
         return renderProgress.update((0, progress_bar_1.makeRenderingAndStitchingProgress)({
             rendering: {
                 frames: renderedFrames,
-                totalFrames,
+                totalFrames: totalFrames.length,
                 concurrency: renderer_1.RenderInternals.getActualConcurrency(parallelism),
                 doneIn: renderedDoneIn,
                 steps,
@@ -122,7 +123,8 @@ const render = async () => {
                     frames: encodedFrames,
                     stage: stitchStage,
                     steps,
-                    totalFrames,
+                    totalFrames: totalFrames.length,
+                    codec,
                 },
             downloads,
         }));
@@ -144,10 +146,7 @@ const render = async () => {
                 renderedFrames = rendered;
                 updateRenderProgress();
             },
-            onStart: ({ frameCount }) => {
-                totalFrames = frameCount;
-                return updateRenderProgress();
-            },
+            onStart: () => undefined,
             onDownload: (src) => {
                 if (src.startsWith('data:')) {
                     log_1.Log.info('\nWriting Data URL to file: ', src.substring(0, 30) + '...');
@@ -159,6 +158,7 @@ const render = async () => {
             outputDir,
             serveUrl: urlOrBundle,
             dumpBrowserLogs: remotion_1.Internals.Logging.isEqualOrBelowLogLevel(remotion_1.Internals.Logging.getLogLevel(), 'verbose'),
+            everyNthFrame,
             envVariables,
             frameRange,
             parallelism,
@@ -207,13 +207,12 @@ const render = async () => {
         serveUrl: urlOrBundle,
         onDownload,
         dumpBrowserLogs: remotion_1.Internals.Logging.isEqualOrBelowLogLevel(remotion_1.Internals.Logging.getLogLevel(), 'verbose'),
-        onStart: ({ frameCount }) => {
-            totalFrames = frameCount;
-        },
         chromiumOptions,
         timeoutInMilliseconds: remotion_1.Internals.getCurrentPuppeteerTimeout(),
         scale,
         port,
+        numberOfGifLoops,
+        everyNthFrame,
     });
     log_1.Log.info();
     log_1.Log.info();
@@ -234,7 +233,7 @@ const render = async () => {
         log_1.Log.warn(err);
         log_1.Log.warn('Do you have minimum required Node.js version?');
     }
-    log_1.Log.info(chalk_1.chalk.green('\nYour video is ready!'));
+    log_1.Log.info(chalk_1.chalk.green(`\nYour ${codec === 'gif' ? 'GIF' : 'video'} is ready!`));
     if (remotion_1.Internals.Logging.isEqualOrBelowLogLevel(remotion_1.Internals.Logging.getLogLevel(), 'verbose')) {
         remotion_1.Internals.perf.logPerf();
     }

package/dist/setup-cache.d.ts

@@ -1,2 +1,5 @@
 import type { RenderStep } from './step';
-export declare const bundleOnCli: (fullPath: string, steps: RenderStep[]) => Promise<string>;
+export declare const bundleOnCli: ({ fullPath, steps, }: {
+    fullPath: string;
+    steps: RenderStep[];
+}) => Promise<string>;

package/dist/setup-cache.js

@@ -6,7 +6,7 @@ const remotion_1 = require("remotion");
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
 const progress_bar_1 = require("./progress-bar");
-const bundleOnCli = async (fullPath, steps) => {
+const bundleOnCli = async ({ fullPath, steps, }) => {
     var _a;
     const shouldCache = remotion_1.Internals.getWebpackCaching();
     const cacheExistedBefore = bundler_1.BundlerInternals.cacheExists('production');

package/dist/still.js

@@ -62,7 +62,7 @@ const still = async () => {
     ].filter(remotion_1.Internals.truthy);
     const urlOrBundle = renderer_1.RenderInternals.isServeUrl(fullPath)
         ? Promise.resolve(fullPath)
-        : await (0, setup_cache_1.bundleOnCli)(fullPath, steps);
+        : await (0, setup_cache_1.bundleOnCli)({ fullPath, steps });
     const puppeteerInstance = await browserInstance;
     const comps = await (0, renderer_1.getCompositions)(await urlOrBundle, {
         inputProps,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.0.29",
+	"version": "3.1.0",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -10,7 +10,7 @@
 	"module": "true",
 	"scripts": {
 		"lint": "eslint src --ext ts,tsx",
-		"test": "jest",
+		"test": "vitest --run",
 		"build": "tsc -d",
 		"watch": "tsc -w"
 	},
@@ -23,17 +23,18 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.0.29",
-		"@remotion/media-utils": "3.0.29",
-		"@remotion/player": "3.0.29",
-		"@remotion/renderer": "3.0.29",
+		"@remotion/bundler": "3.1.0",
+		"@remotion/media-utils": "3.1.0",
+		"@remotion/player": "3.1.0",
+		"@remotion/renderer": "3.1.0",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
-		"remotion": "3.0.29",
+		"remotion": "3.1.0",
 		"semver": "7.3.5",
-		"source-map": "0.6.1"
+		"source-map": "0.6.1",
+		"vitest": "^0.18.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -41,7 +42,6 @@
 	},
 	"devDependencies": {
 		"@jonny/eslint-config": "3.0.266",
-		"@types/jest": "^27.4.0",
 		"@types/minimist": "^1.2.2",
 		"@types/node": "^16.7.5",
 		"@types/react": "18.0.1",
@@ -54,12 +54,10 @@
 		"eslint-plugin-10x": "1.5.2",
 		"eslint-plugin-react": "7.29.4",
 		"eslint-plugin-react-hooks": "4.4.0",
-		"jest": "^27.2.4",
 		"prettier": "^2.0.5",
 		"prettier-plugin-organize-imports": "^2.3.4",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
-		"ts-jest": "^27.0.5",
 		"typescript": "^4.7.0"
 	},
 	"keywords": [
@@ -73,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "da2e8a33766bf01b21dfd3c2d0c944356d156722"
+	"gitHead": "482c66127662171577aa427f10fe265fa1bc933b"
 }

package/tsconfig.json

@@ -12,5 +12,6 @@
 		{"path": "../renderer"},
 		{"path": "../player"},
 		{"path": "../media-utils"}
-	]
+	],
+	"exclude": ["vitest.config.ts", "dist"]
 }

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import {defineConfig} from 'vitest/config';
+
+export default defineConfig({
+	test: {
+		testTimeout: 90000,
+		maxConcurrency: 1,
+		threads: false,
+	},
+});