+
{#each stackedAssets as stackedAsset (stackedAsset.id)}
{
- cursor.current = stackedAsset;
+ selectedStackAsset = stackedAsset;
previewStackedAsset = undefined;
}}
onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 6e934874e94f4..ea2f653d7de10 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -17,9 +17,16 @@
import { getAssetMediaUrl, getPeopleThumbnailUrl } from '$lib/utils';
import { delay, getDimensions } from '$lib/utils/asset-utils';
import { getByteUnitString } from '$lib/utils/byte-units';
+ import { handleError } from '$lib/utils/handle-error';
import { fromISODateTime, fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
import { getParentPath } from '$lib/utils/tree-utils';
- import { AssetMediaSize, getAssetInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
+ import {
+ AssetMediaSize,
+ getAllAlbums,
+ getAssetInfo,
+ type AlbumResponseDto,
+ type AssetResponseDto,
+ } from '@immich/sdk';
import { Icon, IconButton, LoadingSpinner, modalManager, Text } from '@immich/ui';
import {
mdiCalendar,
@@ -34,20 +41,21 @@
mdiPlus,
} from '@mdi/js';
import { DateTime } from 'luxon';
+ import { untrack } from 'svelte';
import { t } from 'svelte-i18n';
import { slide } from 'svelte/transition';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import PersonSidePanel from '../faces-page/person-side-panel.svelte';
+ import OnEvents from '../OnEvents.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte';
import AlbumListItemDetails from './album-list-item-details.svelte';
interface Props {
asset: AssetResponseDto;
- albums?: AlbumResponseDto[];
currentAlbum?: AlbumResponseDto | null;
}
- let { asset, albums = [], currentAlbum = null }: Props = $props();
+ let { asset, currentAlbum = null }: Props = $props();
let showAssetPath = $state(false);
let showEditFaces = $state(false);
@@ -74,14 +82,38 @@
let previousId: string | undefined = $state();
let previousRoute = $derived(currentAlbum?.id ? Route.viewAlbum(currentAlbum) : Route.photos());
+ let albums = $state([]);
+
+ const refreshAlbums = async () => {
+ if (authManager.isSharedLink) {
+ return;
+ }
+
+ try {
+ albums = await getAllAlbums({ assetId: asset.id });
+ } catch (error) {
+ handleError(error, 'Error getting asset album membership');
+ }
+ };
+
+ $effect(() => {
+ // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+ asset;
+ untrack(() => void refreshAlbums());
+ });
+
$effect(() => {
if (!previousId) {
previousId = asset.id;
+ return;
}
- if (asset.id !== previousId) {
- showEditFaces = false;
- previousId = asset.id;
+
+ if (asset.id === previousId) {
+ return;
}
+
+ showEditFaces = false;
+ previousId = asset.id;
});
const getMegapixel = (width: number, height: number): number | undefined => {
@@ -119,6 +151,8 @@
};
+ void refreshAlbums()} />
+
import { shortcuts } from '$lib/actions/shortcut';
import { zoomImageAction } from '$lib/actions/zoom-image';
+ import AdaptiveImage from '$lib/components/AdaptiveImage.svelte';
import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
import OcrBoundingBox from '$lib/components/asset-viewer/ocr-bounding-box.svelte';
- import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
import AssetViewerEvents from '$lib/components/AssetViewerEvents.svelte';
- import { assetViewerFadeDuration } from '$lib/constants';
import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { castManager } from '$lib/managers/cast-manager.svelte';
- import { imageManager } from '$lib/managers/ImageManager.svelte';
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
import { ocrManager } from '$lib/stores/ocr.svelte';
import { boundingBoxesArray } from '$lib/stores/people.store';
- import { SlideshowLook, SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
- import { getAssetUrl, targetImageSize as getTargetImageSize, handlePromiseError } from '$lib/utils';
+ import { SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
+ import { handlePromiseError } from '$lib/utils';
import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
- import { type DisplayMetrics, getDisplayMetrics } from '$lib/utils/container-utils';
+ import { type DisplayMetrics } from '$lib/utils/container-utils';
import { handleError } from '$lib/utils/handle-error';
import { getOcrBoundingBoxes } from '$lib/utils/ocr-utils';
import { getBoundingBox } from '$lib/utils/people-utils';
- import { getAltText } from '$lib/utils/thumbnail-util';
- import { toTimelineAsset } from '$lib/utils/timeline-util';
- import { AssetMediaSize, type SharedLinkResponseDto } from '@immich/sdk';
- import { LoadingSpinner, toastManager } from '@immich/ui';
+ import { type SharedLinkResponseDto } from '@immich/sdk';
+ import { toastManager } from '@immich/ui';
import { onDestroy, untrack } from 'svelte';
import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
import { t } from 'svelte-i18n';
- import { fade } from 'svelte/transition';
import type { AssetCursor } from './asset-viewer.svelte';
interface Props {
cursor: AssetCursor;
- element?: HTMLDivElement | undefined;
- haveFadeTransition?: boolean;
- sharedLink?: SharedLinkResponseDto | undefined;
- onPreviousAsset?: (() => void) | null;
- onNextAsset?: (() => void) | null;
+ element?: HTMLDivElement;
+ sharedLink?: SharedLinkResponseDto;
+ onReady?: () => void;
+ onError?: () => void;
+ onSwipe?: (event: SwipeCustomEvent) => void;
}
- let {
- cursor,
- element = $bindable(),
- haveFadeTransition = true,
- sharedLink = undefined,
- onPreviousAsset = null,
- onNextAsset = null,
- }: Props = $props();
+ let { cursor, element = $bindable(), sharedLink, onReady, onError, onSwipe }: Props = $props();
const { slideshowState, slideshowLook } = slideshowStore;
const asset = $derived(cursor.current);
- let imageLoaded: boolean = $state(false);
- let originalImageLoaded: boolean = $state(false);
- let imageError: boolean = $state(false);
let visibleImageReady: boolean = $state(false);
- let loader = $state();
-
$effect.pre(() => {
void asset.id;
untrack(() => {
assetViewerManager.resetZoomState();
+ visibleImageReady = false;
$boundingBoxesArray = [];
});
});
@@ -69,25 +53,27 @@
$boundingBoxesArray = [];
});
+ let containerWidth = $state(0);
+ let containerHeight = $state(0);
+
+ const container = $derived({
+ width: containerWidth,
+ height: containerHeight,
+ });
+
const overlayMetrics = $derived.by((): DisplayMetrics => {
if (!assetViewerManager.imgRef || !visibleImageReady) {
return { displayWidth: 0, displayHeight: 0, offsetX: 0, offsetY: 0 };
}
-
- const baseMetrics = getDisplayMetrics(assetViewerManager.imgRef);
- const zoom = assetViewerManager.zoomState;
-
return {
- displayWidth: baseMetrics.displayWidth * zoom.currentZoom,
- displayHeight: baseMetrics.displayHeight * zoom.currentZoom,
- offsetX: baseMetrics.offsetX * zoom.currentZoom + zoom.currentPositionX,
- offsetY: baseMetrics.offsetY * zoom.currentZoom + zoom.currentPositionY,
+ displayWidth: assetViewerManager.imgRef.clientWidth,
+ displayHeight: assetViewerManager.imgRef.clientHeight,
+ offsetX: 0,
+ offsetY: 0,
};
});
- let ocrBoxes = $derived(ocrManager.showOverlay ? getOcrBoundingBoxes(ocrManager.data, overlayMetrics) : []);
-
- let isOcrActive = $derived(ocrManager.showOverlay);
+ const ocrBoxes = $derived(ocrManager.showOverlay ? getOcrBoundingBoxes(ocrManager.data, overlayMetrics) : []);
const onCopy = async () => {
if (!canCopyImageToClipboard() || !assetViewerManager.imgRef) {
@@ -124,29 +110,15 @@
handlePromiseError(onCopy());
};
- const onSwipe = (event: SwipeCustomEvent) => {
- if (assetViewerManager.zoom > 1) {
- return;
- }
-
- if (ocrManager.showOverlay) {
- return;
- }
+ let currentPreviewUrl = $state();
- if (onNextAsset && event.detail.direction === 'left') {
- onNextAsset();
- }
-
- if (onPreviousAsset && event.detail.direction === 'right') {
- onPreviousAsset();
- }
+ const onUrlChange = (url: string) => {
+ currentPreviewUrl = url;
};
- const targetImageSize = $derived(getTargetImageSize(asset, originalImageLoaded || assetViewerManager.zoom > 1));
-
$effect(() => {
- if (imageLoaderUrl) {
- void cast(imageLoaderUrl);
+ if (currentPreviewUrl) {
+ void cast(currentPreviewUrl);
}
});
@@ -164,37 +136,7 @@
}
};
- const onload = () => {
- imageLoaded = true;
- originalImageLoaded = targetImageSize === AssetMediaSize.Fullsize || targetImageSize === 'original';
- };
-
- const onerror = () => {
- imageError = imageLoaded = true;
- };
-
- onDestroy(() => imageManager.cancel(asset, targetImageSize));
-
- let imageLoaderUrl = $derived(
- getAssetUrl({ asset, sharedLink, forceOriginal: originalImageLoaded || assetViewerManager.zoom > 1 }),
- );
-
- let containerWidth = $state(0);
- let containerHeight = $state(0);
-
- let lastUrl: string | undefined;
-
- $effect(() => {
- if (lastUrl && lastUrl !== imageLoaderUrl) {
- untrack(() => {
- imageLoaded = false;
- originalImageLoaded = false;
- imageError = false;
- visibleImageReady = false;
- });
- }
- lastUrl = imageLoaderUrl;
- });
+ let adaptiveImage = $state();
= {
+ basic: 0,
+ 'loading-thumbnail': 1,
+ thumbnail: 2,
+ 'loading-preview': 3,
+ preview: 4,
+ 'loading-original': 5,
+ original: 6,
+};
+
+export interface ImageLoaderState {
+ previewUrl?: string;
+ thumbnailUrl?: string;
+ originalUrl?: string;
+ quality: ImageQuality;
+ hasError: boolean;
+ thumbnailImage: ImageStatus;
+ previewImage: ImageStatus;
+ originalImage: ImageStatus;
+}
+
+enum ImageStatus {
+ Unloaded = 'Unloaded',
+ Success = 'Success',
+ Error = 'Error',
+}
+
+/**
+ * Coordinates adaptive loading of a single asset image:
+ * thumbhash → thumbnail → preview → original (on zoom)
+ *
+ */
+let nextLoaderId = 0;
+
+export class AdaptiveImageLoader {
+ readonly id = nextLoaderId++;
+
+ private internalState = $state({
+ quality: 'basic',
+ hasError: false,
+ thumbnailImage: ImageStatus.Unloaded,
+ previewImage: ImageStatus.Unloaded,
+ originalImage: ImageStatus.Unloaded,
+ });
+
+ private readonly currentZoomFn?: () => number;
+ private readonly imageLoader?: LoadImageFunction;
+ private readonly destroyFunctions: (() => void)[] = [];
+ readonly thumbnailUrl: string;
+ readonly previewUrl: string;
+ readonly originalUrl: string;
+ readonly asset: AssetResponseDto;
+ readonly sharedLink?: SharedLinkResponseDto;
+ readonly callbacks?: {
+ currentZoomFn: () => number;
+ onImageReady?: () => void;
+ onError?: () => void;
+ onUrlChange?: (url: string) => void;
+ };
+ destroyed = false;
+
+ constructor(
+ asset: AssetResponseDto,
+ sharedLink: SharedLinkResponseDto | undefined,
+ callbacks?: {
+ currentZoomFn: () => number;
+ onUrlChange?: (url: string) => void;
+ onImageReady?: () => void;
+ onError?: () => void;
+ },
+ imageLoader?: LoadImageFunction,
+ ) {
+ imageManager.trackLoad(asset);
+ this.asset = asset;
+ this.callbacks = callbacks;
+ this.imageLoader = imageLoader;
+ this.thumbnailUrl = getAssetMediaUrl({ id: asset.id, cacheKey: asset.thumbhash, size: AssetMediaSize.Thumbnail });
+ this.previewUrl = getAssetUrl({ asset, sharedLink });
+ this.originalUrl = getAssetUrl({ asset, sharedLink, forceOriginal: true });
+ this.internalState.thumbnailUrl = this.thumbnailUrl;
+ this.sharedLink = sharedLink;
+ }
+
+ start() {
+ if (!this.imageLoader) {
+ throw new Error('Start requires imageLoader to be specified');
+ }
+ this.destroyFunctions.push(
+ this.imageLoader(
+ this.thumbnailUrl,
+
+ () => this.onThumbnailLoad(),
+ () => this.onThumbnailError(),
+ () => this.onThumbnailStart(),
+ ),
+ );
+ }
+
+ get state(): ImageLoaderState {
+ return this.internalState;
+ }
+
+ private shouldUpdateQuality(newQuality: ImageQuality): boolean {
+ const currentLevel = qualityOrder[this.internalState.quality];
+ const newLevel = qualityOrder[newQuality];
+ return newLevel > currentLevel;
+ }
+
+ onThumbnailStart() {
+ if (this.destroyed) {
+ return;
+ }
+ if (!this.shouldUpdateQuality('loading-thumbnail')) {
+ return;
+ }
+ this.internalState.quality = 'loading-thumbnail';
+ }
+
+ onThumbnailLoad() {
+ if (this.destroyed) {
+ return;
+ }
+ if (!this.shouldUpdateQuality('thumbnail')) {
+ return;
+ }
+ this.internalState.quality = 'thumbnail';
+ this.internalState.thumbnailImage = ImageStatus.Success;
+ this.callbacks?.onUrlChange?.(this.thumbnailUrl);
+ this.callbacks?.onImageReady?.();
+ this.triggerMainImage();
+ }
+
+ onThumbnailError() {
+ if (this.destroyed) {
+ return;
+ }
+ this.internalState.hasError = true;
+ this.internalState.thumbnailUrl = undefined;
+ this.internalState.thumbnailImage = ImageStatus.Error;
+ this.callbacks?.onError?.();
+ this.triggerMainImage();
+ }
+
+ triggerMainImage() {
+ const wantsOriginal = (this.currentZoomFn?.() ?? 1) > 1;
+ return wantsOriginal ? this.triggerOriginal() : this.triggerPreview();
+ }
+
+ triggerPreview() {
+ if (!this.previewUrl) {
+ // no preview, try original?
+ this.triggerOriginal();
+ return false;
+ }
+ if (this.internalState.previewUrl) {
+ // Already triggered
+ return true;
+ }
+ this.internalState.hasError = false;
+ this.internalState.previewUrl = this.previewUrl;
+ if (this.imageLoader) {
+ this.destroyFunctions.push(
+ this.imageLoader(
+ this.previewUrl,
+
+ () => this.onPreviewLoad(),
+ () => this.onPreviewError(),
+ () => this.onPreviewStart(),
+ ),
+ );
+ }
+ }
+
+ onPreviewStart() {
+ if (this.destroyed) {
+ return;
+ }
+ if (!this.shouldUpdateQuality('loading-preview')) {
+ return;
+ }
+ this.internalState.quality = 'loading-preview';
+ }
+
+ onPreviewLoad() {
+ if (this.destroyed) {
+ return;
+ }
+ if (!this.internalState.previewUrl) {
+ return;
+ }
+ if (!this.shouldUpdateQuality('preview')) {
+ return;
+ }
+ this.internalState.quality = 'preview';
+ this.internalState.previewImage = ImageStatus.Success;
+ this.callbacks?.onUrlChange?.(this.previewUrl);
+ this.callbacks?.onImageReady?.();
+ }
+
+ onPreviewError() {
+ if (this.destroyed || imageManager.isCanceled(this.asset)) {
+ return;
+ }
+ this.internalState.hasError = true;
+ this.internalState.previewImage = ImageStatus.Error;
+ this.internalState.previewUrl = undefined;
+ this.callbacks?.onError?.();
+ this.triggerOriginal();
+ }
+
+ triggerOriginal() {
+ if (!this.originalUrl) {
+ return false;
+ }
+ if (this.internalState.originalUrl) {
+ // Already triggered
+ return true;
+ }
+ this.internalState.hasError = false;
+ this.internalState.originalUrl = this.originalUrl;
+
+ if (this.imageLoader) {
+ this.destroyFunctions.push(
+ this.imageLoader(
+ this.originalUrl,
+
+ () => this.onOriginalLoad(),
+ () => this.onOriginalError(),
+ () => this.onOriginalStart(),
+ ),
+ );
+ }
+ }
+
+ onOriginalStart() {
+ if (this.destroyed || imageManager.isCanceled(this.asset)) {
+ return;
+ }
+ if (!this.shouldUpdateQuality('loading-original')) {
+ return;
+ }
+ this.internalState.quality = 'loading-original';
+ }
+
+ onOriginalLoad() {
+ if (this.destroyed || imageManager.isCanceled(this.asset)) {
+ return;
+ }
+ if (!this.internalState.originalUrl) {
+ return;
+ }
+ if (!this.shouldUpdateQuality('original')) {
+ return;
+ }
+ this.internalState.quality = 'original';
+ this.internalState.originalImage = ImageStatus.Success;
+ this.callbacks?.onUrlChange?.(this.originalUrl);
+ this.callbacks?.onImageReady?.();
+ }
+
+ onOriginalError() {
+ if (this.destroyed || imageManager.isCanceled(this.asset)) {
+ return;
+ }
+ this.internalState.hasError = true;
+ this.internalState.originalImage = ImageStatus.Error;
+ this.internalState.originalUrl = undefined;
+ this.callbacks?.onError?.();
+ }
+
+ destroy(): void {
+ this.destroyed = true;
+ if (this.imageLoader) {
+ for (const destroy of this.destroyFunctions) {
+ destroy();
+ }
+ return;
+ }
+ imageManager.cancel(this.asset);
+ }
+}
diff --git a/web/src/lib/utils/people-utils.spec.ts b/web/src/lib/utils/people-utils.spec.ts
index bd7b7808ecd6e..999a3161c5055 100644
--- a/web/src/lib/utils/people-utils.spec.ts
+++ b/web/src/lib/utils/people-utils.spec.ts
@@ -3,6 +3,7 @@ import type { DisplayMetrics } from '$lib/utils/container-utils';
import { getBoundingBox } from '$lib/utils/people-utils';
const makeFace = (overrides: Partial = {}): Faces => ({
+ id: 'face-1',
imageWidth: 4000,
imageHeight: 3000,
boundingBoxX1: 1000,
@@ -21,6 +22,7 @@ describe('getBoundingBox', () => {
expect(boxes).toHaveLength(1);
expect(boxes[0]).toEqual({
+ id: 'face-1',
top: Math.round(600 * (750 / 3000)),
left: Math.round(800 * (1000 / 4000)),
width: Math.round(800 * (2000 / 4000) - 800 * (1000 / 4000)),
@@ -42,6 +44,7 @@ describe('getBoundingBox', () => {
const boxes = getBoundingBox([face], metrics);
expect(boxes[0]).toEqual({
+ id: 'face-1',
top: 0,
left: 100,
width: 600,
@@ -68,6 +71,7 @@ describe('getBoundingBox', () => {
const boxes = getBoundingBox([face], metrics);
expect(boxes[0]).toEqual({
+ id: 'face-1',
top: -100,
left: -200,
width: 800,
diff --git a/web/src/lib/utils/people-utils.ts b/web/src/lib/utils/people-utils.ts
index 3282b6c70666d..9c3077a5809e1 100644
--- a/web/src/lib/utils/people-utils.ts
+++ b/web/src/lib/utils/people-utils.ts
@@ -3,15 +3,16 @@ import { getAssetMediaUrl } from '$lib/utils';
import type { DisplayMetrics } from '$lib/utils/container-utils';
import { AssetTypeEnum, type AssetFaceResponseDto } from '@immich/sdk';
-export interface BoundingBox {
+interface FaceBoundingBox {
+ id: string;
top: number;
left: number;
width: number;
height: number;
}
-export const getBoundingBox = (faces: Faces[], metrics: DisplayMetrics): BoundingBox[] => {
- const boxes: BoundingBox[] = [];
+export const getBoundingBox = (faces: Faces[], metrics: DisplayMetrics): FaceBoundingBox[] => {
+ const boxes: FaceBoundingBox[] = [];
for (const face of faces) {
const scaleX = metrics.displayWidth / face.imageWidth;
@@ -25,6 +26,7 @@ export const getBoundingBox = (faces: Faces[], metrics: DisplayMetrics): Boundin
};
boxes.push({
+ id: face.id,
top: Math.round(coordinates.y1),
left: Math.round(coordinates.x1),
width: Math.round(coordinates.x2 - coordinates.x1),
-
-{/if}
-
+
onSwipe?.(event))}
>
- {#if !imageLoaded}
-
-
-
diff --git a/web/src/lib/stores/people.store.ts b/web/src/lib/stores/people.store.ts
index 4aeb044b1cb13..34e927cf3686f 100644
--- a/web/src/lib/stores/people.store.ts
+++ b/web/src/lib/stores/people.store.ts
@@ -1,6 +1,7 @@
import { writable } from 'svelte/store';
export interface Faces {
+ id: string;
imageHeight: number;
imageWidth: number;
boundingBoxX1: number;
diff --git a/web/src/lib/utils/adaptive-image-loader.svelte.ts b/web/src/lib/utils/adaptive-image-loader.svelte.ts
new file mode 100644
index 0000000000000..97022d05d1773
--- /dev/null
+++ b/web/src/lib/utils/adaptive-image-loader.svelte.ts
@@ -0,0 +1,298 @@
+import type { LoadImageFunction } from '$lib/actions/image-loader.svelte';
+import { imageManager } from '$lib/managers/ImageManager.svelte';
+import { getAssetMediaUrl, getAssetUrl } from '$lib/utils';
+import { AssetMediaSize, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
+
+/**
+ * Quality levels for progressive image loading
+ */
+type ImageQuality =
+ | 'basic'
+ | 'loading-thumbnail'
+ | 'thumbnail'
+ | 'loading-preview'
+ | 'preview'
+ | 'loading-original'
+ | 'original';
+
+const qualityOrder: Record
-
- {:else if !imageError}
-
- {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
- 
- {/if}
- (visibleImageReady = true)}
- alt={$getAltText(toTimelineAsset(asset))}
- class="h-full w-full {$slideshowState === SlideshowState.None
- ? 'object-contain'
- : slideshowLookCssMapping[$slideshowLook]}"
- draggable="false"
- />
-
- {#each getBoundingBox($boundingBoxesArray, overlayMetrics) as boundingbox}
+ {
+ visibleImageReady = true;
+ onReady?.();
+ }}
+ onError={() => {
+ onError?.();
+ onReady?.();
+ }}
+ bind:imgRef={assetViewerManager.imgRef}
+ bind:ref={adaptiveImage}
+ >
+ {#snippet overlays()}
+ {#each getBoundingBox($boundingBoxesArray, overlayMetrics) as boundingbox (boundingbox.id)}
{/each}
-
+ {/snippet}
+
- {#if isFaceEditMode.value}
-