cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): asset interaction (#14662)

Browse Source 
* refactor(web): asset interaction

* feedback
This commit is contained in:
Michel Heusschen
2024-12-14 19:30:33 +01:00
committed by GitHub
parent 525840b040
commit b5022d80d6
21 changed files with 375 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+40 -37
View File
@@ -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 @@
<div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
<div class="relative w-full shrink">
{#if $isMultiSelectState}
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
{#if assetInteraction.selectionActive}
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => assetInteraction.clearMultiselect()}
>
<CreateSharedLink />
<SelectAllAssets {assetStore} {assetInteractionStore} />
<SelectAllAssets {assetStore} {assetInteraction} />
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
<AddToAlbum />
<AddToAlbum shared />
</ButtonContextMenu>
{#if isAllUserOwned}
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
{#if assetInteraction.isAllUserOwned}
<FavoriteAction
removeFavorite={assetInteraction.isAllFavorite}
onFavorite={() => assetStore.triggerUpdate()}
/>
{/if}
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
<DownloadAction menuItem filename="{album.albumName}.zip" />
{#if isAllUserOwned}
{#if assetInteraction.isAllUserOwned}
<ChangeDate menuItem />
<ChangeLocation menuItem />
{#if $selectedAssets.size === 1}
{#if assetInteraction.selectedAssets.size === 1}
<MenuOption
text={$t('set_as_album_cover')}
icon={mdiImageOutline}
onClick={() => updateThumbnailUsingCurrentSelection()}
/>
{/if}
<ArchiveAction menuItem unarchive={isAllArchived} onArchive={() => assetStore.triggerUpdate()} />
<ArchiveAction
menuItem
unarchive={assetInteraction.isAllArchived}
onArchive={() => assetStore.triggerUpdate()}
/>
{/if}
{#if $preferences.tags.enabled && isAllUserOwned}
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
<TagAction menuItem />
{/if}
{#if isOwned || isAllUserOwned}
{#if isOwned || assetInteraction.isAllUserOwned}
<RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
{/if}
{#if isAllUserOwned}
{#if assetInteraction.isAllUserOwned}
<DeleteAssets menuItem onAssetDelete={handleRemoveAssets} />
{/if}
</ButtonContextMenu>
@@ -540,10 +543,10 @@
<ControlAppBar onClose={handleCloseSelectAssets}>
{#snippet leading()}
<p class="text-lg dark:text-immich-dark-fg">
{#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}
</p>
{/snippet}
@@ -556,7 +559,7 @@
>
{$t('select_from_computer')}
</button>
<Button size="sm" rounded="lg" disabled={$timelineSelected.size === 0} onclick={handleAddAssets}
<Button size="sm" rounded="lg" disabled={!timelineInteraction.selectionActive} onclick={handleAddAssets}
>{$t('done')}</Button
>
{/snippet}
@@ -579,7 +582,7 @@
<AssetGrid
enableRouting={false}
assetStore={timelineStore}
assetInteractionStore={timelineInteractionStore}
assetInteraction={timelineInteraction}
isSelectionMode={true}
/>
{:else}
@@ -587,7 +590,7 @@
enableRouting={true}
{album}
{assetStore}
{assetInteractionStore}
{assetInteraction}
isShared={album.albumUsers.length > 0}
isSelectionMode={viewMode === AlbumPageViewMode.SELECT_THUMBNAIL}
singleSelect={viewMode === AlbumPageViewMode.SELECT_THUMBNAIL}
web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+11 -11
View File
@@ -12,12 +12,12 @@
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import { AssetAction } from '$lib/constants';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { AssetStore } from '$lib/stores/assets.store';
import type { PageData } from './$types';
import { mdiPlus, mdiDotsVertical } from '@mdi/js';
import { t } from 'svelte-i18n';
import { onDestroy } from 'svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
interface Props {
data: PageData;
@@ -26,26 +26,26 @@
let { data }: Props = $props();
const assetStore = new AssetStore({ isArchived: true });
const assetInteractionStore = createAssetInteractionStore();
const { isMultiSelectState, selectedAssets } = assetInteractionStore;
let isAllFavorite = $derived([...$selectedAssets].every((asset) => asset.isFavorite));
const assetInteraction = new AssetInteraction();
onDestroy(() => {
assetStore.destroy();
});
</script>
{#if $isMultiSelectState}
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
{#if assetInteraction.selectionActive}
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => assetInteraction.clearMultiselect()}
>
<ArchiveAction unarchive onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
<CreateSharedLink />
<SelectAllAssets {assetStore} {assetInteractionStore} />
<SelectAllAssets {assetStore} {assetInteraction} />
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
<AddToAlbum />
<AddToAlbum shared />
</ButtonContextMenu>
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<FavoriteAction removeFavorite={assetInteraction.isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<ButtonContextMenu icon={mdiDotsVertical} title={$t('add')}>
<DownloadAction menuItem />
<DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
@@ -53,8 +53,8 @@
</AssetSelectControlBar>
{/if}
<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<AssetGrid enableRouting={true} {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}>
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
<AssetGrid enableRouting={true} {assetStore} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
{#snippet empty()}
<EmptyPlaceholder text={$t('no_archived_assets_message')} />
{/snippet}
web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+15 -11
View File
@@ -14,7 +14,6 @@
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import { AssetAction } from '$lib/constants';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { AssetStore } from '$lib/stores/assets.store';
import type { PageData } from './$types';
import { mdiDotsVertical, mdiPlus } from '@mdi/js';
@@ -22,6 +21,7 @@
import { onDestroy } from 'svelte';
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;
@@ -30,10 +30,7 @@
let { data }: Props = $props();
const assetStore = new AssetStore({ isFavorite: true });
const assetInteractionStore = createAssetInteractionStore();
const { isMultiSelectState, selectedAssets } = assetInteractionStore;
let isAllArchive = $derived([...$selectedAssets].every((asset) => asset.isArchived));
const assetInteraction = new AssetInteraction();
onDestroy(() => {
assetStore.destroy();
@@ -41,11 +38,14 @@
</script>
<!-- Multiselection mode app bar -->
{#if $isMultiSelectState}
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
{#if assetInteraction.selectionActive}
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => assetInteraction.clearMultiselect()}
>
<FavoriteAction removeFavorite onFavorite={(assetIds) => assetStore.removeAssets(assetIds)} />
<CreateSharedLink />
<SelectAllAssets {assetStore} {assetInteractionStore} />
<SelectAllAssets {assetStore} {assetInteraction} />
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
<AddToAlbum />
<AddToAlbum shared />
@@ -54,7 +54,11 @@
<DownloadAction menuItem />
<ChangeDate menuItem />
<ChangeLocation menuItem />
<ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
<ArchiveAction
menuItem
unarchive={assetInteraction.isAllArchived}
onArchive={(assetIds) => assetStore.removeAssets(assetIds)}
/>
{#if $preferences.tags.enabled}
<TagAction menuItem />
{/if}
@@ -63,8 +67,8 @@
</AssetSelectControlBar>
{/if}
<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<AssetGrid enableRouting={true} {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}>
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
<AssetGrid enableRouting={true} {assetStore} {assetInteraction} removeAction={AssetAction.UNFAVORITE}>
{#snippet empty()}
<EmptyPlaceholder text={$t('no_favorites_message')} />
{/snippet}
web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
+3 -3
View File
@@ -3,7 +3,6 @@
import { page } from '$app/stores';
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
@@ -17,6 +16,7 @@
import type { PageData } from './$types';
import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
interface Props {
data: PageData;
@@ -31,7 +31,7 @@
let currentPath = $derived($page.url.searchParams.get(QueryParameter.PATH) || '');
let currentTreeItems = $derived(currentPath ? data.currentFolders : Object.keys(tree));
const assetInteractionStore = createAssetInteractionStore();
const assetInteraction = new AssetInteraction();
onMount(async () => {
await foldersStore.fetchUniquePaths();
@@ -80,7 +80,7 @@
<div bind:clientHeight={viewport.height} bind:clientWidth={viewport.width} class="mt-2">
<GalleryViewer
assets={data.pathAssets}
{assetInteractionStore}
{assetInteraction}
{viewport}
disableAssetSelect={true}
showAssetName={true}
web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+5 -7
View File
@@ -8,12 +8,12 @@
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import { AppRoute } from '$lib/constants';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { AssetStore } from '$lib/stores/assets.store';
import { onDestroy } from 'svelte';
import type { PageData } from './$types';
import { mdiPlus, mdiArrowLeft } from '@mdi/js';
import { t } from 'svelte-i18n';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
interface Props {
data: PageData;
@@ -22,18 +22,16 @@
let { data }: Props = $props();
const assetStore = new AssetStore({ userId: data.partner.id, isArchived: false, withStacked: true });
const assetInteractionStore = createAssetInteractionStore();
const { isMultiSelectState, selectedAssets, clearMultiselect } = assetInteractionStore;
const assetInteraction = new AssetInteraction();
onDestroy(() => {
assetInteractionStore.clearMultiselect();
assetStore.destroy();
});
</script>
<main class="grid h-screen bg-immich-bg pt-18 dark:bg-immich-dark-bg">
{#if $isMultiSelectState}
<AssetSelectControlBar assets={$selectedAssets} clearSelect={clearMultiselect}>
{#if assetInteraction.selectionActive}
<AssetSelectControlBar assets={assetInteraction.selectedAssets} clearSelect={assetInteraction.clearMultiselect}>
<CreateSharedLink />
<ButtonContextMenu icon={mdiPlus} title={$t('add')}>
<AddToAlbum />
@@ -50,5 +48,5 @@
{/snippet}
</ControlAppBar>
{/if}
<AssetGrid enableRouting={true} {assetStore} {assetInteractionStore} />
<AssetGrid enableRouting={true} {assetStore} {assetInteraction} />
</main>
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+23 -21
View File
@@ -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));
</script>
{#if viewMode === PersonPageViewMode.UNASSIGN_ASSETS}
<UnMergeFaceSelector
assetIds={[...$selectedAssets].map((a) => a.id)}
assetIds={assetInteraction.selectedAssetsArray.map((a) => a.id)}
personAssets={person}
onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
onConfirm={handleUnmerge}
@@ -375,15 +370,18 @@
{/if}
<header>
{#if $isMultiSelectState}
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
{#if assetInteraction.selectionActive}
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => assetInteraction.clearMultiselect()}
>
<CreateSharedLink />
<SelectAllAssets {assetStore} {assetInteractionStore} />
<SelectAllAssets {assetStore} {assetInteraction} />
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
<AddToAlbum />
<AddToAlbum shared />
</ButtonContextMenu>
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<FavoriteAction removeFavorite={assetInteraction.isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<ButtonContextMenu icon={mdiDotsVertical} title={$t('add')}>
<DownloadAction menuItem filename="{person.name || 'immich'}.zip" />
<MenuOption
@@ -393,8 +391,12 @@
/>
<ChangeDate menuItem />
<ChangeLocation menuItem />
<ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => $assetStore.removeAssets(assetIds)} />
{#if $preferences.tags.enabled && isAllUserOwned}
<ArchiveAction
menuItem
unarchive={assetInteraction.isAllArchived}
onArchive={(assetIds) => $assetStore.removeAssets(assetIds)}
/>
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
<TagAction menuItem />
{/if}
<DeleteAssets menuItem onAssetDelete={(assetIds) => $assetStore.removeAssets(assetIds)} />
@@ -453,7 +455,7 @@
<AssetGrid
enableRouting={true}
{assetStore}
{assetInteractionStore}
{assetInteraction}
isSelectionMode={viewMode === PersonPageViewMode.SELECT_PERSON}
singleSelect={viewMode === PersonPageViewMode.SELECT_PERSON}
onSelect={handleSelectFeaturePhoto}
web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+22 -30
View File
@@ -19,7 +19,7 @@
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import { AssetAction } from '$lib/constants';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { AssetStore } from '$lib/stores/assets.store';
import { preferences, user } from '$lib/stores/user.store';
@@ -32,33 +32,25 @@
let { isViewing: showAssetViewer } = assetViewingStore;
const assetStore = new AssetStore({ isArchived: false, withStacked: true, withPartners: true });
const assetInteractionStore = createAssetInteractionStore();
const { isMultiSelectState, selectedAssets } = assetInteractionStore;
const assetInteraction = new AssetInteraction();
let isAllFavorite = $state(false);
let isAllOwned = $state(false);
let isAssetStackSelected = $state(false);
let isLinkActionAvailable = $state(false);
$effect(() => {
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 @@
});
</script>
{#if $isMultiSelectState}
{#if assetInteraction.selectionActive}
<AssetSelectControlBar
ownerId={$user.id}
assets={$selectedAssets}
clearSelect={() => assetInteractionStore.clearMultiselect()}
assets={assetInteraction.selectedAssets}
clearSelect={() => assetInteraction.clearMultiselect()}
>
<CreateSharedLink />
<SelectAllAssets {assetStore} {assetInteractionStore} />
<SelectAllAssets {assetStore} {assetInteraction} />
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
<AddToAlbum />
<AddToAlbum shared />
</ButtonContextMenu>
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<FavoriteAction removeFavorite={assetInteraction.isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
<DownloadAction menuItem />
{#if $selectedAssets.size > 1 || isAssetStackSelected}
{#if assetInteraction.selectedAssets.size > 1 || isAssetStackSelected}
<StackAction
unstack={isAssetStackSelected}
onStack={(assetIds) => assetStore.removeAssets(assetIds)}
@@ -103,7 +95,7 @@
{#if isLinkActionAvailable}
<LinkLivePhotoAction
menuItem
unlink={[...$selectedAssets].length === 1}
unlink={assetInteraction.selectedAssets.size === 1}
onLink={handleLink}
onUnlink={handleUnlink}
/>
@@ -121,11 +113,11 @@
</AssetSelectControlBar>
{/if}
<UserPageLayout hideNavbar={$isMultiSelectState} showUploadButton scrollbar={false}>
<UserPageLayout hideNavbar={assetInteraction.selectionActive} showUploadButton scrollbar={false}>
<AssetGrid
enableRouting={true}
{assetStore}
{assetInteractionStore}
{assetInteraction}
removeAction={AssetAction.ARCHIVE}
onEscape={handleEscape}
withStacked
web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+15 -18
View File
@@ -16,7 +16,6 @@
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
import { cancelMultiselect } from '$lib/utils/asset-utils';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
import { AppRoute, QueryParameter } from '$lib/constants';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -44,8 +43,9 @@
import { t } from 'svelte-i18n';
import { onMount, tick } from 'svelte';
import AssetJobActions from '$lib/components/photos-page/actions/asset-job-actions.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';
const MAX_ASSET_COUNT = 5000;
let { isViewing: showAssetViewer } = assetViewingStore;
@@ -63,14 +63,9 @@
let scrollY = $state(0);
let scrollYHistory = 0;
const assetInteractionStore = createAssetInteractionStore();
const { selectedAssets } = assetInteractionStore;
const assetInteraction = new AssetInteraction();
type SearchTerms = MetadataSearchDto & Pick<SmartSearchDto, 'query'>;
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<T extends object>(obj: T): (keyof T)[] {
return Object.keys(obj) as (keyof T)[];
}
let isAllUserOwned = $derived([...$selectedAssets].every((asset) => asset.ownerId === $user.id));
</script>
<svelte:window use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onEscape }} bind:scrollY />
<section>
{#if isMultiSelectionMode}
{#if assetInteraction.selectionActive}
<div class="fixed z-[100] top-0 left-0 w-full">
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => cancelMultiselect(assetInteractionStore)}>
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => cancelMultiselect(assetInteraction)}
>
<CreateSharedLink />
<CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
<AddToAlbum {onAddToAlbum} />
<AddToAlbum shared {onAddToAlbum} />
</ButtonContextMenu>
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />
<FavoriteAction removeFavorite={assetInteraction.isAllFavorite} onFavorite={triggerAssetUpdate} />
<ButtonContextMenu icon={mdiDotsVertical} title={$t('add')}>
<DownloadAction menuItem />
<ChangeDate menuItem />
<ChangeLocation menuItem />
<ArchiveAction menuItem unarchive={isAllArchived} onArchive={triggerAssetUpdate} />
{#if $preferences.tags.enabled && isAllUserOwned}
<ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} onArchive={triggerAssetUpdate} />
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
<TagAction menuItem />
{/if}
<DeleteAssets menuItem {onAssetDelete} />
@@ -333,7 +330,7 @@
{#if searchResultAssets.length > 0}
<GalleryViewer
assets={searchResultAssets}
{assetInteractionStore}
{assetInteraction}
onIntersected={loadNextPage}
showArchiveIcon={true}
{viewport}
web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
+3 -3
View File
@@ -16,7 +16,6 @@
import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
import { AppRoute, AssetAction, QueryParameter, SettingInputFieldType } from '$lib/constants';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { AssetStore } from '$lib/stores/assets.store';
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
import { deleteTag, getAllTags, updateTag, upsertTags, type TagResponseDto } from '@immich/sdk';
@@ -26,6 +25,7 @@
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
interface Props {
data: PageData;
@@ -36,7 +36,7 @@
let pathSegments = $derived(data.path ? data.path.split('/') : []);
let currentPath = $derived($page.url.searchParams.get(QueryParameter.PATH) || '');
const assetInteractionStore = createAssetInteractionStore();
const assetInteraction = new AssetInteraction();
const buildMap = (tags: TagResponseDto[]) => {
return Object.fromEntries(tags.map((tag) => [tag.value, tag]));
@@ -198,7 +198,7 @@
<section class="mt-2 h-full">
{#if tag}
<AssetGrid enableRouting={true} {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}>
<AssetGrid enableRouting={true} {assetStore} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
{#snippet empty()}
<TreeItemThumbnails items={data.children} icon={mdiTag} onClick={handleNavigation} />
{/snippet}
web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
+12 -10
View File
@@ -15,7 +15,6 @@
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { AssetStore } from '$lib/stores/assets.store';
import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
import { handleError } from '$lib/utils/handle-error';
@@ -26,6 +25,7 @@
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { t } from 'svelte-i18n';
import { onDestroy } from 'svelte';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
interface Props {
data: PageData;
@@ -39,8 +39,7 @@
const options = { isTrashed: true };
const assetStore = new AssetStore(options);
const assetInteractionStore = createAssetInteractionStore();
const { isMultiSelectState, selectedAssets } = assetInteractionStore;
const assetInteraction = new AssetInteraction();
const handleEmptyTrash = async () => {
const isConfirmed = await dialogController.show({
@@ -93,25 +92,28 @@
});
</script>
{#if $isMultiSelectState}
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
<SelectAllAssets {assetStore} {assetInteractionStore} />
{#if assetInteraction.selectionActive}
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => assetInteraction.clearMultiselect()}
>
<SelectAllAssets {assetStore} {assetInteraction} />
<DeleteAssets force onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
<RestoreAssets onRestore={(assetIds) => assetStore.removeAssets(assetIds)} />
</AssetSelectControlBar>
{/if}
{#if $featureFlags.loaded && $featureFlags.trash}
<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
{#snippet buttons()}
<div class="flex place-items-center gap-2">
<LinkButton onclick={handleRestoreTrash} disabled={$isMultiSelectState}>
<LinkButton onclick={handleRestoreTrash} disabled={assetInteraction.selectionActive}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiHistory} size="18" />
{$t('restore_all')}
</div>
</LinkButton>
<LinkButton onclick={() => handleEmptyTrash()} disabled={$isMultiSelectState}>
<LinkButton onclick={() => handleEmptyTrash()} disabled={assetInteraction.selectionActive}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiDeleteForeverOutline} size="18" />
{$t('empty_trash')}
@@ -120,7 +122,7 @@
</div>
{/snippet}
<AssetGrid enableRouting={true} {assetStore} {assetInteractionStore}>
<AssetGrid enableRouting={true} {assetStore} {assetInteraction}>
<p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
{$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })}
</p>