mirror of
https://github.com/immich-app/immich.git
synced 2026-05-18 03:10:24 +03:00
refactor: selection mananger (#27325)
This commit is contained in:
Jason Rasmussen
+28
-29
@@ -29,6 +29,7 @@
|
||||
import Timeline from '$lib/components/timeline/Timeline.svelte';
|
||||
import { AlbumPageViewMode } from '$lib/constants';
|
||||
import { activityManager } from '$lib/managers/activity-manager.svelte';
|
||||
import { assetMultiSelectManager, AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
|
||||
import { eventManager } from '$lib/managers/event-manager.svelte';
|
||||
import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
|
||||
@@ -45,7 +46,6 @@
|
||||
} from '$lib/services/album.service';
|
||||
import { getGlobalActions } from '$lib/services/app.service';
|
||||
import { getAssetBulkActions } from '$lib/services/asset.service';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
|
||||
import { preferences, user } from '$lib/stores/user.store';
|
||||
import { handlePromiseError } from '$lib/utils';
|
||||
@@ -91,8 +91,7 @@
|
||||
let timelineManager = $state<TimelineManager>() as TimelineManager;
|
||||
let showAlbumUsers = $derived(timelineManager?.showAssetOwners ?? false);
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
const timelineInteraction = new AssetInteraction();
|
||||
const timelineMultiSelectManager = new AssetMultiSelectManager();
|
||||
|
||||
const handleFavorite = async () => {
|
||||
try {
|
||||
@@ -127,8 +126,8 @@
|
||||
if (assetViewerManager.isViewing) {
|
||||
return;
|
||||
}
|
||||
if (assetInteraction.selectionActive) {
|
||||
cancelMultiselect(assetInteraction);
|
||||
if (assetMultiSelectManager.selectionActive) {
|
||||
cancelMultiselect(assetMultiSelectManager);
|
||||
return;
|
||||
}
|
||||
await goto(Route.albums());
|
||||
@@ -149,13 +148,13 @@
|
||||
};
|
||||
|
||||
const handleCloseSelectAssets = async () => {
|
||||
timelineInteraction.clearMultiselect();
|
||||
timelineMultiSelectManager.clearMultiselect();
|
||||
await setModeToView();
|
||||
};
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
};
|
||||
|
||||
const handleRemoveAssets = async (assetIds: string[]) => {
|
||||
@@ -176,13 +175,13 @@
|
||||
await updateThumbnail(assetId);
|
||||
|
||||
viewMode = AlbumPageViewMode.VIEW;
|
||||
assetInteraction.clearMultiselect();
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
};
|
||||
|
||||
const updateThumbnailUsingCurrentSelection = async () => {
|
||||
if (assetInteraction.selectedAssets.length === 1) {
|
||||
const [firstAsset] = assetInteraction.selectedAssets;
|
||||
assetInteraction.clearMultiselect();
|
||||
if (assetMultiSelectManager.selectedAssets.length === 1) {
|
||||
const [firstAsset] = assetMultiSelectManager.selectedAssets;
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
await updateThumbnail(firstAsset.id);
|
||||
}
|
||||
};
|
||||
@@ -271,7 +270,7 @@
|
||||
}
|
||||
};
|
||||
const currentAssetIntersection = $derived(
|
||||
viewMode === AlbumPageViewMode.SELECT_ASSETS ? timelineInteraction : assetInteraction,
|
||||
viewMode === AlbumPageViewMode.SELECT_ASSETS ? timelineMultiSelectManager : assetMultiSelectManager,
|
||||
);
|
||||
|
||||
const onSharedLinkCreate = async () => {
|
||||
@@ -291,7 +290,7 @@
|
||||
}
|
||||
|
||||
await refreshAlbum();
|
||||
timelineInteraction.clearMultiselect();
|
||||
timelineMultiSelectManager.clearMultiselect();
|
||||
await setModeToView();
|
||||
};
|
||||
|
||||
@@ -313,7 +312,7 @@
|
||||
|
||||
const { Cast } = $derived(getGlobalActions($t));
|
||||
const { Share } = $derived(getAlbumActions($t, album));
|
||||
const { AddAssets, Upload } = $derived(getAlbumAssetsActions($t, album, timelineInteraction.selectedAssets));
|
||||
const { AddAssets, Upload } = $derived(getAlbumAssetsActions($t, album, timelineMultiSelectManager.selectedAssets));
|
||||
|
||||
const Close = $derived({
|
||||
title: $t('go_back'),
|
||||
@@ -452,36 +451,36 @@
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
{#if assetInteraction.selectionActive}
|
||||
{#if assetMultiSelectManager.selectionActive}
|
||||
<AssetSelectControlBar
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
assets={assetMultiSelectManager.selectedAssets}
|
||||
clearSelect={() => assetMultiSelectManager.clearMultiselect()}
|
||||
>
|
||||
{@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
|
||||
{@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
|
||||
<CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
|
||||
<ActionButton action={Actions.AddToAlbum} />
|
||||
{#if assetInteraction.isAllUserOwned}
|
||||
{#if assetMultiSelectManager.isAllUserOwned}
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
removeFavorite={assetMultiSelectManager.isAllFavorite}
|
||||
onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
|
||||
></FavoriteAction>
|
||||
{/if}
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')} offset={{ x: 175, y: 25 }}>
|
||||
<DownloadAction menuItem filename="{album.albumName}.zip" />
|
||||
{#if assetInteraction.isAllUserOwned}
|
||||
{#if assetMultiSelectManager.isAllUserOwned}
|
||||
<ChangeDate menuItem />
|
||||
<ChangeDescription menuItem />
|
||||
<ChangeLocation menuItem />
|
||||
<ArchiveAction
|
||||
menuItem
|
||||
unarchive={assetInteraction.isAllArchived}
|
||||
unarchive={assetMultiSelectManager.isAllArchived}
|
||||
onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
|
||||
/>
|
||||
<SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
|
||||
{/if}
|
||||
{#if assetInteraction.selectedAssets.length === 1}
|
||||
{#if assetMultiSelectManager.selectedAssets.length === 1}
|
||||
<MenuOption
|
||||
text={$t('set_as_album_cover')}
|
||||
icon={mdiImageOutline}
|
||||
@@ -489,14 +488,14 @@
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
|
||||
{#if $preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
|
||||
<TagAction menuItem />
|
||||
{/if}
|
||||
|
||||
{#if isOwned || assetInteraction.isAllUserOwned}
|
||||
{#if isOwned || assetMultiSelectManager.isAllUserOwned}
|
||||
<RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
|
||||
{/if}
|
||||
{#if assetInteraction.isAllUserOwned}
|
||||
{#if assetMultiSelectManager.isAllUserOwned}
|
||||
<DeleteAssets menuItem onAssetDelete={handleRemoveAssets} onUndoDelete={handleUndoRemoveAssets} />
|
||||
{/if}
|
||||
</ButtonContextMenu>
|
||||
@@ -595,10 +594,10 @@
|
||||
<ControlAppBar onClose={handleCloseSelectAssets}>
|
||||
{#snippet leading()}
|
||||
<p class="text-lg dark:text-immich-dark-fg">
|
||||
{#if !timelineInteraction.selectionActive}
|
||||
{#if !timelineMultiSelectManager.selectionActive}
|
||||
{$t('add_to_album')}
|
||||
{:else}
|
||||
{$t('selected_count', { values: { count: timelineInteraction.selectedAssets.length } })}
|
||||
{$t('selected_count', { values: { count: timelineMultiSelectManager.selectedAssets.length } })}
|
||||
{/if}
|
||||
</p>
|
||||
{/snippet}
|
||||
|
||||
@@ -13,9 +13,9 @@
|
||||
import { AssetAction } from '$lib/constants';
|
||||
|
||||
import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
|
||||
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { getAssetBulkActions } from '$lib/services/asset.service';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { AssetVisibility } from '@immich/sdk';
|
||||
import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
|
||||
import { mdiDotsVertical } from '@mdi/js';
|
||||
@@ -30,27 +30,25 @@
|
||||
let timelineManager = $state<TimelineManager>() as TimelineManager;
|
||||
const options = { visibility: AssetVisibility.Archive };
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
const handleEscape = () => {
|
||||
if (assetInteraction.selectionActive) {
|
||||
assetInteraction.clearMultiselect();
|
||||
if (assetMultiSelectManager.selectionActive) {
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
};
|
||||
</script>
|
||||
|
||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
||||
<UserPageLayout hideNavbar={assetMultiSelectManager.selectionActive} title={data.meta.title} scrollbar={false}>
|
||||
<Timeline
|
||||
enableRouting={true}
|
||||
bind:timelineManager
|
||||
{options}
|
||||
{assetInteraction}
|
||||
assetInteraction={assetMultiSelectManager}
|
||||
removeAction={AssetAction.UNARCHIVE}
|
||||
onEscape={handleEscape}
|
||||
>
|
||||
@@ -60,22 +58,22 @@
|
||||
</Timeline>
|
||||
</UserPageLayout>
|
||||
|
||||
{#if assetInteraction.selectionActive}
|
||||
{#if assetMultiSelectManager.selectionActive}
|
||||
<AssetSelectControlBar
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
assets={assetMultiSelectManager.selectedAssets}
|
||||
clearSelect={() => assetMultiSelectManager.clearMultiselect()}
|
||||
>
|
||||
{@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
|
||||
{@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
|
||||
<CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
|
||||
<ArchiveAction
|
||||
unarchive
|
||||
onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
|
||||
/>
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
|
||||
<ActionButton action={Actions.AddToAlbum} />
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
removeFavorite={assetMultiSelectManager.isAllFavorite}
|
||||
onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
|
||||
/>
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||
|
||||
@@ -15,9 +15,9 @@
|
||||
import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
|
||||
import Timeline from '$lib/components/timeline/Timeline.svelte';
|
||||
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { getAssetBulkActions } from '$lib/services/asset.service';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
|
||||
import { mdiDotsVertical } from '@mdi/js';
|
||||
@@ -33,28 +33,26 @@
|
||||
let timelineManager = $state<TimelineManager>() as TimelineManager;
|
||||
const options = { isFavorite: true, withStacked: true };
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
const handleEscape = () => {
|
||||
if (assetInteraction.selectionActive) {
|
||||
assetInteraction.clearMultiselect();
|
||||
if (assetMultiSelectManager.selectionActive) {
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
};
|
||||
</script>
|
||||
|
||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
||||
<UserPageLayout hideNavbar={assetMultiSelectManager.selectionActive} title={data.meta.title} scrollbar={false}>
|
||||
<Timeline
|
||||
enableRouting={true}
|
||||
withStacked={true}
|
||||
bind:timelineManager
|
||||
{options}
|
||||
{assetInteraction}
|
||||
assetInteraction={assetMultiSelectManager}
|
||||
onEscape={handleEscape}
|
||||
>
|
||||
{#snippet empty()}
|
||||
@@ -64,16 +62,16 @@
|
||||
</UserPageLayout>
|
||||
|
||||
<!-- Multiselection mode app bar -->
|
||||
{#if assetInteraction.selectionActive}
|
||||
{#if assetMultiSelectManager.selectionActive}
|
||||
<AssetSelectControlBar
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
assets={assetMultiSelectManager.selectedAssets}
|
||||
clearSelect={() => assetMultiSelectManager.clearMultiselect()}
|
||||
>
|
||||
{@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
|
||||
{@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
|
||||
<CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
|
||||
<FavoriteAction removeFavorite onFavorite={(assetIds) => timelineManager.removeAssets(assetIds)} />
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
|
||||
<ActionButton action={Actions.AddToAlbum} />
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||
<DownloadAction menuItem />
|
||||
@@ -82,7 +80,7 @@
|
||||
<ChangeLocation menuItem />
|
||||
<ArchiveAction
|
||||
menuItem
|
||||
unarchive={assetInteraction.isAllArchived}
|
||||
unarchive={assetMultiSelectManager.isAllArchived}
|
||||
onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
|
||||
/>
|
||||
{#if $preferences.tags.enabled}
|
||||
|
||||
@@ -19,10 +19,10 @@
|
||||
import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
|
||||
import SkipLink from '$lib/elements/SkipLink.svelte';
|
||||
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import type { Viewport } from '$lib/managers/timeline-manager/types';
|
||||
import { Route } from '$lib/route';
|
||||
import { getAssetBulkActions } from '$lib/services/asset.service';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { foldersStore } from '$lib/stores/folders.svelte';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
import { cancelMultiselect } from '$lib/utils/asset-utils';
|
||||
@@ -40,7 +40,6 @@
|
||||
let { data }: Props = $props();
|
||||
|
||||
const viewport: Viewport = $state({ width: 0, height: 0 });
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
const handleNavigateToFolder = (folderName: string) => navigateToView(joinPaths(data.tree.path, folderName));
|
||||
|
||||
@@ -48,7 +47,7 @@
|
||||
|
||||
afterNavigate(function clearAssetSelection() {
|
||||
// Clear the asset selection when we navigate (like going to another folder)
|
||||
cancelMultiselect(assetInteraction);
|
||||
cancelMultiselect(assetMultiSelectManager);
|
||||
});
|
||||
|
||||
function navigateToView(path: string) {
|
||||
@@ -56,7 +55,7 @@
|
||||
}
|
||||
|
||||
async function triggerAssetUpdate() {
|
||||
cancelMultiselect(assetInteraction);
|
||||
cancelMultiselect(assetMultiSelectManager);
|
||||
if (data.tree.path) {
|
||||
await foldersStore.refreshAssetsByPath(data.tree.path);
|
||||
}
|
||||
@@ -68,7 +67,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
assetInteraction.selectAssets(data.pathAssets.map((asset) => toTimelineAsset(asset)));
|
||||
assetMultiSelectManager.selectAssets(data.pathAssets.map((asset) => toTimelineAsset(asset)));
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -100,7 +99,7 @@
|
||||
<div bind:clientHeight={viewport.height} bind:clientWidth={viewport.width} class="mt-2">
|
||||
<GalleryViewer
|
||||
assets={data.pathAssets}
|
||||
{assetInteraction}
|
||||
assetInteraction={assetMultiSelectManager}
|
||||
{viewport}
|
||||
showAssetName={true}
|
||||
pageHeaderOffset={54}
|
||||
@@ -111,13 +110,13 @@
|
||||
</section>
|
||||
</UserPageLayout>
|
||||
|
||||
{#if assetInteraction.selectionActive}
|
||||
{#if assetMultiSelectManager.selectionActive}
|
||||
<div class="fixed top-0 start-0 w-full">
|
||||
<AssetSelectControlBar
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => cancelMultiselect(assetInteraction)}
|
||||
assets={assetMultiSelectManager.selectedAssets}
|
||||
clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
|
||||
>
|
||||
{@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
|
||||
{@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
|
||||
<CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
|
||||
<CreateSharedLink />
|
||||
<IconButton
|
||||
@@ -130,7 +129,7 @@
|
||||
/>
|
||||
<ActionButton action={Actions.AddToAlbum} />
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
removeFavorite={assetMultiSelectManager.isAllFavorite}
|
||||
onFavorite={function handleFavoriteUpdate(ids, isFavorite) {
|
||||
if (data.pathAssets && data.pathAssets.length > 0) {
|
||||
for (const id of ids) {
|
||||
@@ -148,8 +147,8 @@
|
||||
<ChangeDate menuItem />
|
||||
<ChangeDescription menuItem />
|
||||
<ChangeLocation menuItem />
|
||||
<ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} onArchive={triggerAssetUpdate} />
|
||||
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
|
||||
<ArchiveAction menuItem unarchive={assetMultiSelectManager.isAllArchived} onArchive={triggerAssetUpdate} />
|
||||
{#if $preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
|
||||
<TagAction menuItem />
|
||||
{/if}
|
||||
<DeleteAssets menuItem onAssetDelete={triggerAssetUpdate} onUndoDelete={triggerAssetUpdate} />
|
||||
|
||||
@@ -13,10 +13,10 @@
|
||||
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
|
||||
import Timeline from '$lib/components/timeline/Timeline.svelte';
|
||||
import { AssetAction } from '$lib/constants';
|
||||
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { Route } from '$lib/route';
|
||||
import { getUserActions } from '$lib/services/user.service';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { AssetVisibility } from '@immich/sdk';
|
||||
import { mdiDotsVertical } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
@@ -31,17 +31,15 @@
|
||||
let timelineManager = $state<TimelineManager>() as TimelineManager;
|
||||
const options = { visibility: AssetVisibility.Locked };
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
const handleEscape = () => {
|
||||
if (assetInteraction.selectionActive) {
|
||||
assetInteraction.clearMultiselect();
|
||||
if (assetMultiSelectManager.selectionActive) {
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMoveOffLockedFolder = (assetIds: string[]) => {
|
||||
assetInteraction.clearMultiselect();
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
timelineManager.removeAssets(assetIds);
|
||||
};
|
||||
|
||||
@@ -57,14 +55,14 @@
|
||||
<UserPageLayout
|
||||
title={data.meta.title}
|
||||
actions={[LockSession]}
|
||||
hideNavbar={assetInteraction.selectionActive}
|
||||
hideNavbar={assetMultiSelectManager.selectionActive}
|
||||
scrollbar={false}
|
||||
>
|
||||
<Timeline
|
||||
enableRouting={true}
|
||||
bind:timelineManager
|
||||
{options}
|
||||
{assetInteraction}
|
||||
assetInteraction={assetMultiSelectManager}
|
||||
onEscape={handleEscape}
|
||||
removeAction={AssetAction.SET_VISIBILITY_TIMELINE}
|
||||
>
|
||||
@@ -75,12 +73,12 @@
|
||||
</UserPageLayout>
|
||||
|
||||
<!-- Multi-selection mode app bar -->
|
||||
{#if assetInteraction.selectionActive}
|
||||
{#if assetMultiSelectManager.selectionActive}
|
||||
<AssetSelectControlBar
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
assets={assetMultiSelectManager.selectedAssets}
|
||||
clearSelect={() => assetMultiSelectManager.clearMultiselect()}
|
||||
>
|
||||
<SelectAllAssets withText {timelineManager} {assetInteraction} />
|
||||
<SelectAllAssets withText {timelineManager} assetInteraction={assetMultiSelectManager} />
|
||||
<SetVisibilityAction unlock onVisibilitySet={handleMoveOffLockedFolder} />
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||
<DownloadAction menuItem />
|
||||
|
||||
+8
-10
@@ -5,9 +5,9 @@
|
||||
import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
|
||||
import Timeline from '$lib/components/timeline/Timeline.svelte';
|
||||
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import { Route } from '$lib/route';
|
||||
import { getAssetBulkActions } from '$lib/services/asset.service';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { AssetVisibility } from '@immich/sdk';
|
||||
import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
|
||||
import { mdiArrowLeft } from '@mdi/js';
|
||||
@@ -26,26 +26,24 @@
|
||||
withStacked: true,
|
||||
});
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
const handleEscape = () => {
|
||||
if (assetInteraction.selectionActive) {
|
||||
assetInteraction.clearMultiselect();
|
||||
if (assetMultiSelectManager.selectionActive) {
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
return;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
|
||||
<Timeline enableRouting={true} {options} {assetInteraction} onEscape={handleEscape} />
|
||||
<Timeline enableRouting={true} {options} assetInteraction={assetMultiSelectManager} onEscape={handleEscape} />
|
||||
</main>
|
||||
|
||||
{#if assetInteraction.selectionActive}
|
||||
{#if assetMultiSelectManager.selectionActive}
|
||||
<AssetSelectControlBar
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
assets={assetMultiSelectManager.selectedAssets}
|
||||
clearSelect={() => assetMultiSelectManager.clearMultiselect()}
|
||||
>
|
||||
{@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
|
||||
{@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
|
||||
<CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
|
||||
<CreateSharedLink />
|
||||
<ActionButton action={Actions.AddToAlbum} />
|
||||
|
||||
+17
-18
@@ -32,7 +32,7 @@
|
||||
import { Route } from '$lib/route';
|
||||
import { getAssetBulkActions } from '$lib/services/asset.service';
|
||||
import { getPersonActions } from '$lib/services/person.service';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
import { websocketEvents } from '$lib/stores/websocket';
|
||||
@@ -65,7 +65,6 @@
|
||||
|
||||
let timelineManager = $state<TimelineManager>() as TimelineManager;
|
||||
const options = $derived({ visibility: AssetVisibility.Timeline, personId: data.person.id });
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
let viewMode: PersonPageViewMode = $state(PersonPageViewMode.VIEW_ASSETS);
|
||||
let isEditingName = $state(false);
|
||||
@@ -106,8 +105,8 @@
|
||||
});
|
||||
|
||||
const handleEscape = async () => {
|
||||
if (assetInteraction.selectionActive) {
|
||||
assetInteraction.clearMultiselect();
|
||||
if (assetMultiSelectManager.selectionActive) {
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -127,8 +126,8 @@
|
||||
});
|
||||
|
||||
const handleUnmerge = () => {
|
||||
timelineManager.removeAssets(assetInteraction.selectedAssets.map((a) => a.id));
|
||||
assetInteraction.clearMultiselect();
|
||||
timelineManager.removeAssets(assetMultiSelectManager.selectedAssets.map((a) => a.id));
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
viewMode = PersonPageViewMode.VIEW_ASSETS;
|
||||
};
|
||||
|
||||
@@ -154,7 +153,7 @@
|
||||
handleError(error, $t('errors.unable_to_set_feature_photo'));
|
||||
}
|
||||
|
||||
assetInteraction.clearMultiselect();
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
|
||||
viewMode = PersonPageViewMode.VIEW_ASSETS;
|
||||
};
|
||||
@@ -283,7 +282,7 @@
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
};
|
||||
|
||||
const onPersonUpdate = async (response: PersonResponseDto) => {
|
||||
@@ -347,7 +346,7 @@
|
||||
{person}
|
||||
bind:timelineManager
|
||||
{options}
|
||||
{assetInteraction}
|
||||
assetInteraction={assetMultiSelectManager}
|
||||
isSelectionMode={viewMode === PersonPageViewMode.SELECT_PERSON}
|
||||
singleSelect={viewMode === PersonPageViewMode.SELECT_PERSON}
|
||||
onSelect={handleSelectFeaturePhoto}
|
||||
@@ -458,18 +457,18 @@
|
||||
</main>
|
||||
|
||||
<header>
|
||||
{#if assetInteraction.selectionActive}
|
||||
{#if assetMultiSelectManager.selectionActive}
|
||||
<AssetSelectControlBar
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
assets={assetMultiSelectManager.selectedAssets}
|
||||
clearSelect={() => assetMultiSelectManager.clearMultiselect()}
|
||||
>
|
||||
{@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
|
||||
{@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
|
||||
<CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
|
||||
<ActionButton action={Actions.AddToAlbum} />
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
removeFavorite={assetMultiSelectManager.isAllFavorite}
|
||||
onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
|
||||
/>
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||
@@ -484,10 +483,10 @@
|
||||
<ChangeLocation menuItem />
|
||||
<ArchiveAction
|
||||
menuItem
|
||||
unarchive={assetInteraction.isAllArchived}
|
||||
unarchive={assetMultiSelectManager.isAllArchived}
|
||||
onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
|
||||
/>
|
||||
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
|
||||
{#if $preferences.tags.enabled && assetMultiSelectManager.isAllUserOwned}
|
||||
<TagAction menuItem />
|
||||
{/if}
|
||||
<SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
|
||||
@@ -522,7 +521,7 @@
|
||||
|
||||
{#if viewMode === PersonPageViewMode.UNASSIGN_ASSETS}
|
||||
<UnMergeFaceSelector
|
||||
assetIds={assetInteraction.selectedAssets.map((a) => a.id)}
|
||||
assetIds={assetMultiSelectManager.selectedAssets.map((a) => a.id)}
|
||||
personAssets={person}
|
||||
onClose={() => (viewMode = PersonPageViewMode.VIEW_ASSETS)}
|
||||
onConfirm={handleUnmerge}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { Route } from '$lib/route';
|
||||
import { getAssetBulkActions } from '$lib/services/asset.service';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import { preferences, user } from '$lib/stores/user.store';
|
||||
import { getAssetMediaUrl, memoryLaneTitle } from '$lib/utils';
|
||||
import {
|
||||
@@ -44,9 +44,7 @@
|
||||
let timelineManager = $state<TimelineManager>() as TimelineManager;
|
||||
const options = { visibility: AssetVisibility.Timeline, withStacked: true, withPartners: true };
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
let selectedAssets = $derived(assetInteraction.selectedAssets);
|
||||
let selectedAssets = $derived(assetMultiSelectManager.selectedAssets);
|
||||
let isAssetStackSelected = $derived(selectedAssets.length === 1 && !!selectedAssets[0].stack);
|
||||
let isLinkActionAvailable = $derived.by(() => {
|
||||
const isLivePhoto = selectedAssets.length === 1 && !!selectedAssets[0].livePhotoVideoId;
|
||||
@@ -55,15 +53,15 @@
|
||||
selectedAssets.some((asset) => asset.isImage) &&
|
||||
selectedAssets.some((asset) => asset.isVideo);
|
||||
|
||||
return assetInteraction.isAllUserOwned && (isLivePhoto || isLivePhotoCandidate);
|
||||
return assetMultiSelectManager.isAllUserOwned && (isLivePhoto || isLivePhotoCandidate);
|
||||
});
|
||||
|
||||
const handleEscape = () => {
|
||||
if (assetViewerManager.isViewing) {
|
||||
return;
|
||||
}
|
||||
if (assetInteraction.selectionActive) {
|
||||
assetInteraction.clearMultiselect();
|
||||
if (assetMultiSelectManager.selectionActive) {
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
return;
|
||||
}
|
||||
};
|
||||
@@ -80,7 +78,7 @@
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
};
|
||||
|
||||
const items = $derived(
|
||||
@@ -94,12 +92,12 @@
|
||||
);
|
||||
</script>
|
||||
|
||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} scrollbar={false}>
|
||||
<UserPageLayout hideNavbar={assetMultiSelectManager.selectionActive} scrollbar={false}>
|
||||
<Timeline
|
||||
enableRouting={true}
|
||||
bind:timelineManager
|
||||
{options}
|
||||
{assetInteraction}
|
||||
assetInteraction={assetMultiSelectManager}
|
||||
removeAction={AssetAction.ARCHIVE}
|
||||
onEscape={handleEscape}
|
||||
withStacked
|
||||
@@ -113,28 +111,28 @@
|
||||
</Timeline>
|
||||
</UserPageLayout>
|
||||
|
||||
{#if assetInteraction.selectionActive}
|
||||
{#if assetMultiSelectManager.selectionActive}
|
||||
<AssetSelectControlBar
|
||||
ownerId={$user.id}
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
assets={assetMultiSelectManager.selectedAssets}
|
||||
clearSelect={() => assetMultiSelectManager.clearMultiselect()}
|
||||
>
|
||||
{@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
|
||||
{@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
|
||||
<CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
|
||||
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
|
||||
<ActionButton action={Actions.AddToAlbum} />
|
||||
|
||||
{#if assetInteraction.isAllUserOwned}
|
||||
{#if assetMultiSelectManager.isAllUserOwned}
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
removeFavorite={assetMultiSelectManager.isAllFavorite}
|
||||
onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
|
||||
/>
|
||||
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||
<DownloadAction menuItem />
|
||||
{#if assetInteraction.selectedAssets.length > 1 || isAssetStackSelected}
|
||||
{#if assetMultiSelectManager.selectedAssets.length > 1 || isAssetStackSelected}
|
||||
<StackAction
|
||||
unstack={isAssetStackSelected}
|
||||
onStack={(result) => updateStackedAssetInTimeline(timelineManager, result)}
|
||||
@@ -144,7 +142,7 @@
|
||||
{#if isLinkActionAvailable}
|
||||
<LinkLivePhotoAction
|
||||
menuItem
|
||||
unlink={assetInteraction.selectedAssets.length === 1}
|
||||
unlink={assetMultiSelectManager.selectedAssets.length === 1}
|
||||
onLink={handleLink}
|
||||
onUnlink={handleUnlink}
|
||||
/>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
import type { Viewport } from '$lib/managers/timeline-manager/types';
|
||||
import { Route } from '$lib/route';
|
||||
import { getAssetBulkActions } from '$lib/services/asset.service';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import { lang, locale } from '$lib/stores/preferences.store';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
import { handlePromiseError } from '$lib/utils';
|
||||
@@ -62,8 +62,6 @@
|
||||
let scrollY = $state(0);
|
||||
let scrollYHistory = 0;
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
type SearchTerms = MetadataSearchDto & Pick<SmartSearchDto, 'query' | 'queryAssetId'>;
|
||||
let searchQuery = $derived(page.url.searchParams.get(QueryParameter.QUERY));
|
||||
let smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);
|
||||
@@ -112,12 +110,12 @@
|
||||
};
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
assetInteraction.clearMultiselect();
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
onAssetDelete(assetIds);
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
assetInteraction.selectAssets(searchResultAssets.map((asset) => toTimelineAsset(asset)));
|
||||
assetMultiSelectManager.selectAssets(searchResultAssets.map((asset) => toTimelineAsset(asset)));
|
||||
};
|
||||
|
||||
async function onSearchQueryUpdate() {
|
||||
@@ -226,7 +224,7 @@
|
||||
}
|
||||
|
||||
const onAlbumAddAssets = ({ assetIds }: { assetIds: string[] }) => {
|
||||
cancelMultiselect(assetInteraction);
|
||||
cancelMultiselect(assetMultiSelectManager);
|
||||
|
||||
if (terms.isNotInAlbum) {
|
||||
const assetIdSet = new Set(assetIds);
|
||||
@@ -294,7 +292,7 @@
|
||||
{#if searchResultAssets.length > 0}
|
||||
<GalleryViewer
|
||||
assets={searchResultAssets}
|
||||
{assetInteraction}
|
||||
assetInteraction={assetMultiSelectManager}
|
||||
onIntersected={loadNextPage}
|
||||
showArchiveIcon={true}
|
||||
{viewport}
|
||||
@@ -319,13 +317,13 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
{#if assetInteraction.selectionActive}
|
||||
{#if assetMultiSelectManager.selectionActive}
|
||||
<div class="fixed top-0 start-0 w-full z-2">
|
||||
<AssetSelectControlBar
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => cancelMultiselect(assetInteraction)}
|
||||
assets={assetMultiSelectManager.selectedAssets}
|
||||
clearSelect={() => cancelMultiselect(assetMultiSelectManager)}
|
||||
>
|
||||
{@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
|
||||
{@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
|
||||
<CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
|
||||
|
||||
<CreateSharedLink />
|
||||
@@ -338,9 +336,9 @@
|
||||
onclick={handleSelectAll}
|
||||
/>
|
||||
<ActionButton action={Actions.AddToAlbum} />
|
||||
{#if assetInteraction.isAllUserOwned}
|
||||
{#if assetMultiSelectManager.isAllUserOwned}
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
removeFavorite={assetMultiSelectManager.isAllFavorite}
|
||||
onFavorite={(ids, isFavorite) => {
|
||||
for (const id of ids) {
|
||||
const asset = searchResultAssets.find((asset) => asset.id === id);
|
||||
@@ -357,7 +355,7 @@
|
||||
<ChangeDate menuItem />
|
||||
<ChangeDescription menuItem />
|
||||
<ChangeLocation menuItem />
|
||||
<ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
|
||||
<ArchiveAction menuItem unarchive={assetMultiSelectManager.isAllArchived} />
|
||||
<SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
|
||||
{#if $preferences.tags.enabled}
|
||||
<TagAction menuItem />
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
import { Route } from '$lib/route';
|
||||
import { getAssetBulkActions } from '$lib/services/asset.service';
|
||||
import { getTagActions } from '$lib/services/tag.service';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import { preferences, user } from '$lib/stores/user.store';
|
||||
import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
|
||||
import { getAllTags, type TagResponseDto } from '@immich/sdk';
|
||||
@@ -41,8 +41,6 @@
|
||||
|
||||
let { data }: Props = $props();
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
let tags = $derived<TagResponseDto[]>(data.tags);
|
||||
const tree = $derived(TreeNode.fromTags(tags));
|
||||
const tag = $derived(tree.traverse(data.path));
|
||||
@@ -58,7 +56,7 @@
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
timelineManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
};
|
||||
|
||||
const onRefresh = async () => {
|
||||
@@ -99,7 +97,7 @@
|
||||
enableRouting={true}
|
||||
bind:timelineManager
|
||||
{options}
|
||||
{assetInteraction}
|
||||
assetInteraction={assetMultiSelectManager}
|
||||
removeAction={AssetAction.UNARCHIVE}
|
||||
>
|
||||
{#snippet empty()}
|
||||
@@ -113,20 +111,20 @@
|
||||
</UserPageLayout>
|
||||
|
||||
<section>
|
||||
{#if assetInteraction.selectionActive}
|
||||
{#if assetMultiSelectManager.selectionActive}
|
||||
<div class="fixed top-0 start-0 w-full">
|
||||
<AssetSelectControlBar
|
||||
ownerId={$user.id}
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
assets={assetMultiSelectManager.selectedAssets}
|
||||
clearSelect={() => assetMultiSelectManager.clearMultiselect()}
|
||||
>
|
||||
{@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
|
||||
{@const Actions = getAssetBulkActions($t, assetMultiSelectManager.asControlContext())}
|
||||
<CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
|
||||
<ActionButton action={Actions.AddToAlbum} />
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
removeFavorite={assetMultiSelectManager.isAllFavorite}
|
||||
onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
|
||||
></FavoriteAction>
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { Route } from '$lib/route';
|
||||
import { getTrashActions } from '$lib/services/trash.service';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import { handlePromiseError } from '$lib/utils';
|
||||
import { t } from 'svelte-i18n';
|
||||
import type { PageData } from './$types';
|
||||
@@ -27,15 +27,13 @@
|
||||
let timelineManager = $state<TimelineManager>() as TimelineManager;
|
||||
const options = { isTrashed: true };
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
if (!featureFlagsManager.value.trash) {
|
||||
handlePromiseError(goto(Route.photos()));
|
||||
}
|
||||
|
||||
const handleEscape = () => {
|
||||
if (assetInteraction.selectionActive) {
|
||||
assetInteraction.clearMultiselect();
|
||||
if (assetMultiSelectManager.selectionActive) {
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
return;
|
||||
}
|
||||
};
|
||||
@@ -45,12 +43,18 @@
|
||||
|
||||
{#if featureFlagsManager.value.trash}
|
||||
<UserPageLayout
|
||||
hideNavbar={assetInteraction.selectionActive}
|
||||
actions={assetInteraction.selectionActive ? [] : [Empty, RestoreAll]}
|
||||
hideNavbar={assetMultiSelectManager.selectionActive}
|
||||
actions={assetMultiSelectManager.selectionActive ? [] : [Empty, RestoreAll]}
|
||||
title={data.meta.title}
|
||||
scrollbar={false}
|
||||
>
|
||||
<Timeline enableRouting={true} bind:timelineManager {options} {assetInteraction} onEscape={handleEscape}>
|
||||
<Timeline
|
||||
enableRouting={true}
|
||||
bind:timelineManager
|
||||
{options}
|
||||
assetInteraction={assetMultiSelectManager}
|
||||
onEscape={handleEscape}
|
||||
>
|
||||
<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: serverConfigManager.value.trashDays },
|
||||
@@ -63,12 +67,12 @@
|
||||
</UserPageLayout>
|
||||
{/if}
|
||||
|
||||
{#if assetInteraction.selectionActive}
|
||||
{#if assetMultiSelectManager.selectionActive}
|
||||
<AssetSelectControlBar
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||
assets={assetMultiSelectManager.selectedAssets}
|
||||
clearSelect={() => assetMultiSelectManager.clearMultiselect()}
|
||||
>
|
||||
<SelectAllAssets {timelineManager} {assetInteraction} />
|
||||
<SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
|
||||
<DeleteAssets force onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)} />
|
||||
<RestoreAssets onRestore={(assetIds) => timelineManager.removeAssets(assetIds)} />
|
||||
</AssetSelectControlBar>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
import GeolocationPointPickerModal from '$lib/modals/GeolocationPointPickerModal.svelte';
|
||||
import GeolocationUpdateConfirmModal from '$lib/modals/GeolocationUpdateConfirmModal.svelte';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
|
||||
import type { LatLng } from '$lib/types';
|
||||
import { cancelMultiselect } from '$lib/utils/asset-utils';
|
||||
import { setQueryValue } from '$lib/utils/navigation';
|
||||
@@ -28,7 +28,6 @@
|
||||
let { data }: Props = $props();
|
||||
|
||||
let isLoading = $state(false);
|
||||
let assetInteraction = new AssetInteraction();
|
||||
let point = $state<LatLng>();
|
||||
let locationUpdated = $state(false);
|
||||
|
||||
@@ -47,7 +46,7 @@
|
||||
|
||||
const confirmed = await modalManager.show(GeolocationUpdateConfirmModal, {
|
||||
point,
|
||||
assetCount: assetInteraction.selectedAssets.length,
|
||||
assetCount: assetMultiSelectManager.selectedAssets.length,
|
||||
});
|
||||
|
||||
if (!confirmed) {
|
||||
@@ -56,14 +55,14 @@
|
||||
|
||||
await updateAssets({
|
||||
assetBulkUpdateDto: {
|
||||
ids: assetInteraction.selectedAssets.map((asset) => asset.id),
|
||||
ids: assetMultiSelectManager.selectedAssets.map((asset) => asset.id),
|
||||
latitude: point.lat,
|
||||
longitude: point.lng,
|
||||
},
|
||||
});
|
||||
|
||||
const updatedAssets = await Promise.all(
|
||||
assetInteraction.selectedAssets.map(async (asset) => {
|
||||
assetMultiSelectManager.selectedAssets.map(async (asset) => {
|
||||
const updatedAsset = await getAssetInfo({ ...authManager.params, id: asset.id });
|
||||
return toTimelineAsset(updatedAsset);
|
||||
}),
|
||||
@@ -78,8 +77,8 @@
|
||||
if (event.key === 'Shift') {
|
||||
event.preventDefault();
|
||||
}
|
||||
if (event.key === 'Escape' && assetInteraction.selectionActive) {
|
||||
cancelMultiselect(assetInteraction);
|
||||
if (event.key === 'Escape' && assetMultiSelectManager.selectionActive) {
|
||||
cancelMultiselect(assetMultiSelectManager);
|
||||
}
|
||||
};
|
||||
const onKeyUp = (event: KeyboardEvent) => {
|
||||
@@ -89,7 +88,7 @@
|
||||
};
|
||||
|
||||
const handleDeselectAll = () => {
|
||||
cancelMultiselect(assetInteraction);
|
||||
cancelMultiselect(assetMultiSelectManager);
|
||||
};
|
||||
|
||||
const handlePickPoint = async () => {
|
||||
@@ -101,8 +100,8 @@
|
||||
point = selected;
|
||||
};
|
||||
const handleEscape = () => {
|
||||
if (assetInteraction.selectionActive) {
|
||||
assetInteraction.clearMultiselect();
|
||||
if (assetMultiSelectManager.selectionActive) {
|
||||
assetMultiSelectManager.clearMultiselect();
|
||||
return;
|
||||
}
|
||||
};
|
||||
@@ -168,7 +167,7 @@
|
||||
size="small"
|
||||
color="secondary"
|
||||
variant="ghost"
|
||||
disabled={!assetInteraction.selectionActive}
|
||||
disabled={!assetMultiSelectManager.selectionActive}
|
||||
onclick={handleDeselectAll}
|
||||
>
|
||||
{$t('unselect_all')}
|
||||
@@ -177,11 +176,11 @@
|
||||
leadingIcon={mdiMapMarkerMultipleOutline}
|
||||
size="small"
|
||||
color="primary"
|
||||
disabled={assetInteraction.selectedAssets.length === 0}
|
||||
disabled={assetMultiSelectManager.selectedAssets.length === 0}
|
||||
onclick={() => handleUpdate()}
|
||||
>
|
||||
<Text class="hidden sm:inline-block">
|
||||
{$t('apply_count', { values: { count: assetInteraction.selectedAssets.length } })}
|
||||
{$t('apply_count', { values: { count: assetMultiSelectManager.selectedAssets.length } })}
|
||||
</Text>
|
||||
</Button>
|
||||
</div>
|
||||
@@ -198,7 +197,7 @@
|
||||
enableRouting={true}
|
||||
bind:timelineManager
|
||||
{options}
|
||||
{assetInteraction}
|
||||
assetInteraction={assetMultiSelectManager}
|
||||
removeAction={AssetAction.ARCHIVE}
|
||||
onEscape={handleEscape}
|
||||
withStacked
|
||||
|
||||
@@ -99,6 +99,9 @@
|
||||
if (isAssetViewerRoute(from) && isAssetViewerRoute(to)) {
|
||||
return;
|
||||
}
|
||||
|
||||
eventManager.emit('AppNavigate');
|
||||
|
||||
showNavigationLoadingBar = true;
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user