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

feat(web) add scrollbar with timeline information (#658)

Browse source 
- Implement a scrollbar with a timeline similar to Google Photos
- The scrollbar can also be dragged
This commit is contained in:
Alex 2022-09-09 15:55:20 -05:00 • committed by GitHub
parent b6d025da09
commit d856b35afc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 194 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

21
web/src/lib/stores/assets.store.ts
View file

@ -34,7 +34,7 @@ function createAssetStore() {
assetGridState.set({
viewportHeight,
viewportWidth,
timelineHeight: calculateViewportHeightByNumberOfAsset(data.totalCount, viewportWidth),
timelineHeight: 0,
buckets: data.buckets.map((d) => ({
bucketDate: d.timeBucket,
bucketHeight: calculateViewportHeightByNumberOfAsset(d.count, viewportWidth),
@ -43,6 +43,12 @@ function createAssetStore() {
})),
assets: []
});
// Update timeline height based on calculated bucket height
assetGridState.update((state) => {
state.timelineHeight = lodash.sumBy(state.buckets, (d) => d.bucketHeight);
return state;
});
};
const getAssetsByBucket = async (bucket: string) => {
@ -108,10 +114,19 @@ function createAssetStore() {
});
};
const updateBucketHeight = (bucket: string, height: number) => {
const updateBucketHeight = (bucket: string, actualBucketHeight: number) => {
assetGridState.update((state) => {
const bucketIndex = state.buckets.findIndex((b) => b.bucketDate === bucket);
state.buckets[bucketIndex].bucketHeight = height;
// Update timeline height based on the new bucket height
const estimateBucketHeight = state.buckets[bucketIndex].bucketHeight;
if (actualBucketHeight >= estimateBucketHeight) {
state.timelineHeight += actualBucketHeight - estimateBucketHeight;
} else {
state.timelineHeight -= estimateBucketHeight - actualBucketHeight;
}
state.buckets[bucketIndex].bucketHeight = actualBucketHeight;
return state;
});
};