@remotion/cli 3.3.18 → 3.3.19

package/LICENSE.md

@@ -7,7 +7,7 @@ Depending on the type of your legal entity, you are granted permission to use Re
 
 ## Free license
 
-Copyright © 2022 [Remotion](https://www.remotion.dev/)
+Copyright © 2023 [Remotion](https://www.remotion.dev/)
 
 ### Eligibility
 

package/dist/config/index.d.ts

@@ -54,5 +54,6 @@ export declare const ConfigInternals: {
     getEntryPoint: () => string | null;
     getNumberOfGifLoops: () => import("./number-of-gif-loops").Loop;
     getWebpackPolling: () => number | null;
+    getShouldOpenBrowser: () => boolean;
 };
 export declare const overrideRemotion: () => void;

package/dist/config/index.js

@@ -71,6 +71,7 @@ const max_timeline_tracks_2 = require("./max-timeline-tracks");
 const muted_1 = require("./muted");
 const number_of_gif_loops_1 = require("./number-of-gif-loops");
 const number_of_shared_audio_tags_1 = require("./number-of-shared-audio-tags");
+const open_browser_1 = require("./open-browser");
 const output_location_2 = require("./output-location");
 const override_webpack_2 = require("./override-webpack");
 const overwrite_2 = require("./overwrite");
@@ -90,6 +91,7 @@ exports.Config = {
         setKeyboardShortcutsEnabled: keyboard_shortcuts_1.setKeyboardShortcutsEnabled,
         setNumberOfSharedAudioTags: number_of_shared_audio_tags_1.setNumberOfSharedAudioTags,
         setWebpackPollingInMilliseconds: webpack_poll_1.setWebpackPollingInMilliseconds,
+        setShouldOpenBrowser: open_browser_1.setShouldOpenBrowser,
     },
     Bundling: {
         overrideWebpackConfig: override_webpack_2.overrideWebpackConfig,
@@ -187,6 +189,7 @@ exports.ConfigInternals = {
     getEntryPoint: entry_point_1.getEntryPoint,
     getNumberOfGifLoops: number_of_gif_loops_1.getNumberOfGifLoops,
     getWebpackPolling: webpack_poll_1.getWebpackPolling,
+    getShouldOpenBrowser: open_browser_1.getShouldOpenBrowser,
 };
 const overrideRemotion = () => {
     Object.assign(remotion_1.Config, exports.Config);

package/dist/config/open-browser.d.ts

@@ -0,0 +1,2 @@
+export declare const setShouldOpenBrowser: (_should: boolean) => void;
+export declare const getShouldOpenBrowser: () => boolean;

package/dist/config/open-browser.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getShouldOpenBrowser = exports.setShouldOpenBrowser = void 0;
+let should = true;
+const setShouldOpenBrowser = (_should) => {
+    if (typeof _should !== 'boolean') {
+        throw new TypeError(`Expected a boolean, got ${typeof _should} (${should})`);
+    }
+    should = _should;
+};
+exports.setShouldOpenBrowser = setShouldOpenBrowser;
+const getShouldOpenBrowser = () => {
+    return should;
+};
+exports.getShouldOpenBrowser = getShouldOpenBrowser;

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

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

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

@@ -0,0 +1,15 @@
+"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

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

package/dist/editor/components/CollapsableOptions.js

@@ -0,0 +1,35 @@
+"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

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

package/dist/editor/components/InlineAction.js

@@ -0,0 +1,32 @@
+"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 ((0, jsx_runtime_1.jsx)("button", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", onClick: onClick, style: style, tabIndex: tabIndex, children: children }));
+};
+exports.InlineAction = InlineAction;

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

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

package/dist/editor/components/RenderButton.js

@@ -1,53 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderButton = exports.COMPOSITION_ITEM_HEIGHT = void 0;
+exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
+const get_default_out_name_1 = require("../../get-default-out-name");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
-const z_index_1 = require("../state/z-index");
-exports.COMPOSITION_ITEM_HEIGHT = 32;
-const itemStyle = {
-    display: 'flex',
-    cursor: 'default',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 1,
-    appearance: 'none',
-    border: 'none',
-    height: exports.COMPOSITION_ITEM_HEIGHT,
-};
-const RenderButton = ({ composition }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
+const InlineAction_1 = require("./InlineAction");
+const RenderButton = ({ composition, visible }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...itemStyle,
-            backgroundColor: hovered ? colors_1.CLEAR_HOVER : 'transparent',
-            color: hovered ? 'white' : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered]);
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
-                height: 14,
+                height: 12,
             },
         };
     }, []);
-    const onClick = (0, react_1.useCallback)(() => {
+    const onClick = (0, react_1.useCallback)((e) => {
+        var _a, _b, _c, _d, _e;
+        e.stopPropagation();
         setSelectedModal({
             type: 'render',
-            composition,
+            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]);
-    return ((0, jsx_runtime_1.jsx)("button", { style: style, tabIndex: tabIndex, onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle, color: hovered ? 'white' : colors_1.LIGHT_TEXT }) }));
+    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

@@ -0,0 +1,5 @@
+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

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

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

@@ -3,13 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModal = 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 Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const colors_1 = require("../../helpers/colors");
+const use_file_existence_1 = require("../../helpers/use-file-existence");
 const modals_1 = require("../../state/modals");
+const CollapsableOptions_1 = require("../CollapsableOptions");
 const layout_1 = require("../layout");
 const ModalContainer_1 = require("../ModalContainer");
 const ModalHeader_1 = require("../ModalHeader");
+const InputDragger_1 = require("../NewComposition/InputDragger");
 const RemInput_1 = require("../NewComposition/RemInput");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const actions_1 = require("../RenderQueue/actions");
+const SegmentedControl_1 = require("../SegmentedControl");
 const SidebarContent_1 = require("../SidebarContent");
 const initialState = { type: 'idle' };
 const reducer = (state, action) => {
@@ -30,61 +36,227 @@ const reducer = (state, action) => {
     }
     return state;
 };
-const container = {
-    padding: 20,
+const container = {};
+const optionRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    minHeight: 40,
+    paddingLeft: 16,
+    paddingRight: 16,
 };
-const RenderModal = ({ composition, }) => {
+const label = {
+    width: 150,
+    fontSize: 14,
+    lineHeight: '40px',
+    color: colors_1.LIGHT_TEXT,
+};
+const rightRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignSelf: 'center',
+    flex: 1,
+};
+const buttonRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    borderTop: '1px solid black',
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+};
+const input = {
+    minWidth: 250,
+    textAlign: 'right',
+};
+const MIN_QUALITY = 1;
+const MAX_QUALITY = 100;
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 10;
+// TODO: Prevent rendering when preview server is disconnected
+const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQuality, initialScale, initialVerbose, initialOutName, }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
     const isMounted = (0, react_1.useRef)(true);
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
-    // TODO: Allow to change out name
-    const [outName] = (0, react_1.useState)(() => (0, get_default_out_name_1.getDefaultOutLocation)({
-        compositionName: composition.id,
-        // TODO: Set default extension
-        defaultExtension: 'png',
-    }));
+    const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
+    const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialImageFormat);
+    const [quality, setQuality] = (0, react_1.useState)(() => initialQuality !== null && initialQuality !== void 0 ? initialQuality : 80);
+    const [scale, setScale] = (0, react_1.useState)(() => initialScale);
+    const [verbose, setVerboseLogging] = (0, react_1.useState)(() => initialVerbose);
+    const [outName, setOutName] = (0, react_1.useState)(() => initialOutName);
     const dispatchIfMounted = (0, react_1.useCallback)((payload) => {
         if (isMounted.current === false)
             return;
         dispatch(payload);
     }, []);
-    const onClick = (0, react_1.useCallback)(() => {
+    const onValueChange = (0, react_1.useCallback)((e) => {
+        setOutName(e.target.value);
+    }, []);
+    const setPng = (0, react_1.useCallback)(() => {
+        setImageFormat('png');
+        setOutName((prev) => {
+            if (prev.endsWith('.jpeg') || prev.endsWith('.jpg')) {
+                return prev.replace(/.jpe?g$/g, '.png');
+            }
+            return prev;
+        });
+    }, []);
+    const setJpeg = (0, react_1.useCallback)(() => {
+        setImageFormat('jpeg');
+        setOutName((prev) => {
+            if (prev.endsWith('.png')) {
+                return prev.replace(/.png$/g, '.jpeg');
+            }
+            return prev;
+        });
+    }, []);
+    const onClickStill = (0, react_1.useCallback)(() => {
         var _a;
-        const body = {
-            compositionId: composition.id,
-            type: 'still',
+        (_a = SidebarContent_1.leftSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        dispatchIfMounted({ type: 'start' });
+        (0, actions_1.addStillRenderJob)({
+            compositionId,
             outName,
-        };
+            imageFormat,
+            quality: imageFormat === 'jpeg' ? quality : null,
+            frame,
+            scale,
+            verbose,
+        })
+            .then(() => {
+            dispatchIfMounted({ type: 'succeed' });
+            setSelectedModal(null);
+        })
+            .catch(() => {
+            dispatchIfMounted({ type: 'fail' });
+        });
+    }, [
+        compositionId,
+        dispatchIfMounted,
+        frame,
+        imageFormat,
+        outName,
+        quality,
+        scale,
+        setSelectedModal,
+        verbose,
+    ]);
+    const onClickVideo = (0, react_1.useCallback)(() => {
+        var _a;
         (_a = SidebarContent_1.leftSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
-        fetch(`/api/render`, {
-            method: 'post',
-            headers: {
-                'content-type': 'application/json',
-            },
-            body: JSON.stringify(body),
+        dispatchIfMounted({ type: 'start' });
+        (0, actions_1.addVideoRenderJob)({
+            compositionId,
+            outName,
+            imageFormat,
+            quality: imageFormat === 'jpeg' ? quality : null,
+            scale,
+            verbose,
+            // TODO: Make this configurable
+            codec: 'h264',
         })
-            .then((res) => res.json())
-            .then((data) => {
-            if (data.success) {
-                dispatchIfMounted({ type: 'succeed' });
-                setSelectedModal(null);
-            }
-            else {
-                dispatchIfMounted({ type: 'fail' });
-            }
+            .then(() => {
+            dispatchIfMounted({ type: 'succeed' });
+            setSelectedModal(null);
         })
             .catch(() => {
             dispatchIfMounted({ type: 'fail' });
         });
-    }, [composition.id, dispatchIfMounted, outName, setSelectedModal]);
+    }, [
+        compositionId,
+        dispatchIfMounted,
+        imageFormat,
+        outName,
+        quality,
+        scale,
+        setSelectedModal,
+        verbose,
+    ]);
+    const onQualityChangedDirectly = (0, react_1.useCallback)((newQuality) => {
+        setQuality(newQuality);
+    }, []);
+    const onQualityChanged = (0, react_1.useCallback)((e) => {
+        setQuality((q) => {
+            const newQuality = parseInt(e.target.value, 10);
+            if (Number.isNaN(newQuality)) {
+                return q;
+            }
+            const newQualityClamped = Math.min(MAX_QUALITY, Math.max(newQuality, MIN_QUALITY));
+            return newQualityClamped;
+        });
+    }, []);
+    const onScaleSetDirectly = (0, react_1.useCallback)((newScale) => {
+        setScale(newScale);
+    }, []);
+    const onScaleChanged = (0, react_1.useCallback)((e) => {
+        setScale((q) => {
+            const newQuality = parseFloat(e.target.value);
+            if (Number.isNaN(newQuality)) {
+                return q;
+            }
+            const newScaleClamped = Math.min(MAX_SCALE, Math.max(newQuality, MIN_SCALE));
+            return newScaleClamped;
+        });
+    }, []);
+    const onFrameSetDirectly = (0, react_1.useCallback)((newFrame) => {
+        setFrame(newFrame);
+    }, []);
+    const onFrameChanged = (0, react_1.useCallback)((e) => {
+        setFrame((q) => {
+            const newFrame = parseFloat(e.target.value);
+            if (Number.isNaN(newFrame)) {
+                return q;
+            }
+            // TODO: User could change frame inbetween 😈
+            return newFrame;
+        });
+    }, []);
     (0, react_1.useEffect)(() => {
         return () => {
             isMounted.current = false;
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${composition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { type: "text", value: outName }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render' : 'Rendering...' }) })] })] }));
+    const existence = (0, use_file_existence_1.useFileExistence)(outName);
+    const imageFormatOptions = (0, react_1.useMemo)(() => {
+        return [
+            {
+                label: 'PNG',
+                onClick: setPng,
+                key: 'png',
+                selected: imageFormat === 'png',
+            },
+            {
+                label: 'JPEG',
+                onClick: setJpeg,
+                key: 'jpeg',
+                selected: imageFormat === 'jpeg',
+            },
+        ];
+    }, [imageFormat, setJpeg, setPng]);
+    const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
+        setVerboseLogging(e.target.checked);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Output name" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput
+                                        // TODO: Validate and reject folders or weird file names
+                                        , { 
+                                            // TODO: Validate and reject folders or weird file names
+                                            warning: existence, style: input, type: "text", value: outName, onChange: onValueChange }), existence ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten" })) : null] }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Frame" }), (0, jsx_runtime_1.jsxs)("div", { style: rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger
+                                    // TODO: Hide if it is a still
+                                    , { 
+                                        // TODO: Hide if it is a still
+                                        value: frame, onChange: onFrameChanged, 
+                                        // TODO: Actual frame
+                                        placeholder: "0-100", onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, 
+                                        // TODO: Add actual frame
+                                        max: Infinity }), ' '] })] }), (0, jsx_runtime_1.jsxs)(CollapsableOptions_1.CollapsableOptions, { showLabel: "Show advanced settings", hideLabel: "Hide advanced settings", children: [(0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Scale" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: scale, onChange: onScaleChanged, placeholder: "0.1-10", 
+                                            // TODO: Does not allow non-integer steps
+                                            // TODO: Cannot click and type in 0.2
+                                            onValueChange: onScaleSetDirectly, name: "scale", step: 0.05, min: MIN_SCALE, max: MAX_SCALE }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)("input", { type: 'checkbox', checked: verbose, onChange: onVerboseLoggingChanged }) })] }), imageFormat === 'jpeg' && ((0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "JPEG Quality" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: quality, onChange: onQualityChanged, placeholder: "0-100", onValueChange: onQualityChangedDirectly, name: "quality", step: 1, min: MIN_QUALITY, max: MAX_QUALITY }) })] }))] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickVideo, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render video' : 'Rendering...' }), (0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickStill, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render' : 'Rendering...' })] })] })] }));
 };
 exports.RenderModal = RenderModal;

package/dist/editor/components/RenderQueue/CircularProgress.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const RENDER_STATUS_INDICATOR_SIZE = 16;
+export declare const CircularProgress: React.FC<{
+    progress: number;
+}>;

package/dist/editor/components/RenderQueue/CircularProgress.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgress = exports.RENDER_STATUS_INDICATOR_SIZE = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+exports.RENDER_STATUS_INDICATOR_SIZE = 16;
+const STROKE_WIDTH = 3;
+const container = {
+    height: exports.RENDER_STATUS_INDICATOR_SIZE,
+    width: exports.RENDER_STATUS_INDICATOR_SIZE,
+    transform: `rotate(-90deg)`,
+};
+const CircularProgress = ({ progress }) => {
+    const r = exports.RENDER_STATUS_INDICATOR_SIZE / 2 - STROKE_WIDTH;
+    const circumference = r * Math.PI * 2;
+    return ((0, jsx_runtime_1.jsx)("svg", { style: container, viewBox: `0 0 ${exports.RENDER_STATUS_INDICATOR_SIZE} ${exports.RENDER_STATUS_INDICATOR_SIZE}`, children: (0, jsx_runtime_1.jsx)("circle", { r: exports.RENDER_STATUS_INDICATOR_SIZE / 2 - STROKE_WIDTH, stroke: colors_1.LIGHT_TEXT, fill: "none", strokeWidth: STROKE_WIDTH, cx: exports.RENDER_STATUS_INDICATOR_SIZE / 2, cy: exports.RENDER_STATUS_INDICATOR_SIZE / 2, strokeDasharray: `${circumference} ${circumference}`, strokeMiterlimit: 0, strokeDashoffset: (1 - progress) * circumference }) }));
+};
+exports.CircularProgress = CircularProgress;