Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-31 15:08:44 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: incorrect next/previous action after folder view refresh (#20447)

Browse Source
This commit is contained in:
Jason Rasmussen 2025-07-30 16:50:52 -03:00 committed by GitHub
parent 27c456eb75
commit 6b50d958f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,6 +27,7 @@
import Portal from '../portal/portal.svelte'; import Portal from '../portal/portal.svelte';
interface Props { interface Props {
initialAssetId?: string;
assets: (TimelineAsset | AssetResponseDto)[]; assets: (TimelineAsset | AssetResponseDto)[];
assetInteraction: AssetInteraction; assetInteraction: AssetInteraction;
disableAssetSelect?: boolean; disableAssetSelect?: boolean;
@ -44,6 +45,7 @@
} }
let { let {
initialAssetId = undefined,
assets = $bindable(), assets = $bindable(),
assetInteraction, assetInteraction,
disableAssetSelect = false, 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 shiftKeyIsDown = $state(false);
let lastAssetMouseEvent: TimelineAsset | null = $state(null); let lastAssetMouseEvent: TimelineAsset | null = $state(null);
let slidingWindow = $state({ top: 0, bottom: 0 }); let slidingWindow = $state({ top: 0, bottom: 0 });
@ -150,8 +159,8 @@
} }
}); });
const viewAssetHandler = async (asset: TimelineAsset) => { const viewAssetHandler = async (asset: TimelineAsset) => {
currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id); currentIndex = assets.findIndex((a) => a.id == asset.id);
await setAssetId(assets[currentViewAssetIndex].id); await setAssetId(assets[currentIndex].id);
await navigate({ targetRoute: 'current', assetId: $viewingAsset.id }); await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
}; };
@ -324,12 +333,12 @@
if (onNext) { if (onNext) {
asset = await onNext(); asset = await onNext();
} else { } else {
if (currentViewAssetIndex >= assets.length - 1) { if (currentIndex >= assets.length - 1) {
return false; return false;
} }
currentViewAssetIndex = currentViewAssetIndex + 1; currentIndex = currentIndex + 1;
asset = currentViewAssetIndex < assets.length ? assets[currentViewAssetIndex] : undefined; asset = currentIndex < assets.length ? assets[currentIndex] : undefined;
} }
if (!asset) { if (!asset) {
@ -374,12 +383,12 @@
if (onPrevious) { if (onPrevious) {
asset = await onPrevious(); asset = await onPrevious();
} else { } else {
if (currentViewAssetIndex <= 0) { if (currentIndex <= 0) {
return false; return false;
} }
currentViewAssetIndex = currentViewAssetIndex - 1; currentIndex = currentIndex - 1;
asset = currentViewAssetIndex >= 0 ? assets[currentViewAssetIndex] : undefined; asset = currentIndex >= 0 ? assets[currentIndex] : undefined;
} }
if (!asset) { if (!asset) {
@ -412,10 +421,10 @@
); );
if (assets.length === 0) { if (assets.length === 0) {
await goto(AppRoute.PHOTOS); await goto(AppRoute.PHOTOS);
} else if (currentViewAssetIndex === assets.length) { } else if (currentIndex === assets.length) {
await handlePrevious(); await handlePrevious();
} else { } else {
await setAssetId(assets[currentViewAssetIndex].id); await setAssetId(assets[currentIndex].id);
} }
break; break;
} }

4
web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -21,8 +21,8 @@
import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte'; import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
import Sidebar from '$lib/components/sidebar/sidebar.svelte'; import Sidebar from '$lib/components/sidebar/sidebar.svelte';
import { AppRoute, QueryParameter } from '$lib/constants'; import { AppRoute, QueryParameter } from '$lib/constants';
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import type { Viewport } from '$lib/managers/timeline-manager/types'; 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 { foldersStore } from '$lib/stores/folders.svelte';
import { preferences } from '$lib/stores/user.store'; import { preferences } from '$lib/stores/user.store';
import { cancelMultiselect } from '$lib/utils/asset-utils'; import { cancelMultiselect } from '$lib/utils/asset-utils';
@ -40,7 +40,6 @@
let { data }: Props = $props(); let { data }: Props = $props();
const viewport: Viewport = $state({ width: 0, height: 0 }); const viewport: Viewport = $state({ width: 0, height: 0 });
const assetInteraction = new AssetInteraction(); const assetInteraction = new AssetInteraction();
const handleNavigateToFolder = (folderName: string) => navigateToView(joinPaths(data.tree.path, folderName)); const handleNavigateToFolder = (folderName: string) => navigateToView(joinPaths(data.tree.path, folderName));
@ -104,6 +103,7 @@
{#if data.pathAssets && data.pathAssets.length > 0} {#if data.pathAssets && data.pathAssets.length > 0}
<div bind:clientHeight={viewport.height} bind:clientWidth={viewport.width} class="mt-2"> <div bind:clientHeight={viewport.height} bind:clientWidth={viewport.width} class="mt-2">
<GalleryViewer <GalleryViewer
initialAssetId={data.asset?.id}
assets={data.pathAssets} assets={data.pathAssets}
{assetInteraction} {assetInteraction}
{viewport} {viewport}