mirror of
https://github.com/immich-app/immich.git
synced 2026-03-26 11:50:53 +03:00
be3cdd3fa4
Thumbnails that finish loading while offscreen (in the 500px pre-load zone) were still playing the thumbhash fade-out transition, causing visual flicker when scrolling. This adds an `actuallyIntersecting` property (zero-margin viewport check) alongside the existing `intersecting` (500px expanded margins) to distinguish between pre-loaded and truly visible assets. - Refactor `calculateViewerAssetIntersecting` to return a numeric flag (NONE/PRE/ACTUAL) avoiding object allocation in the hot derived path - Inline `calculateMonthGroupIntersecting` into `updateIntersectionMonthGroup` to avoid intermediate object allocation - Thread `actuallyIntersecting` through AssetLayout → Month → Timeline → Thumbnail snippet chain - Use `actuallyIntersecting` in Thumbnail to skip the fade when loaded offscreen - Add unit tests for `isIntersecting` and `calculateViewerAssetIntersecting`
82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import { TUNABLES } from '$lib/utils/tunables';
|
|
import type { MonthGroup } from '../month-group.svelte';
|
|
import { TimelineManager } from '../timeline-manager.svelte';
|
|
|
|
const {
|
|
TIMELINE: { INTERSECTION_EXPAND_TOP, INTERSECTION_EXPAND_BOTTOM },
|
|
} = TUNABLES;
|
|
|
|
/**
|
|
* General function to check if a rectangular region intersects with a window.
|
|
*/
|
|
export function isIntersecting(regionTop: number, regionBottom: number, windowTop: number, windowBottom: number) {
|
|
return (
|
|
(regionTop >= windowTop && regionTop < windowBottom) ||
|
|
(regionBottom >= windowTop && regionBottom < windowBottom) ||
|
|
(regionTop < windowTop && regionBottom >= windowBottom)
|
|
);
|
|
}
|
|
|
|
export function updateIntersectionMonthGroup(timelineManager: TimelineManager, month: MonthGroup) {
|
|
const monthGroupTop = month.top;
|
|
const monthGroupBottom = monthGroupTop + month.height;
|
|
const windowTop = timelineManager.visibleWindow.top;
|
|
const windowBottom = timelineManager.visibleWindow.bottom;
|
|
|
|
const actuallyIntersecting = isIntersecting(monthGroupTop, monthGroupBottom, windowTop, windowBottom);
|
|
|
|
let intersecting = actuallyIntersecting;
|
|
if (!actuallyIntersecting) {
|
|
intersecting = isIntersecting(
|
|
monthGroupTop,
|
|
monthGroupBottom,
|
|
windowTop - INTERSECTION_EXPAND_TOP,
|
|
windowBottom + INTERSECTION_EXPAND_BOTTOM,
|
|
);
|
|
}
|
|
|
|
month.intersecting = intersecting;
|
|
month.actuallyIntersecting = actuallyIntersecting;
|
|
if (intersecting) {
|
|
timelineManager.clearDeferredLayout(month);
|
|
}
|
|
}
|
|
|
|
// Bit flags for intersection state
|
|
export const Intersection = {
|
|
NONE: 0,
|
|
PRE: 1,
|
|
ACTUAL: 3, // includes PRE (both bits set)
|
|
} as const;
|
|
|
|
/**
|
|
* Returns a numeric flag: NONE (0), PRE (1, within expanded margin only), or ACTUAL (3, truly visible).
|
|
*/
|
|
export function calculateViewerAssetIntersecting(
|
|
timelineManager: TimelineManager,
|
|
positionTop: number,
|
|
positionHeight: number,
|
|
) {
|
|
const positionBottom = positionTop + positionHeight;
|
|
const headerHeight = timelineManager.headerHeight;
|
|
const windowTop = timelineManager.visibleWindow.top - headerHeight;
|
|
const windowBottom = timelineManager.visibleWindow.bottom + headerHeight;
|
|
|
|
if (isIntersecting(positionTop, positionBottom, windowTop, windowBottom)) {
|
|
return Intersection.ACTUAL;
|
|
}
|
|
|
|
if (
|
|
isIntersecting(
|
|
positionTop,
|
|
positionBottom,
|
|
windowTop - INTERSECTION_EXPAND_TOP,
|
|
windowBottom + INTERSECTION_EXPAND_BOTTOM,
|
|
)
|
|
) {
|
|
return Intersection.PRE;
|
|
}
|
|
|
|
return Intersection.NONE;
|
|
}
|