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

* refactor(web): asset viewer actions

* motion photo slot and more refactoring
This commit is contained in:
Michel Heusschen 2024-07-31 18:25:38 +02:00 committed by GitHub
parent 3a3ea6135e
commit 281cfc95a4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 682 additions and 476 deletions

View file

@ -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}