feat(web): enhance ux/ui of the album list page (#8499)

* feat(web): enhance ux/ui of the album list page * fix unit tests * feat(web): enhance ux/ui of the album list page * fix unit tests * small styling * better dot * lint --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2024-04-05 21:19:26 +02:00
parent 939e91f9ed
commit 8f981b6052
27 changed files with 1352 additions and 621 deletions
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { ThumbnailFormat, type AlbumResponseDto } from '@immich/sdk';
+  import { getAssetThumbnailUrl } from '$lib/utils';
+
+  export let album: AlbumResponseDto | undefined;
+  export let preload = false;
+  export let css = '';
+
+  $: thumbnailUrl =
+    album && album.albumThumbnailAssetId
+      ? getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)
+      : null;
+</script>
+
+<div class="relative aspect-square">
+  {#if thumbnailUrl}
+    <img
+      loading={preload ? 'eager' : 'lazy'}
+      src={thumbnailUrl}
+      alt={album?.albumName ?? 'Unknown Album'}
+      class="z-0 rounded-xl object-cover {css}"
+      data-testid="album-image"
+      draggable="false"
+    />
+  {:else}
+    <enhanced:img
+      loading={preload ? 'eager' : 'lazy'}
+      src="$lib/assets/no-thumbnail.png"
+      sizes="min(271px,186px)"
+      alt={album?.albumName ?? 'Empty Album'}
+      class="z-0 rounded-xl object-cover {css}"
+      data-testid="album-image"
+      draggable="false"
+    />
+  {/if}
+</div>