mirror of
https://github.com/KevinMidboe/immich.git
synced 2025-10-29 17:40:28 +00:00
Feature - Implemented virtual scroll on web (#573)
This PR implemented a virtual scroll on the web, as seen in this article. [Building the Google Photos Web UI](https://medium.com/google-design/google-photos-45b714dfbed1)
This commit is contained in:
Alex
GitHub
150
web/src/lib/stores/asset-interaction.store.ts
Normal file
150
web/src/lib/stores/asset-interaction.store.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
import { AssetGridState } from '$lib/models/asset-grid-state';
|
||||
import { api, AssetResponseDto } from '@api';
|
||||
import { derived, writable } from 'svelte/store';
|
||||
import { assetGridState, assetStore } from './assets.store';
|
||||
import _ from 'lodash-es';
|
||||
|
||||
// Asset Viewer
|
||||
export const viewingAssetStoreState = writable<AssetResponseDto>();
|
||||
export const isViewingAssetStoreState = writable<boolean>(false);
|
||||
|
||||
// Multi-Selection mode
|
||||
export const assetsInAlbumStoreState = writable<AssetResponseDto[]>([]);
|
||||
export const selectedAssets = writable<Set<AssetResponseDto>>(new Set());
|
||||
export const selectedGroup = writable<Set<string>>(new Set());
|
||||
export const isMultiSelectStoreState = derived(
|
||||
selectedAssets,
|
||||
($selectedAssets) => $selectedAssets.size > 0
|
||||
);
|
||||
|
||||
function createAssetInteractionStore() {
|
||||
let _assetGridState = new AssetGridState();
|
||||
let _viewingAssetStoreState: AssetResponseDto;
|
||||
let _selectedAssets: Set<AssetResponseDto>;
|
||||
let _selectedGroup: Set<string>;
|
||||
let _assetsInAblums: AssetResponseDto[];
|
||||
let savedAssetLength = 0;
|
||||
let assetSortedByDate: AssetResponseDto[] = [];
|
||||
|
||||
// Subscriber
|
||||
assetGridState.subscribe((state) => {
|
||||
_assetGridState = state;
|
||||
});
|
||||
|
||||
viewingAssetStoreState.subscribe((asset) => {
|
||||
_viewingAssetStoreState = asset;
|
||||
});
|
||||
|
||||
selectedAssets.subscribe((assets) => {
|
||||
_selectedAssets = assets;
|
||||
});
|
||||
|
||||
selectedGroup.subscribe((group) => {
|
||||
_selectedGroup = group;
|
||||
});
|
||||
|
||||
assetsInAlbumStoreState.subscribe((assets) => {
|
||||
_assetsInAblums = assets;
|
||||
});
|
||||
|
||||
// Methods
|
||||
|
||||
/**
|
||||
* Asset Viewer
|
||||
*/
|
||||
const setViewingAsset = async (asset: AssetResponseDto) => {
|
||||
const { data } = await api.assetApi.getAssetById(asset.id);
|
||||
viewingAssetStoreState.set(data);
|
||||
isViewingAssetStoreState.set(true);
|
||||
};
|
||||
|
||||
const setIsViewingAsset = (isViewing: boolean) => {
|
||||
isViewingAssetStoreState.set(isViewing);
|
||||
};
|
||||
|
||||
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.createdAt);
|
||||
savedAssetLength = _assetGridState.assets.length;
|
||||
}
|
||||
|
||||
// Find the index of the current asset
|
||||
const currentIndex = assetSortedByDate.findIndex((a) => a.id === _viewingAssetStoreState.id);
|
||||
|
||||
// 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
|
||||
|
||||
for (const bucket of _assetGridState.buckets) {
|
||||
if (bucket.assets.length === 0) {
|
||||
nextBucket = bucket.bucketDate;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (nextBucket !== '') {
|
||||
await assetStore.getAssetsByBucket(nextBucket);
|
||||
navigateAsset(direction);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const nextAsset = assetSortedByDate[nextIndex];
|
||||
setViewingAsset(nextAsset);
|
||||
};
|
||||
|
||||
/**
|
||||
* Multiselect
|
||||
*/
|
||||
const addAssetToMultiselectGroup = (asset: AssetResponseDto) => {
|
||||
// Not select if in album alreaady
|
||||
if (_assetsInAblums.find((a) => a.id === asset.id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
_selectedAssets.add(asset);
|
||||
selectedAssets.set(_selectedAssets);
|
||||
};
|
||||
|
||||
const removeAssetFromMultiselectGroup = (asset: AssetResponseDto) => {
|
||||
_selectedAssets.delete(asset);
|
||||
selectedAssets.set(_selectedAssets);
|
||||
};
|
||||
|
||||
const addGroupToMultiselectGroup = (group: string) => {
|
||||
_selectedGroup.add(group);
|
||||
selectedGroup.set(_selectedGroup);
|
||||
};
|
||||
|
||||
const removeGroupFromMultiselectGroup = (group: string) => {
|
||||
_selectedGroup.delete(group);
|
||||
selectedGroup.set(_selectedGroup);
|
||||
};
|
||||
|
||||
const clearMultiselect = () => {
|
||||
_selectedAssets.clear();
|
||||
_selectedGroup.clear();
|
||||
_assetsInAblums = [];
|
||||
|
||||
selectedAssets.set(_selectedAssets);
|
||||
selectedGroup.set(_selectedGroup);
|
||||
assetsInAlbumStoreState.set(_assetsInAblums);
|
||||
};
|
||||
return {
|
||||
setViewingAsset,
|
||||
setIsViewingAsset,
|
||||
navigateAsset,
|
||||
addAssetToMultiselectGroup,
|
||||
removeAssetFromMultiselectGroup,
|
||||
addGroupToMultiselectGroup,
|
||||
removeGroupFromMultiselectGroup,
|
||||
clearMultiselect
|
||||
};
|
||||
}
|
||||
|
||||
export const assetInteractionStore = createAssetInteractionStore();
|
||||
139
web/src/lib/stores/assets.store.ts
Normal file
139
web/src/lib/stores/assets.store.ts
Normal file
@@ -0,0 +1,139 @@
|
||||
import { writable, derived, readable } from 'svelte/store';
|
||||
import lodash from 'lodash-es';
|
||||
import _ from 'lodash';
|
||||
import moment from 'moment';
|
||||
import { api, AssetCountByTimeBucketResponseDto, AssetResponseDto } from '@api';
|
||||
import { AssetGridState } from '$lib/models/asset-grid-state';
|
||||
import { calculateViewportHeightByNumberOfAsset } from '$lib/utils/viewport-utils';
|
||||
|
||||
/**
|
||||
* The state that holds information about the asset grid
|
||||
*/
|
||||
export const assetGridState = writable<AssetGridState>(new AssetGridState());
|
||||
export const loadingBucketState = writable<{ [key: string]: boolean }>({});
|
||||
|
||||
function createAssetStore() {
|
||||
let _assetGridState = new AssetGridState();
|
||||
assetGridState.subscribe((state) => {
|
||||
_assetGridState = state;
|
||||
});
|
||||
|
||||
let _loadingBucketState: { [key: string]: boolean } = {};
|
||||
loadingBucketState.subscribe((state) => {
|
||||
_loadingBucketState = state;
|
||||
});
|
||||
/**
|
||||
* Set intial state
|
||||
* @param viewportHeight
|
||||
* @param viewportWidth
|
||||
* @param data
|
||||
*/
|
||||
const setInitialState = (
|
||||
viewportHeight: number,
|
||||
viewportWidth: number,
|
||||
data: AssetCountByTimeBucketResponseDto
|
||||
) => {
|
||||
assetGridState.set({
|
||||
viewportHeight,
|
||||
viewportWidth,
|
||||
timelineHeight: calculateViewportHeightByNumberOfAsset(data.totalCount, viewportWidth),
|
||||
buckets: data.buckets.map((d) => ({
|
||||
bucketDate: d.timeBucket,
|
||||
bucketHeight: calculateViewportHeightByNumberOfAsset(d.count, viewportWidth),
|
||||
assets: [],
|
||||
cancelToken: new AbortController()
|
||||
})),
|
||||
assets: []
|
||||
});
|
||||
};
|
||||
|
||||
const getAssetsByBucket = async (bucket: string) => {
|
||||
try {
|
||||
const currentBucketData = _assetGridState.buckets.find((b) => b.bucketDate === bucket);
|
||||
if (currentBucketData?.assets && currentBucketData.assets.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
loadingBucketState.set({
|
||||
..._loadingBucketState,
|
||||
[bucket]: true
|
||||
});
|
||||
const { data: assets } = await api.assetApi.getAssetByTimeBucket(
|
||||
{
|
||||
timeBucket: [bucket]
|
||||
},
|
||||
{ signal: currentBucketData?.cancelToken.signal }
|
||||
);
|
||||
loadingBucketState.set({
|
||||
..._loadingBucketState,
|
||||
[bucket]: false
|
||||
});
|
||||
|
||||
// Update assetGridState with assets by time bucket
|
||||
assetGridState.update((state) => {
|
||||
const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucket);
|
||||
state.buckets[bucketIndex].assets = assets;
|
||||
state.assets = lodash.flatMap(state.buckets, (b) => b.assets);
|
||||
|
||||
return state;
|
||||
});
|
||||
} catch (e: any) {
|
||||
if (e.name === 'CanceledError') {
|
||||
return;
|
||||
}
|
||||
console.error('Failed to get asset for bucket ', bucket);
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const removeAsset = (assetId: string) => {
|
||||
assetGridState.update((state) => {
|
||||
const bucketIndex = state.buckets.findIndex((b) => b.assets.some((a) => a.id === assetId));
|
||||
const assetIndex = state.buckets[bucketIndex].assets.findIndex((a) => a.id === assetId);
|
||||
state.buckets[bucketIndex].assets.splice(assetIndex, 1);
|
||||
|
||||
if (state.buckets[bucketIndex].assets.length === 0) {
|
||||
_removeBucket(state.buckets[bucketIndex].bucketDate);
|
||||
}
|
||||
state.assets = lodash.flatMap(state.buckets, (b) => b.assets);
|
||||
return state;
|
||||
});
|
||||
};
|
||||
|
||||
const _removeBucket = (bucketDate: string) => {
|
||||
assetGridState.update((state) => {
|
||||
const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucketDate);
|
||||
state.buckets.splice(bucketIndex, 1);
|
||||
state.assets = lodash.flatMap(state.buckets, (b) => b.assets);
|
||||
return state;
|
||||
});
|
||||
};
|
||||
|
||||
const updateBucketHeight = (bucket: string, height: number) => {
|
||||
assetGridState.update((state) => {
|
||||
const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucket);
|
||||
state.buckets[bucketIndex].bucketHeight = height;
|
||||
return state;
|
||||
});
|
||||
};
|
||||
|
||||
const cancelBucketRequest = async (token: AbortController, bucketDate: string) => {
|
||||
token.abort();
|
||||
// set new abort controller for bucket
|
||||
assetGridState.update((state) => {
|
||||
const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucketDate);
|
||||
state.buckets[bucketIndex].cancelToken = new AbortController();
|
||||
return state;
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
setInitialState,
|
||||
getAssetsByBucket,
|
||||
removeAsset,
|
||||
updateBucketHeight,
|
||||
cancelBucketRequest
|
||||
};
|
||||
}
|
||||
|
||||
export const assetStore = createAssetStore();
|
||||
@@ -1,35 +0,0 @@
|
||||
import { writable, derived } from 'svelte/store';
|
||||
import lodash from 'lodash-es';
|
||||
import _ from 'lodash';
|
||||
import moment from 'moment';
|
||||
import { api, AssetResponseDto } from '@api';
|
||||
export const assets = writable<AssetResponseDto[]>([]);
|
||||
|
||||
export const assetsGroupByDate = derived(assets, ($assets) => {
|
||||
try {
|
||||
return lodash
|
||||
.chain($assets)
|
||||
.groupBy((a) => moment(a.createdAt).format('ddd, MMM DD YYYY'))
|
||||
.sortBy((group) => $assets.indexOf(group[0]))
|
||||
.value();
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
|
||||
export const flattenAssetGroupByDate = derived(assetsGroupByDate, ($assetsGroupByDate) => {
|
||||
return $assetsGroupByDate.flat();
|
||||
});
|
||||
|
||||
export const getAssetsInfo = async () => {
|
||||
try {
|
||||
const { data } = await api.assetApi.getAllAssets();
|
||||
assets.set(data);
|
||||
} catch (error) {
|
||||
console.log('Error [getAssetsInfo]');
|
||||
}
|
||||
};
|
||||
|
||||
export const setAssetInfo = (data: AssetResponseDto[]) => {
|
||||
assets.set(data);
|
||||
};
|
||||
Reference in New Issue
Block a user