@remotion/cli 3.3.31 → 3.3.33

package/dist/config/log.d.ts

@@ -1,3 +1,3 @@
 import type { LogLevel } from '@remotion/renderer';
-export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn";
+export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error";
 export declare const setLogLevel: (newLogLevel: LogLevel) => void;

package/dist/editor/components/NewComposition/InputDragger.d.ts

@@ -2,6 +2,7 @@ import type { InputHTMLAttributes } from 'react';
 import React from 'react';
 declare type Props = InputHTMLAttributes<HTMLInputElement> & {
     onValueChange: (newVal: number) => void;
+    onTextChange: (newVal: string) => void;
 };
 export declare const InputDragger: React.FC<Props>;
 export {};

package/dist/editor/components/NewComposition/InputDragger.js

@@ -8,7 +8,7 @@ const noop_1 = require("../../helpers/noop");
 const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
 const z_index_1 = require("../../state/z-index");
 const RemInput_1 = require("./RemInput");
-const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }) => {
+const InputDragger = ({ onValueChange, min: _min, step: _step, value, onTextChange, ...props }) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
     const style = (0, react_1.useMemo)(() => {
@@ -35,12 +35,30 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
         }
         setInputFallback(true);
     }, []);
-    const onBlur = (0, react_1.useCallback)(() => {
+    const onEscape = (0, react_1.useCallback)(() => {
         setInputFallback(false);
     }, []);
+    const onBlur = (0, react_1.useCallback)(() => {
+        if (!fallbackRef.current) {
+            return;
+        }
+        const newValue = fallbackRef.current.value;
+        if (newValue.trim() === '') {
+            onEscape();
+            return;
+        }
+        if (fallbackRef.current.checkValidity()) {
+            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newValue);
+            setInputFallback(false);
+        }
+        else {
+            fallbackRef.current.reportValidity();
+        }
+    }, [onEscape, onTextChange]);
     const onKeyPress = (0, react_1.useCallback)((e) => {
+        var _a;
         if (e.key === 'Enter') {
-            setInputFallback(false);
+            (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         }
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
@@ -75,7 +93,7 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
         }
     }, [inputFallback]);
     if (inputFallback) {
-        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onBlur, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, value: value, min: _min, step: _step, ...props }) }));
+        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, step: _step, defaultValue: value, ...props }) }));
     }
     return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: value }) }));
 };

package/dist/editor/components/NewComposition/NewCompDuration.js

@@ -9,13 +9,15 @@ const InputDragger_1 = require("./InputDragger");
 const new_comp_layout_1 = require("./new-comp-layout");
 const ValidationMessage_1 = require("./ValidationMessage");
 const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
-    const onDurationInFramesChanged = (0, react_1.useCallback)((e) => {
-        setDurationInFrames(String(Number(e.target.value)));
+    const onDurationInFramesChanged = (0, react_1.useCallback)((newValue) => {
+        setDurationInFrames(String(Number(newValue)));
     }, [setDurationInFrames]);
     const onDurationChangedDirectly = (0, react_1.useCallback)((newVal) => {
         setDurationInFrames(String(newVal));
     }, [setDurationInFrames]);
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, max: 100000000, onValueChange: onDurationChangedDirectly }), compDurationErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compDurationErrMessage })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, 
+                                // Hitting Promise.all() limit in Chrome
+                                max: 300000, onValueChange: onDurationChangedDirectly }), compDurationErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compDurationErrMessage })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
 };
 exports.NewCompDuration = NewCompDuration;

package/dist/editor/components/NewComposition/NewComposition.js

@@ -84,10 +84,10 @@ const NewComposition = (props) => {
     const onTypeChanged = (0, react_1.useCallback)((newType) => {
         setType(newType);
     }, []);
-    const onWidthChanged = (0, react_1.useCallback)((e) => {
+    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
         setSize((s) => {
             const { height } = s;
-            const newWidth = Number(e.target.value);
+            const newWidth = Number(newValue);
             return {
                 height: lockedAspectRatio === null
                     ? height
@@ -118,10 +118,10 @@ const NewComposition = (props) => {
             };
         });
     }, [lockedAspectRatio]);
-    const onHeightChanged = (0, react_1.useCallback)((e) => {
+    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
         setSize((s) => {
             const { width } = s;
-            const newHeight = Number(e.target.value);
+            const newHeight = Number(newValue);
             return {
                 width: lockedAspectRatio === null
                     ? width
@@ -180,7 +180,7 @@ const NewComposition = (props) => {
             },
         ];
     }, [onTypeChanged]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }), compNameErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compNameErrMessage })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width (px)", onChange: onWidthChanged, name: "width", step: 2, min: 2, max: 100000000, onValueChange: onWidthDirectlyChanged }), compWidthErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compWidthErrMessage })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, min: 2, max: 100000000, onValueChange: onHeightDirectlyChanged }), compHeightErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compHeightErrMessage })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }), compNameErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compNameErrMessage })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width (px)", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, max: 100000000, onValueChange: onWidthDirectlyChanged }), compWidthErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compWidthErrMessage })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, required: true, min: 2, max: 100000000, onValueChange: onHeightDirectlyChanged }), compHeightErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compHeightErrMessage })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
                                     type,
                                     durationInFrames: Number(durationInFrames),
                                     fps: Number(selectedFrameRate),

package/dist/editor/components/PlayPause.js

@@ -100,7 +100,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
                 direction: 'fit-right',
                 durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: (0, imperative_state_1.getCurrentFrame)() + 1,
+                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, (0, imperative_state_1.getCurrentFrame)() + 1),
             });
         }
         e.preventDefault();

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

@@ -35,20 +35,33 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
         return () => highestContext.unregisterZIndex(currentIndex);
     }, [currentIndex, highestContext]);
     (0, react_1.useEffect)(() => {
-        const listener = (e) => {
+        let onUp = null;
+        const listener = (downEvent) => {
             var _a;
-            const outsideClick = !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target));
-            if (outsideClick &&
-                highestContext.highestIndex === currentIndex &&
-                !(0, input_dragger_click_lock_1.getClickLock)() &&
-                // Don't trigger if that click removed that node
-                document.contains(e.target)) {
-                e.stopPropagation();
-                onOutsideClick();
+            const outsideClick = !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(downEvent.target));
+            if (!outsideClick) {
+                return;
             }
+            onUp = (upEvent) => {
+                if (outsideClick &&
+                    highestContext.highestIndex === currentIndex &&
+                    !(0, input_dragger_click_lock_1.getClickLock)() &&
+                    // Don't trigger if that click removed that node
+                    document.contains(upEvent.target)) {
+                    upEvent.stopPropagation();
+                    onOutsideClick();
+                }
+            };
+            window.addEventListener('pointerup', onUp, { once: true });
+        };
+        window.addEventListener('pointerdown', listener);
+        return () => {
+            if (onUp) {
+                // @ts-expect-error
+                window.removeEventListener('pointerup', onUp, { once: true });
+            }
+            return window.removeEventListener('pointerdown', listener);
         };
-        window.addEventListener('click', listener);
-        return () => window.removeEventListener('click', listener);
     }, [currentIndex, highestContext.highestIndex, onOutsideClick]);
     const value = (0, react_1.useMemo)(() => {
         return {

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

@@ -30,7 +30,7 @@ export declare const getCliOptions: (options: {
     browserExecutable: BrowserExecutable;
     ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
     ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-    logLevel: "error" | "verbose" | "info" | "warn";
+    logLevel: "verbose" | "info" | "warn" | "error";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/index.d.ts

@@ -88,7 +88,7 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
         ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "info" | "warn" | "error";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;

package/dist/list-of-remotion-packages.js

@@ -20,5 +20,6 @@ exports.listOfRemotionPackages = [
     '@remotion/preload',
     '@remotion/three',
     '@remotion/gif',
+    '@remotion/shapes',
     'remotion',
 ];

package/dist/preview-server/error-overlay/react-overlay/utils/get-stack-frames.js

@@ -17,9 +17,7 @@ const getStackFrames = async (error, contextSize) => {
     const enhancedFrames = await (0, unmapper_1.unmap)(parsedFrames, contextSize);
     if (enhancedFrames
         .map((f) => f.originalFileName)
-        .filter((f_1) => f_1 !== null &&
-        f_1 !== undefined &&
-        f_1.indexOf('node_modules') === -1).length === 0) {
+        .filter((f_1) => f_1 !== null && f_1 !== undefined).length === 0) {
         return null;
     }
     return enhancedFrames;

package/dist/preview-server/error-overlay/remotion-overlay/get-help-link.js

@@ -38,6 +38,12 @@ const getHelpLink = (message) => {
             url: 'https://remotion.dev/docs/media-playback-error',
         };
     }
+    if (message.includes('Div is not part of the THREE')) {
+        return {
+            title: '<Sequence> inside <ThreeCanvas>',
+            url: 'https://remotion.dev/docs/sequence#note-for-remotionthree',
+        };
+    }
     return null;
 };
 exports.getHelpLink = getHelpLink;

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

@@ -79,8 +79,9 @@ const startServer = async (options) => {
         });
     });
     const desiredPort = (_d = options === null || options === void 0 ? void 0 : options.port) !== null && _d !== void 0 ? _d : undefined;
-    const port = await renderer_1.RenderInternals.getDesiredPort(desiredPort, 3000, 3100);
+    const { port, didUsePort } = await renderer_1.RenderInternals.getDesiredPort(desiredPort, 3000, 3100);
     server.listen(port);
+    server.on('listening', () => didUsePort());
     return { port, liveEventsServer };
 };
 exports.startServer = startServer;

package/dist/preview.js

@@ -53,6 +53,16 @@ const getShouldOpenBrowser = () => {
     }
     return { shouldOpenBrowser: true, reasonForBrowserDecision: 'default' };
 };
+const getPort = () => {
+    if (parse_command_line_1.parsedCli.port) {
+        return parse_command_line_1.parsedCli.port;
+    }
+    const serverPort = config_1.ConfigInternals.getServerPort();
+    if (serverPort) {
+        return serverPort;
+    }
+    return null;
+};
 const previewCommand = async (remotionRoot, args) => {
     const { file, reason } = (0, entry_point_1.findEntryPoint)(args, remotionRoot);
     log_1.Log.verbose('Entry point:', file, 'reason:', reason);
@@ -62,7 +72,7 @@ const previewCommand = async (remotionRoot, args) => {
         log_1.Log.error('See https://www.remotion.dev/docs/register-root for more information.');
         process.exit(1);
     }
-    const { port: desiredPort } = parse_command_line_1.parsedCli;
+    const desiredPort = getPort();
     const fullPath = path_1.default.join(process.cwd(), file);
     let inputProps = (0, get_input_props_1.getInputProps)((newProps) => {
         waitForLiveEventsListener().then((listener) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.3.31",
+	"version": "3.3.33",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -22,16 +22,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.3.31",
-		"@remotion/media-utils": "3.3.31",
-		"@remotion/player": "3.3.31",
-		"@remotion/renderer": "3.3.31",
+		"@remotion/bundler": "3.3.33",
+		"@remotion/media-utils": "3.3.33",
+		"@remotion/player": "3.3.33",
+		"@remotion/renderer": "3.3.33",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
 		"prompts": "2.4.1",
-		"remotion": "3.3.31",
+		"remotion": "3.3.33",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4b89462c98236d59641272bd0649d880514e685f"
+	"gitHead": "0356b9108673ac98c41990f192b101f7a6574ed0"
 }

package/.prettierrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-	singleQuote: true,
-	bracketSpacing: false,
-	useTabs: true,
-	overrides: [
-		{
-			files: ['*.yml'],
-			options: {
-				singleQuote: false,
-			},
-		},
-	],
-	plugins: [require.resolve('prettier-plugin-organize-imports')],
-};

package/dist/convert-entry-point-to-serve-url.d.ts

@@ -1 +0,0 @@
-export declare const convertEntryPointToServeUrl: (entryPoint: string) => string;

package/dist/convert-entry-point-to-serve-url.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertEntryPointToServeUrl = void 0;
-const renderer_1 = require("@remotion/renderer");
-const path_1 = __importDefault(require("path"));
-const convertEntryPointToServeUrl = (entryPoint) => {
-    const fullPath = renderer_1.RenderInternals.isServeUrl(entryPoint)
-        ? entryPoint
-        : path_1.default.resolve(process.cwd(), entryPoint);
-    return fullPath;
-};
-exports.convertEntryPointToServeUrl = convertEntryPointToServeUrl;

package/dist/editor/components/CollapsableOptions.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const CollapsableOptions: React.FC<{
-    children: React.ReactNode;
-    showLabel: string;
-    hideLabel: string;
-}>;

package/dist/editor/components/CollapsableOptions.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsableOptions = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const z_index_1 = require("../state/z-index");
-const layout_1 = require("./layout");
-const TimelineCollapseToggle_1 = require("./Timeline/TimelineCollapseToggle");
-const container = {
-    marginLeft: 16,
-    height: 40,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-};
-const buttonStyle = {
-    border: 'none',
-    padding: 0,
-    appearance: 'none',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    fontSize: 14,
-    color: colors_1.LIGHT_TEXT,
-};
-const CollapsableOptions = ({ children, showLabel, hideLabel }) => {
-    const [show, setShow] = (0, react_1.useState)(false);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const onClick = (0, react_1.useCallback)(() => {
-        setShow((s) => !s);
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)("button", { style: buttonStyle, tabIndex: tabIndex, onClick: onClick, type: "button", children: [(0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { color: colors_1.LIGHT_TEXT, collapsed: !show }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, x: 1 }), show ? hideLabel : showLabel] }) }), show ? children : null] }));
-};
-exports.CollapsableOptions = CollapsableOptions;

package/dist/editor/components/InlineAction.d.ts

@@ -1,5 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-export declare const InlineAction: React.FC<PropsWithChildren<{
-    onClick: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-}>>;

package/dist/editor/components/InlineAction.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InlineAction = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const z_index_1 = require("../state/z-index");
-const InlineAction = ({ children, onClick }) => {
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            border: 'none',
-            background: hovered ? colors_1.CLEAR_HOVER : 'transparent',
-            height: 24,
-            width: 24,
-            display: 'inline-flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            borderRadius: 3,
-            opacity: hovered ? 1 : 0.6,
-        };
-    }, [hovered]);
-    return (
-    // <div> because cannot use button inside a button
-    (0, jsx_runtime_1.jsx)("a", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, children: children }));
-};
-exports.InlineAction = InlineAction;

package/dist/editor/components/RenderButton.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { TCompMetadata } from 'remotion';
-export declare const RenderButton: React.FC<{
-    composition: TCompMetadata;
-    visible: boolean;
-}>;

package/dist/editor/components/RenderButton.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const get_default_out_name_1 = require("../../get-default-out-name");
-const render_1 = require("../icons/render");
-const modals_1 = require("../state/modals");
-const InlineAction_1 = require("./InlineAction");
-const RenderButton = ({ composition, visible }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const iconStyle = (0, react_1.useMemo)(() => {
-        return {
-            style: {
-                height: 12,
-            },
-        };
-    }, []);
-    const onClick = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d, _e;
-        e.stopPropagation();
-        setSelectedModal({
-            type: 'render',
-            compositionId: composition.id,
-            initialFrame: 0,
-            // TODO: JPEG for video, PNG for image
-            initialImageFormat: 'png',
-            // TODO: Determine defaults from config file
-            initialQuality: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.quality) !== null && _b !== void 0 ? _b : 80,
-            initialScale: (_d = (_c = window.remotion_renderDefaults) === null || _c === void 0 ? void 0 : _c.scale) !== null && _d !== void 0 ? _d : 1,
-            initialVerbose: ((_e = window.remotion_renderDefaults) === null || _e === void 0 ? void 0 : _e.logLevel) === 'verbose',
-            initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
-                compositionName: composition.id,
-                defaultExtension: 'png',
-            }),
-        });
-    }, [composition, setSelectedModal]);
-    if (!visible) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }) }));
-};
-exports.RenderButton = RenderButton;

package/dist/editor/components/RenderModal/RenderErrorModal.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { RenderJob } from '../../../preview-server/render-queue/job';
-export declare const RenderErrorModal: React.FC<{
-    job: RenderJob;
-}>;

package/dist/editor/components/RenderModal/RenderErrorModal.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderErrorModal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
-const make_retry_payload_1 = require("../../../preview-server/render-queue/make-retry-payload");
-const modals_1 = require("../../state/modals");
-const layout_1 = require("../layout");
-const ModalContainer_1 = require("../ModalContainer");
-const ModalHeader_1 = require("../ModalHeader");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const actions_1 = require("../RenderQueue/actions");
-const container = {
-    padding: 20,
-    maxWidth: 1200,
-    paddingTop: 0,
-};
-const codeBlock = {
-    backgroundColor: 'black',
-    whiteSpace: 'pre',
-    padding: 12,
-    borderRadius: 4,
-    fontFamily: 'monospace',
-    overflow: 'auto',
-    maxHeight: 300,
-};
-const spacer = {
-    height: layout_1.SPACING_UNIT,
-    width: layout_1.SPACING_UNIT,
-};
-const buttonRow = {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-};
-const RenderErrorModal = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onQuit = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    const onRetry = (0, react_1.useCallback)(() => {
-        const retryPayload = (0, make_retry_payload_1.makeRetryPayload)(job);
-        setSelectedModal(retryPayload);
-    }, [job, setSelectedModal]);
-    const onClickOnRemove = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-        (0, actions_1.removeRenderJob)(job).catch((err) => {
-            var _a;
-            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                content: 'Failed to remove render job: ' + err.message,
-                created: Date.now(),
-                duration: 2000,
-                id: String(Math.random()),
-            });
-            console.log(err);
-        });
-    }, [job, setSelectedModal]);
-    if (job.status !== 'failed') {
-        throw new Error('should not have rendered this modal');
-    }
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${job.compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "The render failed because of the following error:" }), (0, jsx_runtime_1.jsx)("div", { style: codeBlock, children: job.error.stack }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "Retry" }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onQuit, children: "Close" })] })] })] }));
-};
-exports.RenderErrorModal = RenderErrorModal;

package/dist/editor/components/RenderModal/RenderModal.d.ts

@@ -1,11 +0,0 @@
-import type { StillImageFormat } from '@remotion/renderer';
-import React from 'react';
-export declare const RenderModal: React.FC<{
-    compositionId: string;
-    initialFrame: number;
-    initialImageFormat: StillImageFormat;
-    initialQuality: number | null;
-    initialScale: number;
-    initialVerbose: boolean;
-    initialOutName: string;
-}>;