@remotion/cli 3.3.78 → 3.3.80

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodErrorMessages = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../../helpers/colors");
+const label = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+};
+const code = {
+    ...label,
+    fontFamily: 'monospace',
+};
+const ZodErrorMessages = ({ zodValidationResult }) => {
+    if (zodValidationResult.success) {
+        throw new Error('Expected error');
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { children: zodValidationResult.error.errors.map((error) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { style: label, children: ["- ", (0, jsx_runtime_1.jsx)("code", { style: code, children: error.path.join('.') }), ": ", error.message] }, error.path.join('.')));
+        }) }));
+};
+exports.ZodErrorMessages = ZodErrorMessages;

package/dist/editor/components/RenderModal/SchemaEditor/ZodNonEditableValue.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { JSONPath } from './zod-types';
+export declare const ZonNonEditableValue: React.FC<{
+    jsonPath: JSONPath;
+    label: string;
+    compact: boolean;
+    showSaveButton: boolean;
+}>;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZonNonEditableValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../../helpers/colors");
+const layout_1 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const fullWidth = {
+    width: '100%',
+};
+const emptyLabel = {
+    width: '100%',
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+};
+const ZonNonEditableValue = ({ jsonPath, label, compact, showSaveButton }) => {
+    const save = (0, react_1.useCallback)(() => undefined, []);
+    const reset = (0, react_1.useCallback)(() => undefined, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_1.narrowOption : layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: true, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: null }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)("em", { style: emptyLabel, children: label }) })] }));
+};
+exports.ZonNonEditableValue = ZonNonEditableValue;

package/dist/editor/components/RenderModal/SchemaEditor/ZodNumberEditor.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { z } from 'remotion';
+import type { JSONPath } from './zod-types';
+export declare const ZodNumberEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: number;
+    setValue: React.Dispatch<React.SetStateAction<number>>;
+    compact: boolean;
+    defaultValue: number;
+    onSave: (updater: (oldNum: unknown) => number) => void;
+    onRemove: null | (() => void);
+    showSaveButton: boolean;
+}>;

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

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodNumberEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const layout_1 = require("../../layout");
+const InputDragger_1 = require("../../NewComposition/InputDragger");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const layout_2 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const fullWidth = {
+    width: '100%',
+};
+const getMinValue = (schema) => {
+    const minCheck = schema._def.checks.find((c) => c.kind === 'min');
+    if (!minCheck) {
+        return -Infinity;
+    }
+    if (minCheck.kind !== 'min') {
+        throw new Error('Expected min check');
+    }
+    if (!minCheck.inclusive) {
+        return -Infinity;
+    }
+    return minCheck.value;
+};
+const getMaxValue = (schema) => {
+    const maxCheck = schema._def.checks.find((c) => c.kind === 'max');
+    if (!maxCheck) {
+        return Infinity;
+    }
+    if (maxCheck.kind !== 'max') {
+        throw new Error('Expected max check');
+    }
+    if (!maxCheck.inclusive) {
+        return Infinity;
+    }
+    return maxCheck.value;
+};
+const getStep = (schema) => {
+    const multipleStep = schema._def.checks.find((c) => c.kind === 'multipleOf');
+    if (!multipleStep) {
+        return undefined;
+    }
+    if (multipleStep.kind !== 'multipleOf') {
+        throw new Error('Expected multipleOf check');
+    }
+    return multipleStep.value;
+};
+const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onSave, compact, defaultValue, onRemove, showSaveButton, }) => {
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value: String(value),
+            zodValidation: schema.safeParse(value),
+        };
+    });
+    const onChange = (0, react_1.useCallback)((newValue) => {
+        const safeParse = schema.safeParse(Number(newValue));
+        const newLocalState = {
+            value: newValue,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(Number(newValue));
+        }
+    }, [schema, setValue]);
+    const onValueChange = (0, react_1.useCallback)((newValue) => {
+        const safeParse = schema.safeParse(newValue);
+        const newLocalState = {
+            value: String(newValue),
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newValue);
+        }
+    }, [schema, setValue]);
+    // TODO: Error message does not align well
+    const isDefault = value === defaultValue;
+    const reset = (0, react_1.useCallback)(() => {
+        onValueChange(defaultValue);
+    }, [defaultValue, onValueChange]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: isDefault, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: 'number', value: localValue.value, style: fullWidth, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onChange, onValueChange: onValueChange, min: getMinValue(schema), max: getMaxValue(schema), step: getStep(schema) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+};
+exports.ZodNumberEditor = ZodNumberEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodObjectEditor.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { z } from 'remotion';
+import type { JSONPath } from './zod-types';
+export declare const ZodObjectEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: unknown;
+    defaultValue: unknown;
+    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    compact: boolean;
+    onSave: (updater: (oldVal: Record<string, unknown>) => Record<string, unknown>) => void;
+    showSaveButton: boolean;
+    onRemove: null | (() => void);
+}>;

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodObjectEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../../helpers/colors");
+const layout_1 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const ZodSwitch_1 = require("./ZodSwitch");
+const container = {
+    width: '100%',
+};
+const fullWidth = {
+    width: '100%',
+};
+const fieldset = {
+    borderRadius: 4,
+    borderColor: colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+};
+// TODO: First validate locally
+const ZodObjectEditor = ({ schema, jsonPath, setValue, value, compact, defaultValue, onSave, showSaveButton, onRemove, }) => {
+    const def = schema._def;
+    const typeName = def.typeName;
+    if (typeName !== remotion_1.z.ZodFirstPartyTypeKind.ZodObject) {
+        throw new Error('expected object');
+    }
+    const shape = def.shape();
+    const keys = Object.keys(shape);
+    const isRoot = jsonPath.length === 0;
+    const Element = isRoot ? 'div' : 'fieldset';
+    const { paddingTop } = layout_1.optionRow;
+    const style = (0, react_1.useMemo)(() => {
+        if (isRoot) {
+            return {};
+        }
+        return { paddingTop };
+    }, [isRoot, paddingTop]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsxs)(Element, { style: fieldset, children: [isRoot ? null : ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaFieldsetLabel, { jsonPath: jsonPath, onRemove: onRemove })), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: keys.map((key) => {
+                            return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: [...jsonPath, key], schema: shape[key], value: value[key], defaultValue: defaultValue[key], setValue: (val) => {
+                                    setValue((oldVal) => {
+                                        return {
+                                            ...oldVal,
+                                            [key]: typeof val === 'function' ? val(oldVal[key]) : val,
+                                        };
+                                    });
+                                }, onSave: (val) => {
+                                    onSave((oldVal) => {
+                                        return {
+                                            ...oldVal,
+                                            [key]: typeof val === 'function' ? val(oldVal[key]) : val,
+                                        };
+                                    });
+                                }, onRemove: null, compact: compact, showSaveButton: showSaveButton }, key));
+                        }) })] }) }) }));
+};
+exports.ZodObjectEditor = ZodObjectEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodStringEditor.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { z } from 'remotion';
+import type { JSONPath } from './zod-types';
+export declare const ZodStringEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: string;
+    defaultValue: string;
+    setValue: React.Dispatch<React.SetStateAction<string>>;
+    onSave: (updater: (oldNum: unknown) => string) => void;
+    onRemove: null | (() => void);
+    compact: boolean;
+    showSaveButton: boolean;
+}>;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodStringEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const layout_1 = require("../../layout");
+const RemInput_1 = require("../../NewComposition/RemInput");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const layout_2 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const fullWidth = {
+    width: '100%',
+};
+const ZodStringEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, }) => {
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+        };
+    });
+    const onValueChange = (0, react_1.useCallback)((newValue) => {
+        const safeParse = schema.safeParse(newValue);
+        const newLocalState = {
+            value: newValue,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newValue);
+        }
+    }, [schema, setValue]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        onValueChange(e.target.value);
+    }, [onValueChange]);
+    const reset = (0, react_1.useCallback)(() => {
+        onValueChange(defaultValue);
+    }, [defaultValue, onValueChange]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+};
+exports.ZodStringEditor = ZodStringEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodSwitch.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { z } from 'remotion';
+import type { JSONPath } from './zod-types';
+export declare const ZodSwitch: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: unknown;
+    defaultValue: unknown;
+    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    onSave: (newValue: (oldVal: unknown) => unknown) => void;
+    compact: boolean;
+    showSaveButton: boolean;
+    onRemove: null | (() => void);
+}>;

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodSwitch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const ZodArrayEditor_1 = require("./ZodArrayEditor");
+const ZodBooleanEditor_1 = require("./ZodBooleanEditor");
+const ZodDateEditor_1 = require("./ZodDateEditor");
+const ZodEffectEditor_1 = require("./ZodEffectEditor");
+const ZodNonEditableValue_1 = require("./ZodNonEditableValue");
+const ZodNumberEditor_1 = require("./ZodNumberEditor");
+const ZodObjectEditor_1 = require("./ZodObjectEditor");
+const ZodStringEditor_1 = require("./ZodStringEditor");
+const ZodSwitch = ({ schema, jsonPath, compact, value, setValue, defaultValue, onSave, showSaveButton, onRemove, }) => {
+    const def = schema._def;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const typeName = def.typeName;
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodObject) {
+        return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodString) {
+        return ((0, jsx_runtime_1.jsx)(ZodStringEditor_1.ZodStringEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodDate) {
+        return ((0, jsx_runtime_1.jsx)(ZodDateEditor_1.ZodDateEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodNumber) {
+        return ((0, jsx_runtime_1.jsx)(ZodNumberEditor_1.ZodNumberEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodBoolean) {
+        return ((0, jsx_runtime_1.jsx)(ZodBooleanEditor_1.ZodBooleanEditor, { value: value, setValue: setValue, jsonPath: jsonPath, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodUndefined) {
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'undefined' }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodNull) {
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'null' }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodAny) {
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'any (not editable)' }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodBigInt) {
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'BigInt (not editable)' }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodUnknown) {
+        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { compact: compact, jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'unknown (not editable)' }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodArray) {
+        return ((0, jsx_runtime_1.jsx)(ZodArrayEditor_1.ZodArrayEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodEffects) {
+        return ((0, jsx_runtime_1.jsx)(ZodEffectEditor_1.ZodEffectEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
+    }
+    return (0, jsx_runtime_1.jsx)("div", { children: "unknown" });
+};
+exports.ZodSwitch = ZodSwitch;

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

@@ -0,0 +1,2 @@
+export declare const serializeJSONWithDate: (data: unknown, indent: number | undefined) => string;
+export declare const deserializeJSONWithDate: (data: string) => any;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deserializeJSONWithDate = exports.serializeJSONWithDate = void 0;
+const serializeJSONWithDate = (data, indent) => {
+    return JSON.stringify(data, function (key, value) {
+        if (this[key] instanceof Date) {
+            return `remotion-date:${this[key].toISOString()}`;
+        }
+        return value;
+    }, indent);
+};
+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/layout.d.ts

@@ -1,5 +1,7 @@
-/// <reference types="react" />
+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

@@ -1,22 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.input = exports.rightRow = exports.label = exports.optionRow = void 0;
+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',
-    alignItems: 'flex-start',
+    alignItems: 'center',
     minHeight: 40,
     paddingLeft: 16,
     paddingRight: 16,
     paddingTop: 8,
     paddingBottom: 8,
 };
+exports.narrowOption = {
+    display: 'flex',
+    flexDirection: 'column',
+};
 exports.label = {
-    width: 150,
+    width: 170,
     fontSize: 15,
     lineHeight: '40px',
     color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
 };
 exports.rightRow = {
     display: 'flex',
@@ -29,3 +34,14 @@ exports.input = {
     minWidth: 250,
     textAlign: 'right',
 };
+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,15 @@
+import type { AudioCodec, Codec, StillImageFormat } from '@remotion/renderer';
+import type { RenderType } from './RenderModalAdvanced';
+export declare const invalidCharacters: string[];
+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,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateOutnameGui = exports.invalidCharacters = void 0;
+const client_1 = require("@remotion/renderer/client");
+exports.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 (!(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) => exports.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/RenderQueueError.js

@@ -14,10 +14,10 @@ const RenderQueueError = ({ job }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onClick = (0, react_1.useCallback)(() => {
         setSelectedModal({
-            type: 'render-error',
-            job,
+            type: 'render-progress',
+            jobId: job.id,
         });
-    }, [job, setSelectedModal]);
+    }, [job.id, setSelectedModal]);
     if (job.status !== 'failed') {
         throw new Error('should not have rendered this component');
     }

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

@@ -2,13 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueItemStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const modals_1 = require("../../state/modals");
 const CircularProgress_1 = require("./CircularProgress");
 const iconStyle = {
     height: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
     width: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
 };
+const invisibleStyle = {
+    appearance: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    display: 'flex',
+};
 const RenderQueueItemStatus = ({ job }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const openProgress = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'render-progress',
+            jobId: job.id,
+        });
+    }, [job.id, setSelectedModal]);
     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" }) }) }));
     }
@@ -16,11 +32,11 @@ const RenderQueueItemStatus = ({ job }) => {
         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" }) }));
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: invisibleStyle, onClick: openProgress, children: (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) });
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: invisibleStyle, onClick: openProgress, children: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, job.progress.value) }) }));
     }
     throw new Error('Unknown job status');
 };