diff --git a/web/src/lib/components/photos-page/memory-lane.svelte b/web/src/lib/components/photos-page/memory-lane.svelte
index e481d8fd3e..0d89a6747d 100644
--- a/web/src/lib/components/photos-page/memory-lane.svelte
+++ b/web/src/lib/components/photos-page/memory-lane.svelte
@@ -67,23 +67,25 @@
{/if}
{#each $memoryStore as memory, index (memory.yearsAgo)}
-
+ {#if memory.assets.length > 0}
+
+ {/if}
{/each}
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 4c759bcdec..8afebc50db 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
@@ -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}
-{#if $showAssetViewer}
+{#if $isViewerOpen}
-
+ handleAction(action.type, action.asset)}
+ on:previous={handlePrevious}
+ on:next={handleNext}
+ />
{/if}