feat: shared link album time buckets (#3776)

server/src/infra/repositories/shared-link.repository.ts

@@ -62,15 +62,8 @@ export class SharedLinkRepository implements ISharedLinkRepository {
         key,
       },
       relations: {
-        assets: true,
-        album: {
-          assets: true,
-        },
         user: true,
       },
-      order: {
-        createdAt: 'DESC',
-      },
     });
   }
 

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

@@ -1,48 +1,66 @@
 <script lang="ts">
   import { browser } from '$app/environment';
+  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
   import { locale } from '$lib/stores/preferences.store';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
-  import type { AlbumResponseDto, AssetResponseDto, SharedLinkResponseDto } from '@api';
+  import { TimeBucketSize, type AlbumResponseDto, type SharedLinkResponseDto } from '@api';
   import { onDestroy, onMount } from 'svelte';
   import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
   import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
-  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
   import { dateFormats } from '../../constants';
+  import { createAssetInteractionStore } from '../../stores/asset-interaction.store';
+  import { AssetStore } from '../../stores/assets.store';
   import { downloadArchive } from '../../utils/asset-utils';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import DownloadAction from '../photos-page/actions/download-action.svelte';
+  import AssetGrid from '../photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
   import ImmichLogo from '../shared-components/immich-logo.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
 
-  export let album: AlbumResponseDto;
   export let sharedLink: SharedLinkResponseDto;
 
+  const album = sharedLink.album as AlbumResponseDto;
+
   let { isViewing: showAssetViewer } = assetViewingStore;
 
+  const assetStore = new AssetStore({ size: TimeBucketSize.Month, albumId: album.id, key: sharedLink.key });
+  const assetInteractionStore = createAssetInteractionStore();
+  const { isMultiSelectState, selectedAssets } = assetInteractionStore;
+
   dragAndDropFilesStore.subscribe((value) => {
     if (value.isDragging && value.files.length > 0) {
-      fileUploadHandler(value.files, album.id, sharedLink?.key);
+      fileUploadHandler(value.files, album.id, sharedLink.key);
       dragAndDropFilesStore.set({ isDragging: false, files: [] });
     }
   });
 
-  let multiSelectAsset: Set<AssetResponseDto> = new Set();
-  $: isMultiSelectionMode = multiSelectAsset.size > 0;
-
   const getDateRange = () => {
-    const startDate = new Date(album.assets[0].fileCreatedAt);
+    const { startDate, endDate } = album;
-    const endDate = new Date(album.assets[album.assetCount - 1].fileCreatedAt);
 
-    const startDateString = startDate.toLocaleDateString($locale, dateFormats.album);
+    let start = '';
-    const endDateString = endDate.toLocaleDateString($locale, dateFormats.album);
+    let end = '';
 
-    // If the start and end date are the same, only show one date
+    if (startDate) {
-    return startDateString === endDateString ? startDateString : `${startDateString} - ${endDateString}`;
+      start = new Date(startDate).toLocaleDateString($locale, dateFormats.album);
+    }
+
+    if (endDate) {
+      end = new Date(endDate).toLocaleDateString($locale, dateFormats.album);
+    }
+
+    if (startDate && endDate && start !== end) {
+      return `${start} - ${end}`;
+    }
+
+    if (start) {
+      return start;
+    }
+
+    return '';
   };
 
   const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
@@ -61,8 +79,8 @@
     if (!$showAssetViewer) {
       switch (event.key) {
         case 'Escape':
-          if (isMultiSelectionMode) {
+          if ($isMultiSelectState) {
-            multiSelectAsset = new Set();
+            assetInteractionStore.clearMultiselect();
           }
           return;
       }
@@ -70,18 +88,14 @@
   };
 
   const downloadAlbum = async () => {
-    await downloadArchive(`${album.albumName}.zip`, { albumId: album.id }, sharedLink?.key);
+    await downloadArchive(`${album.albumName}.zip`, { albumId: album.id }, sharedLink.key);
-  };
-
-  const handleSelectAll = () => {
-    multiSelectAsset = new Set(album.assets);
   };
 </script>
 
-<section class="bg-immich-bg dark:bg-immich-dark-bg">
+<header>
-  {#if isMultiSelectionMode}
+  {#if $isMultiSelectState}
-    <AssetSelectControlBar assets={multiSelectAsset} clearSelect={() => (multiSelectAsset = new Set())}>
+    <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
-      <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
+      <SelectAllAssets {assetStore} {assetInteractionStore} />
       {#if sharedLink.allowDownload}
         <DownloadAction filename="{album.albumName}.zip" sharedLinkKey={sharedLink.key} />
       {/if}
@@ -116,29 +130,33 @@
       </svelte:fragment>
     </ControlAppBar>
   {/if}
+</header>
 
-  <section class="my-[160px] flex flex-col px-6 sm:px-12 md:px-24 lg:px-40">
+<main
-    <!-- ALBUM TITLE -->
+  class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
-    <p
+>
-      class="bg-immich-bg text-6xl text-immich-primary outline-none transition-all dark:bg-immich-dark-bg dark:text-immich-dark-primary"
+  <AssetGrid {assetStore} {assetInteractionStore} publicSharedKey={sharedLink.key}>
-    >
+    <section class="pt-24">
-      {album.albumName}
+      <!-- ALBUM TITLE -->
-    </p>
+      <p
+        class="bg-immich-bg text-6xl text-immich-primary outline-none transition-all dark:bg-immich-dark-bg dark:text-immich-dark-primary"
+      >
+        {album.albumName}
+      </p>
 
-    <!-- ALBUM SUMMARY -->
+      <!-- ALBUM SUMMARY -->
-    {#if album.assetCount > 0}
+      {#if album.assetCount > 0}
-      <span class="my-4 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
+        <span class="my-4 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
-        <p class="">{getDateRange()}</p>
+          <p class="">{getDateRange()}</p>
-        <p>·</p>
+          <p>·</p>
-        <p>{album.assetCount} items</p>
+          <p>{album.assetCount} items</p>
-      </span>
+        </span>
-    {/if}
+      {/if}
 
-    <!-- ALBUM DESCRIPTION -->
+      <!-- ALBUM DESCRIPTION -->
-    <p class="mb-12 mt-6 w-full pb-2 text-left text-lg font-medium dark:text-gray-300">
+      <p class="mb-12 mt-6 w-full pb-2 text-left text-lg font-medium dark:text-gray-300">
-      {album.description}
+        {album.description}
-    </p>
+      </p>
-
+    </section>
-    <GalleryViewer assets={album.assets} {sharedLink} bind:selectedAssets={multiSelectAsset} />
+  </AssetGrid>
-  </section>
+</main>
-</section>

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -21,6 +21,7 @@
   export let isSelectionMode = false;
   export let viewport: Viewport;
   export let singleSelect = false;
+  export let publicSharedKey: string | undefined = undefined;
 
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
@@ -189,6 +190,7 @@
               disabled={$assetStore.albumAssets.has(asset.id)}
               thumbnailWidth={box.width}
               thumbnailHeight={box.height}
+              {publicSharedKey}
             />
           </div>
         {/each}

web/src/lib/components/photos-page/asset-grid.svelte

@@ -23,6 +23,7 @@
   export let assetStore: AssetStore;
   export let assetInteractionStore: AssetInteractionStore;
   export let removeAction: AssetAction | null = null;
+  export let publicSharedKey: string | undefined = undefined;
 
   const { assetSelectionCandidates, assetSelectionStart, selectedGroup, selectedAssets, isMultiSelectState } =
     assetInteractionStore;
@@ -349,6 +350,7 @@
                 bucketDate={bucket.bucketDate}
                 bucketHeight={bucket.bucketHeight}
                 {viewport}
+                {publicSharedKey}
               />
             {/if}
           </div>

web/src/routes/(user)/share/[key]/+page.svelte

@@ -1,23 +1,17 @@
 <script lang="ts">
   import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
   import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
-  import { AlbumResponseDto, SharedLinkType } from '@api';
+  import { SharedLinkType } from '@api';
   import type { PageData } from './$types';
 
   export let data: PageData;
   const { sharedLink } = data;
 
-  let album: AlbumResponseDto | null = null;
   let isOwned = data.user ? data.user.id === sharedLink.userId : false;
-  if (sharedLink.album) {
-    album = { ...sharedLink.album, assets: sharedLink.assets };
-  }
 </script>
 
-{#if sharedLink.type == SharedLinkType.Album && album}
+{#if sharedLink.type == SharedLinkType.Album}
-  <div class="immich-scrollbar">
+  <AlbumViewer {sharedLink} />
-    <AlbumViewer {album} {sharedLink} />
-  </div>
 {/if}
 
 {#if sharedLink.type == SharedLinkType.Individual}