feat(web/server): webp thumbnail size configurable (#3598)

* feat(server/web): webp thumbnail size configurable

* update api

* add ui and fix test

* lint

* setting for jpeg size

* feat: coerce to number

* api

* jpeg resolution

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/admin-page/settings/setting-input-field.svelte

@@ -27,7 +27,7 @@
   };
 </script>
 
-<div class="w-full">
+<div class="mb-4 w-full">
   <div class={`flex h-[26px] place-items-center gap-1`}>
     <label class={`immich-form-label text-sm`} for={label}>{label}</label>
     {#if required}
@@ -45,7 +45,7 @@
   </div>
 
   {#if desc}
-    <p class="immich-form-label pb-2 text-xs" id="{label}-desc">
+    <p class="immich-form-label pb-2 text-sm" id="{label}-desc">
       {desc}
     </p>
   {/if}

web/src/lib/components/admin-page/settings/setting-select.svelte

@@ -2,19 +2,23 @@
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
 
-  export let value: string;
-  export let options: { value: string; text: string }[];
+  export let value: string | number;
+  export let options: { value: string | number; text: string }[];
   export let label = '';
   export let desc = '';
   export let name = '';
   export let isEdited = false;
+  export let number = false;
 
   const handleChange = (e: Event) => {
     value = (e.target as HTMLInputElement).value;
+    if (number) {
+      value = parseInt(value);
+    }
   };
 </script>
 
-<div class="w-full">
+<div class="mb-4 w-full">
   <div class={`flex h-[26px] place-items-center gap-1`}>
     <label class={`immich-form-label text-sm`} for="{name}-select">{label}</label>
 
@@ -29,7 +33,7 @@
   </div>
 
   {#if desc}
-    <p class="immich-form-label pb-2 text-xs" id="{name}-desc">
+    <p class="immich-form-label pb-2 text-sm" id="{name}-desc">
       {desc}
     </p>
   {/if}

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

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import SettingSelect from '$lib/components/admin-page/settings/setting-select.svelte';
+  import { api, 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';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+
+  export let thumbnailConfig: SystemConfigThumbnailDto; // this is the config that is being edited
+
+  let savedConfig: SystemConfigThumbnailDto;
+  let defaultConfig: SystemConfigThumbnailDto;
+
+  async function getConfigs() {
+    [savedConfig, defaultConfig] = await Promise.all([
+      api.systemConfigApi.getConfig().then((res) => res.data.thumbnail),
+      api.systemConfigApi.getDefaults().then((res) => res.data.thumbnail),
+    ]);
+  }
+
+  async function reset() {
+    const { data: resetConfig } = await api.systemConfigApi.getConfig();
+
+    thumbnailConfig = { ...resetConfig.thumbnail };
+    savedConfig = { ...resetConfig.thumbnail };
+
+    notificationController.show({
+      message: 'Reset thumbnail settings to the recent saved settings',
+      type: NotificationType.Info,
+    });
+  }
+
+  async function resetToDefault() {
+    const { data: configs } = await api.systemConfigApi.getDefaults();
+
+    thumbnailConfig = { ...configs.thumbnail };
+    defaultConfig = { ...configs.thumbnail };
+
+    notificationController.show({
+      message: 'Reset thumbnail settings to default',
+      type: NotificationType.Info,
+    });
+  }
+
+  async function saveSetting() {
+    try {
+      const { data: configs } = await api.systemConfigApi.getConfig();
+
+      const result = await api.systemConfigApi.updateConfig({
+        systemConfigDto: {
+          ...configs,
+          thumbnail: thumbnailConfig,
+        },
+      });
+
+      thumbnailConfig = { ...result.data.thumbnail };
+      savedConfig = { ...result.data.thumbnail };
+
+      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>
+  {#await getConfigs() then}
+    <div in:fade={{ duration: 500 }}>
+      <form autocomplete="off" on:submit|preventDefault>
+        <div class="ml-4 mt-4 flex flex-col gap-4">
+          <SettingSelect
+            label="WEBP RESOLUTION"
+            desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness."
+            number
+            bind:value={thumbnailConfig.webpSize}
+            options={[
+              { value: 1080, text: '1080p' },
+              { value: 720, text: '720p' },
+              { value: 480, text: '480p' },
+              { value: 250, text: '250p' },
+            ]}
+            name="resolution"
+            isEdited={!(thumbnailConfig.webpSize === savedConfig.webpSize)}
+          />
+
+          <SettingSelect
+            label="JPEG RESOLUTION"
+            desc="Higher resolutions can preserve more detail but take longer to encode, have larger file sizes, and can reduce app responsiveness."
+            number
+            bind:value={thumbnailConfig.jpegSize}
+            options={[
+              { value: 2160, text: '4K' },
+              { value: 1440, text: '1440p' },
+            ]}
+            name="resolution"
+            isEdited={!(thumbnailConfig.jpegSize === savedConfig.jpegSize)}
+          />
+        </div>
+
+        <div class="ml-4">
+          <SettingButtonsRow
+            on:reset={reset}
+            on:save={saveSetting}
+            on:reset-to-default={resetToDefault}
+            showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+          />
+        </div>
+      </form>
+    </div>
+  {/await}
+</div>