mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
feat(web): Scroll to asset in gridview; increase gridview perf; reduce memory; scrollbar ticks in fixed position (#10646)
* Squashed * Change strategy - now pre-measure buckets offscreen, so don't need to worry about sub-bucket scroll preservation * Reduce jank on scroll, delay DOM updates until after scroll * css opt, log measure time * Trickle out queue while scrolling, flush when stopped * yay * Cleanup cleanup... * everybody... * everywhere... * Clean up cleanup! * Everybody do their share * CLEANUP! * package-lock ? * dynamic measure, todo * Fix web test * type lint * fix e2e * e2e test * Better scrollbar * Tuning, and more tunables * Tunable tweaks, more tunables * Scrollbar dots and viewport events * lint * Tweaked tunnables, use requestIdleCallback for garbage tasks, bug fixes * New tunables, and don't update url by default * Bug fixes * Bug fix, with debug * Fix flickr, fix graybox bug, reduced debug * Refactor/cleanup * Fix * naming * Final cleanup * review comment * Forgot to update this after naming change * scrubber works, with debug * cleanup * Rename scrollbar to scrubber * rename to * left over rename and change to previous album bar * bugfix addassets, comments * missing destroy(), cleanup --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Min Idzelis
GitHub
parent
07538299cf
commit
837b1e4929
50 changed files with 2947 additions and 843 deletions
|
|
@ -1,6 +1,11 @@
|
|||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { getKey } from '$lib/utils';
|
||||
import { fromLocalDateTime } from '$lib/utils/timeline-util';
|
||||
import { TimeBucketSize, getTimeBucket, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
|
||||
import { AssetGridTaskManager } from '$lib/utils/asset-store-task-manager';
|
||||
import { getAssetRatio } from '$lib/utils/asset-utils';
|
||||
import type { AssetGridRouteSearchParams } from '$lib/utils/navigation';
|
||||
import { calculateWidth, fromLocalDateTime, splitBucketIntoDateGroups, type DateGroup } from '$lib/utils/timeline-util';
|
||||
import { TimeBucketSize, getAssetInfo, getTimeBucket, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
|
||||
import createJustifiedLayout from 'justified-layout';
|
||||
import { throttle } from 'lodash-es';
|
||||
import { DateTime } from 'luxon';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
|
@ -8,19 +13,24 @@ import { get, writable, type Unsubscriber } from 'svelte/store';
|
|||
import { handleError } from '../utils/handle-error';
|
||||
import { websocketEvents } from './websocket';
|
||||
|
||||
export enum BucketPosition {
|
||||
Above = 'above',
|
||||
Below = 'below',
|
||||
Visible = 'visible',
|
||||
Unknown = 'unknown',
|
||||
}
|
||||
type AssetApiGetTimeBucketsRequest = Parameters<typeof getTimeBuckets>[0];
|
||||
export type AssetStoreOptions = Omit<AssetApiGetTimeBucketsRequest, 'size'>;
|
||||
|
||||
const LAYOUT_OPTIONS = {
|
||||
boxSpacing: 2,
|
||||
containerPadding: 0,
|
||||
targetRowHeightTolerance: 0.15,
|
||||
targetRowHeight: 235,
|
||||
};
|
||||
|
||||
export interface Viewport {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
export type ViewportXY = Viewport & {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
|
||||
interface AssetLookup {
|
||||
bucket: AssetBucket;
|
||||
|
|
@ -29,16 +39,89 @@ interface AssetLookup {
|
|||
}
|
||||
|
||||
export class AssetBucket {
|
||||
store!: AssetStore;
|
||||
bucketDate!: string;
|
||||
/**
|
||||
* The DOM height of the bucket in pixel
|
||||
* This value is first estimated by the number of asset and later is corrected as the user scroll
|
||||
*/
|
||||
bucketHeight!: number;
|
||||
bucketDate!: string;
|
||||
bucketCount!: number;
|
||||
assets!: AssetResponseDto[];
|
||||
cancelToken!: AbortController | null;
|
||||
position!: BucketPosition;
|
||||
bucketHeight: number = 0;
|
||||
isBucketHeightActual: boolean = false;
|
||||
bucketDateFormattted!: string;
|
||||
bucketCount: number = 0;
|
||||
assets: AssetResponseDto[] = [];
|
||||
dateGroups: DateGroup[] = [];
|
||||
cancelToken: AbortController | undefined;
|
||||
/**
|
||||
* Prevent this asset's load from being canceled; i.e. to force load of offscreen asset.
|
||||
*/
|
||||
isPreventCancel: boolean = false;
|
||||
/**
|
||||
* A promise that resolves once the bucket is loaded, and rejects if bucket is canceled.
|
||||
*/
|
||||
complete!: Promise<void>;
|
||||
loading: boolean = false;
|
||||
isLoaded: boolean = false;
|
||||
intersecting: boolean = false;
|
||||
measured: boolean = false;
|
||||
measuredPromise!: Promise<void>;
|
||||
|
||||
constructor(props: Partial<AssetBucket> & { store: AssetStore; bucketDate: string }) {
|
||||
Object.assign(this, props);
|
||||
this.init();
|
||||
}
|
||||
|
||||
private init() {
|
||||
// create a promise, and store its resolve/reject callbacks. The loadedSignal callback
|
||||
// will be incoked when a bucket is loaded, fulfilling the promise. The canceledSignal
|
||||
// callback will be called if the bucket is canceled before it was loaded, rejecting the
|
||||
// promise.
|
||||
this.complete = new Promise((resolve, reject) => {
|
||||
this.loadedSignal = resolve;
|
||||
this.canceledSignal = reject;
|
||||
});
|
||||
// if no-one waits on complete, and its rejected a uncaught rejection message is logged.
|
||||
// We this message with an empty reject handler, since waiting on a bucket is optional.
|
||||
this.complete.catch(() => void 0);
|
||||
this.measuredPromise = new Promise((resolve) => {
|
||||
this.measuredSignal = resolve;
|
||||
});
|
||||
|
||||
this.bucketDateFormattted = fromLocalDateTime(this.bucketDate)
|
||||
.startOf('month')
|
||||
.toJSDate()
|
||||
.toLocaleString(get(locale), {
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
timeZone: 'UTC',
|
||||
});
|
||||
}
|
||||
|
||||
private loadedSignal: (() => void) | undefined;
|
||||
private canceledSignal: (() => void) | undefined;
|
||||
measuredSignal: (() => void) | undefined;
|
||||
|
||||
cancel() {
|
||||
if (this.isLoaded) {
|
||||
return;
|
||||
}
|
||||
if (this.isPreventCancel) {
|
||||
return;
|
||||
}
|
||||
this.cancelToken?.abort();
|
||||
this.canceledSignal?.();
|
||||
this.init();
|
||||
}
|
||||
|
||||
loaded() {
|
||||
this.loadedSignal?.();
|
||||
this.isLoaded = true;
|
||||
}
|
||||
|
||||
errored() {
|
||||
this.canceledSignal?.();
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
const isMismatched = (option: boolean | undefined, value: boolean): boolean =>
|
||||
|
|
@ -65,34 +148,101 @@ interface TrashAssets {
|
|||
type: 'trash';
|
||||
values: string[];
|
||||
}
|
||||
interface UpdateStackAssets {
|
||||
type: 'update_stack_assets';
|
||||
values: string[];
|
||||
}
|
||||
|
||||
export const photoViewer = writable<HTMLImageElement | null>(null);
|
||||
|
||||
type PendingChange = AddAsset | UpdateAsset | DeleteAsset | TrashAssets;
|
||||
type PendingChange = AddAsset | UpdateAsset | DeleteAsset | TrashAssets | UpdateStackAssets;
|
||||
|
||||
export type BucketListener = (
|
||||
event:
|
||||
| ViewPortEvent
|
||||
| BucketLoadEvent
|
||||
| BucketLoadedEvent
|
||||
| BucketCancelEvent
|
||||
| BucketHeightEvent
|
||||
| DateGroupIntersecting
|
||||
| DateGroupHeightEvent,
|
||||
) => void;
|
||||
|
||||
type ViewPortEvent = {
|
||||
type: 'viewport';
|
||||
};
|
||||
type BucketLoadEvent = {
|
||||
type: 'load';
|
||||
bucket: AssetBucket;
|
||||
};
|
||||
type BucketLoadedEvent = {
|
||||
type: 'loaded';
|
||||
bucket: AssetBucket;
|
||||
};
|
||||
type BucketCancelEvent = {
|
||||
type: 'cancel';
|
||||
bucket: AssetBucket;
|
||||
};
|
||||
type BucketHeightEvent = {
|
||||
type: 'bucket-height';
|
||||
bucket: AssetBucket;
|
||||
delta: number;
|
||||
};
|
||||
type DateGroupIntersecting = {
|
||||
type: 'intersecting';
|
||||
bucket: AssetBucket;
|
||||
dateGroup: DateGroup;
|
||||
};
|
||||
type DateGroupHeightEvent = {
|
||||
type: 'height';
|
||||
bucket: AssetBucket;
|
||||
dateGroup: DateGroup;
|
||||
delta: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
export class AssetStore {
|
||||
private store$ = writable(this);
|
||||
private assetToBucket: Record<string, AssetLookup> = {};
|
||||
private pendingChanges: PendingChange[] = [];
|
||||
private unsubscribers: Unsubscriber[] = [];
|
||||
private options: AssetApiGetTimeBucketsRequest;
|
||||
private viewport: Viewport = {
|
||||
height: 0,
|
||||
width: 0,
|
||||
};
|
||||
private initializedSignal!: () => void;
|
||||
private store$ = writable(this);
|
||||
|
||||
lastScrollTime: number = 0;
|
||||
subscribe = this.store$.subscribe;
|
||||
/**
|
||||
* A promise that resolves once the store is initialized.
|
||||
*/
|
||||
taskManager = new AssetGridTaskManager(this);
|
||||
complete!: Promise<void>;
|
||||
initialized = false;
|
||||
timelineHeight = 0;
|
||||
buckets: AssetBucket[] = [];
|
||||
assets: AssetResponseDto[] = [];
|
||||
albumAssets: Set<string> = new Set();
|
||||
pendingScrollBucket: AssetBucket | undefined;
|
||||
pendingScrollAssetId: string | undefined;
|
||||
|
||||
listeners: BucketListener[] = [];
|
||||
|
||||
constructor(
|
||||
options: AssetStoreOptions,
|
||||
private albumId?: string,
|
||||
) {
|
||||
this.options = { ...options, size: TimeBucketSize.Month };
|
||||
// create a promise, and store its resolve callbacks. The initializedSignal callback
|
||||
// will be invoked when a the assetstore is initialized.
|
||||
this.complete = new Promise((resolve) => {
|
||||
this.initializedSignal = resolve;
|
||||
});
|
||||
this.store$.set(this);
|
||||
}
|
||||
|
||||
subscribe = this.store$.subscribe;
|
||||
|
||||
private addPendingChanges(...changes: PendingChange[]) {
|
||||
// prevent websocket events from happening before local client events
|
||||
setTimeout(() => {
|
||||
|
|
@ -182,8 +332,35 @@ export class AssetStore {
|
|||
this.emit(true);
|
||||
}, 2500);
|
||||
|
||||
async init(viewport: Viewport) {
|
||||
this.initialized = false;
|
||||
addListener(bucketListener: BucketListener) {
|
||||
this.listeners.push(bucketListener);
|
||||
}
|
||||
removeListener(bucketListener: BucketListener) {
|
||||
this.listeners = this.listeners.filter((l) => l != bucketListener);
|
||||
}
|
||||
private notifyListeners(
|
||||
event:
|
||||
| ViewPortEvent
|
||||
| BucketLoadEvent
|
||||
| BucketLoadedEvent
|
||||
| BucketCancelEvent
|
||||
| BucketHeightEvent
|
||||
| DateGroupIntersecting
|
||||
| DateGroupHeightEvent,
|
||||
) {
|
||||
for (const fn of this.listeners) {
|
||||
fn(event);
|
||||
}
|
||||
}
|
||||
async init({ bucketListener }: { bucketListener?: BucketListener } = {}) {
|
||||
if (this.initialized) {
|
||||
throw 'Can only init once';
|
||||
}
|
||||
if (bucketListener) {
|
||||
this.addListener(bucketListener);
|
||||
}
|
||||
// uncaught rejection go away
|
||||
this.complete.catch(() => void 0);
|
||||
this.timelineHeight = 0;
|
||||
this.buckets = [];
|
||||
this.assets = [];
|
||||
|
|
@ -194,65 +371,118 @@ export class AssetStore {
|
|||
...this.options,
|
||||
key: getKey(),
|
||||
});
|
||||
|
||||
this.buckets = timebuckets.map(
|
||||
(bucket) => new AssetBucket({ store: this, bucketDate: bucket.timeBucket, bucketCount: bucket.count }),
|
||||
);
|
||||
this.initializedSignal();
|
||||
this.initialized = true;
|
||||
|
||||
this.buckets = timebuckets.map((bucket) => ({
|
||||
bucketDate: bucket.timeBucket,
|
||||
bucketHeight: 0,
|
||||
bucketCount: bucket.count,
|
||||
assets: [],
|
||||
cancelToken: null,
|
||||
position: BucketPosition.Unknown,
|
||||
}));
|
||||
|
||||
// if loading an asset, the grid-view may be hidden, which means
|
||||
// it has 0 width and height. No need to update bucket or timeline
|
||||
// heights in this case. Later, updateViewport will be called to
|
||||
// update the heights.
|
||||
if (viewport.height !== 0 && viewport.width !== 0) {
|
||||
await this.updateViewport(viewport);
|
||||
}
|
||||
}
|
||||
|
||||
async updateViewport(viewport: Viewport) {
|
||||
public destroy() {
|
||||
this.taskManager.destroy();
|
||||
this.listeners = [];
|
||||
this.initialized = false;
|
||||
}
|
||||
|
||||
async updateViewport(viewport: Viewport, force?: boolean) {
|
||||
if (!this.initialized) {
|
||||
return;
|
||||
}
|
||||
if (viewport.height === 0 && viewport.width === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!force && this.viewport.height === viewport.height && this.viewport.width === viewport.width) {
|
||||
return;
|
||||
}
|
||||
|
||||
// changing width invalidates the actual height, and needs to be remeasured, since width changes causes
|
||||
// layout reflows.
|
||||
const changedWidth = this.viewport.width != viewport.width;
|
||||
this.viewport = { ...viewport };
|
||||
|
||||
for (const bucket of this.buckets) {
|
||||
const unwrappedWidth = (3 / 2) * bucket.bucketCount * THUMBNAIL_HEIGHT * (7 / 10);
|
||||
const rows = Math.ceil(unwrappedWidth / viewport.width);
|
||||
const height = rows * THUMBNAIL_HEIGHT;
|
||||
bucket.bucketHeight = height;
|
||||
this.updateGeometry(bucket, changedWidth);
|
||||
}
|
||||
this.timelineHeight = this.buckets.reduce((accumulator, b) => accumulator + b.bucketHeight, 0);
|
||||
|
||||
let height = 0;
|
||||
const loaders = [];
|
||||
let height = 0;
|
||||
for (const bucket of this.buckets) {
|
||||
if (height < viewport.height) {
|
||||
height += bucket.bucketHeight;
|
||||
loaders.push(this.loadBucket(bucket.bucketDate, BucketPosition.Visible));
|
||||
continue;
|
||||
if (height >= viewport.height) {
|
||||
break;
|
||||
}
|
||||
break;
|
||||
height += bucket.bucketHeight;
|
||||
loaders.push(this.loadBucket(bucket.bucketDate));
|
||||
}
|
||||
await Promise.all(loaders);
|
||||
this.notifyListeners({ type: 'viewport' });
|
||||
this.emit(false);
|
||||
}
|
||||
|
||||
async loadBucket(bucketDate: string, position: BucketPosition): Promise<void> {
|
||||
private updateGeometry(bucket: AssetBucket, invalidateHeight: boolean) {
|
||||
if (invalidateHeight) {
|
||||
bucket.isBucketHeightActual = false;
|
||||
bucket.measured = false;
|
||||
for (const assetGroup of bucket.dateGroups) {
|
||||
assetGroup.heightActual = false;
|
||||
}
|
||||
}
|
||||
if (!bucket.isBucketHeightActual) {
|
||||
const unwrappedWidth = (3 / 2) * bucket.bucketCount * THUMBNAIL_HEIGHT * (7 / 10);
|
||||
const rows = Math.ceil(unwrappedWidth / this.viewport.width);
|
||||
const height = 51 + rows * THUMBNAIL_HEIGHT;
|
||||
bucket.bucketHeight = height;
|
||||
}
|
||||
|
||||
for (const assetGroup of bucket.dateGroups) {
|
||||
if (!assetGroup.heightActual) {
|
||||
const unwrappedWidth = (3 / 2) * assetGroup.assets.length * THUMBNAIL_HEIGHT * (7 / 10);
|
||||
const rows = Math.ceil(unwrappedWidth / this.viewport.width);
|
||||
const height = rows * THUMBNAIL_HEIGHT;
|
||||
assetGroup.height = height;
|
||||
}
|
||||
|
||||
const layoutResult = createJustifiedLayout(
|
||||
assetGroup.assets.map((g) => getAssetRatio(g)),
|
||||
{
|
||||
...LAYOUT_OPTIONS,
|
||||
containerWidth: Math.floor(this.viewport.width),
|
||||
},
|
||||
);
|
||||
assetGroup.geometry = {
|
||||
...layoutResult,
|
||||
containerWidth: calculateWidth(layoutResult.boxes),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async loadBucket(bucketDate: string, options: { preventCancel?: boolean; pending?: boolean } = {}): Promise<void> {
|
||||
const bucket = this.getBucketByDate(bucketDate);
|
||||
if (!bucket) {
|
||||
return;
|
||||
}
|
||||
|
||||
bucket.position = position;
|
||||
|
||||
if (bucket.cancelToken || bucket.assets.length > 0) {
|
||||
this.emit(false);
|
||||
if (bucket.bucketCount === bucket.assets.length) {
|
||||
// already loaded
|
||||
return;
|
||||
}
|
||||
|
||||
bucket.cancelToken = new AbortController();
|
||||
if (bucket.cancelToken != null && bucket.bucketCount !== bucket.assets.length) {
|
||||
// if promise is pending, and preventCancel is requested, then don't overwrite it
|
||||
if (!bucket.isPreventCancel && options.preventCancel) {
|
||||
bucket.isPreventCancel = options.preventCancel;
|
||||
}
|
||||
await bucket.complete;
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.pending) {
|
||||
this.pendingScrollBucket = bucket;
|
||||
}
|
||||
this.notifyListeners({ type: 'load', bucket });
|
||||
bucket.isPreventCancel = !!options.preventCancel;
|
||||
|
||||
const cancelToken = (bucket.cancelToken = new AbortController());
|
||||
try {
|
||||
const assets = await getTimeBucket(
|
||||
{
|
||||
|
|
@ -260,9 +490,14 @@ export class AssetStore {
|
|||
timeBucket: bucketDate,
|
||||
key: getKey(),
|
||||
},
|
||||
{ signal: bucket.cancelToken.signal },
|
||||
{ signal: cancelToken.signal },
|
||||
);
|
||||
|
||||
if (cancelToken.signal.aborted) {
|
||||
this.notifyListeners({ type: 'cancel', bucket });
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.albumId) {
|
||||
const albumAssets = await getTimeBucket(
|
||||
{
|
||||
|
|
@ -271,50 +506,87 @@ export class AssetStore {
|
|||
size: this.options.size,
|
||||
key: getKey(),
|
||||
},
|
||||
{ signal: bucket.cancelToken.signal },
|
||||
{ signal: cancelToken.signal },
|
||||
);
|
||||
|
||||
if (cancelToken.signal.aborted) {
|
||||
this.notifyListeners({ type: 'cancel', bucket });
|
||||
return;
|
||||
}
|
||||
for (const asset of albumAssets) {
|
||||
this.albumAssets.add(asset.id);
|
||||
}
|
||||
}
|
||||
|
||||
if (bucket.cancelToken.signal.aborted) {
|
||||
bucket.assets = assets;
|
||||
bucket.dateGroups = splitBucketIntoDateGroups(bucket, get(locale));
|
||||
this.updateGeometry(bucket, true);
|
||||
this.timelineHeight = this.buckets.reduce((accumulator, b) => accumulator + b.bucketHeight, 0);
|
||||
bucket.loaded();
|
||||
this.notifyListeners({ type: 'loaded', bucket });
|
||||
} catch (error) {
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
if ((error as any).name === 'AbortError') {
|
||||
return;
|
||||
}
|
||||
|
||||
bucket.assets = assets;
|
||||
|
||||
this.emit(true);
|
||||
} catch (error) {
|
||||
const $t = get(t);
|
||||
handleError(error, $t('errors.failed_to_load_assets'));
|
||||
bucket.errored();
|
||||
} finally {
|
||||
bucket.cancelToken = null;
|
||||
bucket.cancelToken = undefined;
|
||||
this.emit(true);
|
||||
}
|
||||
}
|
||||
|
||||
cancelBucket(bucket: AssetBucket) {
|
||||
bucket.cancelToken?.abort();
|
||||
}
|
||||
|
||||
updateBucket(bucketDate: string, height: number) {
|
||||
updateBucket(bucketDate: string, properties: { height?: number; intersecting?: boolean; measured?: boolean }) {
|
||||
const bucket = this.getBucketByDate(bucketDate);
|
||||
if (!bucket) {
|
||||
return 0;
|
||||
return {};
|
||||
}
|
||||
let delta = 0;
|
||||
if ('height' in properties) {
|
||||
const height = properties.height!;
|
||||
delta = height - bucket.bucketHeight;
|
||||
bucket.isBucketHeightActual = true;
|
||||
bucket.bucketHeight = height;
|
||||
this.timelineHeight += delta;
|
||||
this.notifyListeners({ type: 'bucket-height', bucket, delta });
|
||||
}
|
||||
if ('intersecting' in properties) {
|
||||
bucket.intersecting = properties.intersecting!;
|
||||
}
|
||||
if ('measured' in properties) {
|
||||
if (properties.measured) {
|
||||
bucket.measuredSignal?.();
|
||||
}
|
||||
bucket.measured = properties.measured!;
|
||||
}
|
||||
|
||||
const delta = height - bucket.bucketHeight;
|
||||
const scrollTimeline = bucket.position == BucketPosition.Above;
|
||||
|
||||
bucket.bucketHeight = height;
|
||||
bucket.position = BucketPosition.Unknown;
|
||||
|
||||
this.timelineHeight += delta;
|
||||
|
||||
this.emit(false);
|
||||
return { delta };
|
||||
}
|
||||
|
||||
return scrollTimeline ? delta : 0;
|
||||
updateBucketDateGroup(
|
||||
bucket: AssetBucket,
|
||||
dateGroup: DateGroup,
|
||||
properties: { height?: number; intersecting?: boolean },
|
||||
) {
|
||||
let delta = 0;
|
||||
if ('height' in properties) {
|
||||
const height = properties.height!;
|
||||
if (height > 0) {
|
||||
delta = height - dateGroup.height;
|
||||
dateGroup.heightActual = true;
|
||||
dateGroup.height = height;
|
||||
this.notifyListeners({ type: 'height', bucket, dateGroup, delta, height });
|
||||
}
|
||||
}
|
||||
if ('intersecting' in properties) {
|
||||
dateGroup.intersecting = properties.intersecting!;
|
||||
if (dateGroup.intersecting) {
|
||||
this.notifyListeners({ type: 'intersecting', bucket, dateGroup });
|
||||
}
|
||||
}
|
||||
this.emit(false);
|
||||
return { delta };
|
||||
}
|
||||
|
||||
addAssets(assets: AssetResponseDto[]) {
|
||||
|
|
@ -354,15 +626,7 @@ export class AssetStore {
|
|||
let bucket = this.getBucketByDate(timeBucket);
|
||||
|
||||
if (!bucket) {
|
||||
bucket = {
|
||||
bucketDate: timeBucket,
|
||||
bucketHeight: THUMBNAIL_HEIGHT,
|
||||
bucketCount: 0,
|
||||
assets: [],
|
||||
cancelToken: null,
|
||||
position: BucketPosition.Unknown,
|
||||
};
|
||||
|
||||
bucket = new AssetBucket({ store: this, bucketDate: timeBucket, bucketHeight: THUMBNAIL_HEIGHT });
|
||||
this.buckets.push(bucket);
|
||||
}
|
||||
|
||||
|
|
@ -383,6 +647,8 @@ export class AssetStore {
|
|||
const bDate = DateTime.fromISO(b.fileCreatedAt).toUTC();
|
||||
return bDate.diff(aDate).milliseconds;
|
||||
});
|
||||
bucket.dateGroups = splitBucketIntoDateGroups(bucket, get(locale));
|
||||
this.updateGeometry(bucket, true);
|
||||
}
|
||||
|
||||
this.emit(true);
|
||||
|
|
@ -392,18 +658,73 @@ export class AssetStore {
|
|||
return this.buckets.find((bucket) => bucket.bucketDate === bucketDate) || null;
|
||||
}
|
||||
|
||||
async getBucketInfoForAssetId({ id, localDateTime }: Pick<AssetResponseDto, 'id' | 'localDateTime'>) {
|
||||
async findAndLoadBucketAsPending(id: string) {
|
||||
const bucketInfo = this.assetToBucket[id];
|
||||
if (bucketInfo) {
|
||||
return bucketInfo;
|
||||
const bucket = bucketInfo.bucket;
|
||||
this.pendingScrollBucket = bucket;
|
||||
this.pendingScrollAssetId = id;
|
||||
this.emit(false);
|
||||
return bucket;
|
||||
}
|
||||
const asset = await getAssetInfo({ id });
|
||||
if (asset) {
|
||||
if (this.options.isArchived !== asset.isArchived) {
|
||||
return;
|
||||
}
|
||||
const bucket = await this.loadBucketAtTime(asset.localDateTime, { preventCancel: true, pending: true });
|
||||
if (bucket) {
|
||||
this.pendingScrollBucket = bucket;
|
||||
this.pendingScrollAssetId = asset.id;
|
||||
this.emit(false);
|
||||
}
|
||||
return bucket;
|
||||
}
|
||||
}
|
||||
|
||||
/* Must be paired with matching clearPendingScroll() call */
|
||||
async scheduleScrollToAssetId(scrollTarget: AssetGridRouteSearchParams, onFailure: () => void) {
|
||||
try {
|
||||
const { at: assetId } = scrollTarget;
|
||||
if (assetId) {
|
||||
await this.complete;
|
||||
const bucket = await this.findAndLoadBucketAsPending(assetId);
|
||||
if (bucket) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// failure
|
||||
}
|
||||
onFailure();
|
||||
}
|
||||
|
||||
clearPendingScroll() {
|
||||
this.pendingScrollBucket = undefined;
|
||||
this.pendingScrollAssetId = undefined;
|
||||
}
|
||||
|
||||
private async loadBucketAtTime(localDateTime: string, options: { preventCancel?: boolean; pending?: boolean }) {
|
||||
let date = fromLocalDateTime(localDateTime);
|
||||
if (this.options.size == TimeBucketSize.Month) {
|
||||
date = date.set({ day: 1, hour: 0, minute: 0, second: 0, millisecond: 0 });
|
||||
} else if (this.options.size == TimeBucketSize.Day) {
|
||||
date = date.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
|
||||
}
|
||||
await this.loadBucket(date.toISO()!, BucketPosition.Unknown);
|
||||
const iso = date.toISO()!;
|
||||
await this.loadBucket(iso, options);
|
||||
return this.getBucketByDate(iso);
|
||||
}
|
||||
|
||||
private async getBucketInfoForAsset(
|
||||
{ id, localDateTime }: Pick<AssetResponseDto, 'id' | 'localDateTime'>,
|
||||
options: { preventCancel?: boolean; pending?: boolean } = {},
|
||||
) {
|
||||
const bucketInfo = this.assetToBucket[id];
|
||||
if (bucketInfo) {
|
||||
return bucketInfo;
|
||||
}
|
||||
await this.loadBucketAtTime(localDateTime, options);
|
||||
return this.assetToBucket[id] || null;
|
||||
}
|
||||
|
||||
|
|
@ -417,7 +738,7 @@ export class AssetStore {
|
|||
);
|
||||
for (const bucket of this.buckets) {
|
||||
if (index < bucket.bucketCount) {
|
||||
await this.loadBucket(bucket.bucketDate, BucketPosition.Unknown);
|
||||
await this.loadBucket(bucket.bucketDate);
|
||||
return bucket.assets[index] || null;
|
||||
}
|
||||
|
||||
|
|
@ -458,6 +779,7 @@ export class AssetStore {
|
|||
// Iterate in reverse to allow array splicing.
|
||||
for (let index = this.buckets.length - 1; index >= 0; index--) {
|
||||
const bucket = this.buckets[index];
|
||||
let changed = false;
|
||||
for (let index_ = bucket.assets.length - 1; index_ >= 0; index_--) {
|
||||
const asset = bucket.assets[index_];
|
||||
if (!idSet.has(asset.id)) {
|
||||
|
|
@ -465,17 +787,22 @@ export class AssetStore {
|
|||
}
|
||||
|
||||
bucket.assets.splice(index_, 1);
|
||||
changed = true;
|
||||
if (bucket.assets.length === 0) {
|
||||
this.buckets.splice(index, 1);
|
||||
}
|
||||
}
|
||||
if (changed) {
|
||||
bucket.dateGroups = splitBucketIntoDateGroups(bucket, get(locale));
|
||||
this.updateGeometry(bucket, true);
|
||||
}
|
||||
}
|
||||
|
||||
this.emit(true);
|
||||
}
|
||||
|
||||
async getPreviousAsset(asset: AssetResponseDto): Promise<AssetResponseDto | null> {
|
||||
const info = await this.getBucketInfoForAssetId(asset);
|
||||
const info = await this.getBucketInfoForAsset(asset);
|
||||
if (!info) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -491,12 +818,12 @@ export class AssetStore {
|
|||
}
|
||||
|
||||
const previousBucket = this.buckets[bucketIndex - 1];
|
||||
await this.loadBucket(previousBucket.bucketDate, BucketPosition.Unknown);
|
||||
await this.loadBucket(previousBucket.bucketDate);
|
||||
return previousBucket.assets.at(-1) || null;
|
||||
}
|
||||
|
||||
async getNextAsset(asset: AssetResponseDto): Promise<AssetResponseDto | null> {
|
||||
const info = await this.getBucketInfoForAssetId(asset);
|
||||
const info = await this.getBucketInfoForAsset(asset);
|
||||
if (!info) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -512,7 +839,7 @@ export class AssetStore {
|
|||
}
|
||||
|
||||
const nextBucket = this.buckets[bucketIndex + 1];
|
||||
await this.loadBucket(nextBucket.bucketDate, BucketPosition.Unknown);
|
||||
await this.loadBucket(nextBucket.bucketDate);
|
||||
return nextBucket.assets[0] || null;
|
||||
}
|
||||
|
||||
|
|
@ -537,8 +864,7 @@ export class AssetStore {
|
|||
}
|
||||
this.assetToBucket = assetToBucket;
|
||||
}
|
||||
|
||||
this.store$.update(() => this);
|
||||
this.store$.set(this);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue