@remotion/cli 3.3.32 → 3.3.34

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

@@ -0,0 +1,377 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+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) => {
+    if (action.type === 'start') {
+        return {
+            type: 'load',
+        };
+    }
+    if (action.type === 'fail') {
+        return {
+            type: 'error',
+        };
+    }
+    if (action.type === 'succeed') {
+        return {
+            type: 'success',
+        };
+    }
+    return state;
+};
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: '12px 16px',
+    width: '100%',
+    borderBottom: '1px solid black',
+};
+const optionRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    minHeight: 40,
+    paddingLeft: 16,
+    paddingRight: 16,
+};
+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;
+const RenderModal = ({ compositionId, initialFrame, initialImageFormat, initialQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialCodec, }) => {
+    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);
+    const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
+    const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialImageFormat);
+    const [videoCodec, setVideoCodec] = (0, react_1.useState)(initialCodec);
+    const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)('jpeg');
+    const [renderMode, setRenderMode] = (0, react_1.useState)(initialRenderType);
+    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 onValueChange = (0, react_1.useCallback)((e) => {
+        setOutName(e.target.value);
+    }, []);
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const currentComposition = (0, react_1.useMemo)(() => {
+        for (const composition of compositions) {
+            if (composition.id === compositionId) {
+                return composition;
+            }
+        }
+        return null;
+    }, [compositionId, compositions]);
+    if (currentComposition === null) {
+        throw new Error('This composition does not exist');
+    }
+    const getStringBeforeSuffix = (0, react_1.useCallback)((fileName) => {
+        const dotPos = fileName.lastIndexOf('.');
+        const bitBeforeDot = fileName.substring(0, dotPos);
+        return bitBeforeDot;
+    }, []);
+    const setCodec = (0, react_1.useCallback)((codec) => {
+        setVideoCodec(codec);
+        setOutName((prev) => {
+            // TODO: Check file extension for h264-mkv (render throws error atm)
+            const codecSuffix = client_1.BrowserSafeApis.getFileExtensionFromCodec(codec, 'final');
+            const newFileName = getStringBeforeSuffix(prev) + '.' + codecSuffix;
+            return newFileName;
+        });
+    }, [getStringBeforeSuffix]);
+    const setStillFormat = (0, react_1.useCallback)((format) => {
+        setImageFormat(format);
+        setOutName((prev) => {
+            const newFileName = getStringBeforeSuffix(prev) + '.' + format;
+            return newFileName;
+        });
+    }, [getStringBeforeSuffix]);
+    const onClickStill = (0, react_1.useCallback)(() => {
+        var _a;
+        (_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();
+        dispatchIfMounted({ type: 'start' });
+        (0, actions_1.addVideoRenderJob)({
+            compositionId,
+            outName,
+            imageFormat: videoImageFormat,
+            quality: imageFormat === 'jpeg' ? quality : null,
+            scale,
+            verbose,
+            // TODO: Make this configurable
+            codec: videoCodec,
+        })
+            .then(() => {
+            dispatchIfMounted({ type: 'succeed' });
+            setSelectedModal(null);
+        })
+            .catch(() => {
+            dispatchIfMounted({ type: 'fail' });
+        });
+    }, [
+        compositionId,
+        dispatchIfMounted,
+        imageFormat,
+        outName,
+        quality,
+        scale,
+        setSelectedModal,
+        verbose,
+        videoCodec,
+        videoImageFormat,
+    ]);
+    const onQualityChangedDirectly = (0, react_1.useCallback)((newQuality) => {
+        setQuality(newQuality);
+    }, []);
+    const onQualityChanged = (0, react_1.useCallback)((e) => {
+        setQuality((q) => {
+            const newQuality = parseInt(e, 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 newScale = parseFloat(e);
+            if (Number.isNaN(newScale)) {
+                return q;
+            }
+            const newScaleClamped = Math.min(MAX_SCALE, Math.max(newScale, MIN_SCALE));
+            return newScaleClamped;
+        });
+    }, []);
+    const onFrameSetDirectly = (0, react_1.useCallback)((newFrame) => {
+        console.log(newFrame);
+        if (newFrame > currentComposition.durationInFrames - 1) {
+            setFrame(currentComposition.durationInFrames - 1);
+        }
+        else {
+            setFrame(newFrame);
+        }
+    }, [currentComposition.durationInFrames, setFrame]);
+    const onFrameChanged = (0, react_1.useCallback)((e) => {
+        setFrame((q) => {
+            const newFrame = parseFloat(e);
+            if (Number.isNaN(newFrame)) {
+                return q;
+            }
+            // TODO: User could change frame inbetween 😈
+            return newFrame > currentComposition.durationInFrames - 1
+                ? currentComposition.durationInFrames - 1
+                : newFrame;
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const existence = (0, use_file_existence_1.useFileExistence)(outName);
+    const imageFormatOptions = (0, react_1.useMemo)(() => {
+        return [
+            {
+                label: 'PNG',
+                onClick: renderMode === 'still'
+                    ? () => setStillFormat('png')
+                    : () => setVideoImageFormat('png'),
+                key: 'png',
+                selected: renderMode === 'still'
+                    ? imageFormat === 'png'
+                    : videoImageFormat === 'png',
+            },
+            {
+                label: 'JPEG',
+                onClick: renderMode === 'still'
+                    ? () => setStillFormat('jpeg')
+                    : () => setVideoImageFormat('jpeg'),
+                key: 'jpeg',
+                selected: renderMode === 'still'
+                    ? imageFormat === 'jpeg'
+                    : videoImageFormat === 'jpeg',
+            },
+        ];
+    }, [imageFormat, renderMode, setStillFormat, videoImageFormat]);
+    const videoCodecOptions = (0, react_1.useMemo)(() => {
+        const codecs = [
+            'h264',
+            'h265',
+            'vp8',
+            'vp9',
+            'mp3',
+            'aac',
+            'wav',
+            'prores',
+            'gif',
+        ];
+        return codecs.map((codec) => {
+            return {
+                label: codec,
+                onClick: () => setCodec(codec),
+                key: codec,
+                selected: videoCodec === codec,
+            };
+        });
+    }, [setCodec, videoCodec]);
+    const renderTabOptions = (0, react_1.useMemo)(() => {
+        if ((currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames) < 2) {
+            return [
+                {
+                    label: 'Still',
+                    onClick: () => {
+                        setRenderMode('still');
+                        setStillFormat(imageFormat);
+                    },
+                    key: 'still',
+                    selected: renderMode === 'still',
+                },
+            ];
+        }
+        return [
+            {
+                label: 'Still',
+                onClick: () => {
+                    setRenderMode('still');
+                    setStillFormat(imageFormat);
+                },
+                key: 'still',
+                selected: renderMode === 'still',
+            },
+            {
+                label: 'Video',
+                onClick: () => {
+                    setRenderMode('video');
+                    setCodec(videoCodec);
+                },
+                key: 'video',
+                selected: renderMode === 'video',
+            },
+        ];
+    }, [
+        currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.durationInFrames,
+        imageFormat,
+        renderMode,
+        setCodec,
+        setStillFormat,
+        videoCodec,
+    ]);
+    const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
+        setVerboseLogging(e.target.checked);
+    }, []);
+    if (renderMode === 'still') {
+        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.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }) }), (0, jsx_runtime_1.jsxs)("div", { 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, needsWrapping: true }) })] }), (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] }) })] }), currentComposition.durationInFrames > 1 ? ((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, { value: frame, onTextChange: onFrameChanged, 
+                                            // TODO: Actual frame
+                                            placeholder: "0-100", 
+                                            // TODO: Debug the number input field
+                                            onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, 
+                                            // TODO: Add actual frame
+                                            max: currentComposition.durationInFrames - 1 }), ' '] })] })) : null, (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, onTextChange: 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.1, 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, onTextChange: 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.jsx)("div", { style: buttonRow, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickStill, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render still' : 'Rendering...' }) })] })] }));
+    }
+    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.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }) }), (0, jsx_runtime_1.jsxs)("div", { 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: "Codec" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: videoCodecOptions, needsWrapping: true }) })] }), (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)(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, onTextChange: onScaleChanged, placeholder: "0.1-10", 
+                                            // TODO: Direct input does not allow non-integer steps
+                                            // TODO: Cannot click and type in 0.2
+                                            onValueChange: onScaleSetDirectly, name: "scale", step: 0.1, 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 }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] }), videoImageFormat === '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, onTextChange: 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.jsx)("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...' }) })] })] }));
+};
+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;

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../../state/modals");
+const z_index_1 = require("../../state/z-index");
+const item_style_1 = require("./item-style");
+const outputLocation = {
+    ...item_style_1.renderQueueItemSubtitleStyle,
+};
+const RenderQueueError = ({ job }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onClick = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'render-error',
+            job,
+        });
+    }, [job, setSelectedModal]);
+    if (job.status !== 'failed') {
+        throw new Error('should not have rendered this component');
+    }
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: job.error.message, children: job.error.message }));
+};
+exports.RenderQueueError = RenderQueueError;

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

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

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../layout");
+const RenderQueueError_1 = require("./RenderQueueError");
+const RenderQueueItemCancelButton_1 = require("./RenderQueueItemCancelButton");
+const RenderQueueItemStatus_1 = require("./RenderQueueItemStatus");
+const RenderQueueOutputName_1 = require("./RenderQueueOutputName");
+const RenderQueueProgressMessage_1 = require("./RenderQueueProgressMessage");
+const RenderQueueRemoveItem_1 = require("./RenderQueueRemoveItem");
+const RenderQueueRepeat_1 = require("./RenderQueueRepeat");
+const container = {
+    padding: 12,
+    display: 'flex',
+    flexDirection: 'row',
+    paddingBottom: 10,
+    paddingRight: 4,
+};
+const title = {
+    fontSize: 13,
+    lineHeight: 1,
+};
+const right = {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+};
+const subtitle = {
+    maxWidth: '100%',
+    flex: 1,
+    display: 'flex',
+    overflow: 'hidden',
+};
+const RenderQueueItem = ({ job }) => {
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, align: "center", children: [(0, jsx_runtime_1.jsx)(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: right, children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: job.compositionId }), (0, jsx_runtime_1.jsx)("div", { style: subtitle, children: job.status === 'done' ? ((0, jsx_runtime_1.jsx)(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : null })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), job.status === 'done' || job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? ((0, jsx_runtime_1.jsx)(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : ((0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job }))] }));
+};
+exports.RenderQueueItem = RenderQueueItem;

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueCancelButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InlineAction_1 = require("../InlineAction");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("./actions");
+const RenderQueueCancelButton = ({ job }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        (0, actions_1.cancelRenderJob)(job).catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not cancel job: ${err.message}`);
+        });
+    }, [job]);
+    const icon = (0, react_1.useMemo)(() => {
+        return {
+            height: 14,
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" }) }) }));
+};
+exports.RenderQueueCancelButton = RenderQueueCancelButton;

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

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

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueItemStatus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const CircularProgress_1 = require("./CircularProgress");
+const iconStyle = {
+    height: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+    width: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+};
+const RenderQueueItemStatus = ({ job }) => {
+    if (job.status === 'failed') {
+        return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }) }));
+    }
+    if (job.status === 'idle') {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
+    }
+    if (job.status === 'done') {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337l-17 17-17-17-64-64-17-17L160 222.1l17 17 47 47L335 175l17-17L385.9 192l-17 17z" }) }));
+    }
+    if (job.status === 'running') {
+        // Add a minimum progress to avoid the progress bar from disappearing
+        return (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, job.progress) });
+    }
+    throw new Error('Unknown job status');
+};
+exports.RenderQueueItemStatus = RenderQueueItemStatus;

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueOutputName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("./actions");
+const item_style_1 = require("./item-style");
+const RenderQueueOutputName = ({ job }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        (0, actions_1.openInFileExplorer)({ directory: job.outName }).catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not open file: ${err.message}`);
+        });
+    }, [job.outName]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...item_style_1.renderQueueItemSubtitleStyle,
+            cursor: job.deletedOutputLocation ? 'inherit' : 'pointer',
+            textDecoration: job.deletedOutputLocation ? 'line-through' : 'none',
+        };
+    }, [job.deletedOutputLocation]);
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: style, disabled: job.deletedOutputLocation, title: job.deletedOutputLocation ? 'File was deleted' : job.outName, children: job.outName }));
+};
+exports.RenderQueueOutputName = RenderQueueOutputName;

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

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

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueProgressMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../../state/modals");
+const z_index_1 = require("../../state/z-index");
+const item_style_1 = require("./item-style");
+const outputLocation = {
+    ...item_style_1.renderQueueItemSubtitleStyle,
+};
+const RenderQueueProgressMessage = ({ job }) => {
+    if (job.status !== 'running') {
+        throw new Error('should not have rendered this component');
+    }
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onClick = (0, react_1.useCallback)(() => {
+        // TODO: Show progress instead
+        setSelectedModal({
+            type: 'render-error',
+            job,
+        });
+    }, [job, setSelectedModal]);
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: job.message, children: job.message }));
+};
+exports.RenderQueueProgressMessage = RenderQueueProgressMessage;

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderQueueRemoveItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InlineAction_1 = require("../InlineAction");
+const actions_1 = require("./actions");
+const RenderQueueRemoveItem = ({ job }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        (0, actions_1.removeRenderJob)(job).catch((err) => {
+            // TODO: Handle error
+            console.log(err);
+        });
+    }, [job]);
+    const icon = (0, react_1.useMemo)(() => {
+        return {
+            height: 16,
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }) }));
+};
+exports.RenderQueueRemoveItem = RenderQueueRemoveItem;