2025-03-04 21:34:53 -05:00
|
|
|
import type { AssetBucket } from '$lib/stores/assets-store.svelte';
|
2024-02-22 15:36:14 +01:00
|
|
|
import { locale } from '$lib/stores/preferences.store';
|
2025-03-18 10:14:46 -04:00
|
|
|
import { type CommonJustifiedLayout } from '$lib/utils/layout-utils';
|
2025-03-04 21:34:53 -05:00
|
|
|
|
2024-03-05 16:43:24 +01:00
|
|
|
import type { AssetResponseDto } from '@immich/sdk';
|
2025-03-18 10:14:46 -04:00
|
|
|
import { memoize } from 'lodash-es';
|
2025-03-11 06:18:29 -05:00
|
|
|
import { DateTime, type LocaleOptions } from 'luxon';
|
2024-02-22 15:36:14 +01:00
|
|
|
import { get } from 'svelte/store';
|
2023-07-12 05:12:19 +03: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>
2024-08-21 22:15:21 -04:00
|
|
|
export type DateGroup = {
|
2025-03-18 10:14:46 -04:00
|
|
|
bucket: AssetBucket;
|
|
|
|
index: number;
|
|
|
|
row: number;
|
|
|
|
col: number;
|
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>
2024-08-21 22:15:21 -04:00
|
|
|
date: DateTime;
|
|
|
|
groupTitle: string;
|
|
|
|
assets: AssetResponseDto[];
|
2025-03-18 10:14:46 -04:00
|
|
|
assetsIntersecting: boolean[];
|
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>
2024-08-21 22:15:21 -04:00
|
|
|
height: number;
|
|
|
|
intersecting: boolean;
|
2025-03-04 21:34:53 -05:00
|
|
|
geometry: CommonJustifiedLayout;
|
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>
2024-08-21 22:15:21 -04:00
|
|
|
};
|
|
|
|
export type ScrubberListener = (
|
|
|
|
bucketDate: string | undefined,
|
|
|
|
overallScrollPercent: number,
|
|
|
|
bucketScrollPercent: number,
|
|
|
|
) => void | Promise<void>;
|
|
|
|
export type ScrollTargetListener = ({
|
|
|
|
bucket,
|
|
|
|
dateGroup,
|
|
|
|
asset,
|
|
|
|
offset,
|
|
|
|
}: {
|
|
|
|
bucket: AssetBucket;
|
|
|
|
dateGroup: DateGroup;
|
|
|
|
asset: AssetResponseDto;
|
|
|
|
offset: number;
|
|
|
|
}) => void;
|
|
|
|
|
2024-02-22 15:36:14 +01:00
|
|
|
export const fromLocalDateTime = (localDateTime: string) =>
|
|
|
|
DateTime.fromISO(localDateTime, { zone: 'UTC', locale: get(locale) });
|
2023-10-06 08:12:09 -04:00
|
|
|
|
2024-09-18 17:07:50 -04:00
|
|
|
export const fromDateTimeOriginal = (dateTimeOriginal: string, timeZone: string) =>
|
|
|
|
DateTime.fromISO(dateTimeOriginal, { zone: timeZone });
|
|
|
|
|
2025-03-18 10:14:46 -04:00
|
|
|
export type LayoutBox = {
|
|
|
|
aspectRatio: number;
|
|
|
|
top: number;
|
|
|
|
width: number;
|
|
|
|
height: number;
|
|
|
|
left: number;
|
|
|
|
forcedAspectRatio?: boolean;
|
|
|
|
};
|
|
|
|
|
|
|
|
export function findTotalOffset(element: HTMLElement, stop: HTMLElement) {
|
|
|
|
let offset = 0;
|
|
|
|
while (element.offsetParent && element !== stop) {
|
|
|
|
offset += element.offsetTop;
|
|
|
|
element = element.offsetParent as HTMLElement;
|
|
|
|
}
|
|
|
|
return offset;
|
|
|
|
}
|
|
|
|
|
|
|
|
export const groupDateFormat: Intl.DateTimeFormatOptions = {
|
|
|
|
weekday: 'short',
|
|
|
|
month: 'short',
|
|
|
|
day: 'numeric',
|
|
|
|
year: 'numeric',
|
|
|
|
};
|
|
|
|
|
2024-07-29 16:42:55 +02:00
|
|
|
export function formatGroupTitle(_date: DateTime): string {
|
|
|
|
if (!_date.isValid) {
|
|
|
|
return _date.toString();
|
|
|
|
}
|
|
|
|
const date = _date as DateTime<true>;
|
2023-07-12 05:12:19 +03:00
|
|
|
const today = DateTime.now().startOf('day');
|
|
|
|
|
|
|
|
// Today
|
|
|
|
if (today.hasSame(date, 'day')) {
|
2024-07-29 16:42:55 +02:00
|
|
|
return date.toRelativeCalendar();
|
2023-07-12 05:12:19 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
// Yesterday
|
2024-07-29 16:42:55 +02:00
|
|
|
if (today.minus({ days: 1 }).hasSame(date, 'day')) {
|
|
|
|
return date.toRelativeCalendar();
|
2023-07-12 05:12:19 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
// Last week
|
2024-08-01 13:39:26 +02:00
|
|
|
if (date >= today.minus({ days: 6 }) && date < today) {
|
2023-07-12 05:12:19 +03:00
|
|
|
return date.toLocaleString({ weekday: 'long' });
|
|
|
|
}
|
|
|
|
|
|
|
|
// This year
|
|
|
|
if (today.hasSame(date, 'year')) {
|
|
|
|
return date.toLocaleString({
|
|
|
|
weekday: 'short',
|
|
|
|
month: 'short',
|
|
|
|
day: 'numeric',
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2025-03-11 06:18:29 -05:00
|
|
|
return getDateLocaleString(date);
|
2023-07-12 05:12:19 +03:00
|
|
|
}
|
2025-03-11 06:18:29 -05:00
|
|
|
export const getDateLocaleString = (date: DateTime, opts?: LocaleOptions): string =>
|
|
|
|
date.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY, opts);
|
|
|
|
|
2025-03-18 10:14:46 -04:00
|
|
|
export const formatDateGroupTitle = memoize(formatGroupTitle);
|