@remotion/cli 4.0.0-alpha4 → 4.0.0-alpha6

package/dist/editor/components/RenderModal/SchemaEditor/create-zod-values.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createZodValues = void 0;
+const createZodValues = (schema, zodRuntime, zodTypes) => {
+    if (!schema) {
+        throw new Error('Invalid zod schema');
+    }
+    const def = schema._def;
+    const typeName = def.typeName;
+    switch (typeName) {
+        case zodRuntime.ZodFirstPartyTypeKind.ZodString:
+            return '';
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNumber:
+            return 0;
+        case zodRuntime.ZodFirstPartyTypeKind.ZodBigInt:
+            return BigInt(0);
+        case zodRuntime.ZodFirstPartyTypeKind.ZodBoolean:
+            return false;
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNaN:
+            return NaN;
+        case zodRuntime.ZodFirstPartyTypeKind.ZodDate:
+            return new Date();
+        case zodRuntime.ZodFirstPartyTypeKind.ZodSymbol:
+            return Symbol('remotion');
+        case zodRuntime.ZodFirstPartyTypeKind.ZodUndefined:
+            return undefined;
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNull:
+            return null;
+        case zodRuntime.ZodFirstPartyTypeKind.ZodAny:
+            throw new Error('Cannot create a value for type z.any()');
+        case zodRuntime.ZodFirstPartyTypeKind.ZodUnknown:
+            throw new Error('Cannot create a value for type z.unknown()');
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNever:
+            throw new Error('Cannot create a value for type z.never()');
+        case zodRuntime.ZodFirstPartyTypeKind.ZodVoid:
+            return undefined;
+        case zodRuntime.ZodFirstPartyTypeKind.ZodObject: {
+            const shape = def.shape();
+            const keys = Object.keys(shape);
+            const returnValue = keys.reduce((existing, key) => {
+                existing[key] = (0, exports.createZodValues)(shape[key], zodRuntime, zodTypes);
+                return existing;
+            }, {});
+            return returnValue;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodArray: {
+            return [
+                (0, exports.createZodValues)(def.type, zodRuntime, zodTypes),
+            ];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodUnion: {
+            const firstOptions = def.options[0];
+            return firstOptions
+                ? (0, exports.createZodValues)(firstOptions, zodRuntime, zodTypes)
+                : undefined;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodDiscriminatedUnion: {
+            const options = def.options[0];
+            return (0, exports.createZodValues)(options, zodRuntime, zodTypes);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodLiteral: {
+            return def.value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodEffects: {
+            if (zodTypes &&
+                schema._def.description ===
+                    zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
+                return '#ffffff';
+            }
+            return (0, exports.createZodValues)(def.schema, zodRuntime, zodTypes);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodIntersection: {
+            const { left, right } = def;
+            const leftValue = (0, exports.createZodValues)(left, zodRuntime, zodTypes);
+            if (typeof leftValue !== 'object') {
+                throw new Error('Cannot create value for type z.intersection: Left side is not an object');
+            }
+            const rightValue = (0, exports.createZodValues)(right, zodRuntime, zodTypes);
+            if (typeof rightValue !== 'object') {
+                throw new Error('Cannot create value for type z.intersection: Right side is not an object');
+            }
+            return { ...leftValue, ...rightValue };
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodTuple: {
+            const items = def.items.map((item) => (0, exports.createZodValues)(item, zodRuntime, zodTypes));
+            return items;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodRecord: {
+            const values = (0, exports.createZodValues)(def.valueType, zodRuntime, zodTypes);
+            return { key: values };
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodMap: {
+            const defType = def;
+            const values = (0, exports.createZodValues)(defType.valueType, zodRuntime, zodTypes);
+            const key = (0, exports.createZodValues)(defType.keyType, zodRuntime, zodTypes);
+            return new Map([[key, values]]);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodLazy: {
+            const defType = def;
+            const type = defType.getter();
+            return (0, exports.createZodValues)(type, zodRuntime, zodTypes);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodSet: {
+            const defType = def;
+            const values = (0, exports.createZodValues)(defType.valueType, zodRuntime, zodTypes);
+            return new Set([values]);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodFunction: {
+            throw new Error('Cannot create a value for type function');
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodEnum: {
+            const { values } = def;
+            return values[0];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNativeEnum: {
+            return 0;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodOptional: {
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.innerType, zodRuntime, zodTypes);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNullable: {
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.innerType, zodRuntime, zodTypes);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodDefault: {
+            const defType = def;
+            return defType.defaultValue();
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodCatch: {
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.innerType, zodRuntime, zodTypes);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodPromise: {
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.type, zodRuntime, zodTypes);
+            return Promise.resolve(value);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodBranded: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.type, zodRuntime, zodTypes);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodPipeline: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const defType = def;
+            const value = (0, exports.createZodValues)(defType.out, zodRuntime, zodTypes);
+            return value;
+        }
+        default:
+            throw new Error('Not implemented: ' + typeName);
+    }
+};
+exports.createZodValues = createZodValues;

package/dist/editor/components/RenderModal/SchemaEditor/date-serialization.d.ts

@@ -0,0 +1,6 @@
+export declare type SerializedJSONWithDate = {
+    serializedString: string;
+    customDateUsed: boolean;
+};
+export declare const serializeJSONWithDate: (data: unknown, indent: number | undefined) => SerializedJSONWithDate;
+export declare const deserializeJSONWithDate: (data: string) => any;

package/dist/editor/components/RenderModal/SchemaEditor/date-serialization.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deserializeJSONWithDate = exports.serializeJSONWithDate = void 0;
+const serializeJSONWithDate = (data, indent) => {
+    let customDateUsed = false;
+    const serializedString = JSON.stringify(data, function (key, value) {
+        if (this[key] instanceof Date) {
+            customDateUsed = true;
+            return `remotion-date:${this[key].toISOString()}`;
+        }
+        return value;
+    }, indent);
+    return { serializedString, customDateUsed };
+};
+exports.serializeJSONWithDate = serializeJSONWithDate;
+const deserializeJSONWithDate = (data) => {
+    return JSON.parse(data, (_, value) => {
+        if (typeof value === 'string' && value.startsWith('remotion-date:')) {
+            return new Date(value.replace('remotion-date:', ''));
+        }
+        return value;
+    });
+};
+exports.deserializeJSONWithDate = deserializeJSONWithDate;

package/dist/editor/components/RenderModal/SchemaEditor/get-schema-label.d.ts

@@ -0,0 +1,2 @@
+import type { JSONPath } from './zod-types';
+export declare const getSchemaLabel: (jsonPath: JSONPath) => string;

package/dist/editor/components/RenderModal/SchemaEditor/get-schema-label.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSchemaLabel = void 0;
+const getSchemaLabel = (jsonPath) => {
+    const lastKey = jsonPath[jsonPath.length - 1];
+    if (typeof lastKey === 'number') {
+        const secondLastKey = jsonPath[jsonPath.length - 2];
+        if (typeof secondLastKey === 'undefined') {
+            return `[${lastKey}]`;
+        }
+        return `${(0, exports.getSchemaLabel)(jsonPath.slice(0, jsonPath.length - 1))}[${lastKey}]`;
+    }
+    return lastKey;
+};
+exports.getSchemaLabel = getSchemaLabel;

package/dist/editor/components/RenderModal/SchemaEditor/zod-types.d.ts

@@ -0,0 +1 @@
+export declare type JSONPath = (string | number)[];

package/dist/editor/components/RenderModal/SchemaEditor/zod-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const WarningIndicatorButton: React.FC<{
+    setShowWarning: React.Dispatch<React.SetStateAction<boolean>>;
+    showWarning: boolean;
+    warningCount: number;
+}>;

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WarningIndicatorButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const caret_1 = require("../../icons/caret");
+const layout_1 = require("../layout");
+const style = {
+    fontSize: 12,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    color: colors_1.LIGHT_TEXT,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    cursor: 'pointer',
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4,
+    paddingBottom: 4,
+};
+const triangleStyle = {
+    width: 12,
+    height: 12,
+    flexShrink: 0,
+    fill: colors_1.WARNING_COLOR,
+};
+const WarningTriangle = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
+};
+const WarningIndicatorButton = ({ setShowWarning, showWarning, warningCount }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        setShowWarning((s) => !s);
+    }, [setShowWarning]);
+    const buttonStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...style,
+            backgroundColor: showWarning ? colors_1.INPUT_BACKGROUND : 'transparent',
+            borderColor: showWarning
+                ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            color: showWarning ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [showWarning]);
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", style: buttonStyle, onClick: onClick, children: [(0, jsx_runtime_1.jsx)(WarningTriangle, { style: triangleStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), warningCount, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(caret_1.AngleDown, { down: showWarning })] }));
+};
+exports.WarningIndicatorButton = WarningIndicatorButton;

package/dist/editor/components/RenderModal/get-render-modal-warnings.d.ts

@@ -0,0 +1,15 @@
+import type { PropsEditType } from './RenderModalData';
+export declare type TypeCanSaveState = {
+    canUpdate: true;
+} | {
+    canUpdate: false;
+    reason: string;
+    determined: boolean;
+};
+export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, inJSONEditor, propsEditType, }: {
+    cliProps: unknown;
+    canSaveDefaultProps: TypeCanSaveState;
+    isCustomDateUsed: boolean | undefined;
+    inJSONEditor: boolean;
+    propsEditType: PropsEditType;
+}) => string[];

package/dist/editor/components/RenderModal/get-render-modal-warnings.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRenderModalWarnings = void 0;
+const truthy_1 = require("../../../truthy");
+const getInputPropsWarning = ({ cliProps, propsEditType, }) => {
+    if (Object.keys(cliProps).length > 0 &&
+        propsEditType === 'default-props') {
+        return 'The data that was passed using --props takes priority over the data you enter here.';
+    }
+    return null;
+};
+const getCannotSaveDefaultProps = (canSaveDefaultProps) => {
+    if (canSaveDefaultProps.canUpdate) {
+        return null;
+    }
+    if (!canSaveDefaultProps.determined) {
+        return null;
+    }
+    return `Can't save default props: ${canSaveDefaultProps.reason}.`;
+};
+const customDateUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return "There is a Date in the schema which can't be serialized. It has been converted into a string.";
+    }
+    return null;
+};
+const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, inJSONEditor, propsEditType, }) => {
+    return [
+        getInputPropsWarning({ cliProps, propsEditType }),
+        getCannotSaveDefaultProps(canSaveDefaultProps),
+        customDateUsed(isCustomDateUsed, inJSONEditor),
+    ].filter(truthy_1.truthy);
+};
+exports.getRenderModalWarnings = getRenderModalWarnings;

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 Matroska" | "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 Matroska';
+    }
+    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,7 @@
+import type React from 'react';
+export declare const optionRow: React.CSSProperties;
+export declare const narrowOption: React.CSSProperties;
+export declare const label: React.CSSProperties;
+export declare const rightRow: React.CSSProperties;
+export declare const input: React.CSSProperties;
+export declare const fieldsetLabel: React.CSSProperties;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fieldsetLabel = exports.input = exports.rightRow = exports.label = exports.narrowOption = exports.optionRow = void 0;
+const colors_1 = require("../../helpers/colors");
+exports.optionRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    minHeight: 40,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+};
+exports.narrowOption = {
+    display: 'flex',
+    flexDirection: 'column',
+};
+exports.label = {
+    width: 170,
+    fontSize: 15,
+    lineHeight: '40px',
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+};
+exports.rightRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignSelf: 'center',
+    flex: 1,
+};
+exports.input = {
+    minWidth: 250,
+};
+exports.fieldsetLabel = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 14,
+    paddingLeft: 5,
+    paddingRight: 5,
+    display: 'flex',
+    flexDirection: 'row',
+    fontFamily: 'monospace',
+    alignItems: 'center',
+    width: '100%',
+};

package/dist/editor/components/RenderModal/out-name-checker.d.ts

@@ -0,0 +1,14 @@
+import type { AudioCodec, Codec, StillImageFormat } from '@remotion/renderer';
+import type { RenderType } from './RenderModalAdvanced';
+export declare const validateOutnameGui: ({ outName, codec, audioCodec, renderMode, stillImageFormat, }: {
+    outName: string;
+    codec: Codec;
+    audioCodec: AudioCodec;
+    renderMode: RenderType;
+    stillImageFormat: StillImageFormat | null;
+}) => {
+    valid: true;
+} | {
+    valid: false;
+    error: Error;
+};

package/dist/editor/components/RenderModal/out-name-checker.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateOutnameGui = void 0;
+const client_1 = require("@remotion/renderer/client");
+const invalidCharacters = ['?', '*', '+', ':', '%'];
+const isValidStillExtension = (extension, stillImageFormat) => {
+    if (stillImageFormat === 'jpeg' && extension === 'jpg') {
+        return true;
+    }
+    return extension === stillImageFormat;
+};
+const validateOutnameGui = ({ outName, codec, audioCodec, renderMode, stillImageFormat, }) => {
+    try {
+        isValidOutName({
+            audioCodec,
+            codec,
+            outName,
+            renderMode,
+            stillImageFormat,
+        });
+        return { valid: true };
+    }
+    catch (err) {
+        return { valid: false, error: err };
+    }
+};
+exports.validateOutnameGui = validateOutnameGui;
+const isValidOutName = ({ outName, codec, audioCodec, renderMode, stillImageFormat, }) => {
+    const extension = outName.substring(outName.lastIndexOf('.') + 1);
+    const prefix = outName.substring(0, outName.lastIndexOf('.'));
+    const map = client_1.BrowserSafeApis.defaultFileExtensionMap[codec];
+    if (client_1.BrowserSafeApis.supportedAudioCodecs[codec].length > 0 &&
+        !(audioCodec in map.forAudioCodec)) {
+        throw new Error(`Audio codec ${audioCodec} is not supported for codec ${codec}`);
+    }
+    const hasDotAfterSlash = () => {
+        const substrings = prefix.split('/');
+        for (const str of substrings) {
+            if (str[0] === '.') {
+                return true;
+            }
+        }
+        return false;
+    };
+    const hasInvalidChar = () => {
+        return prefix.split('').some((char) => invalidCharacters.includes(char));
+    };
+    if (renderMode === 'video') {
+        client_1.BrowserSafeApis.validateOutputFilename({
+            codec,
+            audioCodec: audioCodec !== null && audioCodec !== void 0 ? audioCodec : null,
+            extension,
+            preferLossless: false,
+        });
+    }
+    if (prefix.length < 1) {
+        throw new Error('The prefix must be at least 1 character long');
+    }
+    if (prefix[0] === '.' || hasDotAfterSlash()) {
+        throw new Error('The output name must not start with a dot');
+    }
+    if (hasInvalidChar()) {
+        throw new Error("Filename can't contain the following characters:  ?, *, +, %, :");
+    }
+    if (renderMode === 'still' &&
+        stillImageFormat &&
+        !isValidStillExtension(extension, stillImageFormat)) {
+        throw new Error(`The extension ${extension} is not supported for still image format ${stillImageFormat}`);
+    }
+    if (renderMode === 'audio') {
+        if (audioCodec === 'pcm-16') {
+            if (extension !== 'wav' && extension !== 'wave') {
+                throw new Error(`The extension ${extension} is not supported for audio codec ${audioCodec}`);
+            }
+        }
+        if (audioCodec !== extension) {
+            throw new Error(`The extension ${extension} is not supported for audio codec ${audioCodec}`);
+        }
+    }
+};

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-progress',
+            jobId: job.id,
+        });
+    }, [job.id, 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,40 @@
+"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 RenderQueueOpenInFolder_1 = require("./RenderQueueOpenInFolder");
+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 })), job.status === 'done' ? (0, jsx_runtime_1.jsx)(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) : null] }));
+};
+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;
+}>;