KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

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
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;
});
};