(0, {
duration: (from: number, to: number) => (to ? 5000 * (to - from) : 0),
});
@@ -130,7 +129,7 @@
const handleNextMemory = () => handleNavigate(current?.nextMemory?.assets[0]);
const handlePreviousMemory = () => handleNavigate(current?.previousMemory?.assets[0]);
const handleEscape = async () => goto(AppRoute.PHOTOS);
- const handleSelectAll = () => assetInteractionStore.selectAssets(current?.memory.assets || []);
+ const handleSelectAll = () => assetInteraction.selectAssets(current?.memory.assets || []);
const handleAction = async (action: 'reset' | 'pause' | 'play') => {
switch (action) {
case 'play': {
@@ -212,10 +211,6 @@
current = loadFromParams($memories, target);
});
- let isMultiSelectionMode = $derived($selectedAssets.size > 0);
- let isAllArchived = $derived([...$selectedAssets].every((asset) => asset.isArchived));
- let isAllFavorite = $derived([...$selectedAssets].every((asset) => asset.isFavorite));
-
$effect(() => {
handlePromiseError(handleProgress($progressBarController));
});
@@ -223,7 +218,6 @@
$effect(() => {
handlePromiseError(handleAction(galleryInView ? 'pause' : 'play'));
});
- let isAllUserOwned = $derived([...$selectedAssets].every((asset) => asset.ownerId === $user.id));
cancelMultiselect(assetInteractionStore)}>
+ cancelMultiselect(assetInteraction)}
+ >
handleSelectGroup(dateGroup.groupTitle, dateGroup.assets)}
on:keydown={() => handleSelectGroup(dateGroup.groupTitle, dateGroup.assets)}
>
- {#if $selectedGroup.has(dateGroup.groupTitle)}
+ {#if assetInteraction.selectedGroup.has(dateGroup.groupTitle)}
- {#if isMultiSelectionMode}
- cancelMultiselect(assetInteractionStore)}>
+ {#if assetInteraction.selectionActive}
+ cancelMultiselect(assetInteraction)}
+ >
-
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index eda340e7e2..8f8a067a90 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -5,7 +5,6 @@
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
import { AppRoute, AssetAction } from '$lib/constants';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
- import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import type { Viewport } from '$lib/stores/assets.store';
import { showDeleteModal } from '$lib/stores/preferences.store';
import { deleteAssets } from '$lib/utils/actions';
@@ -22,10 +21,11 @@
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';
interface Props {
assets: AssetResponseDto[];
- assetInteractionStore: AssetInteractionStore;
+ assetInteraction: AssetInteraction;
disableAssetSelect?: boolean;
showArchiveIcon?: boolean;
viewport: Viewport;
@@ -38,7 +38,7 @@
let {
assets = $bindable(),
- assetInteractionStore = $bindable(),
+ assetInteraction,
disableAssetSelect = false,
showArchiveIcon = false,
viewport,
@@ -51,11 +51,8 @@
let { isViewing: isViewerOpen, asset: viewingAsset, setAsset } = assetViewingStore;
- const { assetSelectionCandidates, assetSelectionStart, selectedAssets, isMultiSelectState } = assetInteractionStore;
-
let showShortcuts = $state(false);
let currentViewAssetIndex = 0;
- let isMultiSelectionMode = $derived($selectedAssets.size > 0);
let shiftKeyIsDown = $state(false);
let lastAssetMouseEvent: AssetResponseDto | null = $state(null);
@@ -66,11 +63,11 @@
};
const selectAllAssets = () => {
- assetInteractionStore.selectAssets(assets);
+ assetInteraction.selectAssets(assets);
};
const deselectAllAssets = () => {
- cancelMultiselect(assetInteractionStore);
+ cancelMultiselect(assetInteraction);
};
const onKeyDown = (event: KeyboardEvent) => {
@@ -91,23 +88,23 @@
if (!asset) {
return;
}
- const deselect = $selectedAssets.has(asset);
+ const deselect = assetInteraction.selectedAssets.has(asset);
// Select/deselect already loaded assets
if (deselect) {
- for (const candidate of $assetSelectionCandidates || []) {
- assetInteractionStore.removeAssetFromMultiselectGroup(candidate);
+ for (const candidate of assetInteraction.assetSelectionCandidates) {
+ assetInteraction.removeAssetFromMultiselectGroup(candidate);
}
- assetInteractionStore.removeAssetFromMultiselectGroup(asset);
+ assetInteraction.removeAssetFromMultiselectGroup(asset);
} else {
- for (const candidate of $assetSelectionCandidates || []) {
- assetInteractionStore.selectAsset(candidate);
+ for (const candidate of assetInteraction.assetSelectionCandidates) {
+ assetInteraction.selectAsset(candidate);
}
- assetInteractionStore.selectAsset(asset);
+ assetInteraction.selectAsset(asset);
}
- assetInteractionStore.clearAssetSelectionCandidates();
- assetInteractionStore.setAssetSelectionStart(deselect ? null : asset);
+ assetInteraction.clearAssetSelectionCandidates();
+ assetInteraction.setAssetSelectionStart(deselect ? null : asset);
};
const handleSelectAssetCandidates = (asset: AssetResponseDto | null) => {
@@ -122,7 +119,7 @@
return;
}
- const startAsset = $assetSelectionStart;
+ const startAsset = assetInteraction.assetSelectionStart;
if (!startAsset) {
return;
}
@@ -134,17 +131,17 @@
[start, end] = [end, start];
}
- assetInteractionStore.setAssetSelectionCandidates(assets.slice(start, end + 1));
+ assetInteraction.setAssetSelectionCandidates(assets.slice(start, end + 1));
};
const onSelectStart = (e: Event) => {
- if ($isMultiSelectState && shiftKeyIsDown) {
+ if (assetInteraction.selectionActive && shiftKeyIsDown) {
e.preventDefault();
}
};
const onDelete = () => {
- const hasTrashedAsset = Array.from($selectedAssets).some((asset) => asset.isTrashed);
+ const hasTrashedAsset = assetInteraction.selectedAssetsArray.some((asset) => asset.isTrashed);
if ($showDeleteModal && (!isTrashEnabled || hasTrashedAsset)) {
isShowDeleteConfirmation = true;
@@ -168,11 +165,11 @@
(assetIds) => (assets = assets.filter((asset) => !assetIds.includes(asset.id))),
idsSelectedAssets,
);
- assetInteractionStore.clearMultiselect();
+ assetInteraction.clearMultiselect();
};
const toggleArchive = async () => {
- const ids = await archiveAssets(Array.from($selectedAssets), !isAllArchived);
+ const ids = await archiveAssets(assetInteraction.selectedAssetsArray, !assetInteraction.isAllArchived);
if (ids) {
assets.filter((asset) => !ids.includes(asset.id));
deselectAllAssets();
@@ -191,7 +188,7 @@
{ shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets() },
];
- if ($isMultiSelectState) {
+ if (assetInteraction.selectionActive) {
shortcuts.push(
{ shortcut: { key: 'Escape' }, onShortcut: deselectAllAssets },
{ shortcut: { key: 'Delete' }, onShortcut: onDelete },
@@ -266,14 +263,13 @@
};
const assetMouseEventHandler = (asset: AssetResponseDto | null) => {
- if ($isMultiSelectState) {
+ if (assetInteraction.selectionActive) {
handleSelectAssetCandidates(asset);
}
};
let isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
- let idsSelectedAssets = $derived([...$selectedAssets].map(({ id }) => id));
- let isAllArchived = $derived([...$selectedAssets].every((asset) => asset.isArchived));
+ let idsSelectedAssets = $derived(assetInteraction.selectedAssetsArray.map(({ id }) => id));
let geometry = $derived(
(() => {
@@ -297,13 +293,13 @@
$effect(() => {
if (!lastAssetMouseEvent) {
- assetInteractionStore.clearAssetSelectionCandidates();
+ assetInteraction.clearAssetSelectionCandidates();
}
});
$effect(() => {
if (!shiftKeyIsDown) {
- assetInteractionStore.clearAssetSelectionCandidates();
+ assetInteraction.clearAssetSelectionCandidates();
}
});
@@ -318,7 +314,7 @@
{#if isShowDeleteConfirmation}
(isShowDeleteConfirmation = false)}
onConfirm={() => handlePromiseError(trashOrDelete(true))}
/>
@@ -340,7 +336,7 @@
{
- if (isMultiSelectionMode) {
+ if (assetInteraction.selectionActive) {
handleSelectAssets(asset);
return;
}
@@ -351,8 +347,8 @@
onIntersected={() => (i === Math.max(1, assets.length - 7) ? onIntersected?.() : void 0)}
{showArchiveIcon}
{asset}
- selected={$selectedAssets.has(asset)}
- selectionCandidate={$assetSelectionCandidates.has(asset)}
+ selected={assetInteraction.selectedAssets.has(asset)}
+ selectionCandidate={assetInteraction.assetSelectionCandidates.has(asset)}
thumbnailWidth={geometry.boxes[i].width}
thumbnailHeight={geometry.boxes[i].height}
/>
diff --git a/web/src/lib/stores/asset-interaction.store.ts b/web/src/lib/stores/asset-interaction.store.ts
deleted file mode 100644
index f7db5382b0..0000000000
--- a/web/src/lib/stores/asset-interaction.store.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import type { AssetResponseDto } from '@immich/sdk';
-import { derived, readonly, writable } from 'svelte/store';
-
-export type AssetInteractionStore = ReturnType;
-
-export function createAssetInteractionStore() {
- const selectedAssets = writable(new Set());
- const selectedGroup = writable(new Set());
- const isMultiSelectStoreState = derived(selectedAssets, ($selectedAssets) => $selectedAssets.size > 0);
-
- // Candidates for the range selection. This set includes only loaded assets, so it improves highlight
- // performance. From the user's perspective, range is highlighted almost immediately
- const assetSelectionCandidates = writable(new Set());
- // The beginning of the selection range
- const assetSelectionStart = writable(null);
-
- const selectAsset = (asset: AssetResponseDto) => {
- selectedAssets.update(($selectedAssets) => $selectedAssets.add(asset));
- };
-
- const selectAssets = (assets: AssetResponseDto[]) => {
- selectedAssets.update(($selectedAssets) => {
- for (const asset of assets) {
- $selectedAssets.add(asset);
- }
- return $selectedAssets;
- });
- };
-
- const removeAssetFromMultiselectGroup = (asset: AssetResponseDto) => {
- selectedAssets.update(($selectedAssets) => {
- $selectedAssets.delete(asset);
- return $selectedAssets;
- });
- };
-
- const addGroupToMultiselectGroup = (group: string) => {
- selectedGroup.update(($selectedGroup) => $selectedGroup.add(group));
- };
-
- const removeGroupFromMultiselectGroup = (group: string) => {
- selectedGroup.update(($selectedGroup) => {
- $selectedGroup.delete(group);
- return $selectedGroup;
- });
- };
-
- const setAssetSelectionStart = (asset: AssetResponseDto | null) => {
- assetSelectionStart.set(asset);
- };
-
- const setAssetSelectionCandidates = (assets: AssetResponseDto[]) => {
- assetSelectionCandidates.set(new Set(assets));
- };
-
- const clearAssetSelectionCandidates = () => {
- assetSelectionCandidates.set(new Set());
- };
-
- const clearMultiselect = () => {
- // Multi-selection
- selectedAssets.set(new Set());
- selectedGroup.set(new Set());
-
- // Range selection
- assetSelectionCandidates.set(new Set());
- assetSelectionStart.set(null);
- };
-
- return {
- selectAsset,
- selectAssets,
- removeAssetFromMultiselectGroup,
- addGroupToMultiselectGroup,
- removeGroupFromMultiselectGroup,
- setAssetSelectionCandidates,
- clearAssetSelectionCandidates,
- setAssetSelectionStart,
- clearMultiselect,
- isMultiSelectState: readonly(isMultiSelectStoreState),
- selectedAssets: readonly(selectedAssets),
- selectedGroup: readonly(selectedGroup),
- assetSelectionCandidates: readonly(assetSelectionCandidates),
- assetSelectionStart: readonly(assetSelectionStart),
- };
-}
diff --git a/web/src/lib/stores/asset-interaction.svelte.spec.ts b/web/src/lib/stores/asset-interaction.svelte.spec.ts
new file mode 100644
index 0000000000..5d3043b37c
--- /dev/null
+++ b/web/src/lib/stores/asset-interaction.svelte.spec.ts
@@ -0,0 +1,40 @@
+import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+import { resetSavedUser, user } from '$lib/stores/user.store';
+import { assetFactory } from '@test-data/factories/asset-factory';
+import { userAdminFactory } from '@test-data/factories/user-factory';
+
+describe('AssetInteraction', () => {
+ let assetInteraction: AssetInteraction;
+
+ beforeEach(() => {
+ assetInteraction = new AssetInteraction();
+ });
+
+ it('calculates derived values from selection', () => {
+ assetInteraction.selectAsset(assetFactory.build({ isFavorite: true, isArchived: true, isTrashed: true }));
+ assetInteraction.selectAsset(assetFactory.build({ isFavorite: true, isArchived: false, isTrashed: false }));
+
+ expect(assetInteraction.selectionActive).toBe(true);
+ expect(assetInteraction.isAllTrashed).toBe(false);
+ expect(assetInteraction.isAllArchived).toBe(false);
+ expect(assetInteraction.isAllFavorite).toBe(true);
+ });
+
+ it('updates isAllUserOwned when the active user changes', () => {
+ const [user1, user2] = userAdminFactory.buildList(2);
+ assetInteraction.selectAsset(assetFactory.build({ ownerId: user1.id }));
+
+ const cleanup = $effect.root(() => {
+ expect(assetInteraction.isAllUserOwned).toBe(false);
+
+ user.set(user1);
+ expect(assetInteraction.isAllUserOwned).toBe(true);
+
+ user.set(user2);
+ expect(assetInteraction.isAllUserOwned).toBe(false);
+ });
+
+ cleanup();
+ resetSavedUser();
+ });
+});
diff --git a/web/src/lib/stores/asset-interaction.svelte.ts b/web/src/lib/stores/asset-interaction.svelte.ts
new file mode 100644
index 0000000000..4397c7f71f
--- /dev/null
+++ b/web/src/lib/stores/asset-interaction.svelte.ts
@@ -0,0 +1,66 @@
+import { user } from '$lib/stores/user.store';
+import type { AssetResponseDto, UserAdminResponseDto } from '@immich/sdk';
+import { SvelteSet } from 'svelte/reactivity';
+import { fromStore } from 'svelte/store';
+
+export class AssetInteraction {
+ readonly selectedAssets = new SvelteSet();
+ readonly selectedGroup = new SvelteSet();
+ assetSelectionCandidates = $state(new SvelteSet());
+ assetSelectionStart = $state(null);
+
+ selectionActive = $derived(this.selectedAssets.size > 0);
+ selectedAssetsArray = $derived([...this.selectedAssets]);
+
+ private user = fromStore(user);
+ private userId = $derived(this.user.current?.id);
+
+ isAllTrashed = $derived(this.selectedAssetsArray.every((asset) => asset.isTrashed));
+ isAllArchived = $derived(this.selectedAssetsArray.every((asset) => asset.isArchived));
+ isAllFavorite = $derived(this.selectedAssetsArray.every((asset) => asset.isFavorite));
+ isAllUserOwned = $derived(this.selectedAssetsArray.every((asset) => asset.ownerId === this.userId));
+
+ selectAsset(asset: AssetResponseDto) {
+ this.selectedAssets.add(asset);
+ }
+
+ selectAssets(assets: AssetResponseDto[]) {
+ for (const asset of assets) {
+ this.selectedAssets.add(asset);
+ }
+ }
+
+ removeAssetFromMultiselectGroup(asset: AssetResponseDto) {
+ this.selectedAssets.delete(asset);
+ }
+
+ addGroupToMultiselectGroup(group: string) {
+ this.selectedGroup.add(group);
+ }
+
+ removeGroupFromMultiselectGroup(group: string) {
+ this.selectedGroup.delete(group);
+ }
+
+ setAssetSelectionStart(asset: AssetResponseDto | null) {
+ this.assetSelectionStart = asset;
+ }
+
+ setAssetSelectionCandidates(assets: AssetResponseDto[]) {
+ this.assetSelectionCandidates = new SvelteSet(assets);
+ }
+
+ clearAssetSelectionCandidates() {
+ this.assetSelectionCandidates.clear();
+ }
+
+ clearMultiselect() {
+ // Multi-selection
+ this.selectedAssets.clear();
+ this.selectedGroup.clear();
+
+ // Range selection
+ this.assetSelectionCandidates.clear();
+ this.assetSelectionStart = null;
+ }
+}
diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts
index 37041ecbc4..5b06a66597 100644
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -2,7 +2,7 @@ import { goto } from '$app/navigation';
import FormatBoldMessage from '$lib/components/i18n/format-bold-message.svelte';
import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
-import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
+import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { isSelectingAllAssets, type AssetStore } from '$lib/stores/assets.store';
import { downloadManager } from '$lib/stores/download';
@@ -460,7 +460,7 @@ export const keepThisDeleteOthers = async (keepAsset: AssetResponseDto, stack: S
}
};
-export const selectAllAssets = async (assetStore: AssetStore, assetInteractionStore: AssetInteractionStore) => {
+export const selectAllAssets = async (assetStore: AssetStore, assetInteraction: AssetInteraction) => {
if (get(isSelectingAllAssets)) {
// Selection is already ongoing
return;
@@ -474,7 +474,7 @@ export const selectAllAssets = async (assetStore: AssetStore, assetInteractionSt
if (!get(isSelectingAllAssets)) {
break; // Cancelled
}
- assetInteractionStore.selectAssets(bucket.assets);
+ assetInteraction.selectAssets(bucket.assets);
// We use setTimeout to allow the UI to update. Otherwise, this may
// cause a long delay between the start of 'select all' and the
@@ -489,9 +489,9 @@ export const selectAllAssets = async (assetStore: AssetStore, assetInteractionSt
}
};
-export const cancelMultiselect = (assetInteractionStore: AssetInteractionStore) => {
+export const cancelMultiselect = (assetInteraction: AssetInteraction) => {
isSelectingAllAssets.set(false);
- assetInteractionStore.clearMultiselect();
+ assetInteraction.clearMultiselect();
};
export const toggleArchive = async (asset: AssetResponseDto) => {
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 5c63d8e1a3..0f6c62a5fa 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -35,7 +35,6 @@
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { AppRoute, AlbumPageViewMode } from '$lib/constants';
import { numberOfComments, setNumberOfComments, updateNumberOfComments } from '$lib/stores/activity.store';
- import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { AssetStore } from '$lib/stores/assets.store';
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
@@ -87,6 +86,7 @@
import { onDestroy } from 'svelte';
import { confirmAlbumDelete } from '$lib/utils/album-utils';
import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
+ import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
interface Props {
data: PageData;
@@ -107,11 +107,8 @@
let reactions: ActivityResponseDto[] = $state([]);
let albumOrder: AssetOrder | undefined = $state(data.album.order);
- const assetInteractionStore = createAssetInteractionStore();
- const { isMultiSelectState, selectedAssets } = assetInteractionStore;
-
- const timelineInteractionStore = createAssetInteractionStore();
- const { selectedAssets: timelineSelected } = timelineInteractionStore;
+ const assetInteraction = new AssetInteraction();
+ const timelineInteraction = new AssetInteraction();
afterNavigate(({ from }) => {
let url: string | undefined = from?.url?.pathname;
@@ -234,8 +231,8 @@
if ($showAssetViewer) {
return;
}
- if ($isMultiSelectState) {
- cancelMultiselect(assetInteractionStore);
+ if (assetInteraction.selectionActive) {
+ cancelMultiselect(assetInteraction);
return;
}
await goto(backUrl);
@@ -245,9 +242,8 @@
const refreshAlbum = async () => {
album = await getAlbumInfo({ id: album.id, withoutAssets: true });
};
-
const handleAddAssets = async () => {
- const assetIds = [...$timelineSelected].map((asset) => asset.id);
+ const assetIds = timelineInteraction.selectedAssetsArray.map((asset) => asset.id);
try {
const results = await addAssetsToAlbum({
@@ -263,7 +259,7 @@
await refreshAlbum();
- timelineInteractionStore.clearMultiselect();
+ timelineInteraction.clearMultiselect();
await setModeToView();
} catch (error) {
handleError(error, $t('errors.error_adding_assets_to_album'));
@@ -284,13 +280,13 @@
};
const handleCloseSelectAssets = async () => {
- timelineInteractionStore.clearMultiselect();
+ timelineInteraction.clearMultiselect();
await setModeToView();
};
const handleSelectFromComputer = async () => {
await openFileUploadDialog({ albumId: album.id });
- timelineInteractionStore.clearMultiselect();
+ timelineInteraction.clearMultiselect();
await setModeToView();
};
@@ -359,16 +355,16 @@
}
viewMode = AlbumPageViewMode.VIEW;
- assetInteractionStore.clearMultiselect();
+ assetInteraction.clearMultiselect();
await updateThumbnail(assetId);
};
const updateThumbnailUsingCurrentSelection = async () => {
- if ($selectedAssets.size === 1) {
- const assetId = [...$selectedAssets][0].id;
- assetInteractionStore.clearMultiselect();
- await updateThumbnail(assetId);
+ if (assetInteraction.selectedAssets.size === 1) {
+ const [firstAsset] = assetInteraction.selectedAssets;
+ assetInteraction.clearMultiselect();
+ await updateThumbnail(firstAsset.id);
}
};
@@ -410,9 +406,6 @@
let timelineStore = $derived(new AssetStore({ isArchived: false, withPartners: true }, albumId));
let isOwned = $derived($user.id == album.ownerId);
- let isAllUserOwned = $derived([...$selectedAssets].every((asset) => asset.ownerId === $user.id));
- let isAllFavorite = $derived([...$selectedAssets].every((asset) => asset.isFavorite));
- let isAllArchived = $derived([...$selectedAssets].every((asset) => asset.isArchived));
let showActivityStatus = $derived(
album.albumUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || $numberOfComments > 0),
@@ -433,40 +426,50 @@
- {#if $isMultiSelectState}
- assetInteractionStore.clearMultiselect()}>
+ {#if assetInteraction.selectionActive}
+ assetInteraction.clearMultiselect()}
+ >
- {#if isAllUserOwned}
- assetStore.triggerUpdate()} />
+ {#if assetInteraction.isAllUserOwned}
+ assetStore.triggerUpdate()}
+ />
{/if}
updateThumbnailUsingCurrentSelection()}
/>
{/if}
- assetStore.triggerUpdate()} />
+ assetStore.triggerUpdate()}
+ />
{/if}
- {#if $preferences.tags.enabled && isAllUserOwned}
+ {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
@@ -540,10 +543,10 @@
{#snippet leading()}
assetInteractionStore.clearMultiselect()}>
+{#if assetInteraction.selectionActive}
+ assetInteraction.clearMultiselect()}
+ >
assetStore.removeAssets(assetIds)} />
- assetStore.triggerUpdate()} />
+ assetStore.triggerUpdate()} />
assetStore.removeAssets(assetIds)} />
@@ -53,8 +53,8 @@
{/if}
-
-
+
+
{#snippet empty()}
assetInteractionStore.clearMultiselect()}>
+{#if assetInteraction.selectionActive}
+ assetInteraction.clearMultiselect()}
+ >
assetStore.removeAssets(assetIds)} />
assetStore.removeAssets(assetIds)} />
+ assetStore.removeAssets(assetIds)}
+ />
{#if $preferences.tags.enabled}
{/if}
-
-
+
+
{#snippet empty()}
{
- assetInteractionStore.clearMultiselect();
assetStore.destroy();
});
- {#if $isMultiSelectState}
-
+ {#if assetInteraction.selectionActive}
+
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 143a19dd5c..6788c678ed 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -27,7 +27,6 @@
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute, PersonPageViewMode, QueryParameter, SessionStorageKey } from '$lib/constants';
- import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { AssetStore } from '$lib/stores/assets.store';
import { websocketEvents } from '$lib/stores/websocket';
@@ -58,8 +57,9 @@
import { listNavigation } from '$lib/actions/list-navigation';
import { t } from 'svelte-i18n';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
- import { preferences, user } from '$lib/stores/user.store';
+ import { preferences } from '$lib/stores/user.store';
import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
+ import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
interface Props {
data: PageData;
@@ -78,8 +78,7 @@
handlePromiseError(assetStore.updateOptions(assetStoreOptions));
});
- const assetInteractionStore = createAssetInteractionStore();
- const { selectedAssets, isMultiSelectState } = assetInteractionStore;
+ const assetInteraction = new AssetInteraction();
let viewMode: PersonPageViewMode = $state(PersonPageViewMode.VIEW_ASSETS);
let isEditingName = $state(false);
@@ -123,8 +122,8 @@
if ($showAssetViewer || viewMode === PersonPageViewMode.SUGGEST_MERGE) {
return;
}
- if ($isMultiSelectState) {
- assetInteractionStore.clearMultiselect();
+ if (assetInteraction.selectionActive) {
+ assetInteraction.clearMultiselect();
return;
} else {
await goto(previousRoute);
@@ -149,8 +148,8 @@
});
const handleUnmerge = () => {
- $assetStore.removeAssets([...$selectedAssets].map((a) => a.id));
- assetInteractionStore.clearMultiselect();
+ $assetStore.removeAssets(assetInteraction.selectedAssetsArray.map((a) => a.id));
+ assetInteraction.clearMultiselect();
viewMode = PersonPageViewMode.VIEW_ASSETS;
};
@@ -194,7 +193,7 @@
handleError(error, $t('errors.unable_to_set_feature_photo'));
}
- assetInteractionStore.clearMultiselect();
+ assetInteraction.clearMultiselect();
viewMode = PersonPageViewMode.VIEW_ASSETS;
};
@@ -336,15 +335,11 @@
handlePromiseError(updateAssetCount());
}
});
-
- let isAllArchive = $derived([...$selectedAssets].every((asset) => asset.isArchived));
- let isAllFavorite = $derived([...$selectedAssets].every((asset) => asset.isFavorite));
- let isAllUserOwned = $derived([...$selectedAssets].every((asset) => asset.ownerId === $user.id));
{#if viewMode === PersonPageViewMode.UNASSIGN_ASSETS}
a.id)}
+ assetIds={assetInteraction.selectedAssetsArray.map((a) => a.id)}
personAssets={person}
onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
onConfirm={handleUnmerge}
@@ -375,15 +370,18 @@
{/if}
- {#if $isMultiSelectState}
- assetInteractionStore.clearMultiselect()}>
+ {#if assetInteraction.selectionActive}
+ assetInteraction.clearMultiselect()}
+ >
- assetStore.triggerUpdate()} />
+ assetStore.triggerUpdate()} />
$assetStore.removeAssets(assetIds)} />
- {#if $preferences.tags.enabled && isAllUserOwned}
+ $assetStore.removeAssets(assetIds)}
+ />
+ {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
$assetStore.removeAssets(assetIds)} />
@@ -453,7 +455,7 @@
{
- const selection = [...$selectedAssets];
- isAllOwned = selection.every((asset) => asset.ownerId === $user.id);
- isAllFavorite = selection.every((asset) => asset.isFavorite);
- isAssetStackSelected = selection.length === 1 && !!selection[0].stack;
- const isLivePhoto = selection.length === 1 && !!selection[0].livePhotoVideoId;
+ let selectedAssets = $derived(assetInteraction.selectedAssetsArray);
+ let isAssetStackSelected = $derived(selectedAssets.length === 1 && !!selectedAssets[0].stack);
+ let isLinkActionAvailable = $derived.by(() => {
+ const isLivePhoto = selectedAssets.length === 1 && !!selectedAssets[0].livePhotoVideoId;
const isLivePhotoCandidate =
- selection.length === 2 &&
- selection.some((asset) => asset.type === AssetTypeEnum.Image) &&
- selection.some((asset) => asset.type === AssetTypeEnum.Video);
- isLinkActionAvailable = isAllOwned && (isLivePhoto || isLivePhotoCandidate);
- });
+ selectedAssets.length === 2 &&
+ selectedAssets.some((asset) => asset.type === AssetTypeEnum.Image) &&
+ selectedAssets.some((asset) => asset.type === AssetTypeEnum.Video);
+ return assetInteraction.isAllUserOwned && (isLivePhoto || isLivePhotoCandidate);
+ });
const handleEscape = () => {
if ($showAssetViewer) {
return;
}
- if ($isMultiSelectState) {
- assetInteractionStore.clearMultiselect();
+ if (assetInteraction.selectionActive) {
+ assetInteraction.clearMultiselect();
return;
}
};
@@ -78,22 +70,22 @@
});
-{#if $isMultiSelectState}
+{#if assetInteraction.selectionActive}
assetInteractionStore.clearMultiselect()}
+ assets={assetInteraction.selectedAssets}
+ clearSelect={() => assetInteraction.clearMultiselect()}
>
- assetStore.triggerUpdate()} />
+ assetStore.triggerUpdate()} />
assetStore.removeAssets(assetIds)}
@@ -103,7 +95,7 @@
{#if isLinkActionAvailable}
{/if}
-
+
;
-
- let isMultiSelectionMode = $derived($selectedAssets.size > 0);
- let isAllArchived = $derived([...$selectedAssets].every((asset) => asset.isArchived));
- let isAllFavorite = $derived([...$selectedAssets].every((asset) => asset.isFavorite));
let searchQuery = $derived($page.url.searchParams.get(QueryParameter.QUERY));
onMount(() => {
@@ -86,8 +81,8 @@
return;
}
- if (isMultiSelectionMode) {
- $selectedAssets = new Set();
+ if (assetInteraction.selectionActive) {
+ assetInteraction.selectedAssets.clear();
return;
}
if (!$preventRaceConditionSearchBar) {
@@ -131,7 +126,7 @@
searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => !assetIdSet.has(a.id));
};
const handleSelectAll = () => {
- assetInteractionStore.selectAssets(searchResultAssets);
+ assetInteraction.selectAssets(searchResultAssets);
};
async function onSearchQueryUpdate() {
@@ -231,29 +226,31 @@
function getObjectKeys(obj: T): (keyof T)[] {
return Object.keys(obj) as (keyof T)[];
}
- let isAllUserOwned = $derived([...$selectedAssets].every((asset) => asset.ownerId === $user.id));
- {#if isMultiSelectionMode}
+ {#if assetInteraction.selectionActive}
- {#if $timelineSelected.size === 0} + {#if !timelineInteraction.selectionActive} {$t('add_to_album')} {:else} - {$t('selected_count', { values: { count: $timelineSelected.size } })} + {$t('selected_count', { values: { count: timelineInteraction.selectedAssets.size } })} {/if}
{/snippet} @@ -556,7 +559,7 @@ > {$t('select_from_computer')} - {/snippet} @@ -579,7 +582,7 @@
- cancelMultiselect(assetInteractionStore)}>
+ cancelMultiselect(assetInteraction)}
+ >
-
{
return Object.fromEntries(tags.map((tag) => [tag.value, tag]));
@@ -198,7 +198,7 @@
{#if tag}
-
+
{#snippet empty()}
assetInteractionStore.clearMultiselect()}>
- assetInteraction.clearMultiselect()}
+ >
+ assetStore.removeAssets(assetIds)} />
assetStore.removeAssets(assetIds)} />
{/if}
{#if $featureFlags.loaded && $featureFlags.trash}
-
+
{#snippet buttons()}
-
+
- handleEmptyTrash()} disabled={$isMultiSelectState}>
+ handleEmptyTrash()} disabled={assetInteraction.selectionActive}>
+
{$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })}