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 6e0c547b90..30e14abc59 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 @@ -27,6 +27,7 @@ import Portal from '../portal/portal.svelte'; interface Props { + initialAssetId?: string; assets: (TimelineAsset | AssetResponseDto)[]; assetInteraction: AssetInteraction; disableAssetSelect?: boolean; @@ -44,6 +45,7 @@ } let { + initialAssetId = undefined, assets = $bindable(), assetInteraction, disableAssetSelect = false, @@ -117,7 +119,14 @@ }; }); - let currentViewAssetIndex = 0; + let currentIndex = 0; + if (initialAssetId && assets.length > 0) { + const index = assets.findIndex(({ id }) => id === initialAssetId); + if (index !== -1) { + currentIndex = index; + } + } + let shiftKeyIsDown = $state(false); let lastAssetMouseEvent: TimelineAsset | null = $state(null); let slidingWindow = $state({ top: 0, bottom: 0 }); @@ -150,8 +159,8 @@ } }); const viewAssetHandler = async (asset: TimelineAsset) => { - currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id); - await setAssetId(assets[currentViewAssetIndex].id); + currentIndex = assets.findIndex((a) => a.id == asset.id); + await setAssetId(assets[currentIndex].id); await navigate({ targetRoute: 'current', assetId: $viewingAsset.id }); }; @@ -324,12 +333,12 @@ if (onNext) { asset = await onNext(); } else { - if (currentViewAssetIndex >= assets.length - 1) { + if (currentIndex >= assets.length - 1) { return false; } - currentViewAssetIndex = currentViewAssetIndex + 1; - asset = currentViewAssetIndex < assets.length ? assets[currentViewAssetIndex] : undefined; + currentIndex = currentIndex + 1; + asset = currentIndex < assets.length ? assets[currentIndex] : undefined; } if (!asset) { @@ -374,12 +383,12 @@ if (onPrevious) { asset = await onPrevious(); } else { - if (currentViewAssetIndex <= 0) { + if (currentIndex <= 0) { return false; } - currentViewAssetIndex = currentViewAssetIndex - 1; - asset = currentViewAssetIndex >= 0 ? assets[currentViewAssetIndex] : undefined; + currentIndex = currentIndex - 1; + asset = currentIndex >= 0 ? assets[currentIndex] : undefined; } if (!asset) { @@ -412,10 +421,10 @@ ); if (assets.length === 0) { await goto(AppRoute.PHOTOS); - } else if (currentViewAssetIndex === assets.length) { + } else if (currentIndex === assets.length) { await handlePrevious(); } else { - await setAssetId(assets[currentViewAssetIndex].id); + await setAssetId(assets[currentIndex].id); } break; } diff --git a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte index 84ae328ccc..51de0ac1ee 100644 --- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte +++ b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte @@ -21,8 +21,8 @@ import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte'; import Sidebar from '$lib/components/sidebar/sidebar.svelte'; import { AppRoute, QueryParameter } from '$lib/constants'; - import { AssetInteraction } from '$lib/stores/asset-interaction.svelte'; import type { Viewport } from '$lib/managers/timeline-manager/types'; + 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)); @@ -104,6 +103,7 @@ {#if data.pathAssets && data.pathAssets.length > 0}