cotugno/immich
2
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-15 09:59:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): update assets after delete (#9151)

Browse Source 
* upadte assets after delete

* fix lint/format

* handle archive action

* chore: cleanup

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Yu-Cheng, Xia 2024-05-02 04:17:40 +08:00 committed by Zack Pollard
parent ef09fc4157
commit b7d0bc16bb
2 changed files with 54 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/lib/components/photos-page/memory-lane.svelte
View File

@ -67,23 +67,25 @@
{/if}
<div class="inline-block" bind:offsetWidth={innerWidth}>
{#each $memoryStore as memory, index (memory.yearsAgo)}
<button
class="memory-card relative mr-8 inline-block aspect-video h-[215px] rounded-xl"
on:click={() => goto(`${AppRoute.MEMORY}?${QueryParameter.MEMORY_INDEX}=${index}`)}
>
<img
class="h-full w-full rounded-xl object-cover"
src={getAssetThumbnailUrl(memory.assets[0].id, ThumbnailFormat.Webp)}
alt={`Memory Lane ${getAltText(memory.assets[0])}`}
draggable="false"
/>
<p class="absolute bottom-2 left-4 z-10 text-lg text-white">
{memoryLaneTitle(memory.yearsAgo)}
</p>
<div
class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
/>
</button>
{#if memory.assets.length > 0}
<button
class="memory-card relative mr-8 inline-block aspect-video h-[215px] rounded-xl"
on:click={() => goto(`${AppRoute.MEMORY}?${QueryParameter.MEMORY_INDEX}=${index}`)}
>
<img
class="h-full w-full rounded-xl object-cover"
src={getAssetThumbnailUrl(memory.assets[0].id, ThumbnailFormat.Webp)}
alt={`Memory Lane ${getAltText(memory.assets[0])}`}
draggable="false"
/>
<p class="absolute bottom-2 left-4 z-10 text-lg text-white">
{memoryLaneTitle(memory.yearsAgo)}
</p>
<div
class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
/>
</button>
{/if}
{/each}
</div>
</section>

41
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View File

@ -11,6 +11,8 @@
import { getAssetRatio } from '$lib/utils/asset-utils';
import { calculateWidth } from '$lib/utils/timeline-util';
import { navigate } from '$lib/utils/navigation';
import { AppRoute, AssetAction } from '$lib/constants';
import { goto } from '$app/navigation';
const dispatch = createEventDispatcher<{ intersected: { container: HTMLDivElement; position: BucketPosition } }>();
@ -20,7 +22,7 @@
export let showArchiveIcon = false;
export let viewport: Viewport;
let { isViewing: showAssetViewer, asset: viewingAsset, setAsset } = assetViewingStore;
let { isViewing: isViewerOpen, asset: viewingAsset, setAsset } = assetViewingStore;
let currentViewAssetIndex = 0;
$: isMultiSelectionMode = selectedAssets.size > 0;
@ -43,7 +45,7 @@
selectedAssets = temporary;
};
const navigateAssetForward = async () => {
const handleNext = async () => {
try {
if (currentViewAssetIndex < assets.length - 1) {
setAsset(assets[++currentViewAssetIndex]);
@ -54,7 +56,7 @@
}
};
const navigateAssetBackward = async () => {
const handlePrevious = async () => {
try {
if (currentViewAssetIndex > 0) {
setAsset(assets[--currentViewAssetIndex]);
@ -65,8 +67,30 @@
}
};
const handleAction = async (action: AssetAction, asset: AssetResponseDto) => {
switch (action) {
case AssetAction.ARCHIVE:
case AssetAction.DELETE:
case AssetAction.TRASH: {
assets.splice(
assets.findIndex((a) => a.id === asset.id),
1,
);
assets = assets;
if (assets.length === 0) {
await goto(AppRoute.PHOTOS);
} else if (currentViewAssetIndex === assets.length) {
await handlePrevious();
} else {
setAsset(assets[currentViewAssetIndex]);
}
break;
}
}
};
onDestroy(() => {
$showAssetViewer = false;
$isViewerOpen = false;
});
$: geometry = (() => {
@ -114,8 +138,13 @@
{/if}
<!-- Overlay Asset Viewer -->
{#if $showAssetViewer}
{#if $isViewerOpen}
<Portal target="body">
<AssetViewer asset={$viewingAsset} on:previous={navigateAssetBackward} on:next={navigateAssetForward} />
<AssetViewer
asset={$viewingAsset}
on:action={({ detail: action }) => handleAction(action.type, action.asset)}
on:previous={handlePrevious}
on:next={handleNext}
/>
</Portal>
{/if}