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/sharedlinks-page/covers/__tests__/asset-cover.spec.ts

@@ -0,0 +1,18 @@
+import AssetCover from '$lib/components/sharedlinks-page/covers/asset-cover.svelte';
+import { render } from '@testing-library/svelte';
+
+describe('AssetCover component', () => {
+  it('renders correctly', () => {
+    const component = render(AssetCover, {
+      alt: '123',
+      preload: true,
+      src: 'wee',
+      class: 'asdf',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('123');
+    expect(img.getAttribute('src')).toBe('wee');
+    expect(img.getAttribute('loading')).toBe('eager');
+    expect(img.className).toBe('z-0 rounded-xl object-cover asdf');
+  });
+});

web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts

@@ -0,0 +1,17 @@
+import NoCover from '$lib/components/sharedlinks-page/covers/no-cover.svelte';
+import { render } from '@testing-library/svelte';
+
+describe('NoCover component', () => {
+  it('renders correctly', () => {
+    const component = render(NoCover, {
+      alt: '123',
+      preload: true,
+      class: 'asdf',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('123');
+    expect(img.className).toBe('z-0 rounded-xl object-cover asdf');
+    expect(img.getAttribute('loading')).toBe('eager');
+    expect(img.src).toStrictEqual(expect.any(String));
+  });
+});

web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts

@@ -0,0 +1,60 @@
+import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
+import { getAssetThumbnailUrl } from '$lib/utils';
+import type { SharedLinkResponseDto } from '@immich/sdk';
+import { albumFactory } from '@test-data';
+import { render } from '@testing-library/svelte';
+
+vi.mock('$lib/utils');
+
+describe('ShareCover component', () => {
+  it('renders an image when the shared link is an album', () => {
+    const component = render(ShareCover, {
+      link: {
+        album: albumFactory.build({
+          albumName: '123',
+        }),
+      } as SharedLinkResponseDto,
+      preload: false,
+      class: 'text',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('123');
+    expect(img.getAttribute('loading')).toBe('lazy');
+    expect(img.className).toBe('z-0 rounded-xl object-cover text');
+  });
+
+  it('renders an image when the shared link is an individual share', () => {
+    vi.mocked(getAssetThumbnailUrl).mockReturnValue('/asdf');
+    const component = render(ShareCover, {
+      link: {
+        assets: [
+          {
+            id: 'someId',
+          },
+        ],
+      } as SharedLinkResponseDto,
+      preload: false,
+      class: 'text',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('individual_share');
+    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('someId');
+  });
+
+  it('renders an image when the shared link has no album or assets', () => {
+    const component = render(ShareCover, {
+      link: {
+        assets: [],
+      } as unknown as SharedLinkResponseDto,
+      preload: false,
+      class: 'text',
+    });
+    const img = component.getByTestId('album-image') as HTMLImageElement;
+    expect(img.alt).toBe('unnamed_share');
+    expect(img.getAttribute('loading')).toBe('lazy');
+    expect(img.className).toBe('z-0 rounded-xl object-cover text');
+  });
+});

web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let alt;
+  export let preload = false;
+  export let src: string;
+  let className = '';
+  export { className as class };
+</script>
+
+<img
+  {alt}
+  class="z-0 rounded-xl object-cover {className}"
+  data-testid="album-image"
+  draggable="false"
+  loading={preload ? 'eager' : 'lazy'}
+  {src}
+/>

web/src/lib/components/sharedlinks-page/covers/no-cover.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let alt = '';
+  export let preload = false;
+  let className = '';
+  export { className as class };
+</script>
+
+<enhanced:img
+  {alt}
+  class="z-0 rounded-xl object-cover {className}"
+  data-testid="album-image"
+  draggable="false"
+  loading={preload ? 'eager' : 'lazy'}
+  sizes="min(271px,186px)"
+  src="$lib/assets/no-thumbnail.png"
+/>

web/src/lib/components/sharedlinks-page/covers/share-cover.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { SharedLinkResponseDto } from '@immich/sdk';
+  import AlbumCover from '$lib/components/album-page/album-cover.svelte';
+  import NoCover from '$lib/components/sharedlinks-page/covers/no-cover.svelte';
+  import AssetCover from '$lib/components/sharedlinks-page/covers/asset-cover.svelte';
+  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { t } from 'svelte-i18n';
+
+  export let link: SharedLinkResponseDto;
+  export let preload = false;
+  let className = '';
+  export { className as class };
+</script>
+
+<div class="relative aspect-square">
+  {#if link?.album}
+    <AlbumCover album={link.album} class={className} {preload} />
+  {:else if link.assets[0]}
+    <AssetCover
+      alt={$t('individual_share')}
+      class={className}
+      {preload}
+      src={getAssetThumbnailUrl(link.assets[0].id)}
+    />
+  {:else}
+    <NoCover alt={$t('unnamed_share')} class={className} {preload} />
+  {/if}
+</div>

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -7,7 +7,7 @@
   import { createEventDispatcher } from 'svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { locale } from '$lib/stores/preferences.store';
-  import AlbumCover from '$lib/components/album-page/album-cover.svelte';
+  import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
   import { t } from 'svelte-i18n';
 
   export let link: SharedLinkResponseDto;
@@ -52,7 +52,7 @@
   class="flex w-full gap-4 border-b border-gray-200 py-4 transition-all hover:border-immich-primary dark:border-gray-600 dark:text-immich-gray dark:hover:border-immich-dark-primary"
 >
   <div>
-    <AlbumCover album={link?.album} css="h-[100px] w-[100px] transition-all duration-300 hover:shadow-lg" />
+    <ShareCover class="h-[100px] w-[100px] transition-all duration-300 hover:shadow-lg" {link} />
   </div>
 
   <div class="flex flex-col justify-between">