@remotion/cli 4.0.0-offthread.34 → 4.0.0-offthread.6

package/dist/editor/icons/step-back.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepBack = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StepBack = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z" }) }));
 };
 exports.StepBack = StepBack;

package/dist/editor/icons/step-forward.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepForward = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StepForward = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z" }) }));
 };
 exports.StepForward = StepForward;

package/dist/editor/icons/still.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StillIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StillIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z" }) }));
 };
 exports.StillIcon = StillIcon;

package/dist/editor/icons/timeline.js

@@ -4,6 +4,6 @@ exports.TimelineIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TimelineIcon = (props) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "stream", className: "svg-inline--fa fa-stream fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: (_a = props.style) === null || _a === void 0 ? void 0 : _a.color, d: "M16 128h416c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H16C7.16 32 0 39.16 0 48v64c0 8.84 7.16 16 16 16zm480 80H80c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16zm-64 176H16c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "stream", className: "svg-inline--fa fa-stream fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: (_a = props.style) === null || _a === void 0 ? void 0 : _a.color, d: "M16 128h416c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H16C7.16 32 0 39.16 0 48v64c0 8.84 7.16 16 16 16zm480 80H80c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16zm-64 176H16c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16z" }) }));
 };
 exports.TimelineIcon = TimelineIcon;

package/dist/editor/icons/timelineInOutPointer.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineOutPointer = exports.TimelineInPointer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TimelineInPointer = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M158 25H99V230.5H158", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M158 25H99V230.5H158", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 exports.TimelineInPointer = TimelineInPointer;
 const TimelineOutPointer = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M98 25H157V230.5H98", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M98 25H157V230.5H98", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 exports.TimelineOutPointer = TimelineOutPointer;

package/dist/editor/state/folders.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ExpandedFoldersState } from '../helpers/persist-open-folders';
+declare type TFolderContext = {
+    foldersExpanded: ExpandedFoldersState;
+    setFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
+};
+export declare const FolderContext: React.Context<TFolderContext>;
+export declare const FolderContextProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/editor/state/folders.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FolderContextProvider = exports.FolderContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const persist_open_folders_1 = require("../helpers/persist-open-folders");
+exports.FolderContext = (0, react_1.createContext)({
+    foldersExpanded: {},
+    setFoldersExpanded: () => {
+        throw new Error('default state');
+    },
+});
+const FolderContextProvider = ({ children }) => {
+    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)());
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            foldersExpanded,
+            setFoldersExpanded,
+        };
+    }, [foldersExpanded]);
+    return ((0, jsx_runtime_1.jsx)(exports.FolderContext.Provider, { value: value, children: children }));
+};
+exports.FolderContextProvider = FolderContextProvider;

package/dist/editor/state/highest-z-index.js

@@ -19,7 +19,7 @@ const HighestZIndexProvider = ({ children }) => {
             if (index === -1) {
                 throw new Error('did not find z-index ' + newIndex);
             }
-            return prev.filter((n, i) => i !== index);
+            return prev.filter((_n, i) => i !== index);
         });
     }, []);
     const highestIndex = Math.max(...zIndexes);
@@ -30,6 +30,6 @@ const HighestZIndexProvider = ({ children }) => {
             unregisterZIndex,
         };
     }, [registerZIndex, unregisterZIndex, highestIndex]);
-    return ((0, jsx_runtime_1.jsx)(exports.HighestZIndexContext.Provider, { value: value, children: children }, void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.HighestZIndexContext.Provider, { value: value, children: children }));
 };
 exports.HighestZIndexProvider = HighestZIndexProvider;

package/dist/editor/state/keybindings.js

@@ -36,6 +36,6 @@ const KeybindingContextProvider = ({ children }) => {
             unregisterPane,
         };
     }, [registerKeybinding, unregisterKeybinding, unregisterPane]);
-    return ((0, jsx_runtime_1.jsx)(exports.KeybindingContext.Provider, { value: value, children: children }, void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.KeybindingContext.Provider, { value: value, children: children }));
 };
 exports.KeybindingContextProvider = KeybindingContextProvider;

package/dist/editor/state/sidebar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare type SidebarCollapsedState = 'collapsed' | 'expanded' | 'responsive';
+declare type Context = {
+    sidebarCollapsedState: SidebarCollapsedState;
+    setSidebarCollapsedState: (newState: SidebarCollapsedState) => void;
+};
+export declare const getSavedCollapsedState: () => SidebarCollapsedState;
+export declare const SidebarContext: React.Context<Context>;
+export declare const SidebarContextProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/editor/state/sidebar.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarContextProvider = exports.SidebarContext = exports.getSavedCollapsedState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const storageKey = 'remotion.sidebarCollapsing';
+const getSavedCollapsedState = () => {
+    const state = window.localStorage.getItem(storageKey);
+    if (state === 'collapsed') {
+        return 'collapsed';
+    }
+    if (state === 'expanded') {
+        return 'expanded';
+    }
+    return 'responsive';
+};
+exports.getSavedCollapsedState = getSavedCollapsedState;
+const setSavedCollapsedState = (type) => {
+    window.localStorage.setItem(storageKey, type);
+};
+exports.SidebarContext = (0, react_1.createContext)({
+    sidebarCollapsedState: 'collapsed',
+    setSidebarCollapsedState: () => {
+        throw new Error('sidebar collapsed state');
+    },
+});
+const SidebarContextProvider = ({ children }) => {
+    const [sidebarCollapsedState, setSidebarCollapsedState] = (0, react_1.useState)(() => (0, exports.getSavedCollapsedState)());
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            setSidebarCollapsedState: (state) => {
+                setSidebarCollapsedState(state);
+                setSavedCollapsedState(state);
+            },
+            sidebarCollapsedState,
+        };
+    }, [sidebarCollapsedState]);
+    return ((0, jsx_runtime_1.jsx)(exports.SidebarContext.Provider, { value: value, children: children }));
+};
+exports.SidebarContextProvider = SidebarContextProvider;

package/dist/editor/state/z-index.js

@@ -49,7 +49,7 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
             currentIndex,
         };
     }, [currentIndex]);
-    return ((0, jsx_runtime_1.jsxs)(exports.ZIndexContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }, void 0), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, children: children }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(exports.ZIndexContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, children: children })] }));
 };
 exports.HigherZIndex = HigherZIndex;
 const useZIndex = () => {

package/dist/get-cli-options.d.ts

@@ -25,4 +25,5 @@ export declare const getCliOptions: (options: {
     logLevel: "verbose" | "info" | "warn" | "error";
     scale: number;
     chromiumOptions: ChromiumOptions;
+    port: number | null;
 }>;

package/dist/get-cli-options.js

@@ -117,7 +117,9 @@ const getAndValidateBrowser = async (browserExecutable) => {
 const getCliOptions = async (options) => {
     var _a;
     const frameRange = getAndValidateFrameRange();
-    const codec = await getFinalCodec({ isLambda: options.isLambda });
+    const codec = options.type === 'get-compositions'
+        ? 'h264'
+        : await getFinalCodec({ isLambda: options.isLambda });
     const shouldOutputImageSequence = options.type === 'still'
         ? true
         : await getAndValidateShouldOutputImageSequence({
@@ -143,6 +145,7 @@ const getCliOptions = async (options) => {
     const browserExecutable = remotion_1.Internals.getBrowserExecutable();
     const ffmpegExecutable = remotion_1.Internals.getCustomFfmpegExecutable();
     const scale = remotion_1.Internals.getScale();
+    const port = remotion_1.Internals.getServerPort();
     const chromiumOptions = {
         disableWebSecurity: remotion_1.Internals.getChromiumDisableWebSecurity(),
         ignoreCertificateErrors: remotion_1.Internals.getIgnoreCertificateErrors(),
@@ -173,6 +176,7 @@ const getCliOptions = async (options) => {
         logLevel: remotion_1.Internals.Logging.getLogLevel(),
         scale,
         chromiumOptions,
+        port: port !== null && port !== void 0 ? port : null,
     };
 };
 exports.getCliOptions = getCliOptions;

package/dist/index.d.ts

@@ -50,6 +50,7 @@ export declare const CliInternals: {
         logLevel: "verbose" | "info" | "warn" | "error";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
+        port: number | null;
     }>;
     parseCommandLine: (type: "sequence" | "still" | "lambda" | "preview" | "versions") => void;
     loadConfig: () => Promise<string | null>;

package/dist/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/parse-command-line.js

@@ -113,6 +113,9 @@ const parseCommandLine = (type) => {
     if (typeof exports.parsedCli.scale !== 'undefined') {
         remotion_1.Config.Rendering.setScale(exports.parsedCli.scale);
     }
+    if (typeof exports.parsedCli.port !== 'undefined') {
+        remotion_1.Config.Bundling.setPort(exports.parsedCli.port);
+    }
 };
 exports.parseCommandLine = parseCommandLine;
 const quietFlagProvided = () => exports.parsedCli.quiet || exports.parsedCli.q;

package/dist/previewEntry.js

@@ -9,10 +9,10 @@ const remotion_1 = require("remotion");
 require("../styles/styles.css");
 const Editor_1 = require("./editor/components/Editor");
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(null, '#1f2428'));
-const content = ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { children: (0, jsx_runtime_1.jsx)(Editor_1.Editor, {}, void 0) }, void 0));
+const content = ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { children: (0, jsx_runtime_1.jsx)(Editor_1.Editor, {}) }));
 if (client_1.default.createRoot) {
     client_1.default.createRoot(remotion_1.Internals.getPreviewDomElement()).render(content);
 }
 else {
-    client_1.default.render((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { children: (0, jsx_runtime_1.jsx)(Editor_1.Editor, {}, void 0) }, void 0), remotion_1.Internals.getPreviewDomElement());
+    client_1.default.render((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { children: (0, jsx_runtime_1.jsx)(Editor_1.Editor, {}) }), remotion_1.Internals.getPreviewDomElement());
 }

package/dist/print-error.js

@@ -25,6 +25,7 @@ const printError = async (err) => {
         }
         catch (e) {
             output.update(chalk_1.default.red('(Error occurred symbolicating stack trace - printing minified stack trace)\n'));
+            log_1.Log.error();
             log_1.Log.error(err.stack || err);
         }
         return;

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, scale, chromiumOptions, } = 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, scale, chromiumOptions, port, 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');
     }
@@ -53,7 +53,6 @@ const render = async () => {
     const urlOrBundle = renderer_1.RenderInternals.isServeUrl(fullPath)
         ? fullPath
         : await (0, setup_cache_1.bundleOnCli)(fullPath, steps);
-    const downloadDir = renderer_1.RenderInternals.makeAssetsDownloadTmpDir();
     const onDownload = (src) => {
         const id = Math.random();
         const download = {
@@ -68,19 +67,8 @@ const render = async () => {
             updateRenderProgress();
         };
     };
-    const { serveUrl, closeServer } = await renderer_1.RenderInternals.prepareServer({
-        webpackConfigOrServeUrl: urlOrBundle,
-        downloadDir,
-        onDownload,
-        onError: (err) => {
-            log_1.Log.error('Error occurred:');
-            log_1.Log.error(err);
-            process.exit(1);
-        },
-        ffmpegExecutable,
-    });
     const puppeteerInstance = await browserInstance;
-    const comps = await (0, renderer_1.getCompositions)(serveUrl, {
+    const comps = await (0, renderer_1.getCompositions)(urlOrBundle, {
         inputProps,
         puppeteerInstance,
         envVariables,
@@ -165,17 +153,19 @@ const render = async () => {
                 }
             },
             outputDir,
-            serveUrl,
+            serveUrl: urlOrBundle,
             dumpBrowserLogs: remotion_1.Internals.Logging.isEqualOrBelowLogLevel(remotion_1.Internals.Logging.getLogLevel(), 'verbose'),
             envVariables,
             frameRange,
             parallelism,
             puppeteerInstance,
             quality,
-            timeoutInMilliseconds: remotion_1.Internals.getCurrentPuppeteerTimeout(),
+            timeoutInMilliseconds: puppeteerTimeout,
             chromiumOptions,
             scale,
             ffmpegExecutable,
+            browserExecutable,
+            port,
         });
         renderedDoneIn = Date.now() - startTime;
         updateRenderProgress();
@@ -208,7 +198,7 @@ const render = async () => {
         pixelFormat,
         proResProfile,
         quality,
-        serveUrl,
+        serveUrl: urlOrBundle,
         onDownload,
         dumpBrowserLogs: remotion_1.Internals.Logging.isEqualOrBelowLogLevel(remotion_1.Internals.Logging.getLogLevel(), 'verbose'),
         onStart: ({ frameCount }) => {
@@ -217,6 +207,7 @@ const render = async () => {
         chromiumOptions,
         timeoutInMilliseconds: remotion_1.Internals.getCurrentPuppeteerTimeout(),
         scale,
+        port,
     });
     log_1.Log.info();
     log_1.Log.info();
@@ -238,8 +229,5 @@ const render = async () => {
         log_1.Log.warn('Do you have minimum required Node.js version?');
     }
     log_1.Log.info(chalk_1.default.green('\nYour video is ready!'));
-    closeServer().catch((err) => {
-        log_1.Log.error('Could not close web server', err);
-    });
 };
 exports.render = render;

package/dist/still.js

@@ -33,7 +33,7 @@ const still = async () => {
         log_1.Log.verbose('Output file has a PNG extension, therefore setting the image format to PNG.');
         remotion_1.Config.Rendering.setImageFormat('png');
     }
-    const { inputProps, envVariables, quality, browser, imageFormat, stillFrame, browserExecutable, chromiumOptions, scale, ffmpegExecutable, overwrite, } = await (0, get_cli_options_1.getCliOptions)({ isLambda: false, type: 'still' });
+    const { inputProps, envVariables, quality, browser, imageFormat, stillFrame, browserExecutable, chromiumOptions, scale, ffmpegExecutable, overwrite, puppeteerTimeout, port, } = await (0, get_cli_options_1.getCliOptions)({ isLambda: false, type: 'still' });
     log_1.Log.verbose('Browser executable: ', browserExecutable);
     if (imageFormat === 'none') {
         log_1.Log.error('No image format was selected - this is probably an error in Remotion - please post your command on Github Issues for help.');
@@ -63,27 +63,16 @@ const still = async () => {
     const urlOrBundle = renderer_1.RenderInternals.isServeUrl(fullPath)
         ? Promise.resolve(fullPath)
         : await (0, setup_cache_1.bundleOnCli)(fullPath, steps);
-    const downloadDir = renderer_1.RenderInternals.makeAssetsDownloadTmpDir();
-    const onDownload = (src) => {
-        log_1.Log.info('Downloading ', src);
-    };
-    const { serveUrl, closeServer } = await renderer_1.RenderInternals.prepareServer({
-        downloadDir,
-        onDownload,
-        onError: (err) => {
-            log_1.Log.error(err);
-            process.exit(1);
-        },
-        ffmpegExecutable,
-        webpackConfigOrServeUrl: await urlOrBundle,
-    });
     const puppeteerInstance = await browserInstance;
-    const comps = await (0, renderer_1.getCompositions)(serveUrl, {
+    const comps = await (0, renderer_1.getCompositions)(await urlOrBundle, {
         inputProps,
         puppeteerInstance,
         envVariables,
-        timeoutInMilliseconds: remotion_1.Internals.getCurrentPuppeteerTimeout(),
+        timeoutInMilliseconds: puppeteerTimeout,
         chromiumOptions,
+        port,
+        browserExecutable,
+        ffmpegExecutable,
     });
     const compositionId = (0, get_composition_id_1.getCompositionId)(comps);
     const composition = comps.find((c) => c.id === compositionId);
@@ -92,11 +81,42 @@ const still = async () => {
     }
     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,
+        };
+        downloads.push(download);
+        updateProgress();
+        return ({ percent }) => {
+            download.progress = percent;
+            updateProgress();
+        };
+    };
     await (0, renderer_1.renderStill)({
         composition,
         frame: stillFrame,
         output: userOutput,
-        serveUrl,
+        serveUrl: await urlOrBundle,
         quality,
         dumpBrowserLogs: remotion_1.Internals.Logging.isEqualOrBelowLogLevel(remotion_1.Internals.Logging.getLogLevel(), 'verbose'),
         envVariables,
@@ -108,18 +128,12 @@ const still = async () => {
         ffmpegExecutable,
         browserExecutable,
         overwrite,
+        onDownload,
     });
+    frames = 1;
+    updateProgress();
+    log_1.Log.info();
     const closeBrowserPromise = puppeteerInstance.close();
-    closeServer().catch((err) => {
-        log_1.Log.error('Could not close web server', err);
-    });
-    renderProgress.update((0, progress_bar_1.makeRenderingProgress)({
-        frames: 1,
-        concurrency: 1,
-        doneIn: Date.now() - renderStart,
-        steps,
-        totalFrames: 1,
-    }));
     log_1.Log.info(chalk_1.default.green('\nYour still frame is ready!'));
     const seconds = Math.round((Date.now() - startTime) / 1000);
     log_1.Log.info([

package/dist/upgrade.js

@@ -43,6 +43,7 @@ const upgrade = async () => {
         '@remotion/media-utils',
         '@remotion/babel-loader',
         '@remotion/lambda',
+        '@remotion/preload',
         '@remotion/three',
         '@remotion/gif',
         'remotion',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "4.0.0-offthread.34+5888bc369",
+	"version": "4.0.0-offthread.6+d689e66f2",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -23,16 +23,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "4.0.0-offthread.34+5888bc369",
-		"@remotion/media-utils": "4.0.0-offthread.34+5888bc369",
-		"@remotion/player": "4.0.0-offthread.34+5888bc369",
-		"@remotion/renderer": "4.0.0-offthread.34+5888bc369",
+		"@remotion/bundler": "4.0.0-offthread.6+d689e66f2",
+		"@remotion/media-utils": "4.0.0-offthread.6+d689e66f2",
+		"@remotion/player": "4.0.0-offthread.6+d689e66f2",
+		"@remotion/renderer": "4.0.0-offthread.6+d689e66f2",
 		"better-opn": "2.1.1",
 		"chalk": "4.1.2",
 		"dotenv": "9.0.2",
 		"execa": "5.1.1",
 		"minimist": "1.2.6",
-		"remotion": "4.0.0-offthread.34+5888bc369",
+		"remotion": "4.0.0-offthread.6+d689e66f2",
 		"semver": "7.3.5",
 		"webpack": "5.72.0"
 	},
@@ -59,7 +59,7 @@
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
 		"ts-jest": "^27.0.5",
-		"typescript": "^4.5.5"
+		"typescript": "^4.7.0"
 	},
 	"keywords": [
 		"remotion",
@@ -72,5 +72,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5888bc369ebc9edf6ecb60a7214f01ca4844b3a0"
+	"gitHead": "d689e66f2c7b5096008b60c68254f3d953602651"
 }