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

<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>