helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): previous/next asset navigation (#3107)

Browse source 
* fix(web): previous/next asset navigation

* Apply suggestions from code review

Co-authored-by: Thomas <9749173+uhthomas@users.noreply.github.com>

* Call setViewingAsset once

* Make code more readable

* Avoid recursive call

* Simplify return statement

* Set position of the bucket to Unknown

---------

Co-authored-by: Thomas <9749173+uhthomas@users.noreply.github.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Sergey Kondrikov 2023-07-05 23:24:23 +03:00 • committed by GitHub
parent 814030be77
commit 37edef834e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 71 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

72
web/src/lib/stores/asset-interaction.store.ts
View file

@ -66,30 +66,62 @@ function createAssetInteractionStore() {
isViewingAssetStoreState.set(isViewing);
};
const getNextAsset = async (currentBucketIndex: number, assetId: string): Promise<AssetResponseDto | null> => {
const currentBucket = _assetGridState.buckets[currentBucketIndex];
const assetIndex = currentBucket.assets.findIndex(({ id }) => id == assetId);
if (assetIndex === -1) {
return null;
}
if (assetIndex + 1 < currentBucket.assets.length) {
return currentBucket.assets[assetIndex + 1];
}
const nextBucketIndex = currentBucketIndex + 1;
if (nextBucketIndex >= _assetGridState.buckets.length) {
return null;
}
const nextBucket = _assetGridState.buckets[nextBucketIndex];
await assetStore.getAssetsByBucket(nextBucket.bucketDate, BucketPosition.Unknown);
return nextBucket.assets[0] ?? null;
};
const getPrevAsset = async (currentBucketIndex: number, assetId: string): Promise<AssetResponseDto | null> => {
const currentBucket = _assetGridState.buckets[currentBucketIndex];
const assetIndex = currentBucket.assets.findIndex(({ id }) => id == assetId);
if (assetIndex === -1) {
return null;
}
if (assetIndex > 0) {
return currentBucket.assets[assetIndex - 1];
}
const prevBucketIndex = currentBucketIndex - 1;
if (prevBucketIndex < 0) {
return null;
}
const prevBucket = _assetGridState.buckets[prevBucketIndex];
await assetStore.getAssetsByBucket(prevBucket.bucketDate, BucketPosition.Unknown);
return prevBucket.assets[prevBucket.assets.length - 1] ?? null;
};
const navigateAsset = async (direction: 'next' | 'previous') => {
let index = _assetGridState.assets.findIndex(({ id }) => id === _viewingAssetStoreState.id);
index = direction === 'next' ? index + 1 : index - 1;
const needMoreAbove = index < 0;
const needMoreBelow = index >= _assetGridState.assets.length;
// Try to load more assets if we're at the end.
if (needMoreAbove || needMoreBelow) {
for (const bucket of _assetGridState.buckets) {
if (bucket.assets.length === 0) {
await assetStore.getAssetsByBucket(
bucket.bucketDate,
needMoreAbove ? BucketPosition.Above : BucketPosition.Below,
);
navigateAsset(direction);
break;
}
}
const currentAssetId = _viewingAssetStoreState.id;
const currentBucketIndex = _assetGridState.loadedAssets[currentAssetId];
if (currentBucketIndex < 0 || currentBucketIndex >= _assetGridState.buckets.length) {
return;
}
const asset = _assetGridState.assets[index];
const asset =
direction === 'next'
? await getNextAsset(currentBucketIndex, currentAssetId)
: await getPrevAsset(currentBucketIndex, currentAssetId);
if (asset) {
setViewingAsset(asset);
}