self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

Load low- and high quality thumbnail in the same img tag to avoid flickering (#413)

Browse Source
This commit is contained in:
Matthias Rupp 2022-07-31 22:56:03 +02:00 committed by GitHub
parent dc61fd925f
commit 0ac9fe5a54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/lib/components/album-page/album-card.svelte
View File

@ -7,20 +7,20 @@
export let album: AlbumResponseDto; export let album: AlbumResponseDto;
let imageData: string = '/no-thumbnail.png'; let imageData: string = `/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const loadHighQualityThumbnail = async (thubmnailId: string | null) => { const loadHighQualityThumbnail = async (thubmnailId: string | null) => {
if (thubmnailId == null) { if (thubmnailId == null) {
return '/no-thumbnail.png'; return;
} }
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, { const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, {
responseType: 'blob' responseType: 'blob'
}); });
if (data instanceof Blob) { if (data instanceof Blob) {
imageData = URL.createObjectURL(data); return URL.createObjectURL(data);
return imageData;
} }
}; };
@ -30,6 +30,10 @@
y: e.clientY y: e.clientY
}); });
}; };
onMount(async () => {
imageData = await loadHighQualityThumbnail(album.albumThumbnailAssetId) || 'no-thumbnail.png';
});
</script> </script>
<div <div
@ -50,19 +54,11 @@
</div> </div>
<div class={`h-[275px] w-[275px] z-[-1]`}> <div class={`h-[275px] w-[275px] z-[-1]`}>
{#await loadHighQualityThumbnail(album.albumThumbnailAssetId)} <img
<img src={imageData}
src={`/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`} alt={album.id}
alt={album.id} class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
class={`object-cover w-full h-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`} />
/>
{:then imageData}
<img
src={imageData}
alt={album.id}
class={`object-cover w-full h-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
/>
{/await}
</div> </div>
<div class="mt-4"> <div class="mt-4">