helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(server): separate quality for thumbnail and preview images (#13006)

Browse source 
* allow different thumbnail and preview quality, better config structure

* update web and api

* wording

* remove empty line?
This commit is contained in:
Mert 2024-09-28 02:01:04 -04:00 • committed by GitHub
parent 4248594ac5
commit 995f0fda47
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 369 additions and 198 deletions
Download patch file Download diff file Expand all files Collapse all files

150
web/src/lib/components/admin-page/settings/image/image-settings.svelte
View file

@ -11,6 +11,7 @@
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
import { t } from 'svelte-i18n';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
export let savedConfig: SystemConfigDto;
export let defaultConfig: SystemConfigDto;
@ -24,73 +25,96 @@
<div in:fade={{ duration: 500 }}>
<form autocomplete="off" on:submit|preventDefault>
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSelect
label={$t('admin.image_thumbnail_format')}
desc={$t('admin.image_format_description')}
bind:value={config.image.thumbnailFormat}
options={[
{ value: ImageFormat.Jpeg, text: 'JPEG' },
{ value: ImageFormat.Webp, text: 'WebP' },
]}
name="format"
isEdited={config.image.thumbnailFormat !== savedConfig.image.thumbnailFormat}
{disabled}
/>
<SettingAccordion
key="thumbnail-settings"
title={$t('admin.image_thumbnail_title')}
subtitle={$t('admin.image_thumbnail_description')}
isOpen={true}
>
<SettingSelect
label={$t('admin.image_format')}
desc={$t('admin.image_format_description')}
bind:value={config.image.thumbnail.format}
options={[
{ value: ImageFormat.Jpeg, text: 'JPEG' },
{ value: ImageFormat.Webp, text: 'WebP' },
]}
name="format"
isEdited={config.image.thumbnail.format !== savedConfig.image.thumbnail.format}
{disabled}
/>
<SettingSelect
label={$t('admin.image_thumbnail_resolution')}
desc={$t('admin.image_thumbnail_resolution_description')}
number
bind:value={config.image.thumbnailSize}
options={[
{ value: 1080, text: '1080p' },
{ value: 720, text: '720p' },
{ value: 480, text: '480p' },
{ value: 250, text: '250p' },
{ value: 200, text: '200p' },
]}
name="resolution"
isEdited={config.image.thumbnailSize !== savedConfig.image.thumbnailSize}
{disabled}
/>
<SettingSelect
label={$t('admin.image_resolution')}
desc={$t('admin.image_resolution_description')}
number
bind:value={config.image.thumbnail.size}
options={[
{ value: 1080, text: '1080p' },
{ value: 720, text: '720p' },
{ value: 480, text: '480p' },
{ value: 250, text: '250p' },
{ value: 200, text: '200p' },
]}
name="resolution"
isEdited={config.image.thumbnail.size !== savedConfig.image.thumbnail.size}
{disabled}
/>
<SettingSelect
label={$t('admin.image_preview_format')}
desc={$t('admin.image_format_description')}
bind:value={config.image.previewFormat}
options={[
{ value: ImageFormat.Jpeg, text: 'JPEG' },
{ value: ImageFormat.Webp, text: 'WebP' },
]}
name="format"
isEdited={config.image.previewFormat !== savedConfig.image.previewFormat}
{disabled}
/>
<SettingInputField
inputType={SettingInputFieldType.NUMBER}
label={$t('admin.image_quality')}
desc={$t('admin.image_thumbnail_quality_description')}
bind:value={config.image.thumbnail.quality}
isEdited={config.image.thumbnail.quality !== savedConfig.image.thumbnail.quality}
{disabled}
/>
</SettingAccordion>
<SettingSelect
label={$t('admin.image_preview_resolution')}
desc={$t('admin.image_preview_resolution_description')}
number
bind:value={config.image.previewSize}
options={[
{ value: 2160, text: '4K' },
{ value: 1440, text: '1440p' },
{ value: 1080, text: '1080p' },
{ value: 720, text: '720p' },
]}
name="resolution"
isEdited={config.image.previewSize !== savedConfig.image.previewSize}
{disabled}
/>
<SettingAccordion
key="preview-settings"
title={$t('admin.image_preview_title')}
subtitle={$t('admin.image_preview_description')}
isOpen={true}
>
<SettingSelect
label={$t('admin.image_format')}
desc={$t('admin.image_format_description')}
bind:value={config.image.preview.format}
options={[
{ value: ImageFormat.Jpeg, text: 'JPEG' },
{ value: ImageFormat.Webp, text: 'WebP' },
]}
name="format"
isEdited={config.image.preview.format !== savedConfig.image.preview.format}
{disabled}
/>
<SettingInputField
inputType={SettingInputFieldType.NUMBER}
label={$t('admin.image_quality')}
desc={$t('admin.image_quality_description')}
bind:value={config.image.quality}
isEdited={config.image.quality !== savedConfig.image.quality}
{disabled}
/>
<SettingSelect
label={$t('admin.image_resolution')}
desc={$t('admin.image_resolution_description')}
number
bind:value={config.image.preview.size}
options={[
{ value: 2160, text: '4K' },
{ value: 1440, text: '1440p' },
{ value: 1080, text: '1080p' },
{ value: 720, text: '720p' },
]}
name="resolution"
isEdited={config.image.preview.size !== savedConfig.image.preview.size}
{disabled}
/>
<SettingInputField
inputType={SettingInputFieldType.NUMBER}
label={$t('admin.image_quality')}
desc={$t('admin.image_preview_quality_description')}
bind:value={config.image.preview.quality}
isEdited={config.image.preview.quality !== savedConfig.image.preview.quality}
{disabled}
/>
</SettingAccordion>
<SettingSwitch
title={$t('admin.image_prefer_wide_gamut')}