self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

fix(web): use natural asset order for navigation (#3092)

Browse Source
This commit is contained in:
Thomas 2023-07-03 03:02:38 +01:00 committed by GitHub
parent 7947f4db4c
commit 1a0a3aa2c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/lib/stores/asset-interaction.store.ts
View File

@ -1,6 +1,5 @@
import { AssetGridState, BucketPosition } from '$lib/models/asset-grid-state';
import { api, AssetResponseDto } from '@api';
import { sortBy } from 'lodash-es';
import { derived, writable } from 'svelte/store';
import { assetGridState, assetStore } from './assets.store';
@ -20,8 +19,6 @@ function createAssetInteractionStore() {
let _selectedAssets: Set<AssetResponseDto>;
let _selectedGroup: Set<string>;
let _assetsInAlbums: AssetResponseDto[];
let savedAssetLength = 0;
let assetSortedByDate: AssetResponseDto[] = [];
// Subscriber
assetGridState.subscribe((state) => {
@ -64,40 +61,31 @@ function createAssetInteractionStore() {
};
const navigateAsset = async (direction: 'next' | 'previous') => {
// Flatten and sort the asset by date if there are new assets
if (assetSortedByDate.length === 0 || savedAssetLength !== _assetGridState.assets.length) {
assetSortedByDate = sortBy(_assetGridState.assets, (a) => a.fileCreatedAt);
savedAssetLength = _assetGridState.assets.length;
}
let index = _assetGridState.assets.findIndex(({ id }) => id === _viewingAssetStoreState.id);
// Find the index of the current asset
const currentIndex = assetSortedByDate.findIndex((a) => a.id === _viewingAssetStoreState.id);
index = direction === 'next' ? index + 1 : index - 1;
// Get the next or previous asset
const nextIndex = direction === 'previous' ? currentIndex + 1 : currentIndex - 1;
// Run out of asset, this might be because there is no asset in the next bucket.
if (nextIndex == -1) {
let nextBucket = '';
// Find next bucket that doesn't have all assets loaded
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) {
nextBucket = bucket.bucketDate;
await assetStore.getAssetsByBucket(
bucket.bucketDate,
needMoreAbove ? BucketPosition.Above : BucketPosition.Below,
);
navigateAsset(direction);
break;
}
}
if (nextBucket !== '') {
await assetStore.getAssetsByBucket(nextBucket, BucketPosition.Below);
navigateAsset(direction);
}
return;
}
const nextAsset = assetSortedByDate[nextIndex];
if (nextAsset) {
setViewingAsset(nextAsset);
const asset = _assetGridState.assets[index];
if (asset) {
setViewingAsset(asset);
}
};