@remotion/cli 3.2.0 → 3.2.3

package/dist/config/drop-silent-audio-if-silent.d.ts

@@ -0,0 +1,2 @@
+export declare const setDropAudioIfSilent: (muted: boolean) => void;
+export declare const getDropAudioIfSilent: () => boolean;

package/dist/config/drop-silent-audio-if-silent.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDropAudioIfSilent = exports.setDropAudioIfSilent = void 0;
+const DEFAULT_DROP_AUDIO_IF_SILENT_STATE = true;
+let mutedState = DEFAULT_DROP_AUDIO_IF_SILENT_STATE;
+const setDropAudioIfSilent = (muted) => {
+    mutedState = muted;
+};
+exports.setDropAudioIfSilent = setDropAudioIfSilent;
+const getDropAudioIfSilent = () => {
+    return mutedState;
+};
+exports.getDropAudioIfSilent = getDropAudioIfSilent;

package/dist/config/enforce-audio-track.d.ts

@@ -0,0 +1,2 @@
+export declare const setEnforceAudioTrack: (enforceAudioTrack: boolean) => void;
+export declare const getEnforceAudioTrack: () => boolean;

package/dist/config/enforce-audio-track.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEnforceAudioTrack = exports.setEnforceAudioTrack = void 0;
+const DEFAULT_ENFORCE_AUDIO_TRACK = true;
+let enforceAudioTrackState = DEFAULT_ENFORCE_AUDIO_TRACK;
+const setEnforceAudioTrack = (enforceAudioTrack) => {
+    enforceAudioTrackState = enforceAudioTrack;
+};
+exports.setEnforceAudioTrack = setEnforceAudioTrack;
+const getEnforceAudioTrack = () => {
+    return enforceAudioTrackState;
+};
+exports.getEnforceAudioTrack = getEnforceAudioTrack;

package/dist/config/index.d.ts

@@ -39,5 +39,9 @@ export declare const ConfigInternals: {
     setStillFrame: (frame: number) => void;
     getMaxTimelineTracks: () => number;
     defaultOverrideFunction: WebpackOverrideFn;
+    setMuted: (muted: boolean) => void;
+    getMuted: () => boolean;
+    getEnforceAudioTrack: () => boolean;
+    setEnforceAudioTrack: (enforceAudioTrack: boolean) => void;
 };
 export declare const overrideRemotion: () => void;

package/dist/config/index.js

@@ -57,6 +57,7 @@ const chromium_flags_2 = require("./chromium-flags");
 const codec_2 = require("./codec");
 const concurrency_2 = require("./concurrency");
 const crf_2 = require("./crf");
+const enforce_audio_track_1 = require("./enforce-audio-track");
 const env_file_2 = require("./env-file");
 const every_nth_frame_2 = require("./every-nth-frame");
 const ffmpeg_executable_2 = require("./ffmpeg-executable");
@@ -65,6 +66,7 @@ const image_format_2 = require("./image-format");
 const image_sequence_2 = require("./image-sequence");
 const log_1 = require("./log");
 const max_timeline_tracks_2 = require("./max-timeline-tracks");
+const muted_1 = require("./muted");
 const number_of_gif_loops_2 = require("./number-of-gif-loops");
 const output_location_2 = require("./output-location");
 const override_webpack_2 = require("./override-webpack");
@@ -107,6 +109,8 @@ exports.Config = {
         setScale: scale_2.setScale,
         setEveryNthFrame: every_nth_frame_2.setEveryNthFrame,
         setNumberOfGifLoops: number_of_gif_loops_2.setNumberOfGifLoops,
+        setMuted: muted_1.setMuted,
+        setEnforceAudioTrack: enforce_audio_track_1.setEnforceAudioTrack,
     },
     Output: {
         setOutputLocation: output_location_2.setOutputLocation,
@@ -154,6 +158,10 @@ exports.ConfigInternals = {
     setStillFrame: still_frame_1.setStillFrame,
     getMaxTimelineTracks: max_timeline_tracks_1.getMaxTimelineTracks,
     defaultOverrideFunction: override_webpack_1.defaultOverrideFunction,
+    setMuted: muted_1.setMuted,
+    getMuted: muted_1.getMuted,
+    getEnforceAudioTrack: enforce_audio_track_1.getEnforceAudioTrack,
+    setEnforceAudioTrack: enforce_audio_track_1.setEnforceAudioTrack,
 };
 const overrideRemotion = () => {
     Object.assign(remotion_1.Config, exports.Config);

package/dist/config/muted.d.ts

@@ -0,0 +1,2 @@
+export declare const setMuted: (muted: boolean) => void;
+export declare const getMuted: () => boolean;

package/dist/config/muted.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMuted = exports.setMuted = void 0;
+const DEFAULT_MUTED_STATE = false;
+let mutedState = DEFAULT_MUTED_STATE;
+const setMuted = (muted) => {
+    mutedState = muted;
+};
+exports.setMuted = setMuted;
+const getMuted = () => {
+    return mutedState;
+};
+exports.getMuted = getMuted;

package/dist/editor/components/Notifications/ServerDisconnected.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const serverDisconnectedRef: React.RefObject<{
+    setServerDisconnected: () => void;
+}>;
+export declare const ServerDisconnected: React.FC;

package/dist/editor/components/Notifications/ServerDisconnected.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerDisconnected = exports.serverDisconnectedRef = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const container = {
+    position: 'fixed',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-start',
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    padding: 30,
+    pointerEvents: 'none',
+    backgroundColor: 'transparent',
+    fontFamily: 'SF Pro, Arial, Helvetica, sans-serif',
+};
+const message = {
+    backgroundColor: '#e74c3c',
+    color: 'white',
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderRadius: 4,
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.4)',
+    lineHeight: 1.5,
+};
+const inlineCode = {
+    fontSize: 16,
+    fontFamily: 'monospace',
+};
+exports.serverDisconnectedRef = (0, react_1.createRef)();
+let pageIsGoingToReload = false;
+window.addEventListener('beforeunload', () => {
+    pageIsGoingToReload = true;
+});
+const ServerDisconnected = () => {
+    const [serverDisconnected, setServerDisconnected] = (0, react_1.useState)(false);
+    (0, react_1.useImperativeHandle)(exports.serverDisconnectedRef, () => {
+        return {
+            setServerDisconnected: () => {
+                setServerDisconnected(true);
+            },
+        };
+    }, []);
+    if (!serverDisconnected) {
+        return null;
+    }
+    if (pageIsGoingToReload) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The preview server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_previewServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_previewServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
+};
+exports.ServerDisconnected = ServerDisconnected;

package/dist/editor/helpers/colors.d.ts

@@ -12,4 +12,4 @@ export declare const TIMELINE_BACKGROUND = "#111";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/dist/event-source.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.openEventSource = void 0;
+const ServerDisconnected_1 = require("./editor/components/Notifications/ServerDisconnected");
 let source = null;
 const openEventSource = () => {
     source = new EventSource('/events');
@@ -10,5 +11,10 @@ const openEventSource = () => {
             window.location.reload();
         }
     });
+    source.addEventListener('error', () => {
+        var _a;
+        // Display an error message that the preview server has disconnected.
+        (_a = ServerDisconnected_1.serverDisconnectedRef.current) === null || _a === void 0 ? void 0 : _a.setServerDisconnected();
+    });
 };
 exports.openEventSource = openEventSource;

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

@@ -28,4 +28,6 @@ export declare const getCliOptions: (options: {
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;
     port: number | null;
+    muted: boolean;
+    enforceAudioTrack: boolean;
 }>;

package/dist/get-cli-options.js

@@ -179,6 +179,8 @@ const getCliOptions = async (options) => {
         chromiumOptions,
         overwrite,
         port: port !== null && port !== void 0 ? port : null,
+        muted: config_1.ConfigInternals.getMuted(),
+        enforceAudioTrack: config_1.ConfigInternals.getEnforceAudioTrack(),
     };
 };
 exports.getCliOptions = getCliOptions;

package/dist/index.d.ts

@@ -95,6 +95,8 @@ export declare const CliInternals: {
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;
         port: number | null;
+        muted: boolean;
+        enforceAudioTrack: boolean;
     }>;
     parseCommandLine: (type: "sequence" | "still" | "lambda" | "preview" | "versions") => void;
     loadConfig: (remotionRoot: string) => Promise<string | null>;

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

@@ -33,6 +33,8 @@ export declare type CommandLineOptions = {
     port: number;
     frame: string | number;
     ['disable-headless']: boolean;
+    muted: boolean;
+    ['enforce-audio-track']: boolean;
     gl: OpenGlRenderer;
 };
 export declare const BooleanFlags: string[];

package/dist/parse-command-line.js

@@ -16,6 +16,8 @@ exports.BooleanFlags = [
     'help',
     'quiet',
     'q',
+    'muted',
+    'enforce-audio-track',
     // Lambda flags
     'force',
     'disable-chunk-optimization',
@@ -126,6 +128,12 @@ const parseCommandLine = (type) => {
     if (typeof exports.parsedCli.port !== 'undefined') {
         config_1.Config.Bundling.setPort(exports.parsedCli.port);
     }
+    if (typeof exports.parsedCli.muted !== 'undefined') {
+        config_1.Config.Rendering.setMuted(exports.parsedCli.muted);
+    }
+    if (typeof exports.parsedCli['enforce-audio-track'] !== 'undefined') {
+        config_1.Config.Rendering.setEnforceAudioTrack(exports.parsedCli['enforce-audio-track']);
+    }
 };
 exports.parseCommandLine = parseCommandLine;
 const quietFlagProvided = () => exports.parsedCli.quiet || exports.parsedCli.q;

package/dist/preview-server/error-overlay/react-overlay/listen-to-runtime-errors.js

@@ -31,7 +31,15 @@ const crashWithFrames = (crash) => (error) => {
     var _a;
     const didHookOrderChange = error.message.startsWith('Rendered fewer hooks') ||
         error.message.startsWith('Rendered more hooks');
-    if (didHookOrderChange) {
+    const key = 'remotion.lastCrashBecauseOfHooks';
+    const previousCrashWasBecauseOfHooks = window.localStorage.getItem(key);
+    // When rendering conditional hooks, refreshing does not help.
+    // So we only refresh once.
+    const justRefreshedBecauseOfHooks = previousCrashWasBecauseOfHooks
+        ? Date.now() - Number(previousCrashWasBecauseOfHooks) < 5000
+        : false;
+    window.localStorage.setItem('remotion.lastCrashBecauseOfHooks', String(Date.now()));
+    if (didHookOrderChange && !justRefreshedBecauseOfHooks) {
         // eslint-disable-next-line no-console
         console.log('Hook order changed. Reloading app...');
         window.location.reload();

package/dist/preview-server/error-overlay/remotion-overlay/Button.js

@@ -26,6 +26,6 @@ const Button = ({ children, onClick, disabled, style }) => {
             ...(style !== null && style !== void 0 ? style : {}),
         };
     }, [style]);
-    return ((0, jsx_runtime_1.jsx)("button", { style: combined, type: "button", disabled: disabled, onClick: onClick, children: (0, jsx_runtime_1.jsx)("div", { style: buttonContainer, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)("button", { style: combined, type: "button", disabled: disabled, onClick: onClick, children: (0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: buttonContainer, children: children }) }));
 };
 exports.Button = Button;

package/dist/preview-server/error-overlay/remotion-overlay/CodeFrame.js

@@ -13,6 +13,8 @@ const lineNumber = {
     paddingLeft: 10,
     paddingRight: 12,
     marginRight: 12,
+    color: 'inherit',
+    fontSize: 14,
 };
 const CodeFrame = ({ source, lineNumberWidth }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: frame, children: source.map((s, j) => {

package/dist/preview-server/error-overlay/remotion-overlay/ErrorMessage.js

@@ -16,9 +16,11 @@ const container = {
     marginBottom: 15,
 };
 const messageContainer = {
+    overflow: 'hidden',
+};
+const textContainer = {
     fontSize,
     lineHeight,
-    overflow: 'hidden',
 };
 const moreLine = {
     width: '100%',
@@ -62,6 +64,6 @@ const ErrorMessage = ({ message }) => {
     const toggle = (0, react_1.useCallback)(() => {
         setExpanded((e) => !e);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, children: message }) }), errorLines !== null && errorLines > maxLines ? ((0, jsx_runtime_1.jsx)("div", { style: moreLine, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggle, style: moreButton, children: (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: expanded }) }) })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: textContainer, children: message }) }), errorLines !== null && errorLines > maxLines ? ((0, jsx_runtime_1.jsx)("div", { style: moreLine, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggle, style: moreButton, children: (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: expanded }) }) })) : null] }));
 };
 exports.ErrorMessage = ErrorMessage;

package/dist/preview-server/error-overlay/remotion-overlay/ErrorTitle.js

@@ -32,6 +32,6 @@ const spacer = {
     width: 5,
 };
 const ErrorTitle = ({ name, message, symbolicating }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: title, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("span", { style: errName, children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [symbolicating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Symbolicating_1.Symbolicating, {}), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { message: message })] })] }), (0, react_overlay_1.didUnmountReactApp)() ? null : (0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: title, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("span", { style: errName, children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [symbolicating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Symbolicating_1.Symbolicating, {}), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { message: message })] })] }), (0, react_overlay_1.didUnmountReactApp)() ? null : (0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {})] }));
 };
 exports.ErrorTitle = ErrorTitle;

package/dist/preview-server/error-overlay/remotion-overlay/StackFrame.js

@@ -10,6 +10,7 @@ const format_location_1 = require("./format-location");
 const location = {
     color: 'rgba(255, 255, 255, 0.6)',
     fontFamily: 'monospace',
+    fontSize: 14,
 };
 const header = {
     paddingLeft: 14,
@@ -28,6 +29,7 @@ const left = {
 };
 const fnName = {
     fontSize: 14,
+    lineHeight: 1.5,
     marginBottom: 3,
 };
 const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
@@ -41,7 +43,7 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
     const toggleCodeFrame = (0, react_1.useCallback)(() => {
         setShowCodeFrame((f) => !f);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: header, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? ((0, jsx_runtime_1.jsxs)("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: false }) : (0, jsx_runtime_1.jsx)(carets_1.CaretRight, {}) })) : null] }), (0, jsx_runtime_1.jsx)("div", { children: s.originalScriptCode &&
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: header, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? ((0, jsx_runtime_1.jsxs)("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: false }) : (0, jsx_runtime_1.jsx)(carets_1.CaretRight, {}) })) : null] }), (0, jsx_runtime_1.jsx)("div", { children: s.originalScriptCode &&
                     s.originalScriptCode.length > 0 &&
                     showCodeFrame ? ((0, jsx_runtime_1.jsx)(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })] }));
 };

package/dist/preview-server/get-package-manager.d.ts

@@ -3,6 +3,7 @@ declare type LockfilePath = {
     manager: PackageManager;
     path: string;
     installCommand: string;
+    startCommand: string;
 };
 export declare const lockFilePaths: LockfilePath[];
 export declare const getPackageManager: (remotionRoot: string) => LockfilePath | 'unknown';

package/dist/preview-server/get-package-manager.js

@@ -7,16 +7,23 @@ exports.getPackageManager = exports.lockFilePaths = void 0;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 exports.lockFilePaths = [
-    { path: 'package-lock.json', manager: 'npm', installCommand: 'npm i' },
+    {
+        path: 'package-lock.json',
+        manager: 'npm',
+        installCommand: 'npm i',
+        startCommand: 'npm start',
+    },
     {
         path: 'yarn.lock',
         manager: 'yarn',
         installCommand: 'yarn add',
+        startCommand: 'yarn start',
     },
     {
         path: 'pnpm-lock.yaml',
         manager: 'pnpm',
         installCommand: 'pnpm i',
+        startCommand: 'pnpm start',
     },
 ];
 const getPackageManager = (remotionRoot) => {

package/dist/preview-server/routes.js

@@ -10,6 +10,7 @@ const path_1 = __importDefault(require("path"));
 const url_1 = require("url");
 const get_file_source_1 = require("./error-overlay/react-overlay/utils/get-file-source");
 const open_in_editor_1 = require("./error-overlay/react-overlay/utils/open-in-editor");
+const get_package_manager_1 = require("./get-package-manager");
 const project_info_1 = require("./project-info");
 const serve_static_1 = require("./serve-static");
 const update_available_1 = require("./update-available");
@@ -29,12 +30,14 @@ const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputPro
     const displayName = (0, open_in_editor_1.getDisplayNameForEditor)(edit ? edit.command : null);
     response.setHeader('content-type', 'text/html');
     response.writeHead(200);
+    const packageManager = (0, get_package_manager_1.getPackageManager)(remotionRoot);
     response.end(bundler_1.BundlerInternals.indexHtml({
         staticHash: hash,
         baseDir: '/',
         editorName: displayName,
         inputProps: getCurrentInputProps(),
         remotionRoot,
+        previewServerCommand: packageManager === 'unknown' ? null : packageManager.startCommand,
     }));
 };
 const handleProjectInfo = async (remotionRoot, _, response) => {

package/dist/previewEntry.js

@@ -9,13 +9,19 @@ const client_1 = __importDefault(require("react-dom/client"));
 const remotion_1 = require("remotion");
 require("../styles/styles.css");
 const Editor_1 = require("./editor/components/Editor");
+const ServerDisconnected_1 = require("./editor/components/Notifications/ServerDisconnected");
 const event_source_1 = require("./event-source");
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(null, '#1f2428'));
+const getServerDisconnectedDomElement = () => {
+    return document.getElementById('server-disconnected-overlay');
+};
 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);
+    client_1.default.createRoot(getServerDisconnectedDomElement()).render((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}));
 }
 else {
     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());
+    client_1.default.render((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement());
 }
 (0, event_source_1.openEventSource)();

package/dist/progress-bar.js

@@ -50,12 +50,17 @@ const makeRenderingProgress = ({ frames, totalFrames, steps, concurrency, doneIn
 exports.makeRenderingProgress = makeRenderingProgress;
 const makeStitchingProgress = ({ frames, totalFrames, steps, doneIn, stage, codec, }) => {
     const progress = frames / totalFrames;
+    const mediaType = codec === 'gif'
+        ? 'GIF'
+        : renderer_1.RenderInternals.isAudioCodec(codec)
+            ? 'audio'
+            : 'video';
     return [
         `(${steps.indexOf('stitching') + 1}/${steps.length})`,
         (0, make_progress_bar_1.makeProgressBar)(progress),
         stage === 'muxing' && renderer_1.RenderInternals.canUseParallelEncoding(codec)
-            ? `${doneIn ? 'Muxed' : 'Muxing'} audio`
-            : `${doneIn ? 'Encoded' : 'Encoding'} ${codec === 'gif' ? 'GIF' : 'video'}`,
+            ? `${doneIn ? 'Muxed' : 'Muxing'} ${mediaType}`
+            : `${doneIn ? 'Encoded' : 'Encoding'} ${mediaType}`,
         doneIn === null ? `${frames}/${totalFrames}` : chalk_1.chalk.gray(`${doneIn}ms`),
     ].join(' ');
 };

package/dist/render.js

@@ -36,7 +36,7 @@ const render = async (remotionRoot) => {
     const downloadMap = renderer_1.RenderInternals.makeDownloadMap();
     await (0, initialize_render_cli_1.initializeRenderCli)(remotionRoot, 'sequence');
     log_1.Log.verbose('Asset dirs', downloadMap.assetDir);
-    const { codec, proResProfile, parallelism, frameRange, shouldOutputImageSequence, overwrite, inputProps, envVariables, quality, browser, crf, pixelFormat, imageFormat, browserExecutable, ffmpegExecutable, ffprobeExecutable, scale, chromiumOptions, port, numberOfGifLoops, everyNthFrame, puppeteerTimeout, } = await (0, get_cli_options_1.getCliOptions)({
+    const { codec, proResProfile, parallelism, frameRange, shouldOutputImageSequence, overwrite, inputProps, envVariables, quality, browser, crf, pixelFormat, imageFormat, browserExecutable, ffmpegExecutable, ffprobeExecutable, scale, chromiumOptions, port, numberOfGifLoops, everyNthFrame, puppeteerTimeout, muted, enforceAudioTrack, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'series',
     });
@@ -232,6 +232,8 @@ const render = async (remotionRoot) => {
         everyNthFrame,
         verbose: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
         downloadMap,
+        muted,
+        enforceAudioTrack,
     });
     log_1.Log.info();
     log_1.Log.info();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.2.0",
+	"version": "3.2.3",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -23,15 +23,15 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.2.0",
-		"@remotion/media-utils": "3.2.0",
-		"@remotion/player": "3.2.0",
-		"@remotion/renderer": "3.2.0",
+		"@remotion/bundler": "3.2.3",
+		"@remotion/media-utils": "3.2.3",
+		"@remotion/player": "3.2.3",
+		"@remotion/renderer": "3.2.3",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
-		"remotion": "3.2.0",
+		"remotion": "3.2.3",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "47b188161a9e922a247eaa998e72d37af9137707"
+	"gitHead": "15773a2e48ee8a9dbcfd898520cb914396c21eb1"
 }