@remotion/cli 4.0.84 → 4.0.85

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

@@ -1,143 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderModalJSONPropsEditor = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const no_react_1 = require("remotion/no-react");
-const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
-const colors_1 = require("../../helpers/colors");
-const document_title_1 = require("../../helpers/document-title");
-const use_keybinding_1 = require("../../helpers/use-keybinding");
-const layout_1 = require("../layout");
-const RemTextarea_1 = require("../NewComposition/RemTextarea");
-const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
-const deep_equal_1 = require("./SchemaEditor/deep-equal");
-const ZodErrorMessages_1 = require("./SchemaEditor/ZodErrorMessages");
-const style = {
-    fontFamily: 'monospace',
-    flex: 1,
-};
-const scrollable = {
-    padding: '8px 12px',
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-};
-const parseJSON = (str, schema) => {
-    try {
-        const value = no_react_1.NoReactInternals.deserializeJSONWithCustomFields(str);
-        const zodValidation = schema.safeParse(value);
-        return { str, value, validJSON: true, zodValidation };
-    }
-    catch (e) {
-        return { str, validJSON: false, error: e.message };
-    }
-};
-const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, showSaveButton, serializedJSON, schema, }) => {
-    if (serializedJSON === null) {
-        throw new Error('expecting serializedJSON to be defined');
-    }
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const [localValue, setLocalValue] = react_1.default.useState(() => {
-        return parseJSON(serializedJSON.serializedString, schema);
-    });
-    const onPretty = (0, react_1.useCallback)(() => {
-        if (!localValue.validJSON) {
-            return;
-        }
-        const parsed = JSON.parse(localValue.str);
-        setLocalValue({ ...localValue, str: JSON.stringify(parsed, null, 2) });
-    }, [localValue, setLocalValue]);
-    const onChange = (0, react_1.useCallback)((e) => {
-        const parsed = parseJSON(e.target.value, schema);
-        if (parsed.validJSON) {
-            const validationResult = schema.safeParse(parsed.value);
-            setLocalValue({
-                str: e.target.value,
-                value: parsed.value,
-                validJSON: parsed.validJSON,
-                zodValidation: validationResult,
-            });
-            if (validationResult.success) {
-                setValue(parsed.value);
-            }
-        }
-        else {
-            setLocalValue({
-                str: e.target.value,
-                validJSON: parsed.validJSON,
-                error: parsed.error,
-            });
-        }
-    }, [schema, setValue]);
-    const hasChanged = (0, react_1.useMemo)(() => {
-        return !(0, deep_equal_1.deepEqual)(value, defaultProps);
-    }, [defaultProps, value]);
-    (0, react_1.useEffect)(() => {
-        (0, document_title_1.setUnsavedProps)(hasChanged);
-    }, [hasChanged]);
-    const onQuickSave = (0, react_1.useCallback)(() => {
-        if (hasChanged) {
-            onSave();
-        }
-    }, [hasChanged, onSave]);
-    // If schema is changed in code
-    (0, react_1.useEffect)(() => {
-        setLocalValue(parseJSON(localValue.str, schema));
-    }, [localValue.str, schema]);
-    (0, react_1.useEffect)(() => {
-        const save = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 's',
-            commandCtrlKey: true,
-            callback: onQuickSave,
-            preventDefault: true,
-            triggerIfInputFieldFocused: true,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            save.unregister();
-        };
-    }, [keybindings, onQuickSave, onSave]);
-    const reset = (0, react_1.useCallback)(() => {
-        setValue(defaultProps);
-        setLocalValue(parseJSON(JSON.stringify(defaultProps, null, 2), schema));
-    }, [defaultProps, schema, setValue]);
-    const textAreaStyle = (0, react_1.useMemo)(() => {
-        const fail = !localValue.validJSON || !localValue.zodValidation.success;
-        if (!fail) {
-            return style;
-        }
-        return {
-            ...style,
-            borderColor: colors_1.FAIL_COLOR,
-        };
-    }, [localValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: scrollable, children: [(0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: onChange, value: localValue.str, status: localValue.validJSON ? 'ok' : 'error', style: textAreaStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), localValue.validJSON === false ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.error, type: "error" })) : localValue.zodValidation.success === false ? ((0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: localValue.zodValidation, viewTab: "json" })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !(hasChanged || !localValue.validJSON), onClick: reset, children: "Reset" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: !localValue.validJSON, onClick: onPretty, children: "Format" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), showSaveButton ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, disabled: !(localValue.validJSON && localValue.zodValidation.success) ||
-                            !localValue.validJSON ||
-                            !hasChanged, children: "Save" })) : null] })] }));
-};
-exports.RenderModalJSONPropsEditor = RenderModalJSONPropsEditor;

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

@@ -1,35 +0,0 @@
-import type { ColorSpace, PixelFormat, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
-import React from 'react';
-import type { ComboboxValue } from '../NewComposition/ComboBox';
-import type { SegmentedControlItem } from '../SegmentedControl';
-import type { RenderType } from './RenderModalAdvanced';
-declare const qualityControlModes: readonly ["crf", "bitrate"];
-export type QualityControl = (typeof qualityControlModes)[number];
-export declare const RenderModalPicture: React.FC<{
-    renderMode: RenderType;
-    scale: number;
-    setScale: React.Dispatch<React.SetStateAction<number>>;
-    pixelFormat: PixelFormat;
-    colorSpace: ColorSpace;
-    setColorSpace: React.Dispatch<React.SetStateAction<ColorSpace>>;
-    imageFormatOptions: SegmentedControlItem[];
-    setQualityControl: React.Dispatch<React.SetStateAction<QualityControl>>;
-    qualityControlType: QualityControl | null;
-    videoImageFormat: VideoImageFormat;
-    stillImageFormat: StillImageFormat;
-    setJpegQuality: React.Dispatch<React.SetStateAction<number>>;
-    jpegQuality: number;
-    maxCrf: number;
-    minCrf: number;
-    setCrf: React.Dispatch<React.SetStateAction<number>>;
-    setCustomTargetVideoBitrateValue: React.Dispatch<React.SetStateAction<string>>;
-    crf: number;
-    customTargetVideoBitrate: string;
-    shouldDisplayQualityControlPicker: boolean;
-    pixelFormatOptions: ComboboxValue[];
-    encodingBufferSize: string | null;
-    setEncodingBufferSize: React.Dispatch<React.SetStateAction<string | null>>;
-    encodingMaxRate: string | null;
-    setEncodingMaxRate: React.Dispatch<React.SetStateAction<string | null>>;
-}>;
-export {};

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

@@ -1,71 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderModalPicture = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const client_1 = require("@remotion/renderer/client");
-const react_1 = require("react");
-const Checkmark_1 = require("../../icons/Checkmark");
-const Checkbox_1 = require("../Checkbox");
-const layout_1 = require("../layout");
-const is_menu_item_1 = require("../Menu/is-menu-item");
-const ComboBox_1 = require("../NewComposition/ComboBox");
-const RemInput_1 = require("../NewComposition/RemInput");
-const SegmentedControl_1 = require("../SegmentedControl");
-const CrfSetting_1 = require("./CrfSetting");
-const JpegQualitySetting_1 = require("./JpegQualitySetting");
-const layout_2 = require("./layout");
-const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
-const RenderModalHr_1 = require("./RenderModalHr");
-const ScaleSetting_1 = require("./ScaleSetting");
-const qualityControlModes = ['crf', 'bitrate'];
-const container = {
-    flex: 1,
-    overflowY: 'auto',
-};
-const RenderModalPicture = ({ renderMode, scale, setScale, pixelFormat, imageFormatOptions, setQualityControl, qualityControlType, videoImageFormat, setJpegQuality, jpegQuality, maxCrf, minCrf, setCrf, shouldDisplayQualityControlPicker, setCustomTargetVideoBitrateValue, crf, customTargetVideoBitrate, stillImageFormat, colorSpace, setColorSpace, pixelFormatOptions, encodingBufferSize, encodingMaxRate, setEncodingBufferSize, setEncodingMaxRate, }) => {
-    const colorSpaceOptions = (0, react_1.useMemo)(() => {
-        return client_1.BrowserSafeApis.validColorSpaces.map((option) => {
-            return {
-                label: option,
-                onClick: () => setColorSpace(option),
-                key: option,
-                id: option,
-                keyHint: null,
-                leftItem: colorSpace === option ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: option,
-            };
-        });
-    }, [colorSpace, setColorSpace]);
-    const qualityControlOptions = (0, react_1.useMemo)(() => {
-        return qualityControlModes.map((option) => {
-            return {
-                label: option === 'crf' ? 'CRF' : 'Bitrate',
-                onClick: () => setQualityControl(option),
-                key: option,
-                selected: qualityControlType === option,
-            };
-        });
-    }, [qualityControlType, setQualityControl]);
-    const onTargetVideoBitrateChanged = (0, react_1.useCallback)((e) => {
-        setCustomTargetVideoBitrateValue(e.target.value);
-    }, [setCustomTargetVideoBitrateValue]);
-    const onEncodingBufferSizeToggled = (0, react_1.useCallback)((e) => {
-        setEncodingBufferSize(e.target.checked ? '10000k' : null);
-    }, [setEncodingBufferSize]);
-    const onEncodingMaxRateToggled = (0, react_1.useCallback)((e) => {
-        setEncodingMaxRate(e.target.checked ? '5000k' : null);
-    }, [setEncodingMaxRate]);
-    const onEncodingBufferSizeChanged = (0, react_1.useCallback)((e) => {
-        setEncodingBufferSize(e.target.value);
-    }, [setEncodingBufferSize]);
-    const onEncodingMaxRateChanged = (0, react_1.useCallback)((e) => {
-        setEncodingMaxRate(e.target.value);
-    }, [setEncodingMaxRate]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Image Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.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, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'still' && stillImageFormat === 'jpeg' && ((0, jsx_runtime_1.jsx)(JpegQualitySetting_1.JpegQualitySetting, { jpegQuality: jpegQuality, setJpegQuality: setJpegQuality })), renderMode === 'video' && qualityControlType !== null ? ((0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {})) : null, shouldDisplayQualityControlPicker && renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Quality control" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })] })) : null, qualityControlType === 'crf' &&
-                renderMode !== 'still' &&
-                renderMode !== 'sequence' ? ((0, jsx_runtime_1.jsx)(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: "crfOption" })) : null, qualityControlType === 'bitrate' && renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Target video bitrate", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoBitrate" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok", rightAlign: true }) }) })] })) : null, renderMode === 'video' ? ((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: ["Custom FFmpeg -bufsize", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingBufferSizeOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: encodingBufferSize !== null, onChange: onEncodingBufferSizeToggled, name: "encoding-buffer-size" }) })] }), encodingBufferSize === null ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "-bufsize value" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingBufferSize, onChange: onEncodingBufferSizeChanged, status: "ok", rightAlign: true }) }) })] })), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Custom FFmpeg -maxrate", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingMaxRateOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: encodingMaxRate !== null, onChange: onEncodingMaxRateToggled, name: "encoding-max-rate" }) })] }), encodingMaxRate === null ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "-maxrate value" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingMaxRate, onChange: onEncodingMaxRateChanged, status: "ok", rightAlign: true }) }) })] }))] })) : 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_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Pixel format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })] })) : null, renderMode === 'video' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Color space", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(OptionExplainerBubble_1.OptionExplainerBubble, { id: "colorSpaceOption" })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: colorSpaceOptions, selectedId: colorSpace, title: "Color Space" }) })] })) : null] }));
-};
-exports.RenderModalPicture = RenderModalPicture;

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

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

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

@@ -1,70 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-const make_retry_payload_1 = require("../../../preview-server/render-queue/make-retry-payload");
-const modals_1 = require("../../state/modals");
-const layout_1 = require("../layout");
-const is_menu_item_1 = require("../Menu/is-menu-item");
-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: 900,
-    paddingTop: 0,
-};
-const codeBlock = {
-    backgroundColor: '#222',
-    whiteSpace: 'pre',
-    padding: 12,
-    borderRadius: 4,
-    fontFamily: 'monospace',
-    overflow: 'auto',
-    maxHeight: 300,
-};
-const spacer = {
-    height: layout_1.SPACING_UNIT,
-    width: layout_1.SPACING_UNIT,
-};
-const buttonRow = {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-};
-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]);
-    const onRetry = (0, react_1.useCallback)(() => {
-        const retryPayload = (0, make_retry_payload_1.makeRetryPayload)(job);
-        setSelectedModal(retryPayload);
-    }, [job, setSelectedModal]);
-    const onClickOnRemove = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-        (0, actions_1.removeRenderJob)(job).catch((err) => {
-            (0, NotificationCenter_1.sendErrorNotification)(`Could not remove job: ${err.message}`);
-        });
-    }, [job, setSelectedModal]);
-    const onClickOnCancel = (0, react_1.useCallback)(() => {
-        (0, actions_1.cancelRenderJob)(job).catch((err) => {
-            (0, NotificationCenter_1.sendErrorNotification)(`Could not cancel job: ${err.message}`);
-        });
-    }, [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: [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: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, 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.RenderStatusModal = RenderStatusModal;

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const ScaleSetting: React.FC<{
-    scale: number;
-    setScale: (value: React.SetStateAction<number>) => void;
-}>;

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

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScaleSetting = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const NumberSetting_1 = require("./NumberSetting");
-const MIN_SCALE = 0.1;
-const MAX_SCALE = 10;
-const ScaleSetting = ({ scale, setScale }) => {
-    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: 'scaleOption' }));
-};
-exports.ScaleSetting = ScaleSetting;

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

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare const SCHEMA_EDITOR_FIELDSET_PADDING = 10;
-export declare const Fieldset: React.FC<{
-    children: React.ReactNode;
-    success: boolean;
-    shouldPad: boolean;
-}>;

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

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Fieldset = exports.SCHEMA_EDITOR_FIELDSET_PADDING = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-exports.SCHEMA_EDITOR_FIELDSET_PADDING = 10;
-const AlreadyPaddedRightContext = (0, react_1.createContext)(false);
-const Fieldset = ({ children, shouldPad }) => {
-    const alreadyPadded = (0, react_1.useContext)(AlreadyPaddedRightContext);
-    const style = (0, react_1.useMemo)(() => {
-        if (shouldPad) {
-            return {
-                padding: exports.SCHEMA_EDITOR_FIELDSET_PADDING,
-                paddingTop: exports.SCHEMA_EDITOR_FIELDSET_PADDING / 2,
-                paddingRight: alreadyPadded ? 0 : exports.SCHEMA_EDITOR_FIELDSET_PADDING,
-            };
-        }
-        return {};
-    }, [alreadyPadded, shouldPad]);
-    const content = (0, jsx_runtime_1.jsx)("div", { style: style, children: children });
-    if (shouldPad) {
-        return ((0, jsx_runtime_1.jsx)(AlreadyPaddedRightContext.Provider, { value: true, children: content }));
-    }
-    return content;
-};
-exports.Fieldset = Fieldset;

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { AnyZodObject, z } from 'zod';
-export declare const SchemaEditor: React.FC<{
-    schema: AnyZodObject;
-    value: Record<string, unknown>;
-    setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
-    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
-    defaultProps: Record<string, unknown>;
-    onSave: (updater: (oldState: Record<string, unknown>) => Record<string, unknown>) => void;
-    showSaveButton: boolean;
-    saving: boolean;
-    saveDisabledByParent: boolean;
-}>;

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

@@ -1,69 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SchemaEditor = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const document_title_1 = require("../../../helpers/document-title");
-const use_keybinding_1 = require("../../../helpers/use-keybinding");
-const get_zod_if_possible_1 = require("../../get-zod-if-possible");
-const is_menu_item_1 = require("../../Menu/is-menu-item");
-const deep_equal_1 = require("./deep-equal");
-const SchemaErrorMessages_1 = require("./SchemaErrorMessages");
-const ZodObjectEditor_1 = require("./ZodObjectEditor");
-const scrollable = {
-    display: 'flex',
-    flexDirection: 'column',
-    overflowY: 'auto',
-};
-const SchemaEditor = ({ schema, value, setValue, zodValidationResult, defaultProps, onSave, showSaveButton, saving, saveDisabledByParent, }) => {
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
-    if (!z) {
-        throw new Error('expected zod');
-    }
-    const hasChanged = (0, react_1.useMemo)(() => {
-        return !(0, deep_equal_1.deepEqual)(defaultProps, value);
-    }, [defaultProps, value]);
-    (0, react_1.useEffect)(() => {
-        (0, document_title_1.setUnsavedProps)(hasChanged);
-    }, [hasChanged]);
-    const onQuickSave = (0, react_1.useCallback)(() => {
-        if (hasChanged && showSaveButton) {
-            onSave(() => {
-                return value;
-            });
-        }
-    }, [hasChanged, onSave, showSaveButton, value]);
-    (0, react_1.useEffect)(() => {
-        const save = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 's',
-            commandCtrlKey: true,
-            callback: onQuickSave,
-            preventDefault: true,
-            triggerIfInputFieldFocused: true,
-            keepRegisteredWhenNotHighestContext: true,
-        });
-        return () => {
-            save.unregister();
-        };
-    }, [keybindings, onQuickSave, onSave]);
-    const def = schema._def;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const typeName = def.typeName;
-    const reset = (0, react_1.useCallback)(() => {
-        setValue(defaultProps);
-    }, [defaultProps, setValue]);
-    if (!zodValidationResult.success) {
-        const defaultPropsValid = schema.safeParse(defaultProps);
-        if (!defaultPropsValid.success) {
-            return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.InvalidDefaultProps, { zodValidationResult: zodValidationResult });
-        }
-        return ((0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.InvalidSchema, { reset: reset, zodValidationResult: zodValidationResult }));
-    }
-    if (typeName !== z.ZodFirstPartyTypeKind.ZodObject) {
-        return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, value: value, setValue: setValue, jsonPath: [], schema: schema, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: true }) }));
-};
-exports.SchemaEditor = SchemaEditor;

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

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import type { z } from 'zod';
-export declare const ZodNotInstalled: () => JSX.Element;
-export declare const NoSchemaDefined: () => JSX.Element;
-export declare const NoDefaultProps: () => JSX.Element;
-export declare const InvalidDefaultProps: React.FC<{
-    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
-}>;
-export declare const InvalidSchema: React.FC<{
-    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
-    reset: () => void;
-}>;
-export declare const TopLevelZodValue: React.FC<{
-    typeReceived: string;
-}>;

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

@@ -1,60 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopLevelZodValue = exports.InvalidSchema = exports.InvalidDefaultProps = exports.NoDefaultProps = exports.NoSchemaDefined = exports.ZodNotInstalled = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_1 = require("../../../../preview-server/error-overlay/remotion-overlay/Button");
-const colors_1 = require("../../../helpers/colors");
-const layout_1 = require("../../layout");
-const styles_1 = require("../../Menu/styles");
-const ZodErrorMessages_1 = require("./ZodErrorMessages");
-const explainer = {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    padding: '0 12px',
-    justifyContent: 'center',
-    alignItems: 'center',
-    textAlign: 'center',
-};
-const errorExplanation = {
-    fontSize: 14,
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    lineHeight: 1.5,
-};
-const codeSnippet = {
-    fontSize: 14,
-    color: colors_1.BLUE,
-    fontFamily: 'monospace',
-};
-const errorContainer = {
-    padding: '8px 12px',
-    overflowY: 'auto',
-};
-const openDocs = () => {
-    window.open('https://www.remotion.dev/docs/parameterized-rendering#define-a-schema-');
-};
-const ZodNotInstalled = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Install ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "zod" }), " as a dependency to interactively control the props of the composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));
-};
-exports.ZodNotInstalled = ZodNotInstalled;
-const NoSchemaDefined = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Make the props of this composition interactively editable by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "schema" }), " prop to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " component."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));
-};
-exports.NoSchemaDefined = NoSchemaDefined;
-const NoDefaultProps = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " does not exist."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop to your composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn more" })] }));
-};
-exports.NoDefaultProps = NoDefaultProps;
-const InvalidDefaultProps = ({ zodValidationResult }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " is not valid:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult, viewTab: "schema" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in your composition so it does not give a type error."] })] }));
-};
-exports.InvalidDefaultProps = InvalidDefaultProps;
-const InvalidSchema = ({ zodValidationResult, reset }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, 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, viewTab: "schema" }), (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." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
-};
-exports.InvalidSchema = InvalidSchema;
-const TopLevelZodValue = ({ typeReceived }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The top-level type of the schema must be a pure", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "z.object" }), ". Instead got a schema of type", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: typeReceived })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema by changing the top-level Zod type to an object." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn more" })] }));
-};
-exports.TopLevelZodValue = TopLevelZodValue;

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

@@ -1,15 +0,0 @@
-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;
-    saving: boolean;
-    valid: boolean;
-    saveDisabledByParent: boolean;
-    suffix: string | null;
-    handleClick: null | (() => void);
-}>;

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

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SchemaLabel = 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 InlineRemoveButton_1 = require("../InlineRemoveButton");
-const get_schema_label_1 = require("./get-schema-label");
-const SchemaResetButton_1 = require("./SchemaResetButton");
-const SchemaSaveButton_1 = require("./SchemaSaveButton");
-const compactStyles = {
-    fontSize: 15,
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-};
-const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton, onRemove, saving, valid, saveDisabledByParent, suffix, handleClick, }) => {
-    const [clickableButtonHovered, setClickableButtonHovered] = (0, react_1.useState)(false);
-    const disableSave = saving || !valid || saveDisabledByParent;
-    const labelStyle = (0, react_1.useMemo)(() => {
-        return {
-            fontFamily: 'monospace',
-            fontSize: 14,
-            color: valid
-                ? clickableButtonHovered
-                    ? 'white'
-                    : colors_1.LIGHT_TEXT
-                : colors_1.FAIL_COLOR,
-            lineHeight: '24px',
-        };
-    }, [clickableButtonHovered, valid]);
-    const onClickablePointerEnter = (0, react_1.useCallback)(() => {
-        setClickableButtonHovered(true);
-    }, []);
-    const onClickablePointerLeave = (0, react_1.useCallback)(() => {
-        setClickableButtonHovered(false);
-    }, []);
-    const labelContent = ((0, jsx_runtime_1.jsxs)("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }));
-    return ((0, jsx_runtime_1.jsxs)("div", { style: compactStyles, children: [handleClick ? (
-            // Minus the padding that a button has (user agent padding-line-start)
-            (0, jsx_runtime_1.jsx)("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', marginLeft: -6 }, children: labelContent })) : (labelContent), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), 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, disabled: disableSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
-};
-exports.SchemaLabel = SchemaLabel;

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

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