@remotion/studio 4.0.506 → 4.0.507

package/dist/api/copy-render-output-to-asset.d.ts

@@ -0,0 +1,4 @@
+export declare const copyRenderOutputToAsset: ({ outputPath, assetPath, }: {
+    outputPath: string;
+    assetPath: string;
+}) => Promise<import("@remotion/studio-shared").CopyRenderOutputToAssetResponse>;

package/dist/api/copy-render-output-to-asset.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyRenderOutputToAsset = void 0;
+const call_api_1 = require("../components/call-api");
+const copyRenderOutputToAsset = ({ outputPath, assetPath, }) => {
+    return (0, call_api_1.callApi)('/api/copy-render-output-to-asset', {
+        outputPath,
+        assetPath,
+    });
+};
+exports.copyRenderOutputToAsset = copyRenderOutputToAsset;

package/dist/components/AssetSelector.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const copy_render_output_to_asset_1 = require("../api/copy-render-output-to-asset");
 const write_static_file_1 = require("../api/write-static-file");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
@@ -109,25 +110,39 @@ const AssetSelector = ({ readOnlyStudio }) => {
         setDropLocation,
     });
     const onDragOver = (0, react_1.useCallback)((e) => {
-        if (!(0, use_asset_drag_events_1.isFileDragEvent)(e)) {
+        if (!(0, use_asset_drag_events_1.isAssetUploadDragEvent)(e)) {
             return;
         }
         e.preventDefault();
     }, []);
     const onDrop = (0, react_1.useCallback)(async (e) => {
         try {
-            if (!(0, use_asset_drag_events_1.isFileDragEvent)(e)) {
+            if (!(0, use_asset_drag_events_1.isAssetUploadDragEvent)(e)) {
                 setDropLocation(null);
                 return;
             }
             e.preventDefault();
             e.stopPropagation();
+            const assetPath = dropLocation !== null && dropLocation !== void 0 ? dropLocation : null;
+            const renderOutput = (0, use_asset_drag_events_1.getRenderOutputDragData)(e.dataTransfer);
+            if (renderOutput) {
+                const destination = [assetPath, renderOutput.fileName]
+                    .filter(Boolean)
+                    .join('/');
+                const result = await (0, copy_render_output_to_asset_1.copyRenderOutputToAsset)({
+                    outputPath: renderOutput.outputPath,
+                    assetPath: destination,
+                });
+                (0, NotificationCenter_1.showNotification)(result.created
+                    ? `Created ${destination}`
+                    : `${destination} already exists`, 3000);
+                return;
+            }
             const { files } = e.dataTransfer;
             if (files.length === 0) {
                 setDropLocation(null);
                 return;
             }
-            const assetPath = dropLocation !== null && dropLocation !== void 0 ? dropLocation : null;
             const makePath = (file) => {
                 return [assetPath, file.name].filter(Boolean).join('/');
             };
@@ -161,7 +176,7 @@ const AssetSelector = ({ readOnlyStudio }) => {
             setDropLocation(null);
         }
     }, [dropLocation, staticFiles]);
-    return (jsx_runtime_1.jsxs("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: [
+    return (jsx_runtime_1.jsxs("div", { "data-asset-selector": true, style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: [
             jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "assets", showShortcut: true, tabIndex: tabIndex }), staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {

package/dist/components/AssetSelectorItem.js

@@ -226,7 +226,7 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dr
             backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
         }, children: [
             jsx_runtime_1.jsx("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, onDragEnter: (event) => {
-                    if (!(0, use_asset_drag_events_1.isFileDragEvent)(event)) {
+                    if (!(0, use_asset_drag_events_1.isAssetUploadDragEvent)(event)) {
                         return;
                     }
                     if (!item.expanded) {
@@ -235,7 +235,7 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dr
                         }, 1000);
                     }
                 }, onDragLeave: (event) => {
-                    if (!(0, use_asset_drag_events_1.isFileDragEvent)(event)) {
+                    if (!(0, use_asset_drag_events_1.isAssetUploadDragEvent)(event)) {
                         return;
                     }
                     if (openFolderTimerRef.current) {

package/dist/components/CodingAgentIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const CodingAgentIcon: React.FC<{
+    readonly iconDataUrl: string | null;
+}>;

package/dist/components/CodingAgentIcon.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodingAgentIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const apps_1 = require("../icons/apps");
+const iconStyle = {
+    flexShrink: 0,
+    height: 18,
+    width: 18,
+};
+const CodingAgentIcon = ({ iconDataUrl }) => {
+    if (iconDataUrl === null) {
+        return jsx_runtime_1.jsx(apps_1.AppsIcon, { height: 18, width: 18 });
+    }
+    return (jsx_runtime_1.jsx("img", { alt: "", "aria-hidden": true, draggable: false, src: iconDataUrl, style: iconStyle }));
+};
+exports.CodingAgentIcon = CodingAgentIcon;

package/dist/components/ConfigureDefaultEditorModal.d.ts

@@ -1,4 +1,2 @@
 import React from 'react';
-export declare const DefaultEditorSettings: React.FC<{
-    readonly onSaved: () => void;
-}>;
+export declare const DefaultEditorSettings: React.FC;

package/dist/components/ConfigureDefaultEditorModal.js

@@ -5,13 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const Checkmark_1 = require("../icons/Checkmark");
-const custom_editor_1 = require("../icons/custom-editor");
-const call_api_1 = require("./call-api");
+const editor_1 = require("../icons/editor");
+const CodingAgentIcon_1 = require("./CodingAgentIcon");
 const layout_1 = require("./layout");
-const ModalButton_1 = require("./ModalButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
-const SettingsModalFooter_1 = require("./SettingsModalFooter");
+const SettingsContext_1 = require("./SettingsContext");
+const use_auto_save_config_1 = require("./use-auto-save-config");
 const container = {
     display: 'flex',
     flex: 1,
@@ -30,7 +30,7 @@ const description = {
     margin: 0,
 };
 const title = {
-    color: colors_1.WHITE,
+    color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
     fontSize: 14,
     lineHeight: 1.5,
@@ -40,8 +40,8 @@ const comboBoxStyle = {
     boxSizing: 'border-box',
     width: '100%',
 };
-const customEditorLabel = {
-    display: 'inline-flex',
+const appLabel = {
+    display: 'flex',
     alignItems: 'center',
     gap: 8,
     maxWidth: '100%',
@@ -51,7 +51,7 @@ const customEditorLabel = {
     fontSize: 'inherit',
     lineHeight: 'inherit',
 };
-const customEditorName = {
+const appName = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -62,12 +62,11 @@ const customEditorName = {
     lineHeight: 'inherit',
 };
 const NO_PREFERENCE_ID = 'no-preference';
-const DefaultEditorSettings = ({ onSaved }) => {
-    const [editorInfo, setEditorInfo] = (0, react_1.useState)(null);
-    const [codingAgentInfo, setCodingAgentInfo] = (0, react_1.useState)(null);
+const DefaultEditorSettings = () => {
+    const { codingAgentInfo, editorInfo, error: settingsError, revision, } = (0, SettingsContext_1.useSettings)();
     const [selectedEditor, setSelectedEditor] = (0, react_1.useState)(null);
     const [selectedCodingAgent, setSelectedCodingAgent] = (0, react_1.useState)(null);
-    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [syncedRevision, setSyncedRevision] = (0, react_1.useState)(-1);
     const [error, setError] = (0, react_1.useState)(null);
     const editorValues = (0, react_1.useMemo)(() => {
         var _a;
@@ -89,9 +88,9 @@ const DefaultEditorSettings = ({ onSaved }) => {
             return {
                 id: editor.id,
                 keyHint: null,
-                label: editor.id === 'custom' ? (jsx_runtime_1.jsxs("span", { style: customEditorLabel, children: [
-                        jsx_runtime_1.jsx(custom_editor_1.CustomEditorIcon, { size: null }), jsx_runtime_1.jsx("span", { style: customEditorName, children: editor.name })
-                    ] })) : (editor.name),
+                label: (jsx_runtime_1.jsxs("span", { style: appLabel, children: [
+                        jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editor.id, size: 18 }), jsx_runtime_1.jsx("span", { style: appName, children: editor.name })
+                    ] })),
                 leftItem: selectedEditor === editor.id ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 onClick: () => {
                     setSelectedEditor(editor.id);
@@ -125,7 +124,9 @@ const DefaultEditorSettings = ({ onSaved }) => {
             return {
                 id: codingAgent.id,
                 keyHint: null,
-                label: codingAgent.name,
+                label: (jsx_runtime_1.jsxs("span", { style: appLabel, children: [
+                        jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { iconDataUrl: codingAgent.iconDataUrl }), jsx_runtime_1.jsx("span", { style: appName, children: codingAgent.name })
+                    ] })),
                 leftItem: selectedCodingAgent === codingAgent.id ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 onClick: () => {
                     setSelectedCodingAgent(codingAgent.id);
@@ -140,70 +141,59 @@ const DefaultEditorSettings = ({ onSaved }) => {
         return [noPreference, ...installedCodingAgents];
     }, [codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents, selectedCodingAgent]);
     (0, react_1.useEffect)(() => {
-        const controller = new AbortController();
-        Promise.all([
-            (0, call_api_1.callApi)('/api/default-editor-info', {}, controller.signal),
-            (0, call_api_1.callApi)('/api/default-coding-agent-info', {}, controller.signal),
-        ])
-            .then(([editorResponse, codingAgentResponse]) => {
-            setEditorInfo(editorResponse);
-            setSelectedEditor(editorResponse.defaultEditor !== null &&
-                editorResponse.installedEditors.some(({ id }) => id === editorResponse.defaultEditor)
-                ? editorResponse.defaultEditor
-                : null);
-            setCodingAgentInfo(codingAgentResponse);
-            setSelectedCodingAgent(codingAgentResponse.defaultCodingAgent !== null &&
-                codingAgentResponse.installedCodingAgents.some(({ id }) => id === codingAgentResponse.defaultCodingAgent)
-                ? codingAgentResponse.defaultCodingAgent
-                : null);
-        })
-            .catch((err) => {
-            if (controller.signal.aborted) {
-                return;
-            }
-            setError(err.message);
-        });
-        return () => controller.abort();
-    }, []);
-    const submit = (0, react_1.useCallback)(async () => {
         if (editorInfo === null || codingAgentInfo === null) {
             return;
         }
-        setIsSubmitting(true);
+        setSelectedEditor(editorInfo.defaultEditor !== null &&
+            editorInfo.installedEditors.some(({ id }) => id === editorInfo.defaultEditor)
+            ? editorInfo.defaultEditor
+            : null);
+        setSelectedCodingAgent(codingAgentInfo.defaultCodingAgent !== null &&
+            codingAgentInfo.installedCodingAgents.some(({ id }) => id === codingAgentInfo.defaultCodingAgent)
+            ? codingAgentInfo.defaultCodingAgent
+            : null);
+        setSyncedRevision(revision);
         setError(null);
-        try {
-            const editorResponse = await (0, call_api_1.callApi)('/api/update-default-editor', {
-                defaultEditor: selectedEditor,
-            });
-            if (!editorResponse.success) {
-                setError(editorResponse.reason);
-                setIsSubmitting(false);
-                return;
-            }
-            const codingAgentResponse = await (0, call_api_1.callApi)('/api/update-default-coding-agent', { defaultCodingAgent: selectedCodingAgent });
-            if (!codingAgentResponse.success) {
-                setError(codingAgentResponse.reason);
-                setIsSubmitting(false);
-                return;
-            }
-            onSaved();
-        }
-        catch (err) {
-            setError(err.message);
-            setIsSubmitting(false);
-        }
-    }, [
-        codingAgentInfo,
-        editorInfo,
-        onSaved,
-        selectedCodingAgent,
-        selectedEditor,
-    ]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsxs("div", { style: content, children: [
-                    jsx_runtime_1.jsx("p", { style: title, children: "Default editor" }), jsx_runtime_1.jsx("p", { style: description, children: "Used when Remotion Studio opens source files." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), editorInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: description, children: "Loading installed editors..." })) : null, (editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.length) === 0 ? (jsx_runtime_1.jsx("p", { style: description, children: "No supported editors were found on this computer." })) : null, editorInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: editorValues, selectedId: selectedEditor !== null && selectedEditor !== void 0 ? selectedEditor : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default editor" })), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx("p", { style: title, children: "Default coding agent" }), jsx_runtime_1.jsx("p", { style: description, children: "Used when Remotion Studio hands a project to a coding agent." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), codingAgentInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: description, children: "Loading installed coding agents..." })) : null, (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) === 0 ? (jsx_runtime_1.jsx("p", { style: description, children: "No supported coding agents were found on this computer." })) : null, codingAgentInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codingAgentValues, selectedId: selectedCodingAgent !== null && selectedCodingAgent !== void 0 ? selectedCodingAgent : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default coding agent" })), error ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" })
-                        ] })) : null] }), jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: submit, disabled: isSubmitting || editorInfo === null || codingAgentInfo === null, children: isSubmitting ? 'Saving...' : 'Save and reload' }) })
-        ] }));
+    }, [codingAgentInfo, editorInfo, revision]);
+    const updates = (0, react_1.useMemo)(() => {
+        // The browser only receives an opaque ID for a custom editor. Omitting the
+        // update preserves its executable and arguments in the existing config call.
+        const editorUpdate = selectedEditor === 'custom'
+            ? []
+            : [
+                selectedEditor === null
+                    ? { setter: 'setDefaultEditor', type: 'delete' }
+                    : {
+                        setter: 'setDefaultEditor',
+                        type: 'set',
+                        value: selectedEditor,
+                    },
+            ];
+        return [
+            ...editorUpdate,
+            selectedCodingAgent === null
+                ? { setter: 'setDefaultCodingAgent', type: 'delete' }
+                : {
+                    setter: 'setDefaultCodingAgent',
+                    type: 'set',
+                    value: selectedCodingAgent,
+                },
+        ];
+    }, [selectedCodingAgent, selectedEditor]);
+    const ready = editorInfo !== null &&
+        codingAgentInfo !== null &&
+        syncedRevision === revision;
+    (0, use_auto_save_config_1.useAutoSaveConfig)({
+        enabled: ready,
+        onError: setError,
+        ready,
+        syncRevision: syncedRevision,
+        updates,
+    });
+    const displayedError = error !== null && error !== void 0 ? error : settingsError;
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { style: content, children: [
+                jsx_runtime_1.jsx("p", { style: title, children: "Default editor" }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), editorInfo === null && displayedError === null ? (jsx_runtime_1.jsx("p", { style: description, children: "Loading installed editors..." })) : null, (editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.length) === 0 ? (jsx_runtime_1.jsx("p", { style: description, children: "No supported editors were found on this computer." })) : null, editorInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: editorValues, selectedId: selectedEditor !== null && selectedEditor !== void 0 ? selectedEditor : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default editor" })), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx("p", { style: title, children: "Default coding agent" }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), codingAgentInfo === null && displayedError === null ? (jsx_runtime_1.jsx("p", { style: description, children: "Loading installed coding agents..." })) : null, (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) === 0 ? (jsx_runtime_1.jsx("p", { style: description, children: "No supported coding agents were found on this computer." })) : null, codingAgentInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codingAgentValues, selectedId: selectedCodingAgent !== null && selectedCodingAgent !== void 0 ? selectedCodingAgent : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default coding agent" })), displayedError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: displayedError, align: "flex-start", type: "error" })
+                    ] })) : null] }) }));
 };
 exports.DefaultEditorSettings = DefaultEditorSettings;

package/dist/components/ConfigureLicenseModal.d.ts

@@ -1,5 +1,2 @@
 import React from 'react';
-export declare const LicenseSettings: React.FC<{
-    readonly initialPublicLicenseKey: string | null;
-    readonly onSaved: () => void;
-}>;
+export declare const LicenseSettings: React.FC;

package/dist/components/ConfigureLicenseModal.js

@@ -4,14 +4,13 @@ exports.LicenseSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
-const call_api_1 = require("./call-api");
 const Checkbox_1 = require("./Checkbox");
 const layout_1 = require("./layout");
 const LicenseKeyValidation_1 = require("./LicenseKeyValidation");
-const ModalButton_1 = require("./ModalButton");
 const RemInput_1 = require("./NewComposition/RemInput");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
-const SettingsModalFooter_1 = require("./SettingsModalFooter");
+const SettingsContext_1 = require("./SettingsContext");
+const use_auto_save_config_1 = require("./use-auto-save-config");
 const container = {
     display: 'flex',
     flex: 1,
@@ -60,19 +59,34 @@ const inputLabel = {
     marginBottom: 6,
     marginTop: 10,
 };
-const LicenseSettings = ({ initialPublicLicenseKey, onSaved }) => {
-    const initialLicenseType = initialPublicLicenseKey === 'free-license'
+const LicenseSettings = () => {
+    const { error: settingsError, publicLicenseKey, revision } = (0, SettingsContext_1.useSettings)();
+    const initialLicenseType = publicLicenseKey === 'free-license'
         ? 'free'
-        : initialPublicLicenseKey === null
+        : publicLicenseKey === null
             ? null
             : 'company';
     const [licenseType, setLicenseType] = (0, react_1.useState)(initialLicenseType);
-    const [companyLicenseKey, setCompanyLicenseKey] = (0, react_1.useState)(initialLicenseType === 'company' ? (initialPublicLicenseKey !== null && initialPublicLicenseKey !== void 0 ? initialPublicLicenseKey : '') : '');
-    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [companyLicenseKey, setCompanyLicenseKey] = (0, react_1.useState)(initialLicenseType === 'company' ? (publicLicenseKey !== null && publicLicenseKey !== void 0 ? publicLicenseKey : '') : '');
+    const [companyLicenseKeyToSave, setCompanyLicenseKeyToSave] = (0, react_1.useState)(companyLicenseKey);
     const [error, setError] = (0, react_1.useState)(null);
+    const [syncedRevision, setSyncedRevision] = (0, react_1.useState)(revision);
     const [isValidatingLicenseKey, setIsValidatingLicenseKey] = (0, react_1.useState)(false);
     const [remoteValidationMessage, setRemoteValidationMessage] = (0, react_1.useState)(null);
     const [licenseKeyDetails, setLicenseKeyDetails] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const nextLicenseType = publicLicenseKey === 'free-license'
+            ? 'free'
+            : publicLicenseKey === null
+                ? null
+                : 'company';
+        const nextCompanyLicenseKey = nextLicenseType === 'company' ? (publicLicenseKey !== null && publicLicenseKey !== void 0 ? publicLicenseKey : '') : '';
+        setLicenseType(nextLicenseType);
+        setCompanyLicenseKey(nextCompanyLicenseKey);
+        setCompanyLicenseKeyToSave(nextCompanyLicenseKey);
+        setSyncedRevision(revision);
+        setError(null);
+    }, [publicLicenseKey, revision]);
     const toggleLicenseType = (0, react_1.useCallback)((newLicenseType) => {
         setLicenseType((currentLicenseType) => currentLicenseType === newLicenseType ? null : newLicenseType);
         setError(null);
@@ -83,15 +97,6 @@ const LicenseSettings = ({ initialPublicLicenseKey, onSaved }) => {
     const toggleCompanyLicense = (0, react_1.useCallback)(() => {
         toggleLicenseType('company');
     }, [toggleLicenseType]);
-    const publicLicenseKey = (0, react_1.useMemo)(() => {
-        if (licenseType === 'free') {
-            return 'free-license';
-        }
-        if (licenseType === 'company') {
-            return companyLicenseKey.trim();
-        }
-        return '';
-    }, [companyLicenseKey, licenseType]);
     const localLicenseKeyValidation = (0, react_1.useMemo)(() => (0, LicenseKeyValidation_1.validateLicenseKey)(companyLicenseKey.trim()), [companyLicenseKey]);
     (0, react_1.useEffect)(() => {
         let cancelled = false;
@@ -131,72 +136,75 @@ const LicenseSettings = ({ initialPublicLicenseKey, onSaved }) => {
     const companyLicenseKeyIsValid = localLicenseKeyValidation.valid &&
         (licenseKeyDetails === null || licenseKeyDetails === void 0 ? void 0 : licenseKeyDetails.isValid) === true &&
         !isValidatingLicenseKey;
-    const submit = (0, react_1.useCallback)(async () => {
-        if (publicLicenseKey.length === 0) {
-            setError(licenseType === null
-                ? 'Select a license type.'
-                : 'Enter your public license key.');
-            return;
-        }
-        if (licenseType === 'company' && !companyLicenseKeyIsValid) {
-            return;
+    const publicLicenseKeyToSave = (0, react_1.useMemo)(() => {
+        if (licenseType === 'free') {
+            return 'free-license';
         }
-        setIsSubmitting(true);
-        setError(null);
-        try {
-            const response = await (0, call_api_1.callApi)('/api/update-public-license', {
-                publicLicenseKey,
-            });
-            if (!response.success) {
-                setError(response.reason);
-                setIsSubmitting(false);
-                return;
-            }
-            onSaved();
+        if (licenseType === 'company') {
+            return companyLicenseKeyToSave;
         }
-        catch (err) {
-            setError(err.message);
-            setIsSubmitting(false);
+        return '';
+    }, [companyLicenseKeyToSave, licenseType]);
+    const updates = (0, react_1.useMemo)(() => {
+        if (licenseType === null) {
+            return [{ setter: 'setPublicLicenseKey', type: 'delete' }];
         }
-    }, [companyLicenseKeyIsValid, licenseType, onSaved, publicLicenseKey]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsxs("div", { style: content, children: [
-                    jsx_runtime_1.jsxs("p", { style: description, children: ["Remotion is free to use if you are an individual or company with a headcount of 3 or less.",
-                            jsx_runtime_1.jsx("br", {}),
-                            "If used in an organization with 4 people or more, a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }), ' needs to be obtained.'] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: (event) => {
-                            if (!(event.target instanceof HTMLInputElement)) {
-                                toggleFreeLicense();
-                            }
-                        }, children: [
-                            jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'free', onChange: toggleFreeLicense, name: "free-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I am eligible for the Free License" })
-                        ] }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: (event) => {
-                            if (!(event.target instanceof HTMLInputElement)) {
-                                toggleCompanyLicense();
-                            }
-                        }, children: [
-                            jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'company', onChange: toggleCompanyLicense, name: "company-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I need a Company License" })
-                        ] }), licenseType === 'company' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "remotion.pro/license" }), ' ', "to obtain a license key. Enter the public license key from", ' "License Keys".'] }), jsx_runtime_1.jsxs("label", { style: inputLabel, children: ["Public license key",
-                                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: localLicenseKeyValidation.message ||
-                                            remoteValidationMessage ||
-                                            (licenseKeyDetails !== null &&
-                                                !(0, LicenseKeyValidation_1.hasActiveCompanyLicense)(licenseKeyDetails))
-                                            ? 'error'
-                                            : 'ok', rightAlign: false, value: companyLicenseKey, onChange: (event) => {
-                                            setCompanyLicenseKey(event.target.value);
-                                            setError(null);
-                                        }, placeholder: "rm_pub_...", autoFocus: true })
-                                ] }), localLicenseKeyValidation.message ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: localLicenseKeyValidation.message, align: "flex-start", type: "error" })
-                                ] })) : null, remoteValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: remoteValidationMessage, align: "flex-start", type: "error" })
-                                ] })) : null, isValidatingLicenseKey ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("p", { style: description, children: "Loading license key details..." })
-                                ] })) : null, licenseKeyDetails ? (jsx_runtime_1.jsx(LicenseKeyValidation_1.LicenseKeyDetailsDisplay, { details: licenseKeyDetails })) : null] })) : null, error ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" })
-                        ] })) : null] }), jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: submit, disabled: isSubmitting ||
-                        publicLicenseKey.length === 0 ||
-                        (licenseType === 'company' && !companyLicenseKeyIsValid), autoFocus: licenseType !== 'company', children: isSubmitting ? 'Submitting...' : 'Submit and reload' }) })
-        ] }));
+        return [
+            {
+                setter: 'setPublicLicenseKey',
+                type: 'set',
+                value: publicLicenseKeyToSave,
+            },
+        ];
+    }, [licenseType, publicLicenseKeyToSave]);
+    (0, use_auto_save_config_1.useAutoSaveConfig)({
+        enabled: licenseType === null ||
+            (publicLicenseKeyToSave.length > 0 &&
+                (licenseType !== 'company' ||
+                    (companyLicenseKeyToSave === companyLicenseKey.trim() &&
+                        companyLicenseKeyIsValid))),
+        onError: setError,
+        ready: syncedRevision === revision,
+        syncRevision: syncedRevision,
+        updates,
+    });
+    const displayedError = error !== null && error !== void 0 ? error : settingsError;
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { style: content, children: [
+                jsx_runtime_1.jsxs("p", { style: description, children: ["Remotion is free to use if you are an individual or company with a headcount of 3 or less.",
+                        jsx_runtime_1.jsx("br", {}),
+                        "If used in an organization with 4 people or more, a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }), ' needs to be obtained.'] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: (event) => {
+                        if (!(event.target instanceof HTMLInputElement)) {
+                            toggleFreeLicense();
+                        }
+                    }, children: [
+                        jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'free', onChange: toggleFreeLicense, name: "free-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I am eligible for the Free License" })
+                    ] }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: (event) => {
+                        if (!(event.target instanceof HTMLInputElement)) {
+                            toggleCompanyLicense();
+                        }
+                    }, children: [
+                        jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'company', onChange: toggleCompanyLicense, name: "company-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I need a Company License" })
+                    ] }), licenseType === 'company' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "remotion.pro/license" }), ' ', "to obtain a license key. Enter the public license key from", ' "License Keys".'] }), jsx_runtime_1.jsxs("label", { style: inputLabel, children: ["Public license key",
+                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: localLicenseKeyValidation.message ||
+                                        remoteValidationMessage ||
+                                        (licenseKeyDetails !== null &&
+                                            !(0, LicenseKeyValidation_1.hasActiveCompanyLicense)(licenseKeyDetails))
+                                        ? 'error'
+                                        : 'ok', rightAlign: false, value: companyLicenseKey, onChange: (event) => {
+                                        setCompanyLicenseKey(event.target.value);
+                                        setError(null);
+                                    }, onBlur: () => {
+                                        setCompanyLicenseKeyToSave(companyLicenseKey.trim());
+                                    }, placeholder: "rm_pub_...", autoFocus: true })
+                            ] }), localLicenseKeyValidation.message ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: localLicenseKeyValidation.message, align: "flex-start", type: "error" })
+                            ] })) : null, remoteValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: remoteValidationMessage, align: "flex-start", type: "error" })
+                            ] })) : null, isValidatingLicenseKey ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("p", { style: description, children: "Loading license key details..." })
+                            ] })) : null, licenseKeyDetails ? (jsx_runtime_1.jsx(LicenseKeyValidation_1.LicenseKeyDetailsDisplay, { details: licenseKeyDetails })) : null] })) : null, displayedError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: displayedError, align: "flex-start", type: "error" })
+                    ] })) : null] }) }));
 };
 exports.LicenseSettings = LicenseSettings;