helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-10-17 18:19:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): rename loadMonthGroup to loadSegment API

Browse source
This commit is contained in:
midzelis 2025-09-18 14:38:09 +00:00
parent c37d13691b
commit aa559f0b30
6 changed files with 38 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/src/lib/components/timeline/Timeline.svelte
View file

@ -670,7 +670,7 @@
break; break;
} }
if (started) { if (started) {
await timelineManager.loadMonthGroup(monthGroup.yearMonth); await timelineManager.loadSegment(monthGroup.yearMonth);
for (const asset of monthGroup.assetsIterator()) { for (const asset of monthGroup.assetsIterator()) {
if (deselect) { if (deselect) {
assetInteraction.removeAssetFromMultiselectGroup(asset.id); assetInteraction.removeAssetFromMultiselectGroup(asset.id);
@ -811,7 +811,7 @@
$effect(() => { $effect(() => {
if ($showAssetViewer) { if ($showAssetViewer) {
const { localDateTime } = getTimes($viewingAsset.fileCreatedAt, DateTime.local().offset / 60); const { localDateTime } = getTimes($viewingAsset.fileCreatedAt, DateTime.local().offset / 60);
void timelineManager.loadMonthGroup({ year: localDateTime.year, month: localDateTime.month }); void timelineManager.loadSegment({ year: localDateTime.year, month: localDateTime.month });
} }
}); });
</script> </script>

6
web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
View file

@ -17,11 +17,7 @@ export function updateIntersectionMonthGroup(timelineManager: TimelineManager, m
INTERSECTION_EXPAND_BOTTOM, INTERSECTION_EXPAND_BOTTOM,
); );
} }
month.intersecting = actuallyIntersecting || preIntersecting; month.updateIntersection({ intersecting: actuallyIntersecting || preIntersecting, actuallyIntersecting });
month.actuallyIntersecting = actuallyIntersecting;
if (preIntersecting || actuallyIntersecting) {
timelineManager.clearDeferredLayout(month);
}
} }
/** /**

10
web/src/lib/managers/timeline-manager/month-group.svelte.ts
View file

@ -81,7 +81,7 @@ export class MonthGroup {
} }
this.#intersecting = newValue; this.#intersecting = newValue;
if (newValue) { if (newValue) {
void this.timelineManager.loadMonthGroup(this.yearMonth); void this.timelineManager.loadSegment(this.yearMonth);
} else { } else {
this.cancel(); this.cancel();
} }
@ -374,4 +374,12 @@ export class MonthGroup {
cancel() { cancel() {
this.loader?.cancel(); this.loader?.cancel();
} }
updateIntersection({ intersecting, actuallyIntersecting }: { intersecting: boolean; actuallyIntersecting: boolean }) {
this.intersecting = intersecting;
this.actuallyIntersecting = actuallyIntersecting;
if (intersecting) {
this.timelineManager.clearDeferredLayout(this);
}
}
} }

40
web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
View file

@ -92,7 +92,7 @@ describe('TimelineManager', () => {
}); });
}); });
describe('loadMonthGroup', () => { describe('loadSegment', () => {
let timelineManager: TimelineManager; let timelineManager: TimelineManager;
const bucketAssets: Record<string, TimelineAsset[]> = { const bucketAssets: Record<string, TimelineAsset[]> = {
'2024-01-03T00:00:00.000Z': timelineAssetFactory.buildList(1).map((asset) => '2024-01-03T00:00:00.000Z': timelineAssetFactory.buildList(1).map((asset) =>
@ -129,46 +129,46 @@ describe('TimelineManager', () => {
it('loads a month', async () => { it('loads a month', async () => {
expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(0); expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(0);
await timelineManager.loadMonthGroup({ year: 2024, month: 1 }); await timelineManager.loadSegment({ year: 2024, month: 1 });
expect(sdkMock.getTimeBucket).toBeCalledTimes(1); expect(sdkMock.getTimeBucket).toBeCalledTimes(1);
expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3); expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3);
}); });
it('ignores invalid months', async () => { it('ignores invalid months', async () => {
await timelineManager.loadMonthGroup({ year: 2023, month: 1 }); await timelineManager.loadSegment({ year: 2023, month: 1 });
expect(sdkMock.getTimeBucket).toBeCalledTimes(0); expect(sdkMock.getTimeBucket).toBeCalledTimes(0);
}); });
it('cancels month loading', async () => { it('cancels month loading', async () => {
const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })!; const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })!;
void timelineManager.loadMonthGroup({ year: 2024, month: 1 }); void timelineManager.loadSegment({ year: 2024, month: 1 });
const abortSpy = vi.spyOn(month!.loader!.cancelToken!, 'abort'); const abortSpy = vi.spyOn(month!.loader!.cancelToken!, 'abort');
month?.cancel(); month?.cancel();
expect(abortSpy).toBeCalledTimes(1); expect(abortSpy).toBeCalledTimes(1);
await timelineManager.loadMonthGroup({ year: 2024, month: 1 }); await timelineManager.loadSegment({ year: 2024, month: 1 });
expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3); expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3);
}); });
it('prevents loading months multiple times', async () => { it('prevents loading months multiple times', async () => {
await Promise.all([ await Promise.all([
timelineManager.loadMonthGroup({ year: 2024, month: 1 }), timelineManager.loadSegment({ year: 2024, month: 1 }),
timelineManager.loadMonthGroup({ year: 2024, month: 1 }), timelineManager.loadSegment({ year: 2024, month: 1 }),
]); ]);
expect(sdkMock.getTimeBucket).toBeCalledTimes(1); expect(sdkMock.getTimeBucket).toBeCalledTimes(1);
await timelineManager.loadMonthGroup({ year: 2024, month: 1 }); await timelineManager.loadSegment({ year: 2024, month: 1 });
expect(sdkMock.getTimeBucket).toBeCalledTimes(1); expect(sdkMock.getTimeBucket).toBeCalledTimes(1);
}); });
it('allows loading a canceled month', async () => { it('allows loading a canceled month', async () => {
const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })!; const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })!;
const loadPromise = timelineManager.loadMonthGroup({ year: 2024, month: 1 }); const loadPromise = timelineManager.loadSegment({ year: 2024, month: 1 });
month.cancel(); month.cancel();
await loadPromise; await loadPromise;
expect(month?.getAssets().length).toEqual(0); expect(month?.getAssets().length).toEqual(0);
await timelineManager.loadMonthGroup({ year: 2024, month: 1 }); await timelineManager.loadSegment({ year: 2024, month: 1 });
expect(month!.getAssets().length).toEqual(3); expect(month!.getAssets().length).toEqual(3);
}); });
}); });
@ -477,7 +477,7 @@ describe('TimelineManager', () => {
}); });
it('returns previous assetId', async () => { it('returns previous assetId', async () => {
await timelineManager.loadMonthGroup({ year: 2024, month: 1 }); await timelineManager.loadSegment({ year: 2024, month: 1 });
const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 }); const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 });
const a = month!.getAssets()[0]; const a = month!.getAssets()[0];
@ -487,8 +487,8 @@ describe('TimelineManager', () => {
}); });
it('returns previous assetId spanning multiple months', async () => { it('returns previous assetId spanning multiple months', async () => {
await timelineManager.loadMonthGroup({ year: 2024, month: 2 }); await timelineManager.loadSegment({ year: 2024, month: 2 });
await timelineManager.loadMonthGroup({ year: 2024, month: 3 }); await timelineManager.loadSegment({ year: 2024, month: 3 });
const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 2 }); const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 2 });
const previousMonth = getMonthGroupByDate(timelineManager, { year: 2024, month: 3 }); const previousMonth = getMonthGroupByDate(timelineManager, { year: 2024, month: 3 });
@ -499,23 +499,23 @@ describe('TimelineManager', () => {
}); });
it('loads previous month', async () => { it('loads previous month', async () => {
await timelineManager.loadMonthGroup({ year: 2024, month: 2 }); await timelineManager.loadSegment({ year: 2024, month: 2 });
const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 2 }); const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 2 });
const previousMonth = getMonthGroupByDate(timelineManager, { year: 2024, month: 3 }); const previousMonth = getMonthGroupByDate(timelineManager, { year: 2024, month: 3 });
const a = month!.getFirstAsset(); const a = month!.getFirstAsset();
const b = previousMonth!.getFirstAsset(); const b = previousMonth!.getFirstAsset();
const loadMonthGroupSpy = vi.spyOn(month!.loader!, 'execute'); const loadSegmentSpy = vi.spyOn(month!.loader!, 'execute');
const previousMonthSpy = vi.spyOn(previousMonth!.loader!, 'execute'); const previousMonthSpy = vi.spyOn(previousMonth!.loader!, 'execute');
const previous = await timelineManager.getLaterAsset(a); const previous = await timelineManager.getLaterAsset(a);
expect(previous).toEqual(b); expect(previous).toEqual(b);
expect(loadMonthGroupSpy).toBeCalledTimes(0); expect(loadSegmentSpy).toBeCalledTimes(0);
expect(previousMonthSpy).toBeCalledTimes(0); expect(previousMonthSpy).toBeCalledTimes(0);
}); });
it('skips removed assets', async () => { it('skips removed assets', async () => {
await timelineManager.loadMonthGroup({ year: 2024, month: 1 }); await timelineManager.loadSegment({ year: 2024, month: 1 });
await timelineManager.loadMonthGroup({ year: 2024, month: 2 }); await timelineManager.loadSegment({ year: 2024, month: 2 });
await timelineManager.loadMonthGroup({ year: 2024, month: 3 }); await timelineManager.loadSegment({ year: 2024, month: 3 });
const [assetOne, assetTwo, assetThree] = await getAssets(timelineManager); const [assetOne, assetTwo, assetThree] = await getAssets(timelineManager);
timelineManager.removeAssets([assetTwo.id]); timelineManager.removeAssets([assetTwo.id]);
@ -523,7 +523,7 @@ describe('TimelineManager', () => {
}); });
it('returns null when no more assets', async () => { it('returns null when no more assets', async () => {
await timelineManager.loadMonthGroup({ year: 2024, month: 3 }); await timelineManager.loadSegment({ year: 2024, month: 3 });
expect(await timelineManager.getLaterAsset(timelineManager.months[0].getFirstAsset())).toBeUndefined(); expect(await timelineManager.getLaterAsset(timelineManager.months[0].getFirstAsset())).toBeUndefined();
}); });
}); });

10
web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
View file

@ -198,7 +198,7 @@ export class TimelineManager {
const direction = options?.direction ?? 'earlier'; const direction = options?.direction ?? 'earlier';
let { startDayGroup, startAsset } = options ?? {}; let { startDayGroup, startAsset } = options ?? {};
for (const monthGroup of this.monthGroupIterator({ direction, startMonthGroup: options?.startMonthGroup })) { for (const monthGroup of this.monthGroupIterator({ direction, startMonthGroup: options?.startMonthGroup })) {
await this.loadMonthGroup(monthGroup.yearMonth, { cancelable: false }); await this.loadSegment(monthGroup.yearMonth, { cancelable: false });
yield* monthGroup.assetsIterator({ startDayGroup, startAsset, direction }); yield* monthGroup.assetsIterator({ startDayGroup, startAsset, direction });
startDayGroup = startAsset = undefined; startDayGroup = startAsset = undefined;
} }
@ -387,7 +387,7 @@ export class TimelineManager {
}; };
} }
async loadMonthGroup(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }): Promise<void> { async loadSegment(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }): Promise<void> {
let cancelable = true; let cancelable = true;
if (options) { if (options) {
cancelable = options.cancelable; cancelable = options.cancelable;
@ -442,7 +442,7 @@ export class TimelineManager {
} }
async #loadMonthGroupAtTime(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }) { async #loadMonthGroupAtTime(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }) {
await this.loadMonthGroup(yearMonth, options); await this.loadSegment(yearMonth, options);
return getMonthGroupByDate(this, yearMonth); return getMonthGroupByDate(this, yearMonth);
} }
@ -454,7 +454,7 @@ export class TimelineManager {
async getRandomMonthGroup() { async getRandomMonthGroup() {
const random = Math.floor(Math.random() * this.months.length); const random = Math.floor(Math.random() * this.months.length);
const month = this.months[random]; const month = this.months[random];
await this.loadMonthGroup(month.yearMonth, { cancelable: false }); await this.loadSegment(month.yearMonth, { cancelable: false });
return month; return month;
} }
@ -527,7 +527,7 @@ export class TimelineManager {
if (!monthGroup) { if (!monthGroup) {
return; return;
} }
await this.loadMonthGroup(dateTime, { cancelable: false }); await this.loadSegment(dateTime, { cancelable: false });
const asset = monthGroup.findClosest(dateTime); const asset = monthGroup.findClosest(dateTime);
if (asset) { if (asset) {
return asset; return asset;

2
web/src/lib/utils/asset-utils.ts
View file

@ -513,7 +513,7 @@ export const selectAllAssets = async (timelineManager: TimelineManager, assetInt
try { try {
for (const monthGroup of timelineManager.months) { for (const monthGroup of timelineManager.months) {
await timelineManager.loadMonthGroup(monthGroup.yearMonth); await timelineManager.loadSegment(monthGroup.yearMonth);
if (!get(isSelectingAllAssets)) { if (!get(isSelectingAllAssets)) {
assetInteraction.clearMultiselect(); assetInteraction.clearMultiselect();