@remotion/cli 3.3.75 → 3.3.77

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

@@ -0,0 +1,24 @@
+import type { AudioCodec, Codec, ProResProfile } from '@remotion/renderer';
+import React from 'react';
+import type { TComposition } from 'remotion';
+import type { SegmentedControlItem } from '../SegmentedControl';
+import type { RenderType } from './RenderModalAdvanced';
+export declare const RenderModalBasic: React.FC<{
+    renderMode: RenderType;
+    imageFormatOptions: SegmentedControlItem[];
+    codec: Codec;
+    customAudioCodec: AudioCodec;
+    setCodec: (newCodec: Codec) => void;
+    setAudioCodec: (newAudioCodec: AudioCodec) => void;
+    outName: string;
+    proResProfile: ProResProfile | null;
+    setProResProfile: React.Dispatch<React.SetStateAction<ProResProfile>>;
+    frame: number;
+    setFrame: React.Dispatch<React.SetStateAction<number>>;
+    currentComposition: TComposition<unknown>;
+    setOutName: (value: React.SetStateAction<string>) => void;
+    setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
+    startFrame: number;
+    endFrame: number;
+    setStartFrame: React.Dispatch<React.SetStateAction<number | null>>;
+}>;

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

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalBasic = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const react_1 = require("react");
+const use_file_existence_1 = require("../../helpers/use-file-existence");
+const Checkmark_1 = require("../../icons/Checkmark");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const RemInput_1 = require("../NewComposition/RemInput");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const SegmentedControl_1 = require("../SegmentedControl");
+const FrameRangeSetting_1 = require("./FrameRangeSetting");
+const human_readable_audio_codecs_1 = require("./human-readable-audio-codecs");
+const human_readable_codec_1 = require("./human-readable-codec");
+const layout_1 = require("./layout");
+const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, customAudioCodec, setCodec, setAudioCodec, proResProfile, setProResProfile, frame, setFrame, currentComposition, setOutName, setEndFrame, endFrame, setStartFrame, startFrame, }) => {
+    const existence = (0, use_file_existence_1.useFileExistence)(outName);
+    const videoCodecOptions = (0, react_1.useMemo)(() => {
+        return client_1.BrowserSafeApis.validCodecs
+            .filter((c) => {
+            return client_1.BrowserSafeApis.isAudioCodec(c) === (renderMode === 'audio');
+        })
+            .map((codecOption) => {
+            return {
+                label: (0, human_readable_codec_1.humanReadableCodec)(codecOption),
+                onClick: () => setCodec(codecOption),
+                key: codecOption,
+                leftItem: codec === codecOption ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: codecOption,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: codecOption,
+            };
+        });
+    }, [renderMode, setCodec, codec]);
+    const audioCodecOptions = (0, react_1.useCallback)((currentCodec) => {
+        return client_1.BrowserSafeApis.supportedAudioCodecs[currentCodec].map((audioCodecOption) => {
+            return {
+                label: (0, human_readable_audio_codecs_1.humanReadableAudioCodec)(audioCodecOption),
+                onClick: () => setAudioCodec(audioCodecOption),
+                key: audioCodecOption,
+                leftItem: codec === audioCodecOption ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                id: audioCodecOption,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: audioCodecOption,
+            };
+        });
+    }, [codec, setAudioCodec]);
+    const proResProfileOptions = (0, react_1.useMemo)(() => {
+        return client_1.BrowserSafeApis.proResProfileOptions.map((option) => {
+            return {
+                label: option,
+                onClick: () => setProResProfile(option),
+                key: option,
+                selected: proResProfile === option,
+            };
+        });
+    }, [proResProfile, setProResProfile]);
+    const onFrameSetDirectly = (0, react_1.useCallback)((newFrame) => {
+        setFrame(newFrame);
+    }, [setFrame]);
+    const onFrameChanged = (0, react_1.useCallback)((e) => {
+        setFrame((q) => {
+            const newFrame = parseFloat(e);
+            if (Number.isNaN(newFrame)) {
+                return q;
+            }
+            return newFrame;
+        });
+    }, [setFrame]);
+    const onValueChange = (0, react_1.useCallback)((e) => {
+        setOutName(e.target.value);
+    }, [setOutName]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Codec" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, title: "Codec" }) })] }), audioCodecOptions(codec).length >= 2 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Audio Codec" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: customAudioCodec, title: "AudioCodec" }) })] })) : null] })), renderMode === 'still' && currentComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${currentComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, max: currentComposition.durationInFrames - 1 }) }) })] })) : null, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: proResProfileOptions, needsWrapping: true }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: currentComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Output name" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.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: layout_1.input, type: "text", value: outName, onChange: onValueChange }), existence ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten" })) : null] }) })] })] }));
+};
+exports.RenderModalBasic = RenderModalBasic;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const RenderModalGif: React.FC<{
+    limitNumberOfGifLoops: boolean;
+    setLimitNumberOfGifLoops: (value: React.SetStateAction<boolean>) => void;
+    numberOfGifLoopsSetting: number;
+    setNumberOfGifLoopsSetting: React.Dispatch<React.SetStateAction<number>>;
+    everyNthFrame: number;
+    setEveryNthFrameSetting: React.Dispatch<React.SetStateAction<number>>;
+}>;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalGif = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("./layout");
+const NumberOfLoopsSetting_1 = require("./NumberOfLoopsSetting");
+const NumberSetting_1 = require("./NumberSetting");
+const RenderModalGif = ({ everyNthFrame, limitNumberOfGifLoops, numberOfGifLoopsSetting, setEveryNthFrameSetting, setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting, }) => {
+    const onShouldLimitNumberOfGifLoops = (0, react_1.useCallback)((e) => {
+        setLimitNumberOfGifLoops(e.target.checked);
+    }, [setLimitNumberOfGifLoops]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { name: "Every nth frame", min: 1, onValueChanged: setEveryNthFrameSetting, value: everyNthFrame, step: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Limit GIF loops" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: limitNumberOfGifLoops, onChange: onShouldLimitNumberOfGifLoops }) })] }), limitNumberOfGifLoops ? ((0, jsx_runtime_1.jsx)(NumberOfLoopsSetting_1.NumberOfLoopsSetting, { numberOfGifLoops: numberOfGifLoopsSetting, setNumberOfGifLoops: setNumberOfGifLoopsSetting })) : null] }));
+};
+exports.RenderModalGif = RenderModalGif;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RenderModalHr: React.FC;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalHr = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hrStyle = {
+    margin: '0 0 0 0',
+    padding: '0 0 0 0',
+    border: 'none',
+    borderTop: '1px solid #000',
+    marginRight: 16,
+    marginLeft: 16,
+    marginTop: 8,
+    marginBottom: 8,
+};
+const RenderModalHr = () => {
+    return (0, jsx_runtime_1.jsx)("div", { style: hrStyle });
+};
+exports.RenderModalHr = RenderModalHr;

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import type { PixelFormat, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { SegmentedControlItem } from '../SegmentedControl';
+import type { RenderType } from './RenderModalAdvanced';
+declare const qualityControlModes: readonly ["crf", "bitrate"];
+export declare type QualityControl = typeof qualityControlModes[number];
+export declare const RenderModalPicture: React.FC<{
+    renderMode: RenderType;
+    scale: number;
+    setScale: React.Dispatch<React.SetStateAction<number>>;
+    pixelFormat: PixelFormat;
+    setPixelFormat: React.Dispatch<React.SetStateAction<PixelFormat>>;
+    imageFormatOptions: SegmentedControlItem[];
+    setQualityControl: React.Dispatch<React.SetStateAction<QualityControl>>;
+    qualityControlType: QualityControl;
+    videoImageFormat: VideoImageFormat;
+    stillImageFormat: StillImageFormat;
+    setQuality: React.Dispatch<React.SetStateAction<number>>;
+    quality: number;
+    maxCrf: number;
+    minCrf: number;
+    setCrf: React.Dispatch<React.SetStateAction<number>>;
+    shouldDisplayCrfOption: boolean;
+    setCustomTargetVideoBitrateValue: React.Dispatch<React.SetStateAction<string>>;
+    crf: number;
+    customTargetVideoBitrate: string;
+}>;
+export {};

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalPicture = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const react_1 = require("react");
+const Checkmark_1 = require("../../icons/Checkmark");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const RemInput_1 = require("../NewComposition/RemInput");
+const SegmentedControl_1 = require("../SegmentedControl");
+const layout_1 = require("./layout");
+const NumberSetting_1 = require("./NumberSetting");
+const QualitySetting_1 = require("./QualitySetting");
+const RenderModalHr_1 = require("./RenderModalHr");
+const ScaleSetting_1 = require("./ScaleSetting");
+const qualityControlModes = ['crf', 'bitrate'];
+const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setQuality, quality, maxCrf, minCrf, setCrf, shouldDisplayCrfOption, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, }) => {
+    const pixelFormatOptions = (0, react_1.useMemo)(() => {
+        return client_1.BrowserSafeApis.validPixelFormats.map((option) => {
+            return {
+                label: option,
+                onClick: () => setPixelFormat(option),
+                key: option,
+                id: option,
+                keyHint: null,
+                leftItem: pixelFormat === option ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: option,
+            };
+        });
+    }, [pixelFormat, setPixelFormat]);
+    const qualityControlOptions = (0, react_1.useMemo)(() => {
+        return qualityControlModes.map((option) => {
+            return {
+                label: option === 'crf' ? 'CRF' : 'Bitrate',
+                onClick: () => setQualityControl(option),
+                key: option,
+                selected: qualityControlType === option,
+            };
+        });
+    }, [qualityControlType, setQualityControl]);
+    const onTargetVideoBitrateChanged = (0, react_1.useCallback)((e) => {
+        setCustomTargetVideoBitrateValue(e.target.value);
+    }, [setCustomTargetVideoBitrateValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(QualitySetting_1.QualitySetting, { setQuality: setQuality, quality: quality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(QualitySetting_1.QualitySetting, { setQuality: setQuality, quality: quality })), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, shouldDisplayCrfOption &&
+                qualityControlType === 'crf' &&
+                renderMode !== 'still' ? ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minCrf, max: maxCrf, name: "CRF", onValueChanged: setCrf, value: crf, step: 1 })) : null, qualityControlType === 'bitrate' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target video bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged }) }) })] })) : null, (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), renderMode === 'video' ? ((0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale })) : null, (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null] }));
+};
+exports.RenderModalPicture = RenderModalPicture;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ScaleSetting: React.FC<{
+    scale: number;
+    setScale: (value: React.SetStateAction<number>) => void;
+}>;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScaleSetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NumberSetting_1 = require("./NumberSetting");
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 10;
+const ScaleSetting = ({ scale, setScale }) => {
+    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: MIN_SCALE, max: MAX_SCALE, step: 0.1, name: "Scale", onValueChanged: setScale, value: scale }));
+};
+exports.ScaleSetting = ScaleSetting;

package/dist/editor/components/RenderModal/human-readable-audio-codecs.d.ts

@@ -0,0 +1,2 @@
+import type { AudioCodec } from '@remotion/renderer';
+export declare const humanReadableAudioCodec: (audioCodec: AudioCodec) => "AAC" | "MP3" | "Lossless" | "Opus" | undefined;

package/dist/editor/components/RenderModal/human-readable-audio-codecs.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.humanReadableAudioCodec = void 0;
+const humanReadableAudioCodec = (audioCodec) => {
+    if (audioCodec === 'aac') {
+        return 'AAC';
+    }
+    if (audioCodec === 'mp3') {
+        return 'MP3';
+    }
+    if (audioCodec === 'pcm-16') {
+        return 'Lossless';
+    }
+    if (audioCodec === 'opus') {
+        return 'Opus';
+    }
+};
+exports.humanReadableAudioCodec = humanReadableAudioCodec;

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -0,0 +1,2 @@
+import type { Codec } from '@remotion/renderer';
+export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 MKV" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

package/dist/editor/components/RenderModal/human-readable-codec.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.humanReadableCodec = void 0;
+const humanReadableCodec = (codec) => {
+    if (codec === 'aac') {
+        return 'AAC';
+    }
+    if (codec === 'mp3') {
+        return 'MP3';
+    }
+    if (codec === 'gif') {
+        return 'GIF';
+    }
+    if (codec === 'h264') {
+        return 'H.264';
+    }
+    if (codec === 'h264-mkv') {
+        return 'H.264 MKV';
+    }
+    if (codec === 'h265') {
+        return 'H.265';
+    }
+    if (codec === 'prores') {
+        return 'ProRes';
+    }
+    if (codec === 'vp8') {
+        return 'WebM VP8';
+    }
+    if (codec === 'vp9') {
+        return 'WebM VP9';
+    }
+    if (codec === 'wav') {
+        return 'Waveform';
+    }
+};
+exports.humanReadableCodec = humanReadableCodec;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const optionRow: React.CSSProperties;
+export declare const label: React.CSSProperties;
+export declare const rightRow: React.CSSProperties;
+export declare const input: React.CSSProperties;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.input = exports.rightRow = exports.label = exports.optionRow = void 0;
+const colors_1 = require("../../helpers/colors");
+exports.optionRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    minHeight: 40,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+};
+exports.label = {
+    width: 150,
+    fontSize: 15,
+    lineHeight: '40px',
+    color: colors_1.LIGHT_TEXT,
+};
+exports.rightRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignSelf: 'center',
+    flex: 1,
+};
+exports.input = {
+    minWidth: 250,
+    textAlign: 'right',
+};

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;
+}>;