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'));
}