@remotion/cli 3.3.31 → 3.3.33

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

@@ -1,330 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderModal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// TODO: refactor such that importing from '@remotion/renderer/src/get-extension-from-codec' is no longer needed
-const get_extension_from_codec_1 = require("@remotion/renderer/src/get-extension-from-codec");
-const react_1 = require("react");
-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;
-// 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);
-    const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
-    const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialImageFormat);
-    const [videoCodec, setVideoCodec] = (0, react_1.useState)('h264');
-    const [videoImageFormat, setVideoImageFormat] = (0, react_1.useState)('jpeg');
-    const [renderMode, setRenderMode] = (0, react_1.useState)('still');
-    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 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) => {
-            const codecSuffix = (0, get_extension_from_codec_1.getFileExtensionFromCodec)(codec, 'final');
-            const newFileName = getStringBeforeSuffix(prev) + '.' + codecSuffix;
-            return newFileName;
-        });
-    }, []);
-    const setStillFormat = (0, react_1.useCallback)((format) => {
-        setImageFormat(format);
-        setOutName((prev) => {
-            const newFileName = getStringBeforeSuffix(prev) + '.' + format;
-            return newFileName;
-        });
-    }, []);
-    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.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;
-        };
-    }, []);
-    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',
-            'h264-mkv',
-            'gif',
-        ];
-        return codecs.map((codec) => {
-            return {
-                label: codec,
-                onClick: () => setCodec(codec),
-                key: codec,
-                selected: videoCodec === codec,
-            };
-        });
-    }, [setCodec, videoCodec]);
-    const renderTabOptions = (0, react_1.useMemo)(() => {
-        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',
-            },
-        ];
-    }, [imageFormat, renderMode, setCodec, setStillFormat, videoCodec]);
-    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.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions }) }), (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: renderMode === 'still' ? 'Format' : 'Codec' }), (0, jsx_runtime_1.jsx)("div", { style: rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderMode === 'still' ? imageFormatOptions : videoCodecOptions }) })] }), (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.jsx)("div", { style: optionRow, children: renderMode === 'still' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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 }) })] }), renderMode === 'video' && ((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 }) })] })), (imageFormat === 'jpeg' || 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, 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.jsx)("div", { style: buttonRow, children: renderMode === 'still' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { autoFocus: true, onClick: onClickStill, disabled: state.type === 'load', children: state.type === 'idle' ? 'Render still' : 'Rendering...' })) : ((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

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

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

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

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

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

@@ -1,38 +0,0 @@
-"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 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 }), (0, jsx_runtime_1.jsx)(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })] }));
-};
-exports.RenderQueueItem = RenderQueueItem;

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

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

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

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

@@ -1,30 +0,0 @@
-"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) => {
-            var _a;
-            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                content: `Could not open file: ${err.message}`,
-                created: Date.now(),
-                duration: 2000,
-                id: String(Math.random()),
-            });
-        });
-    }, [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

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

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

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

@@ -1,22 +0,0 @@
-"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: 12,
-        };
-    }, []);
-    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 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" }) }) }));
-};
-exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

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

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

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

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderQueueRepeatItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const make_retry_payload_1 = require("../../../preview-server/render-queue/make-retry-payload");
-const modals_1 = require("../../state/modals");
-const InlineAction_1 = require("../InlineAction");
-const RenderQueueRepeatItem = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onClick = (0, react_1.useCallback)(() => {
-        const retryPayload = (0, make_retry_payload_1.makeRetryPayload)(job);
-        setSelectedModal(retryPayload);
-    }, [job, setSelectedModal]);
-    const icon = (0, react_1.useMemo)(() => {
-        return {
-            height: 12,
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z" }) }) }));
-};
-exports.RenderQueueRepeatItem = RenderQueueRepeatItem;

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

@@ -1,34 +0,0 @@
-import type { Codec, StillImageFormat } from '@remotion/renderer';
-import type { ApiRoutes } from '../../../preview-server/api-types';
-import type { RenderJob } from '../../../preview-server/render-queue/job';
-export declare const callApi: <Endpoint extends keyof ApiRoutes>(endpoint: Endpoint, body: ApiRoutes[Endpoint]["Request"]) => Promise<ApiRoutes[Endpoint]["Response"]>;
-export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, quality, frame, scale, verbose, }: {
-    compositionId: string;
-    outName: string;
-    imageFormat: StillImageFormat;
-    quality: number | null;
-    frame: number;
-    scale: number;
-    verbose: boolean;
-}) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, quality, scale, verbose, codec, }: {
-    compositionId: string;
-    outName: string;
-    imageFormat: StillImageFormat;
-    quality: number | null;
-    scale: number;
-    verbose: boolean;
-    codec: Codec;
-}) => Promise<undefined>;
-export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
-    file: string;
-    clientId: string;
-}) => Promise<undefined>;
-export declare const subscribeToFileExistenceWatcher: ({ file, clientId, }: {
-    file: string;
-    clientId: string;
-}) => Promise<boolean>;
-export declare const openInFileExplorer: ({ directory }: {
-    directory: string;
-}) => Promise<void>;
-export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;