Use Webp for album thumbnail

This commit is contained in:
Alex Tran 2022-07-24 08:51:00 -05:00
parent 1ea6425cd1
commit 9c3f848fa8
No known key found for this signature in database
GPG Key ID: E4954BC787B85C8A

View File

@ -13,7 +13,9 @@
return '/no-thumbnail.png'; return '/no-thumbnail.png';
} }
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, { responseType: 'blob' }); const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Webp, {
responseType: 'blob'
});
if (data instanceof Blob) { if (data instanceof Blob) {
imageData = URL.createObjectURL(data); imageData = URL.createObjectURL(data);
return imageData; return imageData;
@ -21,10 +23,15 @@
}; };
</script> </script>
<div class="h-[339px] w-[275px] hover:cursor-pointer mt-4" on:click={() => dispatch('click', album)}> <div
class="h-[339px] w-[275px] hover:cursor-pointer mt-4"
on:click={() => dispatch('click', album)}
>
<div class={`h-[275px] w-[275px]`}> <div class={`h-[275px] w-[275px]`}>
{#await loadImageData(album.albumThumbnailAssetId)} {#await loadImageData(album.albumThumbnailAssetId)}
<div class={`bg-immich-primary/10 w-full h-full flex place-items-center place-content-center rounded-xl`}> <div
class={`bg-immich-primary/10 w-full h-full flex place-items-center place-content-center rounded-xl`}
>
... ...
</div> </div>
{:then imageData} {:then imageData}