@remotion/cli 4.0.0-webhook.27 → 4.1.0-alpha1

package/dist/editor/components/RenderModal/SchemaEditor/extract-enum-json-paths.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractEnumJsonPaths = void 0;
+const extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
+    const def = schema._def;
+    const typeName = def.typeName;
+    switch (typeName) {
+        case zodRuntime.ZodFirstPartyTypeKind.ZodObject: {
+            const shape = def.shape();
+            const keys = Object.keys(shape);
+            return keys
+                .map((key) => {
+                return (0, exports.extractEnumJsonPaths)(shape[key], zodRuntime, [
+                    ...currentPath,
+                    key,
+                ]);
+            })
+                .flat(1);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodArray: {
+            return (0, exports.extractEnumJsonPaths)(def.type, zodRuntime, [
+                ...currentPath,
+                '[]',
+            ]);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodUnion: {
+            return def.options
+                .map((option) => {
+                return (0, exports.extractEnumJsonPaths)(option, zodRuntime, currentPath);
+            })
+                .flat(1);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodDiscriminatedUnion: {
+            return def.options
+                .map((op) => {
+                return (0, exports.extractEnumJsonPaths)(op, zodRuntime, currentPath);
+            })
+                .flat(1);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodLiteral: {
+            return [currentPath];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodEffects: {
+            return (0, exports.extractEnumJsonPaths)(def.schema, zodRuntime, currentPath);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodIntersection: {
+            const { left, right } = def;
+            const leftValue = (0, exports.extractEnumJsonPaths)(left, zodRuntime, currentPath);
+            const rightValue = (0, exports.extractEnumJsonPaths)(right, zodRuntime, currentPath);
+            return [...leftValue, ...rightValue];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodTuple: {
+            return def.items
+                .map((item, i) => (0, exports.extractEnumJsonPaths)(item, zodRuntime, [...currentPath, i]))
+                .flat(1);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodRecord: {
+            const values = (0, exports.extractEnumJsonPaths)(def.valueType, zodRuntime, [...currentPath, '{}']);
+            return values;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodFunction: {
+            throw new Error('Cannot create a value for type function');
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodEnum: {
+            return [currentPath];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNativeEnum: {
+            return [];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodOptional: {
+            const defType = def;
+            const value = (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNullable: {
+            const defType = def;
+            const value = (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodDefault: {
+            const defType = def;
+            return (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodCatch: {
+            const defType = def;
+            return (0, exports.extractEnumJsonPaths)(defType.innerType, zodRuntime, currentPath);
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodPromise: {
+            return [];
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodBranded: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const defType = def;
+            const value = (0, exports.extractEnumJsonPaths)(defType.type, zodRuntime, currentPath);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodPipeline: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const defType = def;
+            const value = (0, exports.extractEnumJsonPaths)(defType.out, zodRuntime, currentPath);
+            return value;
+        }
+        case zodRuntime.ZodFirstPartyTypeKind.ZodString:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNumber:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodBigInt:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodBoolean:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNaN:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodDate:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodSymbol:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodUndefined:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNull:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodAny:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodUnknown:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodNever:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodVoid:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodMap: // Maps are not serializable
+        case zodRuntime.ZodFirstPartyTypeKind.ZodLazy:
+        case zodRuntime.ZodFirstPartyTypeKind.ZodSet: {
+            // Sets are not serializable
+            return [];
+        }
+        default:
+            throw new Error('Not implemented: ' + typeName);
+    }
+};
+exports.extractEnumJsonPaths = extractEnumJsonPaths;

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 `${lastKey}:`;
+    }
+    return `${lastKey}:`;
+};
+exports.getSchemaLabel = getSchemaLabel;

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

@@ -0,0 +1,14 @@
+export type SerializedJSONWithCustomFields = {
+    serializedString: string;
+    customDateUsed: boolean;
+    customFileUsed: boolean;
+    mapUsed: boolean;
+    setUsed: boolean;
+};
+export declare const FILE_TOKEN = "remotion-file:";
+export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
+    data: unknown;
+    indent: number | undefined;
+    staticBase: string;
+}) => SerializedJSONWithCustomFields;
+export declare const deserializeJSONWithCustomFields: (data: string) => any;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = void 0;
+const DATE_TOKEN = 'remotion-date:';
+exports.FILE_TOKEN = 'remotion-file:';
+const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
+    let customDateUsed = false;
+    let customFileUsed = false;
+    let mapUsed = false;
+    let setUsed = false;
+    const serializedString = JSON.stringify(data, function (key, value) {
+        const item = this[key];
+        if (item instanceof Date) {
+            customDateUsed = true;
+            return `${DATE_TOKEN}${item.toISOString()}`;
+        }
+        if (item instanceof Map) {
+            mapUsed = true;
+            return value;
+        }
+        if (item instanceof Set) {
+            setUsed = true;
+            return value;
+        }
+        if (typeof item === 'string' && item.startsWith(staticBase)) {
+            customFileUsed = true;
+            return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
+        }
+        return value;
+    }, indent);
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+};
+exports.serializeJSONWithDate = serializeJSONWithDate;
+const deserializeJSONWithCustomFields = (data) => {
+    return JSON.parse(data, (_, value) => {
+        if (typeof value === 'string' && value.startsWith(DATE_TOKEN)) {
+            return new Date(value.replace(DATE_TOKEN, ''));
+        }
+        return value;
+    });
+};
+exports.deserializeJSONWithCustomFields = deserializeJSONWithCustomFields;

package/dist/editor/components/RenderModal/SchemaEditor/local-state.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { UpdaterFunction } from './ZodSwitch';
+export type LocalState<T> = {
+    value: T;
+    zodValidation: z.SafeParseReturnType<unknown, unknown>;
+    keyStabilityRevision: number;
+};
+export declare const useLocalState: <T>({ value, schema, setValue, defaultValue, }: {
+    value: T;
+    schema: z.ZodTypeAny;
+    setValue: UpdaterFunction<T>;
+    defaultValue: T;
+}) => {
+    localValue: LocalState<T>;
+    onChange: (updater: (oldV: T) => T, forceApply: boolean, increment: boolean) => void;
+    reset: () => void;
+    RevisionContextProvider: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+};

package/dist/editor/components/RenderModal/SchemaEditor/local-state.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocalState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const deep_equal_1 = require("./deep-equal");
+const RevisionContext = (0, react_1.createContext)({
+    childResetRevision: 0,
+});
+const useLocalState = ({ value, schema, setValue, defaultValue, }) => {
+    const parentRevision = (0, react_1.useContext)(RevisionContext).childResetRevision;
+    const [resetRevision, setResetRevision] = (0, react_1.useState)(0);
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {};
+    });
+    const currentLocalValue = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = localValue[parentRevision]) !== null && _a !== void 0 ? _a : {
+            value: defaultValue,
+            keyStabilityRevision: 0,
+            zodValidation: schema.safeParse(value),
+        });
+    }, [defaultValue, localValue, parentRevision, schema, value]);
+    const stateRef = (0, react_1.useRef)(currentLocalValue);
+    stateRef.current = currentLocalValue;
+    const onChange = (0, react_1.useCallback)(
+    // Increment is to regenerate `key` attributes in array items,
+    // so should increment when changing array items
+    (updater, forceApply, increment) => {
+        const newValue = updater(stateRef.current.value);
+        const isSame = (0, deep_equal_1.deepEqual)(newValue, stateRef.current.value);
+        if (isSame) {
+            return;
+        }
+        const safeParse = schema.safeParse(newValue);
+        if (safeParse.success || forceApply) {
+            setValue(updater, forceApply, increment);
+        }
+        setLocalValue(() => {
+            const newState = {
+                keyStabilityRevision: currentLocalValue.keyStabilityRevision + (increment ? 1 : 0),
+                value: newValue,
+                zodValidation: safeParse,
+            };
+            stateRef.current = newState;
+            return {
+                ...localValue,
+                [parentRevision]: newState,
+            };
+        });
+    }, [
+        currentLocalValue.keyStabilityRevision,
+        localValue,
+        parentRevision,
+        schema,
+        setValue,
+    ]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            childResetRevision: resetRevision,
+        };
+    }, [resetRevision]);
+    const reset = (0, react_1.useCallback)(() => {
+        // Only need to do key stability for arrays, but
+        // since user is not editing right now, should be fine
+        onChange(() => defaultValue, true, true);
+        setResetRevision((old) => old + 1);
+    }, [defaultValue, onChange]);
+    const RevisionContextProvider = (0, react_1.useCallback)(({ children }) => {
+        return ((0, jsx_runtime_1.jsx)(RevisionContext.Provider, { value: contextValue, children: children }));
+    }, [contextValue]);
+    return {
+        localValue: currentLocalValue,
+        onChange,
+        reset,
+        RevisionContextProvider,
+    };
+};
+exports.useLocalState = useLocalState;

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

@@ -0,0 +1 @@
+export 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,19 @@
+import type { PropsEditType } from './DataEditor';
+export type TypeCanSaveState = {
+    canUpdate: true;
+} | {
+    canUpdate: false;
+    reason: string;
+    determined: boolean;
+};
+export declare const defaultTypeCanSaveState: TypeCanSaveState;
+export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }: {
+    cliProps: unknown;
+    canSaveDefaultProps: TypeCanSaveState;
+    isCustomDateUsed: boolean;
+    customFileUsed: boolean;
+    jsMapUsed: boolean;
+    jsSetUsed: boolean;
+    inJSONEditor: boolean;
+    propsEditType: PropsEditType;
+}) => string[];

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRenderModalWarnings = exports.defaultTypeCanSaveState = void 0;
+const truthy_1 = require("../../../truthy");
+exports.defaultTypeCanSaveState = {
+    canUpdate: false,
+    reason: 'Loading...',
+    determined: false,
+};
+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 was serialized. Note the custom syntax.';
+    }
+    return null;
+};
+const staticFileUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'There is a staticFile() in the schema which was serialized. Note the custom syntax.';
+    }
+    return null;
+};
+const mapUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'A `Map` was used in the schema which can not be serialized to JSON.';
+    }
+    return null;
+};
+const setUsed = (used, inJSONEditor) => {
+    if (used && inJSONEditor) {
+        return 'A `Set` was used in the schema which can not be serialized to JSON.';
+    }
+    return null;
+};
+const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }) => {
+    return [
+        getInputPropsWarning({ cliProps, propsEditType }),
+        getCannotSaveDefaultProps(canSaveDefaultProps),
+        customDateUsed(isCustomDateUsed, inJSONEditor),
+        staticFileUsed(customFileUsed, inJSONEditor),
+        mapUsed(jsMapUsed, inJSONEditor),
+        setUsed(jsSetUsed, 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,6 @@
+import type React from '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;
+export declare const fieldsetLabel: React.CSSProperties;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fieldsetLabel = exports.input = exports.rightRow = exports.label = 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.label = {
+    width: 170,
+    fontSize: 15,
+    lineHeight: '40px',
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+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,
+    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,70 @@
+"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' || renderMode === 'audio') {
+        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}`);
+    }
+};

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