@remotion/cli 3.1.11 → 3.2.2

package/dist/editor/helpers/get-left-of-timeline-slider.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGetXPositionOfItemInTimeline = void 0;
+exports.getXPositionOfItemInTimelineImperatively = exports.useGetXPositionOfItemInTimeline = void 0;
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -18,12 +18,15 @@ const useGetXPositionOfItemInTimeline = () => {
         if (!videoConfig) {
             return 0;
         }
-        return ((frame / (videoConfig.durationInFrames - 1)) *
-            (width - timeline_layout_1.TIMELINE_PADDING * 2) +
-            timeline_layout_1.TIMELINE_PADDING);
+        return (0, exports.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, width);
     }, [videoConfig, width]);
     return (0, react_1.useMemo)(() => {
         return { get, width };
     }, [get, width]);
 };
 exports.useGetXPositionOfItemInTimeline = useGetXPositionOfItemInTimeline;
+const getXPositionOfItemInTimelineImperatively = (frame, duration, width) => {
+    const proportion = frame / (duration - 1);
+    return proportion * (width - timeline_layout_1.TIMELINE_PADDING * 2) + timeline_layout_1.TIMELINE_PADDING;
+};
+exports.getXPositionOfItemInTimelineImperatively = getXPositionOfItemInTimelineImperatively;

package/dist/editor/helpers/get-timeline-sequence-layout.js

@@ -3,23 +3,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineSequenceLayout = exports.SEQUENCE_BORDER_WIDTH = void 0;
 const timeline_layout_1 = require("./timeline-layout");
 exports.SEQUENCE_BORDER_WIDTH = 1;
+const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDuration, nonNegativeMarginLeft, }) => {
+    const fullWidth = windowWidth - timeline_layout_1.TIMELINE_PADDING * 2;
+    const base = durationInFrames === Infinity || lastFrame === 0
+        ? fullWidth
+        : (spatialDuration / lastFrame) * fullWidth;
+    return base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft;
+};
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
-    const spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
+    let spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+    const shouldAddHalfAFrameAtEnd = startFrom + durationInFrames < lastFrame;
+    const shouldAddHalfAFrameAtStart = startFrom > 0;
+    if (shouldAddHalfAFrameAtEnd) {
+        spatialDuration += 0.5;
+    }
+    if (shouldAddHalfAFrameAtStart) {
+        spatialDuration += 0.5;
+    }
+    const startFromWithOffset = shouldAddHalfAFrameAtStart
+        ? startFrom - 0.5
+        : startFrom;
     const marginLeft = lastFrame === 0
         ? 0
-        : (startFrom / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
-    const negativeMarginLeft = Math.min(marginLeft, 0);
-    const width = (durationInFrames === Infinity || lastFrame === 0
-        ? windowWidth - timeline_layout_1.TIMELINE_PADDING * 2
-        : (spatialDuration / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2)) -
-        exports.SEQUENCE_BORDER_WIDTH +
-        negativeMarginLeft;
+        : (startFromWithOffset / lastFrame) *
+            (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
+    const nonNegativeMarginLeft = Math.min(marginLeft, 0);
     return {
         marginLeft: Math.round(Math.max(marginLeft, 0)),
-        width: Math.floor(width),
+        width: Math.floor(getWidthOfTrack({
+            durationInFrames,
+            lastFrame,
+            nonNegativeMarginLeft,
+            spatialDuration,
+            windowWidth,
+        })),
     };
 };
 exports.getTimelineSequenceLayout = getTimelineSequenceLayout;

package/dist/editor/icons/minus.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const Minus: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/minus.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Minus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Minus = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z" }) }));
+};
+exports.Minus = Minus;

package/dist/editor/icons/plus.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const Plus: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/plus.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Plus = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z" }) }));
+};
+exports.Plus = Plus;

package/dist/editor/state/timeline-zoom.d.ts

@@ -3,7 +3,7 @@ export declare const TIMELINE_MIN_ZOOM = 1;
 export declare const TIMELINE_MAX_ZOOM = 5;
 export declare const TimelineZoomCtx: React.Context<{
     zoom: number;
-    setZoom: React.Dispatch<React.SetStateAction<number>>;
+    setZoom: (prev: (prevZoom: number) => number) => void;
 }>;
 export declare const TimelineZoomContext: React.FC<{
     children: React.ReactNode;

package/dist/editor/state/timeline-zoom.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MAX_ZOOM = exports.TIMELINE_MIN_ZOOM = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const imperative_state_1 = require("../components/Timeline/imperative-state");
+const timeline_scroll_logic_1 = require("../components/Timeline/timeline-scroll-logic");
 exports.TIMELINE_MIN_ZOOM = 1;
 exports.TIMELINE_MAX_ZOOM = 5;
 exports.TimelineZoomCtx = (0, react_1.createContext)({
@@ -16,7 +18,19 @@ const TimelineZoomContext = ({ children }) => {
     const value = (0, react_1.useMemo)(() => {
         return {
             zoom,
-            setZoom,
+            setZoom: (callback) => {
+                setZoom((prevZoom) => {
+                    const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback(prevZoom)));
+                    const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
+                    (0, timeline_scroll_logic_1.zoomAndPreserveCursor)({
+                        oldZoom: prevZoom,
+                        newZoom,
+                        currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                        currentFrame: (0, imperative_state_1.getCurrentFrame)(),
+                    });
+                    return newZoom;
+                });
+            },
         };
     }, [zoom]);
     return ((0, jsx_runtime_1.jsx)(exports.TimelineZoomCtx.Provider, { value: value, children: children }));

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/handle-common-errors.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleCommonError = void 0;
+const chalk_1 = require("./chalk");
 const log_1 = require("./log");
 const print_error_1 = require("./print-error");
 const handleCommonError = async (err) => {
@@ -21,5 +22,9 @@ const handleCommonError = async (err) => {
         log_1.Log.info();
         log_1.Log.info('💡 Get help for this issue at https://remotion.dev/docs/enametoolong');
     }
+    if (err.message.includes('The bucket does not allow ACLs')) {
+        log_1.Log.info();
+        log_1.Log.info(chalk_1.chalk.green('💡 Fix this issue https://remotion.dev/docs/lambda/troubleshooting/bucket-disallows-acl'));
+    }
 };
 exports.handleCommonError = handleCommonError;

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/prepare-entry-point.d.ts

@@ -1,9 +1,10 @@
-import { RenderStep } from './step';
-export declare const prepareEntryPoint: ({ file, otherSteps, publicPath, outDir, }: {
+import type { RenderStep } from './step';
+export declare const prepareEntryPoint: ({ file, otherSteps, publicPath, outDir, remotionRoot, }: {
     file: string;
     otherSteps: RenderStep[];
     outDir: string | null;
     publicPath: string | null;
+    remotionRoot: string;
 }) => Promise<{
     urlOrBundle: string;
     steps: RenderStep[];

package/dist/prepare-entry-point.js

@@ -10,7 +10,7 @@ const path_1 = __importDefault(require("path"));
 const process_1 = require("process");
 const log_1 = require("./log");
 const setup_cache_1 = require("./setup-cache");
-const prepareEntryPoint = async ({ file, otherSteps, publicPath, outDir, }) => {
+const prepareEntryPoint = async ({ file, otherSteps, publicPath, outDir, remotionRoot, }) => {
     if (renderer_1.RenderInternals.isServeUrl(file)) {
         return { urlOrBundle: file, steps: otherSteps, shouldDelete: false };
     }
@@ -25,11 +25,12 @@ const prepareEntryPoint = async ({ file, otherSteps, publicPath, outDir, }) => {
         log_1.Log.error(`No file or directory exists at ${joined}.`);
         (0, process_1.exit)(1);
     }
-    const urlOrBundle = await (0, setup_cache_1.bundleOnCli)({
+    const urlOrBundle = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         fullPath: joined,
         steps: ['bundling', ...otherSteps],
         outDir,
         publicPath,
+        remotionRoot,
     });
     return { urlOrBundle, steps: ['bundling', ...otherSteps], shouldDelete: true };
 };

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/live-events.js

@@ -13,6 +13,10 @@ const makeLiveEventsRouter = () => {
             'cache-control': 'no-cache',
         };
         response.writeHead(200, headers);
+        if (request.method === 'OPTIONS') {
+            response.end();
+            return;
+        }
         response.write(serializeMessage({ type: 'init' }));
         const clientId = String(Math.random());
         const newClient = {

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) => {
@@ -43,7 +46,12 @@ const handleProjectInfo = async (remotionRoot, _, response) => {
     response.writeHead(200);
     response.end(JSON.stringify(data));
 };
-const handleFileSource = async (remotionRoot, search, _, response) => {
+const handleFileSource = async ({ method, remotionRoot, search, response, }) => {
+    if (method === 'OPTIONS') {
+        response.writeHead(200);
+        response.end();
+        return;
+    }
     if (!search.startsWith('?')) {
         throw new Error('query must start with ?');
     }
@@ -58,6 +66,10 @@ const handleFileSource = async (remotionRoot, search, _, response) => {
     return response.end();
 };
 const handleOpenInEditor = async (remotionRoot, req, res) => {
+    if (req.method === 'OPTIONS') {
+        res.statusCode = 200;
+        res.end();
+    }
     try {
         const b = await new Promise((_resolve) => {
             let data = '';
@@ -114,7 +126,12 @@ const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, g
         return handleProjectInfo(remotionRoot, request, response);
     }
     if (url.pathname === '/api/file-source') {
-        return handleFileSource(remotionRoot, url.search, request, response);
+        return handleFileSource({
+            remotionRoot,
+            search: url.search,
+            method: request.method,
+            response,
+        });
     }
     if (url.pathname === '/api/open-in-editor') {
         return handleOpenInEditor(remotionRoot, request, response);

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

@@ -53,7 +53,7 @@ const startServer = async (entry, userDefinedComponent, options) => {
             });
         })
             .then(() => {
-            (0, routes_1.handleRoutes)({
+            return (0, routes_1.handleRoutes)({
                 hash,
                 hashPrefix,
                 request,

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/dist/upgrade.js

@@ -37,6 +37,7 @@ const upgrade = async (remotionRoot) => {
         '@remotion/eslint-config',
         '@remotion/renderer',
         '@remotion/skia',
+        '@remotion/lottie',
         '@remotion/media-utils',
         '@remotion/babel-loader',
         '@remotion/lambda',

package/dist/versions.js

@@ -16,6 +16,7 @@ const packages = [
     '@remotion/eslint-config',
     '@remotion/renderer',
     '@remotion/skia',
+    '@remotion/lottie',
     '@remotion/media-utils',
     '@remotion/babel-loader',
     '@remotion/lambda',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.1.11",
+	"version": "3.2.2",
 	"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.1.11",
-		"@remotion/media-utils": "3.1.11",
-		"@remotion/player": "3.1.11",
-		"@remotion/renderer": "3.1.11",
+		"@remotion/bundler": "3.2.2",
+		"@remotion/media-utils": "3.2.2",
+		"@remotion/player": "3.2.2",
+		"@remotion/renderer": "3.2.2",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
-		"remotion": "3.1.11",
+		"remotion": "3.2.2",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bc4184c9faf944a3bac2fd56bdf990cc74e3ec94"
+	"gitHead": "8e5f2d05adf7ddd3824ea734fa888b4b4761f364"
 }

package/dist/bundle-on-cli.d.ts

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