@remotion/cli 3.3.78 → 3.3.80

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

@@ -8,9 +8,11 @@ const Checkmark_1 = require("../../icons/Checkmark");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const RemInput_1 = require("../NewComposition/RemInput");
 const SegmentedControl_1 = require("../SegmentedControl");
+const CrfSetting_1 = require("./CrfSetting");
+const InfoBubble_1 = require("./InfoBubble");
+const JpegQualitySetting_1 = require("./JpegQualitySetting");
 const layout_1 = require("./layout");
-const NumberSetting_1 = require("./NumberSetting");
-const QualitySetting_1 = require("./QualitySetting");
+const OptionExplainer_1 = require("./OptionExplainer");
 const RenderModalHr_1 = require("./RenderModalHr");
 const ScaleSetting_1 = require("./ScaleSetting");
 const qualityControlModes = ['crf', 'bitrate'];
@@ -44,8 +46,8 @@ const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, setPixel
     const onTargetVideoBitrateChanged = (0, react_1.useCallback)((e) => {
         setCustomTargetVideoBitrateValue(e.target.value);
     }, [setCustomTargetVideoBitrateValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(QualitySetting_1.QualitySetting, { setQuality: setQuality, quality: quality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(QualitySetting_1.QualitySetting, { setQuality: setQuality, quality: quality })), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, shouldDisplayCrfOption &&
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: false }) })] })) : null, renderMode === 'video' && videoImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { quality: quality, setQuality: setQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { quality: quality, setQuality: setQuality })), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, shouldDisplayCrfOption &&
                 qualityControlType === 'crf' &&
-                renderMode !== 'still' ? ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minCrf, max: maxCrf, name: "CRF", onValueChanged: setCrf, value: crf, step: 1 })) : null, qualityControlType === 'bitrate' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target video bitrate" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged }) }) })] })) : null, renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, (0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale }), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null] }));
+                renderMode !== 'still' ? ((0, jsx_runtime_1.jsx)(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: client_1.BrowserSafeApis.options.crfOption })) : null, qualityControlType === 'bitrate' && renderMode !== 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Target video bitrate" }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoBitrate }) }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_1.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok" }) }) })] })) : null, renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, (0, jsx_runtime_1.jsx)(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale }), renderMode === 'video' ? (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null] }));
 };
 exports.RenderModalPicture = RenderModalPicture;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const RenderStatusModal: React.FC<{
+    jobId: string;
+}>;

package/dist/editor/components/RenderModal/{RenderErrorModal.js → RenderStatusModal.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderErrorModal = void 0;
+exports.RenderStatusModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
@@ -11,13 +11,15 @@ const ModalContainer_1 = require("../ModalContainer");
 const ModalHeader_1 = require("../ModalHeader");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
+const context_1 = require("../RenderQueue/context");
+const GuiRenderStatus_1 = require("./GuiRenderStatus");
 const container = {
     padding: 20,
-    maxWidth: 1200,
+    maxWidth: 900,
     paddingTop: 0,
 };
 const codeBlock = {
-    backgroundColor: 'black',
+    backgroundColor: '#222',
     whiteSpace: 'pre',
     padding: 12,
     borderRadius: 4,
@@ -34,8 +36,13 @@ const buttonRow = {
     flexDirection: 'row',
     justifyContent: 'flex-end',
 };
-const RenderErrorModal = ({ job }) => {
+const RenderStatusModal = ({ jobId }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const job = jobs.find((j) => j.id === jobId);
+    if (!job) {
+        throw new Error('job not found');
+    }
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
@@ -46,19 +53,19 @@ const RenderErrorModal = ({ job }) => {
     const onClickOnRemove = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
         (0, actions_1.removeRenderJob)(job).catch((err) => {
-            var _a;
-            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                content: 'Failed to remove render job: ' + err.message,
-                created: Date.now(),
-                duration: 2000,
-                id: String(Math.random()),
-            });
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not remove job: ${err.message}`);
             console.log(err);
         });
     }, [job, setSelectedModal]);
-    if (job.status !== 'failed') {
+    const onClickOnCancel = (0, react_1.useCallback)(() => {
+        (0, actions_1.cancelRenderJob)(job).catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not cancel job: ${err.message}`);
+            console.log(err);
+        });
+    }, [job]);
+    if (!job || job.status === 'idle') {
         throw new Error('should not have rendered this modal');
     }
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${job.compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "The render failed because of the following error:" }), (0, jsx_runtime_1.jsx)("div", { style: codeBlock, children: job.error.stack }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "Retry" }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onQuit, children: "Close" })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${job.compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [job.status === 'failed' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: "The render failed because of the following error:" }), (0, jsx_runtime_1.jsx)("div", { className: "__remotion-horizontal-scrollbar", style: codeBlock, children: job.error.stack })] })) : null, job.status === 'done' || job.status === 'running' ? ((0, jsx_runtime_1.jsx)(GuiRenderStatus_1.GuiRenderStatus, { job: job })) : null, (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [job.status === 'running' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnCancel, children: "Cancel render" })) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" })), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), job.status === 'failed' ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "Retry" })) : null, (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onQuit, children: "Close" })] })] })] }));
 };
-exports.RenderErrorModal = RenderErrorModal;
+exports.RenderStatusModal = RenderStatusModal;

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

@@ -7,8 +7,11 @@ const NumberSetting_1 = require("./NumberSetting");
 const MIN_SCALE = 0.1;
 const MAX_SCALE = 10;
 const ScaleSetting = ({ scale, setScale }) => {
-    return (
-    // TODO: Always show 1 decimal
-    (0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: MIN_SCALE, max: MAX_SCALE, step: 0.1, name: "Scale", formatter: (w) => `${w}x`, onValueChanged: setScale, value: scale, hint: client_1.BrowserSafeApis.options.scaleOption }));
+    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: MIN_SCALE, max: MAX_SCALE, step: 0.1, name: "Scale", formatter: (w) => {
+            if (typeof w === 'number') {
+                return `${w.toFixed(1)}x`;
+            }
+            return `${w}x`;
+        }, onValueChanged: setScale, value: scale, hint: client_1.BrowserSafeApis.options.scaleOption }));
 };
 exports.ScaleSetting = ScaleSetting;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { z } from 'remotion';
+export declare const SchemaEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    value: unknown;
+    setValue: React.Dispatch<React.SetStateAction<unknown>>;
+    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
+    compact: boolean;
+    defaultProps: unknown;
+    onSave: (updater: (oldState: unknown) => unknown) => void;
+    showSaveButton: boolean;
+}>;

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../../helpers/colors");
+const layout_1 = require("../../layout");
+const ZodErrorMessages_1 = require("./ZodErrorMessages");
+const ZodObjectEditor_1 = require("./ZodObjectEditor");
+const errorExplanation = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+};
+const codeSnippet = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'monospace',
+};
+const SchemaEditor = ({ schema, value, setValue, zodValidationResult, compact, defaultProps, onSave, showSaveButton, }) => {
+    const def = schema._def;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const typeName = def.typeName;
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodAny) {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema has an ", (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "any" }), " type.", (0, jsx_runtime_1.jsx)("br", {}), " Tweak the schema by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "schema" }), " prop to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: '<Composition>' }), " component."] }));
+    }
+    if (!zodValidationResult.success) {
+        // TODO: Distinguish between default props not valid and JSON input not valid
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." })] }));
+    }
+    if (typeName === remotion_1.z.ZodFirstPartyTypeKind.ZodObject) {
+        return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { value: value, setValue: setValue, jsonPath: [], schema: schema, compact: compact, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null }));
+    }
+    return null;
+};
+exports.SchemaEditor = SchemaEditor;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { JSONPath } from './zod-types';
+export declare const SchemaLabel: React.FC<{
+    jsonPath: JSONPath;
+    isDefaultValue: boolean;
+    onReset: () => void;
+    onSave: () => void;
+    onRemove: null | (() => void);
+    showSaveButton: boolean;
+    compact: boolean;
+}>;
+export declare const SchemaFieldsetLabel: React.FC<{
+    jsonPath: JSONPath;
+    onRemove: null | (() => void);
+}>;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaFieldsetLabel = exports.SchemaLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../../helpers/colors");
+const layout_1 = require("../../layout");
+const InlineRemoveButton_1 = require("../InlineRemoveButton");
+const layout_2 = require("../layout");
+const get_schema_label_1 = require("./get-schema-label");
+const SchemaResetButton_1 = require("./SchemaResetButton");
+const SchemaSaveButton_1 = require("./SchemaSaveButton");
+const commonStyles = {
+    fontSize: 15,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    lineHeight: '40px',
+};
+const compactStyles = {
+    ...commonStyles,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const wideStyles = {
+    ...commonStyles,
+    width: layout_2.label.width,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const labelStyle = {
+    fontFamily: 'monospace',
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+};
+const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton, compact, onRemove, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? compactStyles : wideStyles, children: [(0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: (0, get_schema_label_1.getSchemaLabel)(jsonPath) }), compact ? (0, jsx_runtime_1.jsx)(layout_1.Flex, {}) : (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
+};
+exports.SchemaLabel = SchemaLabel;
+const SchemaFieldsetLabel = ({ jsonPath, onRemove }) => {
+    return ((0, jsx_runtime_1.jsxs)("legend", { style: layout_2.fieldsetLabel, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), onRemove ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove })] })) : null] }));
+};
+exports.SchemaFieldsetLabel = SchemaFieldsetLabel;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SchemaResetButton: React.FC<{
+    onClick: () => void;
+}>;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaResetButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InlineAction_1 = require("../../InlineAction");
+const icon = {
+    height: 14,
+};
+const SchemaResetButton = ({ onClick }) => {
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z" }) }) }));
+};
+exports.SchemaResetButton = SchemaResetButton;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SchemaSaveButton: React.FC<{
+    onClick: () => void;
+}>;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaSaveButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InlineAction_1 = require("../../InlineAction");
+const icon = {
+    height: 14,
+};
+const SchemaSaveButton = ({ onClick }) => {
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" }) }) }));
+};
+exports.SchemaSaveButton = SchemaSaveButton;

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

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

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodArrayEditor = 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 ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const layout_2 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
+const container = {
+    width: '100%',
+};
+const fullWidth = {
+    width: '100%',
+};
+// TODO: Ability to add another item
+const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, }) => {
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+            revision: 0,
+        };
+    });
+    const def = schema._def;
+    const typeName = def.typeName;
+    if (typeName !== remotion_1.z.ZodFirstPartyTypeKind.ZodArray) {
+        throw new Error('expected object');
+    }
+    const isRoot = jsonPath.length === 0;
+    const Element = isRoot ? 'div' : 'fieldset';
+    const { paddingTop } = layout_2.optionRow;
+    const fieldset = (0, react_1.useMemo)(() => {
+        return {
+            borderRadius: 4,
+            borderColor: localValue.zodValidation.success
+                ? colors_1.INPUT_BORDER_COLOR_UNHOVERED
+                : colors_1.FAIL_COLOR,
+        };
+    }, [localValue.zodValidation.success]);
+    const onChange = (0, react_1.useCallback)((updater, incrementRevision) => {
+        setLocalValue((oldLocalState) => {
+            const newValue = updater(oldLocalState.value);
+            const safeParse = schema.safeParse(newValue);
+            if (safeParse.success) {
+                updateValue(updater);
+            }
+            return {
+                revision: oldLocalState.revision + (incrementRevision ? 1 : 0),
+                value: newValue,
+                zodValidation: safeParse,
+            };
+        });
+    }, [schema, updateValue]);
+    const style = (0, react_1.useMemo)(() => {
+        if (isRoot) {
+            return undefined;
+        }
+        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: localValue.value.map((child, i) => {
+                            return ((0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor
+                            // eslint-disable-next-line react/no-array-index-key
+                            , { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, compact: compact, defaultValue: defaultValue[i], onSave: onSave, showSaveButton: showSaveButton }, `${i}${localValue.revision}`));
+                        }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] }) }) }));
+};
+exports.ZodArrayEditor = ZodArrayEditor;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { JSONPath } from './zod-types';
+export declare const ZodArrayItemEditor: React.FC<{
+    jsonPath: JSONPath;
+    onChange: (updater: (oldV: unknown[]) => unknown[], incrementRevision: boolean) => void;
+    def: any;
+    index: number;
+    value: unknown;
+    compact: boolean;
+    defaultValue: unknown;
+    onSave: (updater: (oldState: unknown[]) => unknown[]) => void;
+    showSaveButton: boolean;
+}>;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodArrayItemEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ZodSwitch_1 = require("./ZodSwitch");
+const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, compact, defaultValue, onSave: onSaveObject, showSaveButton, }) => {
+    const onRemove = (0, react_1.useCallback)(() => {
+        onChange((oldV) => [...oldV.slice(0, index), ...oldV.slice(index + 1)], true);
+    }, [index, onChange]);
+    const setValue = (0, react_1.useCallback)((val) => {
+        onChange((oldV) => [
+            ...oldV.slice(0, index),
+            typeof val === 'function' ? val(oldV[index]) : val,
+            ...oldV.slice(index + 1),
+        ], false);
+    }, [index, onChange]);
+    const newJsonPath = (0, react_1.useMemo)(() => [...jsonPath, index], [index, jsonPath]);
+    const onSave = (0, react_1.useCallback)((updater) => {
+        onSaveObject((oldV) => [
+            ...oldV.slice(0, index),
+            updater(oldV[index]),
+            ...oldV.slice(index + 1),
+        ]);
+    }, [index, onSaveObject]);
+    return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: def.type, value: value, setValue: setValue, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }));
+};
+exports.ZodArrayItemEditor = ZodArrayItemEditor;

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

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

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodBooleanEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../../Checkbox");
+const layout_1 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const fullWidth = {
+    width: '100%',
+};
+const ZodBooleanEditor = ({ jsonPath, value, setValue, onSave, compact, defaultValue, onRemove, showSaveButton, }) => {
+    const onValueChange = (0, react_1.useCallback)((newValue) => {
+        setValue(newValue);
+    }, [setValue]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        onValueChange(e.target.checked);
+    }, [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_1.narrowOption : layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: value, onChange: onChange, disabled: false }) })] }));
+};
+exports.ZodBooleanEditor = ZodBooleanEditor;

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

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

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodDateEditor = 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 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 explainer = {
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    color: colors_1.LIGHT_TEXT,
+};
+// This will do 2 things:
+// - Make the calendar icon white
+// Turn the input popup a dark mode input
+const inputStyle = {
+    colorScheme: 'dark',
+};
+const formatDate = (date) => {
+    // Get the year, month, day, hours, minutes, seconds, and milliseconds
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1; // Month is zero-indexed, so we add 1
+    const day = date.getDate();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const milliseconds = date.getMilliseconds();
+    // Format the date as a string
+    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day
+        .toString()
+        .padStart(2, '0')}T${hours.toString().padStart(2, '0')}:${minutes
+        .toString()
+        .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds
+        .toString()
+        .padStart(3, '0')}`;
+    return formattedDate;
+};
+const ZodDateEditor = ({ 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) => {
+        // React does not support e.target.valueAsDate :(
+        onValueChange(new Date(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.getTime() === defaultValue.getTime(), 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: formatDate(localValue.value), type: "datetime-local", status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, style: inputStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: explainer, children: "Date is in local format" }), !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.ZodDateEditor = ZodDateEditor;

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

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

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodEffectEditor = 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 ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const ZodSwitch_1 = require("./ZodSwitch");
+const fullWidth = {
+    width: '100%',
+};
+const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, compact, defaultValue, onSave, onRemove, showSaveButton, }) => {
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+        };
+    });
+    const def = schema._def;
+    const typeName = def.typeName;
+    if (typeName !== remotion_1.z.ZodFirstPartyTypeKind.ZodEffects) {
+        throw new Error('expected effect');
+    }
+    const onChange = (0, react_1.useCallback)((newValue) => {
+        setLocalValue(() => {
+            const safeParse = schema.safeParse(newValue);
+            if (safeParse.success) {
+                updateValue(() => newValue);
+            }
+            return {
+                value: newValue,
+                zodValidation: safeParse,
+            };
+        });
+    }, [schema, updateValue]);
+    const container = (0, react_1.useMemo)(() => {
+        if (!localValue.zodValidation.success) {
+            return {
+                border: `1px solid ${colors_1.FAIL_COLOR}`,
+                borderRadius: 4,
+            };
+        }
+        return {
+            border: 'none',
+            padding: 0,
+        };
+    }, [localValue.zodValidation.success]);
+    return ((0, jsx_runtime_1.jsxs)("fieldset", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onChange, jsonPath: jsonPath, schema: def.schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsx)("legend", { children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: localValue.zodValidation.error.format()._errors[0], type: "error" }) }))] }));
+};
+exports.ZodEffectEditor = ZodEffectEditor;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { z } from 'remotion';
+export declare const ZodErrorMessages: React.FC<{
+    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
+}>;