refactor(web): asset viewer actions (#11449)

* refactor(web): asset viewer actions * motion photo slot and more refactoring
2024-07-31 18:25:38 +02:00
parent 3a3ea6135e
commit 281cfc95a4
27 changed files with 682 additions and 476 deletions
@@ -0,0 +1,20 @@
+import type { AssetAction } from '$lib/constants';
+import type { AlbumResponseDto, AssetResponseDto } 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[] };
+};
+
+export type Action = {
+  [K in AssetAction]: { type: K } & ActionMap[K];
+}[AssetAction];
+export type OnAction = (action: Action) => void;
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { OnAction } from '$lib/components/asset-viewer/actions/action';
+  import AlbumSelectionModal from '$lib/components/shared-components/album-selection-modal.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import { AssetAction } from '$lib/constants';
+  import { addAssetsToAlbum, addAssetsToNewAlbum } from '$lib/utils/asset-utils';
+  import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
+  import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+  export let onAction: OnAction;
+  export let shared = false;
+
+  let showSelectionModal = false;
+
+  const handleAddToNewAlbum = async (albumName: string) => {
+    showSelectionModal = false;
+    const album = await addAssetsToNewAlbum(albumName, [asset.id]);
+    if (album) {
+      onAction({ type: AssetAction.ADD_TO_ALBUM, asset, album });
+    }
+  };
+
+  const handleAddToAlbum = async (album: AlbumResponseDto) => {
+    showSelectionModal = false;
+    await addAssetsToAlbum(album.id, [asset.id]);
+    onAction({ type: AssetAction.ADD_TO_ALBUM, asset, album });
+  };
+</script>
+
+<MenuOption
+  icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
+  text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
+  onClick={() => (showSelectionModal = true)}
+/>
+
+{#if showSelectionModal}
+  <Portal target="body">
+    <AlbumSelectionModal
+      {shared}
+      on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
+      on:album={({ detail }) => handleAddToAlbum(detail)}
+      onClose={() => (showSelectionModal = false)}
+    />
+  </Portal>
+{/if}
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import type { OnAction } from '$lib/components/asset-viewer/actions/action';
+  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 type { AssetResponseDto } from '@immich/sdk';
+  import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+  export let onAction: OnAction;
+
+  const onArchive = async () => {
+    const updatedAsset = await toggleArchive(asset);
+    if (updatedAsset) {
+      onAction({ type: asset.isArchived ? AssetAction.ARCHIVE : AssetAction.UNARCHIVE, asset });
+    }
+  };
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'a', shift: true }, onShortcut: onArchive }} />
+
+<MenuOption
+  icon={asset.isArchived ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline}
+  text={asset.isArchived ? $t('unarchive') : $t('to_archive')}
+  onClick={onArchive}
+/>
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { mdiArrowLeft } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let onClose: () => void;
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onClose }} />
+
+<CircleIconButton color="opaque" icon={mdiArrowLeft} title={$t('go_back')} on:click={onClose} />
@@ -0,0 +1,33 @@
+import type { AssetResponseDto } from '@immich/sdk';
+import { assetFactory } from '@test-data/factories/asset-factory';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/svelte';
+import DeleteAction from './delete-action.svelte';
+
+let asset: AssetResponseDto;
+
+describe('DeleteAction component', () => {
+  describe('given an asset which is not trashed yet', () => {
+    beforeEach(() => {
+      asset = assetFactory.build({ isTrashed: false });
+    });
+
+    it('displays a button to move the asset to the trash bin', () => {
+      const { getByTitle, queryByTitle } = render(DeleteAction, { asset, onAction: vi.fn() });
+      expect(getByTitle('delete')).toBeInTheDocument();
+      expect(queryByTitle('deletePermanently')).toBeNull();
+    });
+  });
+
+  describe('but if the asset is already trashed', () => {
+    beforeEach(() => {
+      asset = assetFactory.build({ isTrashed: true });
+    });
+
+    it('displays a button to permanently delete the asset', () => {
+      const { getByTitle, queryByTitle } = render(DeleteAction, { asset, onAction: vi.fn() });
+      expect(getByTitle('permanently_delete')).toBeInTheDocument();
+      expect(queryByTitle('delete')).toBeNull();
+    });
+  });
+});
@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { shortcuts } from '$lib/actions/shortcut';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import { AssetAction } from '$lib/constants';
+  import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { deleteAssets, type AssetResponseDto } from '@immich/sdk';
+  import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
+
+  export let asset: AssetResponseDto;
+  export let onAction: OnAction;
+
+  let showConfirmModal = false;
+
+  const trashOrDelete = async (force = false) => {
+    if (force || !$featureFlags.trash) {
+      if ($showDeleteModal) {
+        showConfirmModal = true;
+        return;
+      }
+      await deleteAsset();
+      return;
+    }
+
+    await trashAsset();
+    return;
+  };
+
+  const trashAsset = async () => {
+    try {
+      await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id] } });
+      onAction({ type: AssetAction.TRASH, asset });
+
+      notificationController.show({
+        message: $t('moved_to_trash'),
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_trash_asset'));
+    }
+  };
+
+  const deleteAsset = async () => {
+    try {
+      await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
+      onAction({ type: AssetAction.DELETE, asset });
+
+      notificationController.show({
+        message: $t('permanently_deleted_asset'),
+        type: NotificationType.Info,
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_delete_asset'));
+    } finally {
+      showConfirmModal = false;
+    }
+  };
+</script>
+
+<svelte:window
+  use:shortcuts={[
+    { shortcut: { key: 'Delete' }, onShortcut: () => trashOrDelete(asset.isTrashed) },
+    { shortcut: { key: 'Delete', shift: true }, onShortcut: () => trashOrDelete(true) },
+  ]}
+/>
+
+<CircleIconButton
+  color="opaque"
+  icon={asset.isTrashed ? mdiDeleteForeverOutline : mdiDeleteOutline}
+  title={asset.isTrashed ? $t('permanently_delete') : $t('delete')}
+  on:click={() => trashOrDelete(asset.isTrashed)}
+/>
+
+{#if showConfirmModal}
+  <Portal target="body">
+    <DeleteAssetDialog size={1} on:cancel={() => (showConfirmModal = false)} on:confirm={() => deleteAsset()} />
+  </Portal>
+{/if}
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { downloadFile } from '$lib/utils/asset-utils';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { mdiFolderDownloadOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+  export let menuItem = false;
+
+  const onDownloadFile = () => downloadFile(asset);
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'd', shift: true }, onShortcut: onDownloadFile }} />
+
+{#if !menuItem}
+  <CircleIconButton color="opaque" icon={mdiFolderDownloadOutline} title={$t('download')} on:click={onDownloadFile} />
+{:else}
+  <MenuOption icon={mdiFolderDownloadOutline} text={$t('download')} onClick={onDownloadFile} />
+{/if}
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import {
+    NotificationType,
+    notificationController,
+  } from '$lib/components/shared-components/notification/notification';
+  import { AssetAction } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateAsset, type AssetResponseDto } from '@immich/sdk';
+  import { mdiHeart, mdiHeartOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
+
+  export let asset: AssetResponseDto;
+  export let onAction: OnAction;
+
+  const toggleFavorite = async () => {
+    try {
+      const data = await updateAsset({
+        id: asset.id,
+        updateAssetDto: {
+          isFavorite: !asset.isFavorite,
+        },
+      });
+
+      asset.isFavorite = data.isFavorite;
+      onAction({ type: asset.isFavorite ? AssetAction.FAVORITE : AssetAction.UNFAVORITE, asset });
+
+      notificationController.show({
+        type: NotificationType.Info,
+        message: asset.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'),
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: asset.isFavorite } }));
+    }
+  };
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'f' }, onShortcut: toggleFavorite }} />
+
+<CircleIconButton
+  color="opaque"
+  icon={asset.isFavorite ? mdiHeart : mdiHeartOutline}
+  title={asset.isFavorite ? $t('unfavorite') : $t('to_favorite')}
+  on:click={toggleFavorite}
+/>
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { mdiMotionPauseOutline, mdiPlaySpeed } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let isPlaying: boolean;
+  export let onClick: (shouldPlay: boolean) => void;
+</script>
+
+<CircleIconButton
+  color="opaque"
+  icon={isPlaying ? mdiMotionPauseOutline : mdiPlaySpeed}
+  title={isPlaying ? $t('stop_motion_photo') : $t('play_motion_photo')}
+  on:click={() => onClick(!isPlaying)}
+/>
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiChevronRight } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import NavigationArea from '../navigation-area.svelte';
+
+  export let onNextAsset: () => void;
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'ArrowRight' }, onShortcut: onNextAsset }} />
+
+<NavigationArea onClick={onNextAsset} label={$t('view_next_asset')}>
+  <Icon path={mdiChevronRight} size="36" ariaHidden />
+</NavigationArea>
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiChevronLeft } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import NavigationArea from '../navigation-area.svelte';
+
+  export let onPreviousAsset: () => void;
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'ArrowLeft' }, onShortcut: onPreviousAsset }} />
+
+<NavigationArea onClick={onPreviousAsset} label={$t('view_previous_asset')}>
+  <Icon path={mdiChevronLeft} size="36" ariaHidden />
+</NavigationArea>
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { AssetAction } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { restoreAssets, type AssetResponseDto } from '@immich/sdk';
+  import { mdiHistory } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
+
+  export let asset: AssetResponseDto;
+  export let onAction: OnAction;
+
+  const handleRestoreAsset = async () => {
+    try {
+      await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
+      asset.isTrashed = false;
+
+      onAction({ type: AssetAction.RESTORE, asset });
+
+      notificationController.show({
+        type: NotificationType.Info,
+        message: $t('restored_asset'),
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_restore_assets'));
+    }
+  };
+</script>
+
+<MenuOption icon={mdiHistory} onClick={handleRestoreAsset} text={$t('restore')} />
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateAlbumInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
+  import { mdiImageOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+  export let album: AlbumResponseDto;
+
+  const handleUpdateThumbnail = async () => {
+    try {
+      await updateAlbumInfo({
+        id: album.id,
+        updateAlbumDto: {
+          albumThumbnailAssetId: asset.id,
+        },
+      });
+      notificationController.show({
+        type: NotificationType.Info,
+        message: $t('album_cover_updated'),
+        timeout: 1500,
+      });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_update_album_cover'));
+    }
+  };
+</script>
+
+<MenuOption text={$t('set_as_album_cover')} icon={mdiImageOutline} onClick={handleUpdateThumbnail} />
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import ProfileImageCropper from '$lib/components/shared-components/profile-image-cropper.svelte';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { mdiAccountCircleOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+
+  let showProfileImageCrop = false;
+</script>
+
+<MenuOption
+  icon={mdiAccountCircleOutline}
+  onClick={() => (showProfileImageCrop = true)}
+  text={$t('set_as_profile_picture')}
+/>
+
+{#if showProfileImageCrop}
+  <Portal target="body">
+    <ProfileImageCropper {asset} onClose={() => (showProfileImageCrop = false)} />
+  </Portal>
+{/if}
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+  import Portal from '$lib/components/shared-components/portal/portal.svelte';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { mdiShareVariantOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let asset: AssetResponseDto;
+
+  let showModal = false;
+</script>
+
+<CircleIconButton
+  color="opaque"
+  icon={mdiShareVariantOutline}
+  on:click={() => (showModal = true)}
+  title={$t('share')}
+/>
+
+{#if showModal}
+  <Portal target="body">
+    <CreateSharedLinkModal assetIds={[asset.id]} onClose={() => (showModal = false)} />
+  </Portal>
+{/if}
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { mdiInformationOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  export let onShowDetail: () => void;
+</script>
+
+<svelte:window use:shortcut={{ shortcut: { key: 'i' }, onShortcut: onShowDetail }} />
+
+<CircleIconButton color="opaque" icon={mdiInformationOutline} on:click={onShowDetail} title={$t('info')} />
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { AssetAction } from '$lib/constants';
+  import { unstackAssets } from '$lib/utils/asset-utils';
+  import type { AssetResponseDto } from '@immich/sdk';
+  import { mdiImageMinusOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { OnAction } from './action';
+
+  export let stackedAssets: AssetResponseDto[];
+  export let onAction: OnAction;
+
+  const handleUnstack = async () => {
+    const unstackedAssets = await unstackAssets(stackedAssets);
+    if (unstackedAssets) {
+      onAction({ type: AssetAction.UNSTACK, assets: unstackedAssets });
+    }
+  };
+</script>
+
+<MenuOption icon={mdiImageMinusOutline} onClick={handleUnstack} text={$t('unstack')} />