feat(web): add cover images to individual shares (#9988)

* feat(web): add cover images to individual shares

* Update wording in share modal

* Use translation function

* Add and use new translations

* Fix formatting

* Update with suggestions

* Update test language

* Update test and language file per suggestions

* Fix formatting

* Remove unused translation

web/src/lib/components/album-page/__tests__/album-cover.spec.ts

@@ -0,0 +1,42 @@
+import AlbumCover from '$lib/components/album-page/album-cover.svelte';
+import { getAssetThumbnailUrl } from '$lib/utils';
+import { albumFactory } from '@test-data';
+import { render } from '@testing-library/svelte';
+
+vi.mock('$lib/utils');
+
+describe('AlbumCover component', () => {
+  it('renders an image when the album has a thumbnail', () => {
+    vi.mocked(getAssetThumbnailUrl).mockReturnValue('/asdf');
+    const component = render(AlbumCover, {
+      album: albumFactory.build({
+        albumName: 'someName',
+        albumThumbnailAssetId: '123',
+      }),
+      preload: false,
+      class: 'text',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('someName');
+    expect(img.getAttribute('loading')).toBe('lazy');
+    expect(img.className).toBe('z-0 rounded-xl object-cover text');
+    expect(img.getAttribute('src')).toBe('/asdf');
+    expect(getAssetThumbnailUrl).toHaveBeenCalledWith({ id: '123' });
+  });
+
+  it('renders an image when the album has no thumbnail', () => {
+    const component = render(AlbumCover, {
+      album: albumFactory.build({
+        albumName: '',
+        albumThumbnailAssetId: null,
+      }),
+      preload: true,
+      class: 'asdf',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('unnamed_album');
+    expect(img.getAttribute('loading')).toBe('eager');
+    expect(img.className).toBe('z-0 rounded-xl object-cover asdf');
+    expect(img.getAttribute('src')).toStrictEqual(expect.any(String));
+  });
+});

web/src/lib/components/album-page/album-card.svelte

@@ -46,7 +46,7 @@
     </div>
   {/if}
 
-  <AlbumCover {album} {preload} css="h-full w-full transition-all duration-300 hover:shadow-lg" />
+  <AlbumCover {album} {preload} class="h-full w-full transition-all duration-300 hover:shadow-lg" />
 
   <div class="mt-4">
     <p

web/src/lib/components/album-page/album-cover.svelte

@@ -1,35 +1,23 @@
 <script lang="ts">
   import { getAssetThumbnailUrl } from '$lib/utils';
   import { type AlbumResponseDto } from '@immich/sdk';
+  import NoCover from '$lib/components/sharedlinks-page/covers/no-cover.svelte';
+  import AssetCover from '$lib/components/sharedlinks-page/covers/asset-cover.svelte';
   import { t } from 'svelte-i18n';
 
-  export let album: AlbumResponseDto | undefined;
+  export let album: AlbumResponseDto;
   export let preload = false;
-  export let css = '';
+  let className = '';
+  export { className as class };
 
-  $: thumbnailUrl =
-    album && album.albumThumbnailAssetId ? getAssetThumbnailUrl({ id: album.albumThumbnailAssetId }) : null;
+  $: alt = album.albumName || $t('unnamed_album');
+  $: thumbnailUrl = album.albumThumbnailAssetId ? getAssetThumbnailUrl({ id: album.albumThumbnailAssetId }) : null;
 </script>
 
 <div class="relative aspect-square">
   {#if thumbnailUrl}
-    <img
-      loading={preload ? 'eager' : 'lazy'}
-      src={thumbnailUrl}
-      alt={album?.albumName ?? $t('unknown_album')}
-      class="z-0 rounded-xl object-cover {css}"
-      data-testid="album-image"
-      draggable="false"
-    />
+    <AssetCover {alt} class={className} src={thumbnailUrl} {preload} />
   {:else}
-    <enhanced:img
-      loading={preload ? 'eager' : 'lazy'}
-      src="$lib/assets/no-thumbnail.png"
-      sizes="min(271px,186px)"
-      alt={album?.albumName ?? $t('empty_album')}
-      class="z-0 rounded-xl object-cover {css}"
-      data-testid="album-image"
-      draggable="false"
-    />
+    <NoCover {alt} class={className} {preload} />
   {/if}
 </div>