diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte index 75aa9197b8..00e845e8ec 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte @@ -8,6 +8,7 @@ import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte'; import RatingAction from '$lib/components/asset-viewer/actions/rating-action.svelte'; import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte'; + import RemoveFromAlbumAction from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte'; import RestoreAction from '$lib/components/asset-viewer/actions/restore-action.svelte'; import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/set-album-cover-action.svelte'; import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/set-person-featured-action.svelte'; @@ -15,8 +16,10 @@ import SetStackPrimaryAsset from '$lib/components/asset-viewer/actions/set-stack-primary-asset.svelte'; import SetVisibilityAction from '$lib/components/asset-viewer/actions/set-visibility-action.svelte'; import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte'; + import LoadingDots from '$lib/components/LoadingDots.svelte'; import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte'; import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte'; + import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte'; import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte'; import { languageManager } from '$lib/managers/language-manager.svelte'; import { Route } from '$lib/route'; @@ -36,8 +39,6 @@ type StackResponseDto, } from '@immich/sdk'; import { ActionButton, CommandPaletteDefaultProvider, Tooltip, type ActionItem } from '@immich/ui'; - import LoadingDots from '$lib/components/LoadingDots.svelte'; - import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte'; import { mdiArrowLeft, mdiArrowRight, @@ -60,6 +61,7 @@ onUndoDelete?: OnUndoDelete; onPlaySlideshow: () => void; onClose?: () => void; + onRemoveFromAlbum?: (assetIds: string[]) => void; playOriginalVideo: boolean; setPlayOriginalVideo: (value: boolean) => void; } @@ -75,11 +77,13 @@ onUndoDelete = undefined, onPlaySlideshow, onClose, + onRemoveFromAlbum, playOriginalVideo = false, setPlayOriginalVideo, }: Props = $props(); const isOwner = $derived($user && asset.ownerId === $user?.id); + const isAlbumOwner = $derived($user && album?.ownerId === $user?.id); const isLocked = $derived(asset.visibility === AssetVisibility.Locked); const smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch); @@ -154,6 +158,9 @@ {/if} + {#if album && (isOwner || isAlbumOwner)} + + {/if} {#if isOwner} diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte index 076f76cbc7..c6e0de2955 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte @@ -71,6 +71,7 @@ onAction?: OnAction; onUndoDelete?: OnUndoDelete; onClose?: (asset: AssetResponseDto) => void; + onRemoveFromAlbum?: (assetIds: string[]) => void; onRandom?: () => Promise<{ id: string } | undefined>; } @@ -86,6 +87,7 @@ onAction, onUndoDelete, onClose, + onRemoveFromAlbum, onRandom, }: Props = $props(); @@ -478,6 +480,7 @@ {onUndoDelete} onPlaySlideshow={() => ($slideshowState = SlideshowState.PlaySlideshow)} onClose={onClose ? () => onClose(asset) : undefined} + {onRemoveFromAlbum} {playOriginalVideo} {setPlayOriginalVideo} /> diff --git a/web/src/lib/components/timeline/TimelineAssetViewer.svelte b/web/src/lib/components/timeline/TimelineAssetViewer.svelte index bd4ead6def..cc0289e92b 100644 --- a/web/src/lib/components/timeline/TimelineAssetViewer.svelte +++ b/web/src/lib/components/timeline/TimelineAssetViewer.svelte @@ -103,6 +103,20 @@ await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget }); }; + const handleRemoveFromAlbum = async (assetIds: string[]) => { + timelineManager.removeAssets(assetIds); + + if (!assetIds.includes(assetCursor.current.id)) { + return; + } + + // keep the cleanup workflow in viewer by moving to adjacent asset first + // eslint-disable-next-line @typescript-eslint/no-unused-expressions + (await navigateToAsset(assetCursor?.nextAsset)) || + (await navigateToAsset(assetCursor?.previousAsset)) || + (await handleClose(assetCursor.current)); + }; + const handlePreAction = async (action: Action) => { switch (action.type) { case removeAction: @@ -232,6 +246,7 @@ }} onUndoDelete={handleUndoDelete} onRandom={handleRandom} + onRemoveFromAlbum={handleRemoveFromAlbum} onClose={handleClose} /> {/await} diff --git a/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte b/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte index ea2a8d4c2d..5d4943be0f 100644 --- a/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte +++ b/web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte @@ -10,16 +10,19 @@ interface Props { album: AlbumResponseDto; onRemove: ((assetIds: string[]) => void) | undefined; + assetIds?: string[]; menuItem?: boolean; } - let { album = $bindable(), onRemove, menuItem = false }: Props = $props(); + let { album = $bindable(), onRemove, assetIds, menuItem = false }: Props = $props(); - const { getAssets, clearSelect } = getAssetControlContext(); + const context = getAssetControlContext(); const removeFromAlbum = async () => { + const ids = assetIds ?? context?.getAssets().map(({ id }) => id) ?? []; + const isConfirmed = await modalManager.showDialog({ - prompt: $t('remove_assets_album_confirmation', { values: { count: getAssets().length } }), + prompt: $t('remove_assets_album_confirmation', { values: { count: ids.length } }), }); if (!isConfirmed) { @@ -27,7 +30,6 @@ } try { - const ids = [...getAssets()].map((a) => a.id); const results = await removeAssetFromAlbum({ id: album.id, bulkIdsDto: { ids }, @@ -40,7 +42,7 @@ const count = results.filter(({ success }) => success).length; toastManager.primary($t('assets_removed_count', { values: { count } })); - clearSelect(); + context?.clearSelect(); } catch (error) { handleError(error, $t('errors.error_removing_assets_from_album')); }