8764a1894b
* feat(web): adaptive progressive image loading for photo viewer Replace ImageManager with a new AdaptiveImageLoader that progressively loads images through quality tiers (thumbnail → preview → original). New components and utilities: - AdaptiveImage: layered image renderer with thumbhash, thumbnail, preview, and original layers with visibility managed by load state - AdaptiveImageLoader: state machine driving the quality progression with per-quality callbacks and error handling - ImageLayer/Image: low-level image elements with load/error lifecycle - PreloadManager: preloads adjacent assets for instant navigation - AlphaBackground/DelayedLoadingSpinner: loading state UI Zoom is handled via a derived CSS transform applied to the content wrapper in AdaptiveImage, with the zoom library (zoomTarget: null) only tracking state without manipulating the DOM directly. Also adds scaleToCover to container-utils and getAssetUrls to utils. * fix: don't partially render images in firefox * add passive loading indicator to asset-viewer --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
|
|
import { createZoomImageWheel } from '@zoom-image/core';
|
|
|
|
export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolean }) => {
|
|
const zoomInstance = createZoomImageWheel(node, {
|
|
maxZoom: 10,
|
|
initialState: assetViewerManager.zoomState,
|
|
zoomTarget: null,
|
|
});
|
|
|
|
const unsubscribes = [
|
|
assetViewerManager.on({ ZoomChange: (state) => zoomInstance.setState(state) }),
|
|
zoomInstance.subscribe(({ state }) => assetViewerManager.onZoomChange(state)),
|
|
];
|
|
|
|
const onInteractionStart = (event: Event) => {
|
|
if (options?.disabled) {
|
|
event.stopImmediatePropagation();
|
|
}
|
|
assetViewerManager.cancelZoomAnimation();
|
|
};
|
|
|
|
node.addEventListener('wheel', onInteractionStart, { capture: true });
|
|
node.addEventListener('pointerdown', onInteractionStart, { capture: true });
|
|
|
|
node.style.overflow = 'visible';
|
|
return {
|
|
update(newOptions?: { disabled?: boolean }) {
|
|
options = newOptions;
|
|
},
|
|
destroy() {
|
|
for (const unsubscribe of unsubscribes) {
|
|
unsubscribe();
|
|
}
|
|
node.removeEventListener('wheel', onInteractionStart, { capture: true });
|
|
node.removeEventListener('pointerdown', onInteractionStart, { capture: true });
|
|
zoomInstance.cleanup();
|
|
},
|
|
};
|
|
};
|