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

feat: original-sized previews for non-web-friendly images (#14446)

Browse source 
* feat(server): extract full-size previews from RAW images

* feat(web): load fullsize preview for RAW images when zoomed in

* refactor: tweaks for code review

* refactor: rename "converted" preview/assets to "fullsize"

* feat(web/server): fullsize preview for non-web-friendly images

* feat: tweaks for code review

* feat(server): require ASSET_DOWNLOAD premission for fullsize previews

* test: fix types and interfaces

* chore: gen open-api

* feat(server): keep only essential exif in fullsize preview

* chore: regen openapi

* test: revert unnecessary timeout

* feat: move full-size preview config to standalone entry

* feat(i18n): update en texts

* fix: don't return fullsizePath when disabled

* test: full-size previews

* test(web): full-size previews

* chore: make open-api

* feat(server): redirect to preview/original URL when fullsize thumbnail not available

* fix(server): delete fullsize preview image on thumbnail regen after fullsize preview turned off

* refactor(server): AssetRepository.deleteFiles with Kysely

* fix(server): type of MediaRepository.writeExif

* minor simplification

* minor styling changes and condensed wording

* simplify

* chore: reuild open-api

* test(server): fix media.service tests

* test(web): fix photo-viewer test

* fix(server):  use fullsize image when requested

* fix file path extension

* formatting

* use fullsize when zooming back out or when "display original photos" is enabled

* simplify condition

---------

Co-authored-by: mertalev <101130780+mertalev@users.noreply.github.com>
This commit is contained in:
Eli Gao 2025-04-01 01:24:28 +08:00 • committed by GitHub
parent a5093a9434
commit 5c80e8734b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
33 changed files with 778 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

71
web/src/lib/components/asset-viewer/photo-viewer.svelte
View file

@ -6,8 +6,8 @@
import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
import { SlideshowLook, SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
import { photoZoomState } from '$lib/stores/zoom-image.store';
import { getAssetOriginalUrl, getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
import { isWebCompatibleImage, canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
import { getBoundingBox } from '$lib/utils/people-utils';
import { getAltText } from '$lib/utils/thumbnail-util';
import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
@ -50,6 +50,7 @@
let assetFileUrl: string = $state('');
let imageLoaded: boolean = $state(false);
let originalImageLoaded: boolean = $state(false);
let imageError: boolean = $state(false);
let loader = $state<HTMLImageElement>();
@ -67,23 +68,22 @@
$boundingBoxesArray = [];
});
const preload = (useOriginal: boolean, preloadAssets?: AssetResponseDto[]) => {
const preload = (targetSize: AssetMediaSize, preloadAssets?: AssetResponseDto[]) => {
for (const preloadAsset of preloadAssets || []) {
if (preloadAsset.type === AssetTypeEnum.Image) {
let img = new Image();
img.src = getAssetUrl(preloadAsset.id, useOriginal, preloadAsset.thumbhash);
img.src = getAssetUrl(preloadAsset.id, targetSize, preloadAsset.thumbhash);
}
}
};
const getAssetUrl = (id: string, useOriginal: boolean, cacheKey: string | null) => {
const getAssetUrl = (id: string, targetSize: AssetMediaSize, cacheKey: string | null) => {
let finalAssetMediaSize = targetSize;
if (sharedLink && (!sharedLink.allowDownload || !sharedLink.showMetadata)) {
return getAssetThumbnailUrl({ id, size: AssetMediaSize.Preview, cacheKey });
finalAssetMediaSize = AssetMediaSize.Preview;
}
return useOriginal
? getAssetOriginalUrl({ id, cacheKey })
: getAssetThumbnailUrl({ id, size: AssetMediaSize.Preview, cacheKey });
return getAssetThumbnailUrl({ id, size: finalAssetMediaSize, cacheKey });
};
copyImage = async () => {
@ -133,14 +133,30 @@
}
};
// when true, will force loading of the original image
let forceUseOriginal: boolean = $derived(asset.originalMimeType === 'image/gif' || $photoZoomState.currentZoom > 1);
const targetImageSize = $derived(
$alwaysLoadOriginalFile || forceUseOriginal || originalImageLoaded
? AssetMediaSize.Fullsize
: AssetMediaSize.Preview,
);
const onload = () => {
imageLoaded = true;
assetFileUrl = imageLoaderUrl;
originalImageLoaded = targetImageSize === AssetMediaSize.Fullsize;
};
const onerror = () => {
imageError = imageLoaded = true;
};
$effect(() => {
preload(targetImageSize, preloadAssets);
});
onMount(() => {
const onload = () => {
imageLoaded = true;
assetFileUrl = imageLoaderUrl;
};
const onerror = () => {
imageError = imageLoaded = true;
};
if (loader?.complete) {
onload();
}
@ -151,21 +167,8 @@
loader?.removeEventListener('error', onerror);
};
});
let isWebCompatible = $derived(isWebCompatibleImage(asset));
let useOriginalByDefault = $derived(isWebCompatible && $alwaysLoadOriginalFile);
// when true, will force loading of the original image
let forceUseOriginal: boolean = $derived(
asset.originalMimeType === 'image/gif' || ($photoZoomState.currentZoom > 1 && isWebCompatible),
);
let useOriginalImage = $derived(useOriginalByDefault || forceUseOriginal);
$effect(() => {
preload(useOriginalImage, preloadAssets);
});
let imageLoaderUrl = $derived(getAssetUrl(asset.id, useOriginalImage, asset.thumbhash));
let imageLoaderUrl = $derived(getAssetUrl(asset.id, targetImageSize, asset.checksum));
let containerWidth = $state(0);
let containerHeight = $state(0);
@ -188,13 +191,7 @@
bind:clientWidth={containerWidth}
bind:clientHeight={containerHeight}
>
<img
style="display:none"
src={imageLoaderUrl}
alt={$getAltText(asset)}
onload={() => ((imageLoaded = true), (assetFileUrl = imageLoaderUrl))}
onerror={() => (imageError = imageLoaded = true)}
/>
<img style="display:none" src={imageLoaderUrl} alt={$getAltText(asset)} {onload} {onerror} />
{#if !imageLoaded}
<div id="spinner" class="flex h-full items-center justify-center">
<LoadingSpinner />