pr feedback

web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte

@@ -3,59 +3,28 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import {
-    api,
-    AudioCodec,
-    SystemConfigDto,
-    SystemConfigFFmpegDto,
-    ToneMapping,
-    TranscodeHWAccel,
-    TranscodePolicy,
-    VideoCodec,
-  } from '@api';
+  import { AudioCodec, SystemConfigFFmpegDto, ToneMapping, TranscodeHWAccel, TranscodePolicy, VideoCodec } from '@api';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
   import SettingSelect from '../setting-select.svelte';
   import SettingSwitch from '../setting-switch.svelte';
   import { isEqual } from 'lodash-es';
   import { fade } from 'svelte/transition';
+  import { createEventDispatcher } from 'svelte';
 
-  export let config: SystemConfigDto;
   export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited
   export let ffmpegDefault: SystemConfigFFmpegDto;
   export let savedConfig: SystemConfigFFmpegDto;
 
-  async function saveSetting() {
-    try {
-      const { data } = await api.systemConfigApi.updateConfig({
-        systemConfigDto: {
-          ...config,
-          ffmpeg: ffmpegConfig,
-        },
-      });
-
-      ffmpegConfig = { ...data.ffmpeg };
-      savedConfig = { ...data.ffmpeg };
-      config = { ...data };
-
-      notificationController.show({
-        message: 'FFmpeg settings saved',
-        type: NotificationType.Info,
-      });
-    } catch (e) {
-      console.error('Error [ffmpeg-settings] [saveSetting]', e);
-      notificationController.show({
-        message: 'Unable to save settings',
-        type: NotificationType.Error,
-      });
-    }
-  }
+  const dispatch = createEventDispatcher<{
+    save: SystemConfigFFmpegDto;
+  }>();
 
   async function reset() {
     ffmpegConfig = { ...savedConfig };
 
     notificationController.show({
-      message: 'Reset FFmpeg settings to the recent saved settings',
+      message: 'Reset FFmpeg settings to the last saved settings',
       type: NotificationType.Info,
     });
   }
@@ -243,7 +212,7 @@
       <div class="ml-4">
         <SettingButtonsRow
           on:reset={reset}
-          on:save={saveSetting}
+          on:save={() => dispatch('save', ffmpegConfig)}
           on:reset-to-default={resetToDefault}
           showResetToDefault={!isEqual(ffmpegConfig, ffmpegDefault)}
         />

web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte

@@ -3,14 +3,18 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { handleError } from '$lib/utils/handle-error';
-  import { api, SystemConfigDto, SystemConfigOAuthDto } from '@api';
+  import type { SystemConfigDto, SystemConfigOAuthDto } from '@api';
   import { isEqual } from 'lodash-es';
   import { fade } from 'svelte/transition';
   import ConfirmDisableLogin from '../confirm-disable-login.svelte';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
   import SettingSwitch from '../setting-switch.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher<{
+    save: SystemConfigOAuthDto;
+  }>();
 
   export let config: SystemConfigDto;
   export let oauthConfig: SystemConfigOAuthDto;
@@ -24,12 +28,8 @@
       oauthConfig.mobileRedirectUri = window.location.origin + '/api/oauth/mobile-redirect';
     }
   };
-
   async function reset() {
-    const { data: resetConfig } = await api.systemConfigApi.getConfig();
-
-    oauthConfig = { ...resetConfig.oauth };
-    savedConfig = { ...resetConfig.oauth };
+    oauthConfig = { ...savedConfig };
 
     notificationController.show({
       message: 'Reset OAuth settings to the last saved settings',
@@ -43,6 +43,9 @@
   const openConfirmModal = () => {
     return new Promise((resolve) => {
       handleConfirm = (value: boolean) => {
+        if (!value) {
+          oauthConfig.enabled = !oauthConfig.enabled;
+        }
         isConfirmOpen = false;
         resolve(value);
       };
@@ -51,33 +54,18 @@
   };
 
   async function saveSetting() {
-    try {
-      if (!config.passwordLogin.enabled && config.oauth.enabled && !oauthConfig.enabled) {
-        const confirmed = await openConfirmModal();
-        if (!confirmed) {
-          return;
-        }
+    if (!config.passwordLogin.enabled && savedConfig.enabled && !oauthConfig.enabled) {
+      const confirmed = await openConfirmModal();
+      if (!confirmed) {
+        return;
       }
+    }
 
-      if (!oauthConfig.mobileOverrideEnabled) {
-        oauthConfig.mobileRedirectUri = '';
-      }
-
-      const { data } = await api.systemConfigApi.updateConfig({
-        systemConfigDto: {
-          ...config,
-          oauth: oauthConfig,
-        },
-      });
-
-      oauthConfig = { ...data.oauth };
-      savedConfig = { ...data.oauth };
-      config = { ...data };
-
-      notificationController.show({ message: 'OAuth settings saved', type: NotificationType.Info });
-    } catch (error) {
-      handleError(error, 'Unable to save OAuth settings');
+    if (!oauthConfig.mobileOverrideEnabled) {
+      oauthConfig.mobileRedirectUri = '';
     }
+
+    dispatch('save', oauthConfig);
   }
 
   async function resetToDefault() {

web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte

@@ -3,25 +3,34 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { handleError } from '$lib/utils/handle-error';
-  import { api, SystemConfigDto, SystemConfigPasswordLoginDto } from '@api';
+  import type { SystemConfigDto, SystemConfigPasswordLoginDto } from '@api';
   import { isEqual } from 'lodash-es';
   import { fade } from 'svelte/transition';
   import ConfirmDisableLogin from '../confirm-disable-login.svelte';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingSwitch from '../setting-switch.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher<{
+    save: SystemConfigPasswordLoginDto;
+  }>();
 
   export let config: SystemConfigDto;
   export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited
   export let passwordLoginDefault: SystemConfigPasswordLoginDto;
   export let savedConfig: SystemConfigPasswordLoginDto;
-
+  console.log(config);
+  console.log(passwordLoginConfig);
+  console.log(savedConfig);
   let isConfirmOpen = false;
   let handleConfirm: (value: boolean) => void;
 
   const openConfirmModal = () => {
     return new Promise((resolve) => {
       handleConfirm = (value: boolean) => {
+        if (!value) {
+          passwordLoginConfig.enabled = !passwordLoginConfig.enabled;
+        }
         isConfirmOpen = false;
         resolve(value);
       };
@@ -30,36 +39,21 @@
   };
 
   async function saveSetting() {
-    try {
-      if (!config.oauth.enabled && config.passwordLogin.enabled && !passwordLoginConfig.enabled) {
-        const confirmed = await openConfirmModal();
-        if (!confirmed) {
-          return;
-        }
+    if (!config.oauth.enabled && savedConfig.enabled && !passwordLoginConfig.enabled) {
+      const confirmed = await openConfirmModal();
+      if (!confirmed) {
+        return;
       }
-
-      const { data } = await api.systemConfigApi.updateConfig({
-        systemConfigDto: {
-          ...config,
-          passwordLogin: passwordLoginConfig,
-        },
-      });
-
-      passwordLoginConfig = { ...data.passwordLogin };
-      savedConfig = { ...data.passwordLogin };
-      config = { ...data };
-
-      notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
-    } catch (error) {
-      handleError(error, 'Unable to save settings');
     }
+
+    dispatch('save', passwordLoginConfig);
   }
 
   async function reset() {
     passwordLoginConfig = { ...savedConfig };
 
     notificationController.show({
-      message: 'Reset settings to the recent saved settings',
+      message: 'Reset password authentication settings to the last saved settings',
       type: NotificationType.Info,
     });
   }
@@ -68,7 +62,7 @@
     passwordLoginConfig = { ...passwordLoginDefault };
 
     notificationController.show({
-      message: 'Reset password settings to default',
+      message: 'Reset password authentication settings to default',
       type: NotificationType.Info,
     });
   }

web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-  import {
-    api,
-    SystemConfigDto,
-    SystemConfigStorageTemplateDto,
-    SystemConfigTemplateStorageOptionDto,
-    UserResponseDto,
-  } from '@api';
+  import type { SystemConfigStorageTemplateDto, SystemConfigTemplateStorageOptionDto, UserResponseDto } from '@api';
   import * as luxon from 'luxon';
   import handlebar from 'handlebars';
   import SupportedVariablesPanel from './supported-variables-panel.svelte';
@@ -16,8 +10,12 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher<{
+    save: SystemConfigStorageTemplateDto;
+  }>();
 
-  export let config: SystemConfigDto;
   export let storageConfig: SystemConfigStorageTemplateDto;
   export let storageDefault: SystemConfigStorageTemplateDto;
   export let user: UserResponseDto;
@@ -67,37 +65,11 @@
   async function reset() {
     storageConfig = { ...savedConfig };
     notificationController.show({
-      message: 'Reset storage template settings to the recent saved settings',
+      message: 'Reset storage template settings to the last saved settings',
       type: NotificationType.Info,
     });
   }
 
-  async function saveSetting() {
-    try {
-      const { data } = await api.systemConfigApi.updateConfig({
-        systemConfigDto: {
-          ...config,
-          storageTemplate: storageConfig,
-        },
-      });
-
-      storageConfig = { ...data.storageTemplate };
-      savedConfig = { ...data.storageTemplate };
-      config = { ...data };
-
-      notificationController.show({
-        message: 'Storage template saved',
-        type: NotificationType.Info,
-      });
-    } catch (e) {
-      console.error('Error [storage-template-settings] [saveSetting]', e);
-      notificationController.show({
-        message: 'Unable to save settings',
-        type: NotificationType.Error,
-      });
-    }
-  }
-
   async function resetToDefault() {
     storageConfig = { ...storageDefault };
 
@@ -184,7 +156,7 @@
 
         <SettingButtonsRow
           on:reset={reset}
-          on:save={saveSetting}
+          on:save={() => dispatch('save', savedConfig)}
           on:reset-to-default={resetToDefault}
           showResetToDefault={!isEqual(savedConfig, storageConfig)}
         />

web/src/lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import SettingSelect from '$lib/components/admin-page/settings/setting-select.svelte';
-  import { api, SystemConfigDto, SystemConfigThumbnailDto } from '@api';
+  import type { SystemConfigThumbnailDto } from '@api';
   import { fade } from 'svelte/transition';
   import { isEqual } from 'lodash-es';
   import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte';
@@ -8,8 +8,11 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
+  import { createEventDispatcher } from 'svelte';
 
-  export let config: SystemConfigDto;
+  const dispatch = createEventDispatcher<{
+    save: SystemConfigThumbnailDto;
+  }>();
 
   export let thumbnailConfig: SystemConfigThumbnailDto; // this is the config that is being edited
   export let thumbnailDefault: SystemConfigThumbnailDto;
@@ -19,7 +22,7 @@
     thumbnailConfig = { ...savedConfig };
 
     notificationController.show({
-      message: 'Reset thumbnail settings to the recent saved settings',
+      message: 'Reset thumbnail settings to the last saved settings',
       type: NotificationType.Info,
     });
   }
@@ -32,32 +35,6 @@
       type: NotificationType.Info,
     });
   }
-
-  async function saveSetting() {
-    try {
-      const { data } = await api.systemConfigApi.updateConfig({
-        systemConfigDto: {
-          ...config,
-          thumbnail: thumbnailConfig,
-        },
-      });
-
-      thumbnailConfig = { ...data.thumbnail };
-      savedConfig = { ...data.thumbnail };
-      config = { ...data };
-
-      notificationController.show({
-        message: 'Thumbnail settings saved',
-        type: NotificationType.Info,
-      });
-    } catch (e) {
-      console.error('Error [thumbnail-settings] [saveSetting]', e);
-      notificationController.show({
-        message: 'Unable to save settings',
-        type: NotificationType.Error,
-      });
-    }
-  }
 </script>
 
 <div>
@@ -96,7 +73,7 @@
       <div class="ml-4">
         <SettingButtonsRow
           on:reset={reset}
-          on:save={saveSetting}
+          on:save={() => dispatch('save', thumbnailConfig)}
           on:reset-to-default={resetToDefault}
           showResetToDefault={!isEqual(thumbnailConfig, thumbnailDefault)}
         />

web/src/routes/admin/system-settings/+page.svelte

@@ -7,31 +7,76 @@
   import PasswordLoginSettings from '$lib/components/admin-page/settings/password-login/password-login-settings.svelte';
   import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte';
   import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
-  import type { SystemConfigDto, SystemConfigTemplateStorageOptionDto } from '@api';
+  import { api, type SystemConfigDto, type SystemConfigTemplateStorageOptionDto } from '@api';
   import type { PageData } from './$types';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
 
   export let data: PageData;
   let config: SystemConfigDto = data.config;
+
   let currentConfig: SystemConfigDto = JSON.parse(JSON.stringify(config));
   let defaultConfig: SystemConfigDto = data.defaultConfig;
   let templateOptions: SystemConfigTemplateStorageOptionDto = data.templateOptions;
+
+  const handleSave = async (config: SystemConfigDto, settingsMessage: string) => {
+    try {
+      const { data } = await api.systemConfigApi.updateConfig({
+        systemConfigDto: config,
+      });
+
+      config = JSON.parse(JSON.stringify(data));
+      currentConfig = JSON.parse(JSON.stringify(data));
+      notificationController.show({
+        message: `${settingsMessage} settings saved`,
+        type: NotificationType.Info,
+      });
+    } catch (e) {
+      console.error(`Error [${settingsMessage}-settings] [saveSetting]`, e);
+      notificationController.show({
+        message: 'Unable to save settings',
+        type: NotificationType.Error,
+      });
+    }
+  };
+  $: {
+    console.log(config);
+  }
 </script>
 
 <SettingAccordion title="Thumbnail Settings" subtitle="Manage the resolution of thumbnail sizes">
   <ThumbnailSettings
-    savedConfig={currentConfig.thumbnail}
-    bind:config={currentConfig}
-    thumbnailConfig={config.thumbnail}
+    bind:savedConfig={currentConfig.thumbnail}
+    bind:thumbnailConfig={config.thumbnail}
     thumbnailDefault={defaultConfig.thumbnail}
+    on:save={({ detail: thumbnail }) => {
+      handleSave(
+        {
+          ...currentConfig,
+          thumbnail,
+        },
+        'Thumbnail',
+      );
+    }}
   />
 </SettingAccordion>
 
 <SettingAccordion title="FFmpeg Settings" subtitle="Manage the resolution and encoding information of the video files">
   <FFmpegSettings
-    savedConfig={currentConfig.ffmpeg}
-    bind:config={currentConfig}
-    ffmpegConfig={config.ffmpeg}
+    bind:savedConfig={currentConfig.ffmpeg}
+    bind:ffmpegConfig={config.ffmpeg}
     ffmpegDefault={defaultConfig.ffmpeg}
+    on:save={({ detail: ffmpeg }) => {
+      handleSave(
+        {
+          ...currentConfig,
+          ffmpeg,
+        },
+        'ffmpeg',
+      );
+    }}
   />
 </SettingAccordion>
 
@@ -40,24 +85,56 @@
   subtitle="Manage job concurrency"
   isOpen={$page.url.searchParams.get('open') === 'job-settings'}
 >
-  <JobSettings savedConfig={currentConfig.job} bind:config jobConfig={config.job} jobDefault={defaultConfig.job} />
+  <JobSettings
+    bind:savedConfig={currentConfig.job}
+    bind:config
+    bind:jobConfig={config.job}
+    jobDefault={defaultConfig.job}
+    on:save={({ detail: job }) => {
+      handleSave(
+        {
+          ...currentConfig,
+          job,
+        },
+        'Password Authentication',
+      );
+    }}
+  />
 </SettingAccordion>
 
 <SettingAccordion title="Password Authentication" subtitle="Manage login with password settings">
   <PasswordLoginSettings
-    savedConfig={currentConfig.passwordLogin}
-    bind:config={currentConfig}
-    passwordLoginConfig={config.passwordLogin}
+    bind:savedConfig={currentConfig.passwordLogin}
+    bind:passwordLoginConfig={config.passwordLogin}
+    bind:config
     passwordLoginDefault={defaultConfig.passwordLogin}
+    on:save={({ detail: passwordLogin }) => {
+      handleSave(
+        {
+          ...currentConfig,
+          passwordLogin,
+        },
+        'Password Authentication',
+      );
+    }}
   />
 </SettingAccordion>
 
 <SettingAccordion title="OAuth Authentication" subtitle="Manage the login with OAuth settings">
   <OAuthSettings
-    savedConfig={currentConfig.oauth}
-    bind:config={currentConfig}
-    oauthConfig={config.oauth}
+    bind:savedConfig={currentConfig.oauth}
+    bind:oauthConfig={config.oauth}
+    bind:config
     oauthDefault={defaultConfig.oauth}
+    on:save={({ detail: oauth }) => {
+      handleSave(
+        {
+          ...currentConfig,
+          oauth,
+        },
+        'OAuth Authentication',
+      );
+    }}
   />
 </SettingAccordion>
 
@@ -68,10 +145,18 @@
 >
   <StorageTemplateSettings
     savedConfig={currentConfig.storageTemplate}
-    bind:config={currentConfig}
     storageConfig={config.storageTemplate}
     user={data.user}
     storageDefault={defaultConfig.storageTemplate}
     {templateOptions}
+    on:save={({ detail: storageTemplate }) => {
+      handleSave(
+        {
+          ...currentConfig,
+          storageTemplate,
+        },
+        'Storage Template',
+      );
+    }}
   />
 </SettingAccordion>