@remotion/studio 4.0.422 → 4.0.424

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

@@ -32,80 +32,80 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, defaultValue, onSave, sh
     }
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     if (typeName === z.ZodFirstPartyTypeKind.ZodObject) {
-        return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, unsavedValue: value, savedValue: defaultValue, jsonPath: jsonPath, schema: schema, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, discriminatedUnionReplacement: null }));
+        return (jsx_runtime_1.jsx(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, unsavedValue: value, savedValue: defaultValue, jsonPath: jsonPath, schema: schema, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, discriminatedUnionReplacement: null }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodString) {
         if (value.startsWith(window.remotion_staticBase)) {
-            return ((0, jsx_runtime_1.jsx)(ZodStaticFileEditor_1.ZodStaticFileEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+            return (jsx_runtime_1.jsx(ZodStaticFileEditor_1.ZodStaticFileEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
         }
         if (zodTypes &&
             schema._def.description ===
                 zodTypes.ZodZypesInternals.REMOTION_TEXTAREA_BRAND) {
-            return ((0, jsx_runtime_1.jsx)(ZodTextareaEditor_1.ZodTextareaEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+            return (jsx_runtime_1.jsx(ZodTextareaEditor_1.ZodTextareaEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
         }
-        return ((0, jsx_runtime_1.jsx)(ZodStringEditor_1.ZodStringEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodStringEditor_1.ZodStringEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodDate) {
-        return ((0, jsx_runtime_1.jsx)(ZodDateEditor_1.ZodDateEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodDateEditor_1.ZodDateEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodNumber) {
-        return ((0, jsx_runtime_1.jsx)(ZodNumberEditor_1.ZodNumberEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodNumberEditor_1.ZodNumberEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodBoolean) {
-        return ((0, jsx_runtime_1.jsx)(ZodBooleanEditor_1.ZodBooleanEditor, { value: value, setValue: setValue, jsonPath: jsonPath, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, schema: schema }));
+        return (jsx_runtime_1.jsx(ZodBooleanEditor_1.ZodBooleanEditor, { value: value, setValue: setValue, jsonPath: jsonPath, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, schema: schema }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodUndefined) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'undefined', saving: saving, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'undefined', saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodNull) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'null', saving: saving, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'null', saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodAny) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'any (not editable)', saving: saving, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'any (not editable)', saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodBigInt) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'BigInt (not editable)', saving: saving, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'BigInt (not editable)', saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodUnknown) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'unknown (not editable)', saving: saving, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: 'unknown (not editable)', saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodArray) {
-        return ((0, jsx_runtime_1.jsx)(ZodArrayEditor_1.ZodArrayEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodArrayEditor_1.ZodArrayEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodEnum) {
-        return ((0, jsx_runtime_1.jsx)(ZodEnumEditor_1.ZodEnumEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+        return (jsx_runtime_1.jsx(ZodEnumEditor_1.ZodEnumEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodEffects) {
         if (zodTypes &&
             schema._def.description ===
                 zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
-            return ((0, jsx_runtime_1.jsx)(ZodColorEditor_1.ZodColorEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+            return (jsx_runtime_1.jsx(ZodColorEditor_1.ZodColorEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, onSave: onSave, defaultValue: defaultValue, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
         }
         if (zodTypes &&
             schema._def.description ===
                 zodTypes.ZodZypesInternals.REMOTION_MATRIX_BRAND) {
-            return ((0, jsx_runtime_1.jsx)(ZodMatrixEditor_1.ZodMatrixEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema._def.schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+            return (jsx_runtime_1.jsx(ZodMatrixEditor_1.ZodMatrixEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema._def.schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
         }
-        return ((0, jsx_runtime_1.jsx)(ZodEffectEditor_1.ZodEffectEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodEffectEditor_1.ZodEffectEditor, { value: value, setValue: setValue, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodUnion) {
-        return ((0, jsx_runtime_1.jsx)(ZodUnionEditor_1.ZodUnionEditor, { schema: schema, showSaveButton: showSaveButton, jsonPath: jsonPath, value: value, defaultValue: defaultValue, setValue: setValue, onSave: onSave, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodUnionEditor_1.ZodUnionEditor, { schema: schema, showSaveButton: showSaveButton, jsonPath: jsonPath, value: value, defaultValue: defaultValue, setValue: setValue, onSave: onSave, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodOptional) {
-        return ((0, jsx_runtime_1.jsx)(ZodOptionalEditor_1.ZodOptionalEditor, { jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodOptionalEditor_1.ZodOptionalEditor, { jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodNullable) {
-        return ((0, jsx_runtime_1.jsx)(ZodNullableEditor_1.ZodNullableEditor, { jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodNullableEditor_1.ZodNullableEditor, { jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodDefault) {
-        return ((0, jsx_runtime_1.jsx)(ZodDefaultEditor_1.ZodDefaultEditor, { jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodDefaultEditor_1.ZodDefaultEditor, { jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodDiscriminatedUnion) {
-        return ((0, jsx_runtime_1.jsx)(ZodDiscriminatedUnionEditor_1.ZodDiscriminatedUnionEditor, { defaultValue: defaultValue, mayPad: mayPad, schema: schema, setValue: setValue, value: value, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, saving: saving, saveDisabledByParent: saveDisabledByParent, showSaveButton: showSaveButton }));
+        return (jsx_runtime_1.jsx(ZodDiscriminatedUnionEditor_1.ZodDiscriminatedUnionEditor, { defaultValue: defaultValue, mayPad: mayPad, schema: schema, setValue: setValue, value: value, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, saving: saving, saveDisabledByParent: saveDisabledByParent, showSaveButton: showSaveButton }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodTuple) {
-        return ((0, jsx_runtime_1.jsx)(ZodTupleEditor_1.ZodTupleEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodTupleEditor_1.ZodTupleEditor, { setValue: setValue, value: value, jsonPath: jsonPath, schema: schema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
-    return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: `${typeName} (not editable)`, saving: saving, mayPad: mayPad }));
+    return (jsx_runtime_1.jsx(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: `${typeName} (not editable)`, saving: saving, mayPad: mayPad }));
 };
 exports.ZodSwitch = ZodSwitch;

package/dist/components/RenderModal/SchemaEditor/ZodTextareaEditor.js

@@ -37,6 +37,10 @@ const ZodTextareaEditor = ({ jsonPath, value, setValue, showSaveButton, defaultV
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value, false, false);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.value, status: localValue.zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), name: jsonPath.join('.'), style: textareaStyle }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
+                    jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.value, status: localValue.zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), name: jsonPath.join('.'), style: textareaStyle }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })
+                ] })
+        ] }));
 };
 exports.ZodTextareaEditor = ZodTextareaEditor;

package/dist/components/RenderModal/SchemaEditor/ZodTupleEditor.js

@@ -70,16 +70,20 @@ const ZodTupleEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSav
     const isDefaultValue = (0, react_1.useMemo)(() => {
         return (0, deep_equal_1.deepEqual)(localValue.value, defaultValue);
     }, [defaultValue, localValue]);
-    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [
+            jsx_runtime_1.jsx("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
-                }, children: (0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onReset: reset, isDefaultValue: isDefaultValue, jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, onSave: () => {
+                }, children: jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { onReset: reset, isDefaultValue: isDefaultValue, jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, onSave: () => {
                         onSave(() => localValue.value, false, false);
-                    }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? ((0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsxs)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [localValue.value.map((child, i) => {
+                    }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? (jsx_runtime_1.jsx(RevisionContextProvider, { children: jsx_runtime_1.jsxs(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [localValue.value.map((child, i) => {
                             var _a;
                             return (
                             // eslint-disable-next-line react/no-array-index-key
-                            (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodTupleItemEditor_1.ZodTupleItemEditor, { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[i]) !== null && _a !== void 0 ? _a : (0, create_zod_values_1.createZodValues)(def.items[i], z, zodTypes), onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }), (0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: i, onChange: onChange, isLast: i === localValue.value.length - 1, showAddButton: false })] }, `${i}${localValue.keyStabilityRevision}`));
-                        }), value.length === 0 ? ((0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: 0, onChange: onChange, isLast: true, showAddButton: false })) : null] }) })) : null, (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] }));
+                            jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
+                                    jsx_runtime_1.jsx(ZodTupleItemEditor_1.ZodTupleItemEditor, { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[i]) !== null && _a !== void 0 ? _a : (0, create_zod_values_1.createZodValues)(def.items[i], z, zodTypes), onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }), jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: i, onChange: onChange, isLast: i === localValue.value.length - 1, showAddButton: false })
+                                ] }, `${i}${localValue.keyStabilityRevision}`));
+                        }), value.length === 0 ? (jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: 0, onChange: onChange, isLast: true, showAddButton: false })) : null] }) })) : null, jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })
+        ] }));
 };
 exports.ZodTupleEditor = ZodTupleEditor;

package/dist/components/RenderModal/SchemaEditor/ZodTupleItemEditor.js

@@ -25,6 +25,6 @@ const ZodTupleItemEditor = ({ def, onChange, jsonPath, index, value, defaultValu
             ...oldV.slice(index + 1),
         ], false, false);
     }, [index, onSaveObject]);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: def.items[index], value: value, setValue: setValue, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }) }));
+    return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: def.items[index], value: value, setValue: setValue, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }) }));
 };
 exports.ZodTupleItemEditor = ZodTupleItemEditor;

package/dist/components/RenderModal/SchemaEditor/ZodUnionEditor.js

@@ -31,19 +31,19 @@ const ZodUnionEditor = ({ jsonPath, schema, setValue, onSave, defaultValue, valu
         throw new Error('expected zod');
     }
     if (options.length > 2) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with more than 2 options not editable', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with more than 2 options not editable', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
     if (options.length < 2) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with less than 2 options not editable', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union with less than 2 options not editable', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
     const nullResult = findNull(options, z);
     if (!nullResult) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union only editable with 1 value being null', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Union only editable with 1 value being null', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
     const { otherSchema, nullishValue, otherSchemaIsAlsoNullish } = nullResult;
     if (otherSchemaIsAlsoNullish) {
-        return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Not editable - both union values are nullish', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
+        return (jsx_runtime_1.jsx(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, label: 'Not editable - both union values are nullish', showSaveButton: showSaveButton, saving: saving, mayPad: mayPad }));
     }
-    return ((0, jsx_runtime_1.jsx)(ZodOrNullishEditor_1.ZodOrNullishEditor, { defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: schema, innerSchema: otherSchema, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: nullishValue, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+    return (jsx_runtime_1.jsx(ZodOrNullishEditor_1.ZodOrNullishEditor, { defaultValue: defaultValue, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, schema: schema, innerSchema: otherSchema, setValue: setValue, showSaveButton: showSaveButton, value: value, nullishValue: nullishValue, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
 };
 exports.ZodUnionEditor = ZodUnionEditor;

package/dist/components/RenderModal/SchemaEditor/create-zod-values.d.ts

@@ -1,2 +1,2 @@
-import type { ZodType, ZodTypesType } from '../../get-zod-if-possible';
-export declare const createZodValues: (schema: Zod.ZodTypeAny, zodRuntime: ZodType, zodTypes: ZodTypesType | null) => unknown;
+import type { z } from 'zod';
+export declare const createZodValues: (schema: z.ZodTypeAny, zodRuntime: typeof z, zodTypes: typeof import("@remotion/zod-types") | null) => unknown;

package/dist/components/RenderModal/SchemaEditor/extract-enum-json-paths.d.ts

@@ -1,7 +1,7 @@
-import type { ZodType, ZodTypesType } from '../../get-zod-if-possible';
+import type { z } from 'zod';
 export declare const extractEnumJsonPaths: ({ schema, zodRuntime, currentPath, zodTypes, }: {
-    schema: Zod.ZodTypeAny;
-    zodRuntime: ZodType;
-    zodTypes: ZodTypesType | null;
+    schema: z.ZodTypeAny;
+    zodRuntime: typeof z;
+    zodTypes: typeof import("@remotion/zod-types") | null;
     currentPath: (string | number)[];
 }) => (string | number)[][];

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

@@ -94,7 +94,7 @@ const useLocalState = ({ unsavedValue, schema, setValue, savedValue, }) => {
         setResetRevision((old) => old + 1);
     }, [savedValue, onChange]);
     const RevisionContextProvider = (0, react_1.useCallback)(({ children }) => {
-        return ((0, jsx_runtime_1.jsx)(exports.RevisionContext.Provider, { value: contextValue, children: children }));
+        return (jsx_runtime_1.jsx(exports.RevisionContext.Provider, { value: contextValue, children: children }));
     }, [contextValue]);
     return (0, react_1.useMemo)(() => ({
         localValue: currentLocalValue,

package/dist/components/RenderModal/SeparateAudioOption.js

@@ -24,7 +24,7 @@ const SeparateAudioOptionInput = ({ separateAudioTo, setSeparateAudioTo, audioCo
         }
         return null;
     }, [audioCodec, separateAudioTo]);
-    return ((0, jsx_runtime_1.jsx)(RenderModalOutputName_1.RenderModalOutputName, { existence: existence, inputStyle: layout_2.input, onValueChange: onValueChange, outName: separateAudioTo, label: 'Separate audio to', validationMessage: validationMessage }));
+    return (jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { existence: existence, inputStyle: layout_2.input, onValueChange: onValueChange, outName: separateAudioTo, label: 'Separate audio to', validationMessage: validationMessage }));
 };
 exports.SeparateAudioOptionInput = SeparateAudioOptionInput;
 const SeparateAudioOption = ({ separateAudioTo, setSeparateAudioTo, audioCodec, outName }) => {
@@ -37,6 +37,11 @@ const SeparateAudioOption = ({ separateAudioTo, setSeparateAudioTo, audioCodec,
             setSeparateAudioTo(null);
         }
     }, [audioCodec, outName, setSeparateAudioTo]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Separate audio", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "separateAudioOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: false, checked: Boolean(separateAudioTo), onChange: onSeparateAudioChange, name: "separate-audio-to" }) })] }), separateAudioTo === null ? null : ((0, jsx_runtime_1.jsx)(exports.SeparateAudioOptionInput, { separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, audioCodec: audioCodec }))] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Separate audio",
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "separateAudioOption" })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { disabled: false, checked: Boolean(separateAudioTo), onChange: onSeparateAudioChange, name: "separate-audio-to" }) })
+                ] }), separateAudioTo === null ? null : (jsx_runtime_1.jsx(exports.SeparateAudioOptionInput, { separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, audioCodec: audioCodec }))] }));
 };
 exports.SeparateAudioOption = SeparateAudioOption;

package/dist/components/RenderModal/ServerRenderModal.js

@@ -103,7 +103,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
                     : initialStillImageFormat,
             type: 'asset',
             compositionDefaultOutName: resolvedComposition.defaultOutName,
-            clientSideRender: false,
+            outputLocation: renderDefaults.outputLocation,
         });
     });
     const [videoCodecForAudioTab, setVideoCodecForAudioTab] = (0, react_1.useState)(() => initialVideoCodecForAudioTab);
@@ -151,7 +151,10 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const [outName, setOutName] = (0, react_1.useState)(() => initialOutName);
     const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => outFrameMark !== null && outFrameMark !== void 0 ? outFrameMark : null);
     const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => inFrameMark !== null && inFrameMark !== void 0 ? inFrameMark : null);
-    const [proResProfileSetting, setProResProfile] = (0, react_1.useState)(() => { var _a; return (_a = initialProResProfile !== null && initialProResProfile !== void 0 ? initialProResProfile : resolvedComposition.defaultProResProfile) !== null && _a !== void 0 ? _a : 'hq'; });
+    const [proResProfileSetting, setProResProfile] = (0, react_1.useState)(() => {
+        var _a;
+        return (_a = initialProResProfile !== null && initialProResProfile !== void 0 ? initialProResProfile : resolvedComposition.defaultProResProfile) !== null && _a !== void 0 ? _a : 'hq';
+    });
     const [x264PresetSetting, setx264Preset] = (0, react_1.useState)(() => initialx264Preset);
     const [hardwareAcceleration, setHardwareAcceleration] = (0, react_1.useState)(() => initialHardwareAcceleration);
     const [userPreferredPixelFormat, setPixelFormat] = (0, react_1.useState)(() => {
@@ -789,7 +792,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
                 key: option,
                 id: option,
                 keyHint: null,
-                leftItem: pixelFormat === option ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                leftItem: pixelFormat === option ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 quickSwitcherLabel: null,
                 subMenu: null,
                 type: 'item',
@@ -797,12 +800,31 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             };
         });
     }, [availablePixelFormats, pixelFormat]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.outerModalStyle, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
+    return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+                    jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...render_modals_1.buttonStyle,
                             backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,
-                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: render_modals_1.icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: render_modals_1.icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: render_modals_1.icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, setVerboseLogging: setLogLevel, logLevel: logLevel, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setColorSpace: setColorSpace, colorSpace: colorSpace, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, offthreadVideoThreads: offthreadVideoThreads, setOffthreadVideoThreads: setOffthreadVideoThreads, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, codec: codec, userAgent: userAgent, setUserAgent: setUserAgent, setBeep: setBeepOnFinish, beep: beepOnFinish, repro: repro, setRepro: setRepro, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, chromeModeOption: chromeMode, setChromeModeOption: setChromeMode, darkMode: darkMode, setDarkMode: setDarkMode })) })] })] }));
+                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
+                        ] })
+                ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [shownTabs.includes('general') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { style: render_modals_1.icon }) }),
+                                    "General"] })) : null, shownTabs.includes('data') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { style: render_modals_1.icon }) }),
+                                    "Input Props"] })) : null, shownTabs.includes('picture') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { style: render_modals_1.icon }) }),
+                                    "Picture"] })) : null, shownTabs.includes('audio') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { style: render_modals_1.icon }) }),
+                                    "Audio"] })) : null, shownTabs.includes('gif') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gif_1.GifIcon, { style: render_modals_1.icon }) }),
+                                    "GIF"] })) : null, shownTabs.includes('advanced') ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { style: render_modals_1.icon }) }),
+                                    "Other"] })) : null] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, setVerboseLogging: setLogLevel, logLevel: logLevel, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? (jsx_runtime_1.jsx(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, pixelFormatOptions: pixelFormatOptions, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setColorSpace: setColorSpace, colorSpace: colorSpace, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls, encodingBufferSize: encodingBufferSize, setEncodingBufferSize: setEncodingBufferSize, encodingMaxRate: encodingMaxRate, setEncodingMaxRate: setEncodingMaxRate, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate, forSeamlessAacConcatenation: forSeamlessAacConcatenation, setForSeamlessAacConcatenation: setForSeamlessAacConcatenation, separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, outName: outName })) : tab === 'gif' ? (jsx_runtime_1.jsx(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : (jsx_runtime_1.jsx(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, offthreadVideoThreads: offthreadVideoThreads, setOffthreadVideoThreads: setOffthreadVideoThreads, enableMultiProcessOnLinux: multiProcessOnLinux, setChromiumMultiProcessOnLinux: setChromiumMultiProcessOnLinux, codec: codec, userAgent: userAgent, setUserAgent: setUserAgent, setBeep: setBeepOnFinish, beep: beepOnFinish, repro: repro, setRepro: setRepro, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration, chromeModeOption: chromeMode, setChromeModeOption: setChromeMode, darkMode: darkMode, setDarkMode: setDarkMode })) })
+                ] })
+        ] }));
 };
 const RenderModalWithLoader = (props) => {
-    return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: props.compositionId, children: (0, jsx_runtime_1.jsx)(RenderModal, { ...props }) }) }));
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: props.compositionId, children: jsx_runtime_1.jsx(RenderModal, { ...props }) }) }));
 };
 exports.RenderModalWithLoader = RenderModalWithLoader;

package/dist/components/RenderModal/WarningIndicatorButton.js

@@ -28,7 +28,7 @@ const triangleStyle = {
     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" }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 576 512", ...props, children: 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)(() => {
@@ -44,6 +44,8 @@ const WarningIndicatorButton = ({ setShowWarning, showWarning, warningCount }) =
             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 })] }));
+    return (jsx_runtime_1.jsxs("button", { type: "button", style: buttonStyle, onClick: onClick, children: [
+            jsx_runtime_1.jsx(WarningTriangle, { style: triangleStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), warningCount, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(caret_1.AngleDown, { down: showWarning })
+        ] }));
 };
 exports.WarningIndicatorButton = WarningIndicatorButton;

package/dist/components/RenderModal/WebRenderModal.js

@@ -148,10 +148,12 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         return Math.max(0, Math.min(finalEndFrame, startFrame));
     }, [finalEndFrame, startFrame]);
     const [initialOutNameState] = (0, react_1.useState)(() => {
+        var _a;
+        var _b;
         if (initialDefaultOutName) {
             return initialDefaultOutName;
         }
-        return (0, studio_shared_1.getDefaultOutLocation)({
+        const defaultOut = (0, studio_shared_1.getDefaultOutLocation)({
             compositionName: resolvedComposition.id,
             defaultExtension: renderMode === 'still'
                 ? imageFormat
@@ -160,8 +162,12 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                     : imageFormat,
             type: 'asset',
             compositionDefaultOutName: resolvedComposition.defaultOutName,
-            clientSideRender: true,
+            outputLocation: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.outputLocation) !== null && _b !== void 0 ? _b : null,
         });
+        if (window.remotion_isReadOnlyStudio) {
+            return defaultOut.replace(/^out\//, '');
+        }
+        return defaultOut;
     });
     const [outName, setOutName] = (0, react_1.useState)(() => initialOutNameState);
     const setStillFormat = (0, react_1.useCallback)((format) => {
@@ -277,10 +283,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         }
     }, [outName, imageFormat, renderMode, container]);
     const onAddToQueue = (0, react_1.useCallback)(() => {
-        var _a, _b;
+        var _a;
+        var _b;
         const compositionRef = {
             component: unresolvedComposition.component,
-            calculateMetadata: (_a = unresolvedComposition.calculateMetadata) !== null && _a !== void 0 ? _a : null,
+            calculateMetadata: (_b = unresolvedComposition.calculateMetadata) !== null && _b !== void 0 ? _b : null,
             width: resolvedComposition.width,
             height: resolvedComposition.height,
             fps: resolvedComposition.fps,
@@ -328,7 +335,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         }
         setSidebarCollapsedState({ left: null, right: 'expanded' });
         (0, OptionsPanel_1.persistSelectedOptionsSidebarPanel)('renders');
-        (_b = OptionsPanel_1.optionsSidebarTabs.current) === null || _b === void 0 ? void 0 : _b.selectRendersPanel();
+        (_a = OptionsPanel_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
         setSelectedModal(null);
     }, [
         renderMode,
@@ -365,9 +372,30 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
         addClientVideoJob,
         scale,
     ]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.outerModalStyle, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.container, children: (0, jsx_runtime_1.jsx)(WebRendererExperimentalBadge_1.WebRendererExperimentalBadge, {}) }), (0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: render_modals_1.leftSidebar, children: [(0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: render_modals_1.icon }) }), "General"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: render_modals_1.icon }) }), "Input Props"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: render_modals_1.icon }) }), "Picture"] }), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: render_modals_1.icon }) }), "Audio"] })) : null, (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: render_modals_1.icon }) }), "Other"] }), (0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => setTab('license'), children: [(0, jsx_runtime_1.jsx)("div", { style: render_modals_1.iconContainer, children: (0, jsx_runtime_1.jsx)(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }), "License"] })] }), (0, jsx_runtime_1.jsx)("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodec, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAudio_1.WebRenderModalAudio, { muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? ((0, jsx_runtime_1.jsx)(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) : ((0, jsx_runtime_1.jsx)(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })] })] }));
+    return (jsx_runtime_1.jsxs("div", { style: render_modals_1.outerModalStyle, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Render ${resolvedComposition.id}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+                    jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
+                        ] })
+                ] }), jsx_runtime_1.jsx("div", { style: render_modals_1.container, children: jsx_runtime_1.jsx(WebRendererExperimentalBadge_1.WebRendererExperimentalBadge, {}) }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [
+                            jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { style: render_modals_1.icon }) }),
+                                    "General"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(data_1.DataIcon, { style: render_modals_1.icon }) }),
+                                    "Input Props"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { style: render_modals_1.icon }) }),
+                                    "Picture"] }), renderMode === 'video' ? (jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { style: render_modals_1.icon }) }),
+                                    "Audio"] })) : null, jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { style: render_modals_1.icon }) }),
+                                    "Other"] }), jsx_runtime_1.jsxs(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => setTab('license'), children: [
+                                    jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { style: render_modals_1.icon }) }),
+                                    "License"] })
+                        ] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodec, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving, readOnlyStudio: false })) : tab === 'picture' ? (jsx_runtime_1.jsx(WebRenderModalPicture_1.WebRenderModalPicture, { renderMode: renderMode, videoBitrate: videoBitrate, setVideoBitrate: setVideoBitrate, keyframeIntervalInSeconds: keyframeIntervalInSeconds, setKeyframeIntervalInSeconds: setKeyframeIntervalInSeconds, transparent: transparent, setTransparent: setTransparent, scale: scale, setScale: setScale, compositionWidth: resolvedComposition.width, compositionHeight: resolvedComposition.height })) : tab === 'audio' ? (jsx_runtime_1.jsx(WebRenderModalAudio_1.WebRenderModalAudio, { muted: muted, setMuted: setMuted, audioCodec: audioCodec, setAudioCodec: setAudioCodec, audioBitrate: audioBitrate, setAudioBitrate: setAudioBitrate, container: container, encodableCodecs: encodableAudioCodecs, effectiveAudioCodec: effectiveAudioCodec })) : tab === 'advanced' ? (jsx_runtime_1.jsx(WebRenderModalAdvanced_1.WebRenderModalAdvanced, { renderMode: renderMode, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, mediaCacheSizeInBytes: mediaCacheSizeInBytes, setMediaCacheSizeInBytes: setMediaCacheSizeInBytes, hardwareAcceleration: hardwareAcceleration, setHardwareAcceleration: setHardwareAcceleration })) : (jsx_runtime_1.jsx(WebRenderModalLicense_1.WebRenderModalLicense, { licenseKey: licenseKey, setLicenseKey: setLicenseKey, initialPublicLicenseKey: initialLicenseKey })) })
+                ] })
+        ] }));
 };
 const WebRenderModalWithLoader = (props) => {
-    return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: props.compositionId, children: (0, jsx_runtime_1.jsx)(WebRenderModal, { ...props }) }) }));
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: props.compositionId, children: jsx_runtime_1.jsx(WebRenderModal, { ...props }) }) }));
 };
 exports.WebRenderModalWithLoader = WebRenderModalWithLoader;

package/dist/components/RenderModal/WebRenderModalAdvanced.js

@@ -38,7 +38,7 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
             {
                 label: 'No Preference',
                 onClick: () => setHardwareAcceleration('no-preference'),
-                leftItem: hardwareAcceleration === 'no-preference' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                leftItem: hardwareAcceleration === 'no-preference' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 id: 'no-preference',
                 keyHint: null,
                 quickSwitcherLabel: null,
@@ -49,7 +49,7 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
             {
                 label: 'Prefer Hardware',
                 onClick: () => setHardwareAcceleration('prefer-hardware'),
-                leftItem: hardwareAcceleration === 'prefer-hardware' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                leftItem: hardwareAcceleration === 'prefer-hardware' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 id: 'prefer-hardware',
                 keyHint: null,
                 quickSwitcherLabel: null,
@@ -60,7 +60,7 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
             {
                 label: 'Prefer Software',
                 onClick: () => setHardwareAcceleration('prefer-software'),
-                leftItem: hardwareAcceleration === 'prefer-software' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                leftItem: hardwareAcceleration === 'prefer-software' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 id: 'prefer-software',
                 keyHint: null,
                 quickSwitcherLabel: null,
@@ -70,6 +70,13 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
             },
         ];
     }, [hardwareAcceleration, setHardwareAcceleration]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: tabContainer, children: [(0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { name: "Delay Render Timeout", formatter: (v) => `${v}ms`, min: 0, max: 1000000000, step: 1000, value: delayRenderTimeout, onValueChanged: setDelayRenderTimeout, hint: "delayRenderTimeoutInMillisecondsOption" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Custom @remotion/media cache size ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "mediaCacheSizeInBytesOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })] }), mediaCacheSizeInBytes === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { name: "@remotion/media cache size", formatter: (w) => `${w} bytes`, min: 0, max: 10000000000, step: 10 * 1024 * 1024, value: mediaCacheSizeInBytes, onValueChanged: changeMediaCacheSizeInBytes })), renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Hardware Acceleration" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: hardwareAccelerationOptions, selectedId: hardwareAcceleration, title: "Hardware Acceleration" }) })] })) : null] }));
+    return (jsx_runtime_1.jsxs("div", { style: tabContainer, children: [
+            jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Delay Render Timeout", formatter: (v) => `${v}ms`, min: 0, max: 1000000000, step: 1000, value: delayRenderTimeout, onValueChanged: setDelayRenderTimeout, hint: "delayRenderTimeoutInMillisecondsOption" }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom @remotion/media cache size ",
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "mediaCacheSizeInBytesOption" })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })
+                ] }), mediaCacheSizeInBytes === null ? null : (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "@remotion/media cache size", formatter: (w) => `${w} bytes`, min: 0, max: 10000000000, step: 10 * 1024 * 1024, value: mediaCacheSizeInBytes, onValueChanged: changeMediaCacheSizeInBytes })), renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Hardware Acceleration" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: hardwareAccelerationOptions, selectedId: hardwareAcceleration, title: "Hardware Acceleration" }) })
+                ] })) : null] }));
 };
 exports.WebRenderModalAdvanced = WebRenderModalAdvanced;

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -46,7 +46,7 @@ const WebRenderModalAudio = ({ muted, setMuted, audioCodec, setAudioCodec, audio
             return {
                 label: humanReadableWebAudioCodec(codec),
                 onClick: () => setAudioCodec(codec),
-                leftItem: audioCodec === codec ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                leftItem: audioCodec === codec ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 id: codec,
                 keyHint: null,
                 quickSwitcherLabel: null,
@@ -58,6 +58,16 @@ const WebRenderModalAudio = ({ muted, setMuted, audioCodec, setAudioCodec, audio
         });
     }, [containerSupported, encodableCodecs, audioCodec, setAudioCodec]);
     const audioBitrateOptions = (0, react_1.useMemo)(() => (0, quality_options_1.getQualityOptions)(audioBitrate, setAudioBitrate), [audioBitrate, setAudioBitrate]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [(0, jsx_runtime_1.jsx)(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted }), !muted ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Audio Quality", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioBitrateOptions, selectedId: audioBitrate, title: "Audio Quality" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Audio Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: audioCodecOptions, selectedId: audioCodec, title: "Audio Codec" }) })] }), effectiveAudioCodec !== audioCodec ? ((0, jsx_runtime_1.jsxs)("div", { style: fallbackNoticeStyle, children: [humanReadableWebAudioCodec(audioCodec), " is not available in this browser. Using ", humanReadableWebAudioCodec(effectiveAudioCodec), ' ', "instead."] })) : null] })) : null] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
+            jsx_runtime_1.jsx(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted }), !muted ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Quality",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioBitrateOptions, selectedId: audioBitrate, title: "Audio Quality" }) })
+                        ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Codec",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecOptions, selectedId: audioCodec, title: "Audio Codec" }) })
+                        ] }), effectiveAudioCodec !== audioCodec ? (jsx_runtime_1.jsxs("div", { style: fallbackNoticeStyle, children: [humanReadableWebAudioCodec(audioCodec), " is not available in this browser. Using ", humanReadableWebAudioCodec(effectiveAudioCodec), ' ', "instead."] })) : null] })) : null] }));
 };
 exports.WebRenderModalAudio = WebRenderModalAudio;