feat(web): lighter timeline buckets

2025-04-19 22:43:08 +00:00
parent 242a559e0f
commit 5a8f9f3b5c
47 changed files with 531 additions and 406 deletions
@@ -1,25 +1,25 @@
 <script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { AssetStore, type TimelineAsset } from '$lib/stores/assets-store.svelte';
  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
+  import { handlePromiseError } from '$lib/utils';
+  import { cancelMultiselect, downloadAlbum } from '$lib/utils/asset-utils';
  import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
  import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
-  import { AssetStore } from '$lib/stores/assets-store.svelte';
-  import { cancelMultiselect, downloadAlbum } from '$lib/utils/asset-utils';
+  import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
+  import { onDestroy } from 'svelte';
+  import { t } from 'svelte-i18n';
  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 ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
  import ThemeButton from '../shared-components/theme-button.svelte';
-  import { shortcut } from '$lib/actions/shortcut';
-  import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
-  import { handlePromiseError } from '$lib/utils';
  import AlbumSummary from './album-summary.svelte';
-  import { t } from 'svelte-i18n';
-  import { onDestroy } from 'svelte';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';

  interface Props {
    sharedLink: SharedLinkResponseDto;
@@ -36,7 +36,7 @@
  $effect(() => void assetStore.updateOptions({ albumId: album.id, order: album.order }));
  onDestroy(() => assetStore.destroy());

-  const assetInteraction = new AssetInteraction();
+  const assetInteraction = new AssetInteraction<TimelineAsset>();

  dragAndDropFilesStore.subscribe((value) => {
    if (value.isDragging && value.files.length > 0) {
@@ -1,18 +1,19 @@
 import type { AssetAction } from '$lib/constants';
-import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
+import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
+import type { AlbumResponseDto } from '@immich/sdk';

 type ActionMap = {
-  [AssetAction.ARCHIVE]: { asset: AssetResponseDto };
-  [AssetAction.UNARCHIVE]: { asset: AssetResponseDto };
-  [AssetAction.FAVORITE]: { asset: AssetResponseDto };
-  [AssetAction.UNFAVORITE]: { asset: AssetResponseDto };
-  [AssetAction.TRASH]: { asset: AssetResponseDto };
-  [AssetAction.DELETE]: { asset: AssetResponseDto };
-  [AssetAction.RESTORE]: { asset: AssetResponseDto };
-  [AssetAction.ADD]: { asset: AssetResponseDto };
-  [AssetAction.ADD_TO_ALBUM]: { asset: AssetResponseDto; album: AlbumResponseDto };
-  [AssetAction.UNSTACK]: { assets: AssetResponseDto[] };
-  [AssetAction.KEEP_THIS_DELETE_OTHERS]: { asset: AssetResponseDto };
+  [AssetAction.ARCHIVE]: { asset: TimelineAsset };
+  [AssetAction.UNARCHIVE]: { asset: TimelineAsset };
+  [AssetAction.FAVORITE]: { asset: TimelineAsset };
+  [AssetAction.UNFAVORITE]: { asset: TimelineAsset };
+  [AssetAction.TRASH]: { asset: TimelineAsset };
+  [AssetAction.DELETE]: { asset: TimelineAsset };
+  [AssetAction.RESTORE]: { asset: TimelineAsset };
+  [AssetAction.ADD]: { asset: TimelineAsset };
+  [AssetAction.ADD_TO_ALBUM]: { asset: TimelineAsset; album: AlbumResponseDto };
+  [AssetAction.UNSTACK]: { assets: TimelineAsset[] };
+  [AssetAction.KEEP_THIS_DELETE_OTHERS]: { asset: TimelineAsset };
 };

 export type Action = {
@@ -6,6 +6,7 @@
  import Portal from '$lib/components/shared-components/portal/portal.svelte';
  import { AssetAction } from '$lib/constants';
  import { addAssetsToAlbum, addAssetsToNewAlbum } from '$lib/utils/asset-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
  import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
@@ -24,14 +25,14 @@
    showSelectionModal = false;
    const album = await addAssetsToNewAlbum(albumName, [asset.id]);
    if (album) {
-      onAction({ type: AssetAction.ADD_TO_ALBUM, asset, album });
+      onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album });
    }
  };

  const handleAddToAlbum = async (album: AlbumResponseDto) => {
    showSelectionModal = false;
    await addAssetsToAlbum(album.id, [asset.id]);
-    onAction({ type: AssetAction.ADD_TO_ALBUM, asset, album });
+    onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album });
  };
 </script>

@@ -4,6 +4,7 @@
  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
  import { AssetAction } from '$lib/constants';
  import { toggleArchive } from '$lib/utils/asset-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import type { AssetResponseDto } from '@immich/sdk';
  import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
@@ -18,11 +19,11 @@

  const onArchive = async () => {
    if (!asset.isArchived) {
-      preAction({ type: AssetAction.ARCHIVE, asset });
+      preAction({ type: AssetAction.ARCHIVE, asset: toTimelineAsset(asset) });
    }
    const updatedAsset = await toggleArchive(asset);
    if (updatedAsset) {
-      onAction({ type: asset.isArchived ? AssetAction.ARCHIVE : AssetAction.UNARCHIVE, asset });
+      onAction({ type: asset.isArchived ? AssetAction.ARCHIVE : AssetAction.UNARCHIVE, asset: toTimelineAsset(asset) });
    }
  };
 </script>
@@ -11,6 +11,7 @@
  import { showDeleteModal } from '$lib/stores/preferences.store';
  import { featureFlags } from '$lib/stores/server-config.store';
  import { handleError } from '$lib/utils/handle-error';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import { deleteAssets, type AssetResponseDto } from '@immich/sdk';
  import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
@@ -42,9 +43,9 @@

  const trashAsset = async () => {
    try {
-      preAction({ type: AssetAction.TRASH, asset });
+      preAction({ type: AssetAction.TRASH, asset: toTimelineAsset(asset) });
      await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id] } });
-      onAction({ type: AssetAction.TRASH, asset });
+      onAction({ type: AssetAction.TRASH, asset: toTimelineAsset(asset) });

      notificationController.show({
        message: $t('moved_to_trash'),
@@ -58,7 +59,7 @@
  const deleteAsset = async () => {
    try {
      await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
-      onAction({ type: AssetAction.DELETE, asset });
+      onAction({ type: AssetAction.DELETE, asset: toTimelineAsset(asset) });

      notificationController.show({
        message: $t('permanently_deleted_asset'),
@@ -7,6 +7,7 @@
  } from '$lib/components/shared-components/notification/notification';
  import { AssetAction } from '$lib/constants';
  import { handleError } from '$lib/utils/handle-error';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import { updateAsset, type AssetResponseDto } from '@immich/sdk';
  import { mdiHeart, mdiHeartOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
@@ -30,7 +31,10 @@

      asset = { ...asset, isFavorite: data.isFavorite };

-      onAction({ type: asset.isFavorite ? AssetAction.FAVORITE : AssetAction.UNFAVORITE, asset });
+      onAction({
+        type: asset.isFavorite ? AssetAction.FAVORITE : AssetAction.UNFAVORITE,
+        asset: toTimelineAsset(asset),
+      });

      notificationController.show({
        type: NotificationType.Info,
@@ -1,12 +1,13 @@
 <script lang="ts">
  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
  import { AssetAction } from '$lib/constants';
  import { keepThisDeleteOthers } from '$lib/utils/asset-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import type { AssetResponseDto, StackResponseDto } from '@immich/sdk';
  import { mdiPinOutline } from '@mdi/js';
-  import type { OnAction } from './action';
  import { t } from 'svelte-i18n';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import type { OnAction } from './action';

  interface Props {
    stack: StackResponseDto;
@@ -29,7 +30,7 @@

    const keptAsset = await keepThisDeleteOthers(asset, stack);
    if (keptAsset) {
-      onAction({ type: AssetAction.UNSTACK, assets: [keptAsset] });
+      onAction({ type: AssetAction.UNSTACK, assets: [toTimelineAsset(keptAsset)] });
    }
  };
 </script>
@@ -6,6 +6,7 @@
  } from '$lib/components/shared-components/notification/notification';
  import { AssetAction } from '$lib/constants';
  import { handleError } from '$lib/utils/handle-error';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import { restoreAssets, type AssetResponseDto } from '@immich/sdk';
  import { mdiHistory } from '@mdi/js';
  import { t } from 'svelte-i18n';
@@ -23,7 +24,7 @@
      await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
      asset.isTrashed = false;

-      onAction({ type: AssetAction.RESTORE, asset });
+      onAction({ type: AssetAction.RESTORE, asset: toTimelineAsset(asset) });

      notificationController.show({
        type: NotificationType.Info,
@@ -2,6 +2,7 @@
  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
  import { AssetAction } from '$lib/constants';
  import { deleteStack } from '$lib/utils/asset-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import type { StackResponseDto } from '@immich/sdk';
  import { mdiImageMinusOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
@@ -17,7 +18,7 @@
  const handleUnstack = async () => {
    const unstackedAssets = await deleteStack([stack.id]);
    if (unstackedAssets) {
-      onAction({ type: AssetAction.UNSTACK, assets: unstackedAssets });
+      onAction({ type: AssetAction.UNSTACK, assets: unstackedAssets.map((a) => toTimelineAsset(a)) });
    }
  };
 </script>
@@ -13,8 +13,9 @@ describe('AssetViewerNavBar component', () => {
    showDownloadButton: false,
    showMotionPlayButton: false,
    showShareButton: false,
+    preAction: () => {},
    onZoomImage: () => {},
-    onCopyImage: () => {},
+    onCopyImage: async () => {},
    onAction: () => {},
    onRunJob: () => {},
    onPlaySlideshow: () => {},
@@ -15,6 +15,7 @@
  import { getAssetJobMessage, getSharedLink, handlePromiseError, isSharedLink } from '$lib/utils';
  import { handleError } from '$lib/utils/handle-error';
  import { SlideshowHistory } from '$lib/utils/slideshow-history';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import {
    AssetJobName,
    AssetTypeEnum,
@@ -52,7 +53,7 @@

  interface Props {
    asset: AssetResponseDto;
-    preloadAssets?: AssetResponseDto[];
+    preloadAssets?: { id: string }[];
    showNavigation?: boolean;
    withStacked?: boolean;
    isShared?: boolean;
@@ -62,7 +63,7 @@
    onAction?: OnAction | undefined;
    reactions?: ActivityResponseDto[];
    showCloseButton?: boolean;
-    onClose: (dto: { asset: AssetResponseDto }) => void;
+    onClose: (asset: AssetResponseDto) => void;
    onNext: () => Promise<HasAsset>;
    onPrevious: () => Promise<HasAsset>;
    onRandom: () => Promise<AssetResponseDto | undefined>;
@@ -267,7 +268,7 @@
  };

  const closeViewer = () => {
-    onClose({ asset });
+    onClose(asset);
  };

  const closeEditor = () => {
@@ -605,8 +606,8 @@
              imageClass={{ 'border-2 border-white': stackedAsset.id === asset.id }}
              brokenAssetClass="text-xs"
              dimmed={stackedAsset.id !== asset.id}
-              asset={stackedAsset}
-              onClick={(stackedAsset) => {
+              asset={toTimelineAsset(stackedAsset)}
+              onClick={() => {
                asset = stackedAsset;
              }}
              onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}
@@ -10,7 +10,7 @@
  import { canCopyImageToClipboard, copyImageToClipboard, isWebCompatibleImage } from '$lib/utils/asset-utils';
  import { getBoundingBox } from '$lib/utils/people-utils';
  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
+  import { AssetMediaSize, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
  import { onDestroy, onMount } from 'svelte';
  import { t } from 'svelte-i18n';
  import { type SwipeCustomEvent, swipe } from 'svelte-gestures';
@@ -24,7 +24,7 @@

  interface Props {
    asset: AssetResponseDto;
-    preloadAssets?: AssetResponseDto[] | undefined;
+    preloadAssets?: { id: string }[] | undefined;
    element?: HTMLDivElement | undefined;
    haveFadeTransition?: boolean;
    sharedLink?: SharedLinkResponseDto | undefined;
@@ -68,12 +68,10 @@
    $boundingBoxesArray = [];
  });

-  const preload = (targetSize: AssetMediaSize | 'original', preloadAssets?: AssetResponseDto[]) => {
+  const preload = (targetSize: AssetMediaSize | 'original', preloadAssets?: { id: string }[]) => {
    for (const preloadAsset of preloadAssets || []) {
-      if (preloadAsset.type === AssetTypeEnum.Image) {
-        let img = new Image();
-        img.src = getAssetUrl(preloadAsset.id, targetSize, preloadAsset.thumbhash);
-      }
+      let img = new Image();
+      img.src = getAssetUrl(preloadAsset.id, targetSize, null);
    }
  };

@@ -4,8 +4,8 @@
  import { locale, playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
  import { getAssetPlaybackUrl, getAssetThumbnailUrl, isSharedLink } from '$lib/utils';
  import { timeToSeconds } from '$lib/utils/date-time';
-  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
+  // import { getAltText } from '$lib/utils/thumbnail-util';
+  import { AssetMediaSize } from '@immich/sdk';
  import {
    mdiArchiveArrowDownOutline,
    mdiCameraBurst,
@@ -17,22 +17,23 @@
  } from '@mdi/js';

  import { thumbhash } from '$lib/actions/thumbhash';
+  import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { getFocusable } from '$lib/utils/focus-util';
  import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
  import { TUNABLES } from '$lib/utils/tunables';
+  import { onMount } from 'svelte';
  import type { ClassValue } from 'svelte/elements';
  import { fade } from 'svelte/transition';
  import ImageThumbnail from './image-thumbnail.svelte';
  import VideoThumbnail from './video-thumbnail.svelte';
-  import { onMount } from 'svelte';
-  import { getFocusable } from '$lib/utils/focus-util';

  interface Props {
-    asset: AssetResponseDto;
+    asset: TimelineAsset;
    groupIndex?: number;
-    thumbnailSize?: number | undefined;
-    thumbnailWidth?: number | undefined;
-    thumbnailHeight?: number | undefined;
+    thumbnailSize?: number;
+    thumbnailWidth?: number;
+    thumbnailHeight?: number;
    selected?: boolean;
    focussed?: boolean;
    selectionCandidate?: boolean;
@@ -44,10 +45,10 @@
    imageClass?: ClassValue;
    brokenAssetClass?: ClassValue;
    dimmed?: boolean;
-    onClick?: ((asset: AssetResponseDto) => void) | undefined;
-    onSelect?: ((asset: AssetResponseDto) => void) | undefined;
-    onMouseEvent?: ((event: { isMouseOver: boolean; selectedGroupIndex: number }) => void) | undefined;
-    handleFocus?: (() => void) | undefined;
+    onClick?: (asset: TimelineAsset) => void;
+    onSelect?: (asset: TimelineAsset) => void;
+    onMouseEvent?: (event: { isMouseOver: boolean; selectedGroupIndex: number }) => void;
+    handleFocus?: () => void;
  }

  let {
@@ -331,7 +332,7 @@
          </div>
        {/if}

-        {#if asset.type === AssetTypeEnum.Image && asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR}
+        {#if asset.isImage && asset.projectionType === ProjectionType.EQUIRECTANGULAR}
          <div class="absolute right-0 top-0 z-10 flex place-items-center gap-1 text-xs font-medium text-white">
            <span class="pr-2 pt-2">
              <Icon path={mdiRotate360} size="24" />
@@ -344,7 +345,7 @@
          <div
            class={[
              'absolute z-10 flex place-items-center gap-1 text-xs font-medium text-white',
-              asset.type == AssetTypeEnum.Image && !asset.livePhotoVideoId ? 'top-0 right-0' : 'top-7 right-1',
+              asset.isImage && !asset.livePhotoVideoId ? 'top-0 right-0' : 'top-7 right-1',
            ]}
          >
            <span class="pr-2 pt-2 flex place-items-center gap-1">
@@ -354,27 +355,28 @@
          </div>
        {/if}
      </div>
+      <!-- altText={$getAltText(asset)} -->
      <ImageThumbnail
        class={imageClass}
        {brokenAssetClass}
        url={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
-        altText={$getAltText(asset)}
+        altText="todo"
        widthStyle="{width}px"
        heightStyle="{height}px"
        curve={selected}
        onComplete={(errored) => ((loaded = true), (thumbError = errored))}
      />
-      {#if asset.type === AssetTypeEnum.Video}
+      {#if asset.isVideo}
        <div class="absolute top-0 h-full w-full">
          <VideoThumbnail
            url={getAssetPlaybackUrl({ id: asset.id, cacheKey: asset.thumbhash })}
            enablePlayback={mouseOver && $playVideoThumbnailOnHover}
            curve={selected}
-            durationInSeconds={timeToSeconds(asset.duration)}
+            durationInSeconds={timeToSeconds(asset.duration!)}
            playbackOnIconHover={!$playVideoThumbnailOnHover}
          />
        </div>
-      {:else if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
+      {:else if asset.isImage && asset.livePhotoVideoId}
        <div class="absolute top-0 h-full w-full">
          <VideoThumbnail
            url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, cacheKey: asset.thumbhash })}
@@ -73,7 +73,7 @@
  const viewport: Viewport = $state({ width: 0, height: 0 });
  // need to include padding in the viewport for gallery
  const galleryViewport: Viewport = $derived({ height: viewport.height, width: viewport.width - 32 });
-  const assetInteraction = new AssetInteraction();
+  const assetInteraction = new AssetInteraction<AssetResponseDto>();
  let progressBarController: Tween<number> | undefined = $state(undefined);
  let videoPlayer: HTMLVideoElement | undefined = $state();
  const asHref = (asset: AssetResponseDto) => `?${QueryParameter.ID}=${asset.id}`;
@@ -1,11 +1,11 @@
 <script lang="ts">
  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
  import type { OnArchive } from '$lib/utils/actions';
+  import { archiveAssets } from '$lib/utils/asset-utils';
  import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline, mdiTimerSand } from '@mdi/js';
+  import { t } from 'svelte-i18n';
  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { archiveAssets } from '$lib/utils/asset-utils';
-  import { t } from 'svelte-i18n';

  interface Props {
    onArchive?: OnArchive;
@@ -6,9 +6,10 @@
  } from '$lib/components/shared-components/notification/notification';
  import { getAssetJobIcon, getAssetJobMessage, getAssetJobName } from '$lib/utils';
  import { handleError } from '$lib/utils/handle-error';
-  import { AssetJobName, AssetTypeEnum, runAssetJobs } from '@immich/sdk';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { isTimelineAsset } from '$lib/utils/timeline-util';
+  import { AssetJobName, AssetTypeEnum, runAssetJobs, type AssetResponseDto } from '@immich/sdk';
  import { t } from 'svelte-i18n';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';

  interface Props {
    jobs?: AssetJobName[];
@@ -19,7 +20,11 @@

  const { clearSelect, getOwnedAssets } = getAssetControlContext();

-  let isAllVideos = $derived([...getOwnedAssets()].every((asset) => asset.type === AssetTypeEnum.Video));
+  let isAllVideos = $derived(
+    [...getOwnedAssets()].every((asset) =>
+      isTimelineAsset(asset) ? asset.isVideo : (asset as AssetResponseDto).type === AssetTypeEnum.Video,
+    ),
+  );

  const handleRunJob = async (name: AssetJobName) => {
    try {
@@ -4,11 +4,11 @@
  import { getSelectedAssets } from '$lib/utils/asset-utils';
  import { handleError } from '$lib/utils/handle-error';
  import { updateAssets } from '@immich/sdk';
+  import { mdiCalendarEditOutline } from '@mdi/js';
  import { DateTime } from 'luxon';
+  import { t } from 'svelte-i18n';
  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { mdiCalendarEditOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
  interface Props {
    menuItem?: boolean;
  }
@@ -1,11 +1,14 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
-  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
  import { shortcut } from '$lib/actions/shortcut';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { getKey } from '$lib/utils';
+  import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
+  import { isTimelineAsset } from '$lib/utils/timeline-util';
+  import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
  import { mdiCloudDownloadOutline, mdiFileDownloadOutline, mdiFolderDownloadOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';

  interface Props {
    filename?: string;
@@ -20,7 +23,11 @@
    const assets = [...getAssets()];
    if (assets.length === 1) {
      clearSelect();
-      await downloadFile(assets[0]);
+      let asset: AssetResponseDto = assets[0] as AssetResponseDto;
+      if (isTimelineAsset(assets[0])) {
+        asset = await getAssetInfo({ id: assets[0].id, key: getKey() });
+      }
+      await downloadFile(asset);
      return;
    }

@@ -1,12 +1,14 @@
 <script lang="ts">
  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
  import type { OnLink, OnUnlink } from '$lib/utils/actions';
  import { handleError } from '$lib/utils/handle-error';
-  import { AssetTypeEnum, getAssetInfo, updateAsset } from '@immich/sdk';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { getAssetInfo, updateAsset } from '@immich/sdk';
  import { mdiLinkOff, mdiMotionPlayOutline, mdiTimerSand } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';

  interface Props {
    onLink: OnLink;
@@ -28,14 +30,14 @@

  const handleLink = async () => {
    let [still, motion] = [...getOwnedAssets()];
-    if (still.type === AssetTypeEnum.Video) {
+    if ((still as TimelineAsset).isVideo) {
      [still, motion] = [motion, still];
    }

    try {
      loading = true;
      const stillResponse = await updateAsset({ id: still.id, updateAssetDto: { livePhotoVideoId: motion.id } });
-      onLink({ still: stillResponse, motion });
+      onLink({ still: toTimelineAsset(stillResponse), motion: motion as TimelineAsset });
      clearSelect();
    } catch (error) {
      handleError(error, $t('errors.unable_to_link_motion_video'));
@@ -46,22 +48,22 @@

  const handleUnlink = async () => {
    const [still] = [...getOwnedAssets()];
-
-    const motionId = still?.livePhotoVideoId;
-    if (!motionId) {
-      return;
-    }
-
-    try {
-      loading = true;
-      const stillResponse = await updateAsset({ id: still.id, updateAssetDto: { livePhotoVideoId: null } });
-      const motionResponse = await getAssetInfo({ id: motionId });
-      onUnlink({ still: stillResponse, motion: motionResponse });
-      clearSelect();
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_unlink_motion_video'));
-    } finally {
-      loading = false;
+    if (still) {
+      const motionId = (still as TimelineAsset).livePhotoVideoId;
+      if (!motionId) {
+        return;
+      }
+      try {
+        loading = true;
+        const stillResponse = await updateAsset({ id: still.id, updateAssetDto: { livePhotoVideoId: null } });
+        const motionResponse = await getAssetInfo({ id: motionId });
+        onUnlink({ still: toTimelineAsset(stillResponse), motion: toTimelineAsset(motionResponse) });
+        clearSelect();
+      } catch (error) {
+        handleError(error, $t('errors.unable_to_unlink_motion_video'));
+      } finally {
+        loading = false;
+      }
    }
  };
 </script>
@@ -1,14 +1,14 @@
 <script lang="ts">
  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import type { AssetInteraction, BaseInteractionAsset } from '$lib/stores/asset-interaction.svelte';
  import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import { cancelMultiselect, selectAllAssets } from '$lib/utils/asset-utils';
  import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
-  import { selectAllAssets, cancelMultiselect } from '$lib/utils/asset-utils';
  import { t } from 'svelte-i18n';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';

  interface Props {
    assetStore: AssetStore;
-    assetInteraction: AssetInteraction;
+    assetInteraction: AssetInteraction<BaseInteractionAsset>;
  }

  let { assetStore, assetInteraction }: Props = $props();
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
  import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import { mdiImageMinusOutline, mdiImageMultipleOutline } from '@mdi/js';
-  import { stackAssets, deleteStack } from '$lib/utils/asset-utils';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
  import type { OnStack, OnUnstack } from '$lib/utils/actions';
+  import { deleteStack, stackAssets } from '$lib/utils/asset-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { mdiImageMinusOutline, mdiImageMultipleOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

  interface Props {
@@ -34,7 +35,7 @@
    }
    const unstackedAssets = await deleteStack([stack.id]);
    if (unstackedAssets) {
-      onUnstack?.(unstackedAssets);
+      onUnstack?.(unstackedAssets.map((a) => toTimelineAsset(a)));
    }
    clearSelect();
  };
@@ -1,20 +1,20 @@
 <script lang="ts">
  import Icon from '$lib/components/elements/icon.svelte';
  import {
-    type AssetStore,
    type AssetBucket,
    assetSnapshot,
    assetsSnapshot,
+    type AssetStore,
    isSelectingAllAssets,
+    type TimelineAsset,
  } from '$lib/stores/assets-store.svelte';
  import { navigate } from '$lib/utils/navigation';
  import { getDateLocaleString } from '$lib/utils/timeline-util';
-  import type { AssetResponseDto } from '@immich/sdk';
+
+  import type { AssetInteraction, BaseInteractionAsset } from '$lib/stores/asset-interaction.svelte';
  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-  import { fly } from 'svelte/transition';
+  import { fly, scale } from 'svelte/transition';
  import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { scale } from 'svelte/transition';

  import { flip } from 'svelte/animate';

@@ -29,11 +29,11 @@
    showArchiveIcon: boolean;
    bucket: AssetBucket;
    assetStore: AssetStore;
-    assetInteraction: AssetInteraction;
+    assetInteraction: AssetInteraction<BaseInteractionAsset>;

-    onSelect: ({ title, assets }: { title: string; assets: AssetResponseDto[] }) => void;
-    onSelectAssets: (asset: AssetResponseDto) => void;
-    onSelectAssetCandidates: (asset: AssetResponseDto | null) => void;
+    onSelect: ({ title, assets }: { title: string; assets: TimelineAsset[] }) => void;
+    onSelectAssets: (asset: TimelineAsset) => void;
+    onSelectAssetCandidates: (asset: TimelineAsset | null) => void;
  }

  let {
@@ -54,7 +54,7 @@

  const transitionDuration = $derived.by(() => (bucket.store.suspendTransitions && !$isUploading ? 0 : 150));
  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-  const onClick = (assetStore: AssetStore, assets: AssetResponseDto[], groupTitle: string, asset: AssetResponseDto) => {
+  const onClick = (assetStore: AssetStore, assets: TimelineAsset[], groupTitle: string, asset: TimelineAsset) => {
    if (isSelectionMode || assetInteraction.selectionActive) {
      assetSelectHandler(assetStore, asset, assets, groupTitle);
      return;
@@ -62,12 +62,12 @@
    void navigate({ targetRoute: 'current', assetId: asset.id });
  };

-  const handleSelectGroup = (title: string, assets: AssetResponseDto[]) => onSelect({ title, assets });
+  const handleSelectGroup = (title: string, assets: TimelineAsset[]) => onSelect({ title, assets });

  const assetSelectHandler = (
    assetStore: AssetStore,
-    asset: AssetResponseDto,
-    assetsInDateGroup: AssetResponseDto[],
+    asset: TimelineAsset,
+    assetsInDateGroup: TimelineAsset[],
    groupTitle: string,
  ) => {
    onSelectAssets(asset);
@@ -91,7 +91,7 @@
    }
  };

-  const assetMouseEventHandler = (groupTitle: string, asset: AssetResponseDto | null) => {
+  const assetMouseEventHandler = (groupTitle: string, asset: TimelineAsset | null) => {
    // Show multi select icon on hover on date group
    hoveredDateGroup = groupTitle;

@@ -100,7 +100,7 @@
    }
  };

-  const assetOnFocusHandler = (asset: AssetResponseDto) => {
+  const assetOnFocusHandler = (asset: TimelineAsset) => {
    assetInteraction.focussedAssetId = asset.id;
  };
  function filterIntersecting<R extends { intersecting: boolean }>(intersectable: R[]) {
@@ -1,10 +1,21 @@
 <script lang="ts">
  import { afterNavigate, beforeNavigate, goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
  import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import Skeleton from '$lib/components/photos-page/skeleton.svelte';
  import { AppRoute, AssetAction } from '$lib/constants';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { AssetBucket, assetsSnapshot, AssetStore, isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import {
+    AssetBucket,
+    assetsSnapshot,
+    AssetStore,
+    isSelectingAllAssets,
+    type TimelineAsset,
+  } from '$lib/stores/assets-store.svelte';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { showDeleteModal } from '$lib/stores/preferences.store';
  import { searchStore } from '$lib/stores/search.svelte';
  import { featureFlags } from '$lib/stores/server-config.store';
@@ -13,19 +24,14 @@
  import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
  import { navigate } from '$lib/utils/navigation';
  import { type ScrubberListener } from '$lib/utils/timeline-util';
-  import type { AlbumResponseDto, AssetResponseDto, PersonResponseDto } from '@immich/sdk';
+  import { getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
  import { onMount, type Snippet } from 'svelte';
+  import type { UpdatePayload } from 'vite';
  import Portal from '../shared-components/portal/portal.svelte';
  import Scrubber from '../shared-components/scrubber/scrubber.svelte';
  import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
  import AssetDateGroup from './asset-date-group.svelte';
  import DeleteAssetDialog from './delete-asset-dialog.svelte';
-  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
-  import Skeleton from '$lib/components/photos-page/skeleton.svelte';
-  import { page } from '$app/stores';
-  import type { UpdatePayload } from 'vite';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';

  interface Props {
    isSelectionMode?: boolean;
@@ -35,7 +41,7 @@
     additionally, update the page location/url with the asset as the asset-grid is scrolled */
    enableRouting: boolean;
    assetStore: AssetStore;
-    assetInteraction: AssetInteraction;
+    assetInteraction: AssetInteraction<TimelineAsset>;
    removeAction?: AssetAction.UNARCHIVE | AssetAction.ARCHIVE | AssetAction.FAVORITE | AssetAction.UNFAVORITE | null;
    withStacked?: boolean;
    showArchiveIcon?: boolean;
@@ -43,7 +49,7 @@
    album?: AlbumResponseDto | null;
    person?: PersonResponseDto | null;
    isShowDeleteConfirmation?: boolean;
-    onSelect?: (asset: AssetResponseDto) => void;
+    onSelect?: (asset: TimelineAsset) => void;
    onEscape?: () => void;
    children?: Snippet;
    empty?: Snippet;
@@ -352,7 +358,7 @@
    }
  };

-  const handleSelectAsset = (asset: AssetResponseDto) => {
+  const handleSelectAsset = (asset: TimelineAsset) => {
    if (!assetStore.albumAssets.has(asset.id)) {
      assetInteraction.selectAsset(asset);
    }
@@ -363,7 +369,8 @@

    if (previousAsset) {
      const preloadAsset = await assetStore.getPreviousAsset(previousAsset);
-      assetViewingStore.setAsset(previousAsset, preloadAsset ? [preloadAsset] : []);
+      const asset = await getAssetInfo({ id: previousAsset.id });
+      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
      await navigate({ targetRoute: 'current', assetId: previousAsset.id });
    }

@@ -375,7 +382,8 @@

    if (nextAsset) {
      const preloadAsset = await assetStore.getNextAsset(nextAsset);
-      assetViewingStore.setAsset(nextAsset, preloadAsset ? [preloadAsset] : []);
+      const asset = await getAssetInfo({ id: nextAsset.id });
+      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
      await navigate({ targetRoute: 'current', assetId: nextAsset.id });
    }

@@ -387,14 +395,14 @@

    if (randomAsset) {
      const preloadAsset = await assetStore.getNextAsset(randomAsset);
-      assetViewingStore.setAsset(randomAsset, preloadAsset ? [preloadAsset] : []);
+      const asset = await getAssetInfo({ id: randomAsset.id });
+      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
      await navigate({ targetRoute: 'current', assetId: randomAsset.id });
+      return asset;
    }
-
-    return randomAsset;
  };

-  const handleClose = async ({ asset }: { asset: AssetResponseDto }) => {
+  const handleClose = async (asset: { id: string }) => {
    assetViewingStore.showAssetViewer(false);
    showSkeleton = true;
    $gridScrollTarget = { at: asset.id };
@@ -410,7 +418,7 @@
      case AssetAction.ARCHIVE: {
        // find the next asset to show or close the viewer
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNext()) || (await handlePrevious()) || (await handleClose({ asset: action.asset }));
+        (await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));

        // delete after find the next one
        assetStore.removeAssets([action.asset.id]);
@@ -439,7 +447,7 @@
    }
  };

-  let lastAssetMouseEvent: AssetResponseDto | null = $state(null);
+  let lastAssetMouseEvent: TimelineAsset | null = $state(null);

  let shiftKeyIsDown = $state(false);

@@ -469,14 +477,14 @@
    }
  };

-  const handleSelectAssetCandidates = (asset: AssetResponseDto | null) => {
+  const handleSelectAssetCandidates = (asset: TimelineAsset | null) => {
    if (asset) {
      selectAssetCandidates(asset);
    }
    lastAssetMouseEvent = asset;
  };

-  const handleGroupSelect = (assetStore: AssetStore, group: string, assets: AssetResponseDto[]) => {
+  const handleGroupSelect = (assetStore: AssetStore, group: string, assets: TimelineAsset[]) => {
    if (assetInteraction.selectedGroup.has(group)) {
      assetInteraction.removeGroupFromMultiselectGroup(group);
      for (const asset of assets) {
@@ -496,7 +504,7 @@
    }
  };

-  const handleSelectAssets = async (asset: AssetResponseDto) => {
+  const handleSelectAssets = async (asset: TimelineAsset) => {
    if (!asset) {
      return;
    }
@@ -579,7 +587,7 @@
    assetInteraction.setAssetSelectionStart(deselect ? null : asset);
  };

-  const selectAssetCandidates = (endAsset: AssetResponseDto) => {
+  const selectAssetCandidates = (endAsset: TimelineAsset) => {
    if (!shiftKeyIsDown) {
      return;
    }
@@ -4,8 +4,8 @@

  export interface AssetControlContext {
    // Wrap assets in a function, because context isn't reactive.
-    getAssets: () => AssetResponseDto[]; // All assets includes partners' assets
-    getOwnedAssets: () => AssetResponseDto[]; // Only assets owned by the user
+    getAssets: () => BaseInteractionAsset[]; // All assets includes partners' assets
+    getOwnedAssets: () => BaseInteractionAsset[]; // Only assets owned by the user
    clearSelect: () => void;
  }

@@ -14,13 +14,13 @@
 </script>

 <script lang="ts">
-  import type { AssetResponseDto } from '@immich/sdk';
+  import type { BaseInteractionAsset } from '$lib/stores/asset-interaction.svelte';
  import { mdiClose } from '@mdi/js';
-  import ControlAppBar from '../shared-components/control-app-bar.svelte';
  import type { Snippet } from 'svelte';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';

  interface Props {
-    assets: AssetResponseDto[];
+    assets: BaseInteractionAsset[];
    clearSelect: () => void;
    ownerId?: string | undefined;
    children?: Snippet;
@@ -7,7 +7,7 @@
  import { downloadArchive } from '$lib/utils/asset-utils';
  import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
  import { handleError } from '$lib/utils/handle-error';
-  import { addSharedLinkAssets, type SharedLinkResponseDto } from '@immich/sdk';
+  import { addSharedLinkAssets, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
  import { mdiArrowLeft, mdiFileImagePlusOutline, mdiFolderDownloadOutline, mdiSelectAll } from '@mdi/js';
  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
  import DownloadAction from '../photos-page/actions/download-action.svelte';
@@ -31,7 +31,7 @@
  let { sharedLink = $bindable(), isOwned }: Props = $props();

  const viewport: Viewport = $state({ width: 0, height: 0 });
-  const assetInteraction = new AssetInteraction();
+  const assetInteraction = new AssetInteraction<AssetResponseDto>();

  let assets = $derived(sharedLink.assets);

@@ -1,31 +1,32 @@
 <script lang="ts">
-  import { type ShortcutOptions, shortcuts } from '$lib/actions/shortcut';
  import { goto } from '$app/navigation';
+  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
  import type { Action } from '$lib/components/asset-viewer/actions/action';
  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
  import { AppRoute, AssetAction } from '$lib/constants';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import type { Viewport } from '$lib/stores/assets-store.svelte';
  import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { handlePromiseError } from '$lib/utils';
  import { deleteAssets } from '$lib/utils/actions';
  import { archiveAssets, cancelMultiselect } from '$lib/utils/asset-utils';
-  import { featureFlags } from '$lib/stores/server-config.store';
  import { handleError } from '$lib/utils/handle-error';
+  import { getJustifiedLayoutFromAssets, type CommonJustifiedLayout } from '$lib/utils/layout-utils';
  import { navigate } from '$lib/utils/navigation';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
  import { type AssetResponseDto } from '@immich/sdk';
+  import { debounce } from 'lodash-es';
  import { t } from 'svelte-i18n';
  import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-  import ShowShortcuts from '../show-shortcuts.svelte';
-  import Portal from '../portal/portal.svelte';
-  import { handlePromiseError } from '$lib/utils';
  import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { debounce } from 'lodash-es';
-  import { getJustifiedLayoutFromAssets, type CommonJustifiedLayout } from '$lib/utils/layout-utils';
+  import Portal from '../portal/portal.svelte';
+  import ShowShortcuts from '../show-shortcuts.svelte';

  interface Props {
    assets: AssetResponseDto[];
-    assetInteraction: AssetInteraction;
+    assetInteraction: AssetInteraction<AssetResponseDto>;
    disableAssetSelect?: boolean;
    showArchiveIcon?: boolean;
    viewport: Viewport;
@@ -481,18 +482,18 @@
        >
          <Thumbnail
            readonly={disableAssetSelect}
-            onClick={(asset) => {
+            onClick={() => {
              if (assetInteraction.selectionActive) {
                handleSelectAssets(asset);
                return;
              }
              void viewAssetHandler(asset);
            }}
-            onSelect={(asset) => handleSelectAssets(asset)}
+            onSelect={() => handleSelectAssets(asset)}
            onMouseEvent={() => assetMouseEventHandler(asset)}
            handleFocus={() => assetOnFocusHandler(asset)}
            {showArchiveIcon}
-            {asset}
+            asset={toTimelineAsset(asset)}
            selected={assetInteraction.hasSelectedAsset(asset.id)}
            selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
            focussed={assetInteraction.isFocussedAsset(asset.id)}