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

feat(server): wide gamut thumbnails (#3658)

Browse source
This commit is contained in:
Mert 2023-09-03 02:21:51 -04:00 • committed by GitHub
parent 4bd77d5899
commit 2069293cc1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 405 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

12
web/src/lib/components/admin-page/settings/setting-switch.svelte
View file

@ -1,12 +1,16 @@
<script lang="ts">
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { createEventDispatcher } from 'svelte';
export let title: string;
export let subtitle = '';
export let checked = false;
export let disabled = false;
export let isEdited = false;
const dispatch = createEventDispatcher<{ toggle: boolean }>();
const onToggle = (event: Event) => dispatch('toggle', (event.target as HTMLInputElement).checked);
</script>
<div class="flex place-items-center justify-between">
@ -29,7 +33,13 @@
</div>
<label class="relative inline-block h-[10px] w-[36px] flex-none">
<input class="disabled::cursor-not-allowed h-0 w-0 opacity-0" type="checkbox" bind:checked on:click {disabled} />
<input
class="disabled::cursor-not-allowed h-0 w-0 opacity-0"
type="checkbox"
bind:checked
on:click={onToggle}
{disabled}
/>
{#if disabled}
<span class="slider-disable cursor-not-allowed" />

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

@ -1,6 +1,6 @@
<script lang="ts">
import SettingSelect from '$lib/components/admin-page/settings/setting-select.svelte';
import { api, SystemConfigThumbnailDto } from '@api';
import { api, Colorspace, 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,6 +8,8 @@
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSwitch from '../setting-switch.svelte';
export let thumbnailConfig: SystemConfigThumbnailDto; // this is the config that is being edited
export let disabled = false;
@ -91,7 +93,7 @@
{ value: 250, text: '250p' },
]}
name="resolution"
isEdited={!(thumbnailConfig.webpSize === savedConfig.webpSize)}
isEdited={thumbnailConfig.webpSize !== savedConfig.webpSize}
{disabled}
/>
@ -105,9 +107,25 @@
{ value: 1440, text: '1440p' },
]}
name="resolution"
isEdited={!(thumbnailConfig.jpegSize === savedConfig.jpegSize)}
isEdited={thumbnailConfig.jpegSize !== savedConfig.jpegSize}
{disabled}
/>
<SettingInputField
inputType={SettingInputFieldType.NUMBER}
label="QUALITY"
desc="Thumbnail quality from 1-100. Higher is better for quality but produces larger files."
bind:value={thumbnailConfig.quality}
isEdited={thumbnailConfig.quality !== savedConfig.quality}
/>
<SettingSwitch
title="PREFER WIDE GAMUT"
subtitle="Use Display P3 for thumbnails. This better preserves the vibrance of images with wide colorspaces, but images may appear differently on old devices with an old browser version. sRGB images are kept as sRGB to avoid color shifts."
checked={thumbnailConfig.colorspace === Colorspace.P3}
on:toggle={(e) => (thumbnailConfig.colorspace = e.detail ? Colorspace.P3 : Colorspace.Srgb)}
isEdited={thumbnailConfig.colorspace !== savedConfig.colorspace}
/>
</div>
<div class="ml-4">