self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-04 05:50:38 +02:00
Code Issues Releases 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

29
web/src/lib/components/memory-page/memory-viewer.svelte
View File

@ -18,7 +18,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 { AppRoute, QueryParameter } from '$lib/constants';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { type Viewport } from '$lib/stores/assets.store';
@ -46,8 +45,9 @@
import { tweened } from 'svelte/motion';
import { derived as storeDerived } from 'svelte/store';
import { fade } from 'svelte/transition';
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';
type MemoryIndex = {
memoryIndex: number;
@ -73,8 +73,7 @@
const { isViewing } = assetViewingStore;
const viewport: Viewport = $state({ width: 0, height: 0 });
const assetInteractionStore = createAssetInteractionStore();
const { selectedAssets } = assetInteractionStore;
const assetInteraction = new AssetInteraction();
const progressBarController = tweened<number>(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));
</script>
<svelte:window
@ -238,9 +232,12 @@
]}
/>
{#if isMultiSelectionMode}
{#if assetInteraction.selectionActive}
<div class="sticky top-0 z-[90]">
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => cancelMultiselect(assetInteractionStore)}>
<AssetSelectControlBar
assets={assetInteraction.selectedAssets}
clearSelect={() => cancelMultiselect(assetInteraction)}
>
<CreateSharedLink />
<CircleIconButton title={$t('select_all')} icon={mdiSelectAll} onclick={handleSelectAll} />
@ -249,14 +246,14 @@
<AddToAlbum shared />
</ButtonContextMenu>
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={handleUpdate} />
<FavoriteAction removeFavorite={assetInteraction.isAllFavorite} onFavorite={handleUpdate} />
<ButtonContextMenu icon={mdiDotsVertical} title={$t('add')}>
<DownloadAction menuItem />
<ChangeDate menuItem />
<ChangeLocation menuItem />
<ArchiveAction menuItem unarchive={isAllArchived} onArchive={handleRemove} />
{#if $preferences.tags.enabled && isAllUserOwned}
<ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} onArchive={handleRemove} />
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
<TagAction menuItem />
{/if}
<DeleteAssets menuItem onAssetDelete={handleRemove} />
@ -490,7 +487,7 @@
onPrevious={handlePreviousAsset}
assets={current.memory.assets}
{viewport}
{assetInteractionStore}
{assetInteraction}
/>
</div>
</section>