diff --git a/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts b/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts index bb3ae72c81..9e35726bbf 100644 --- a/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts +++ b/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts @@ -67,3 +67,11 @@ export function calculateViewerAssetViewportProximity( timelineManager.visibleWindow.bottom + headerHeight, ); } + +export function calculateViewerAssetIsInOrNearViewport( + timelineManager: TimelineManager, + positionTop: number, + positionHeight: number, +) { + return isInOrNearViewport(calculateViewerAssetViewportProximity(timelineManager, positionTop, positionHeight)); +} diff --git a/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts b/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts index b6706e1ea1..ba8b028b82 100644 --- a/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts +++ b/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts @@ -29,7 +29,8 @@ import type { AssetDescriptor, Direction, MoveAsset, TimelineAsset } from './typ import { ViewerAsset } from './viewer-asset.svelte'; export class TimelineMonth { - #viewportProximity: ViewportProximity = $state(ViewportProximity.FarFromViewport); + #isInOrNearViewport = $state(false); + #isInViewport = $state(false); isLoaded: boolean = $state(false); timelineDays: TimelineDay[] = $state([]); readonly timelineManager: TimelineManager; @@ -85,24 +86,28 @@ export class TimelineMonth { } set viewportProximity(newValue: ViewportProximity) { - const old = this.#viewportProximity; - if (old === newValue) { - return; + const isInOrNearViewport = isInOrNearViewportUtil(newValue); + if (this.#isInOrNearViewport !== isInOrNearViewport) { + this.#isInOrNearViewport = isInOrNearViewport; + if (isInOrNearViewport) { + void this.timelineManager.loadTimelineMonth(this.yearMonth); + } else { + this.cancel(); + } } - this.#viewportProximity = newValue; - if (isInOrNearViewportUtil(newValue)) { - void this.timelineManager.loadTimelineMonth(this.yearMonth); - } else { - this.cancel(); + + const isInViewport = isInViewportUtil(newValue); + if (this.#isInViewport !== isInViewport) { + this.#isInViewport = isInViewport; } } get isInOrNearViewport() { - return isInOrNearViewportUtil(this.#viewportProximity); + return this.#isInOrNearViewport; } get isInViewport() { - return isInViewportUtil(this.#viewportProximity); + return this.#isInViewport; } get lastTimelineDay() { diff --git a/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts b/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts index 0179dd9e74..d8b0dfdbe1 100644 --- a/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts +++ b/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts @@ -1,28 +1,24 @@ import type { CommonPosition } from '$lib/utils/layout-utils'; -import { - ViewportProximity, - calculateViewerAssetViewportProximity, - isInOrNearViewport, -} from './internal/intersection-support.svelte'; +import { calculateViewerAssetIsInOrNearViewport } from './internal/intersection-support.svelte'; import type { TimelineDay } from './timeline-day.svelte'; import type { TimelineAsset } from './types'; export class ViewerAsset { readonly #group: TimelineDay; - #viewportProximity = $derived.by(() => { + #isInOrNearViewport = $derived.by(() => { if (!this.position) { - return ViewportProximity.FarFromViewport; + return false; } const store = this.#group.timelineMonth.timelineManager; const positionTop = this.#group.absoluteTimelineDayTop + this.position.top; - return calculateViewerAssetViewportProximity(store, positionTop, this.position.height); + return calculateViewerAssetIsInOrNearViewport(store, positionTop, this.position.height); }); get isInOrNearViewport() { - return isInOrNearViewport(this.#viewportProximity); + return this.#isInOrNearViewport; } position: CommonPosition | undefined = $state.raw();