From c9bc84c6a785df0638f5127b4e5bc569d19aa7c1 Mon Sep 17 00:00:00 2001
From: midzelis <min123@gmail.com>
Date: Thu, 15 Jan 2026 20:34:21 +0000
Subject: [PATCH] refactor: rename image cancel method

---
 .../asset-viewer/photo-viewer.svelte          |  2 +-
 .../assets/thumbnail/image-thumbnail.svelte   |  4 +-
 web/src/lib/managers/ImageManager.svelte.ts   |  6 --
 web/src/lib/managers/image-manager.spec.ts    | 99 +++++++++++++++++++
 4 files changed, 102 insertions(+), 9 deletions(-)
 create mode 100644 web/src/lib/managers/image-manager.spec.ts

diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index 61181acbc8..95f3d7a73c 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -159,7 +159,7 @@
     imageError = imageLoaded = true;
   };
 
-  onDestroy(() => imageManager.cancelPreloadUrl(imageLoaderUrl));
+  onDestroy(() => imageManager.cancel(asset, targetImageSize));
 
   let imageLoaderUrl = $derived(
     getAssetUrl({ asset, sharedLink, forceOriginal: originalImageLoaded || assetViewerManager.zoom > 1 }),
diff --git a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
index a1dd22f44f..2b55ea57b2 100644
--- a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
-  import { imageManager } from '$lib/managers/ImageManager.svelte';
+  import { cancelImageUrl } from '$lib/utils/sw-messaging';
   import { Icon } from '@immich/ui';
   import { mdiEyeOffOutline } from '@mdi/js';
   import type { ActionReturn } from 'svelte/action';
@@ -60,7 +60,7 @@
       onComplete?.(false);
     }
     return {
-      destroy: () => imageManager.cancelPreloadUrl(url),
+      destroy: () => cancelImageUrl(url),
     };
   }
 
diff --git a/web/src/lib/managers/ImageManager.svelte.ts b/web/src/lib/managers/ImageManager.svelte.ts
index e75b5bc971..004974d677 100644
--- a/web/src/lib/managers/ImageManager.svelte.ts
+++ b/web/src/lib/managers/ImageManager.svelte.ts
@@ -32,12 +32,6 @@ class ImageManager {
       }
     }
   }
-
-  cancelPreloadUrl(url: string | undefined) {
-    if (url) {
-      cancelImageUrl(url);
-    }
-  }
 }
 
 export const imageManager = new ImageManager();
diff --git a/web/src/lib/managers/image-manager.spec.ts b/web/src/lib/managers/image-manager.spec.ts
new file mode 100644
index 0000000000..6147b3ac6f
--- /dev/null
+++ b/web/src/lib/managers/image-manager.spec.ts
@@ -0,0 +1,99 @@
+import { imageManager } from '$lib/managers/ImageManager.svelte';
+import { getAssetMediaUrl } from '$lib/utils';
+import { cancelImageUrl } from '$lib/utils/sw-messaging';
+import { AssetMediaSize } from '@immich/sdk';
+import { assetFactory } from '@test-data/factories/asset-factory';
+
+vi.mock('$lib/utils/sw-messaging', () => ({
+  cancelImageUrl: vi.fn(),
+}));
+
+vi.mock('$lib/utils', () => ({
+  getAssetMediaUrl: vi.fn(),
+}));
+
+describe('ImageManager', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('preload', () => {
+    it('creates an Image with the correct URL', () => {
+      vi.mocked(getAssetMediaUrl).mockReturnValue('/api/assets/123/media');
+      const asset = assetFactory.build();
+
+      imageManager.preload(asset);
+
+      expect(getAssetMediaUrl).toHaveBeenCalledWith({
+        id: asset.id,
+        size: AssetMediaSize.Preview,
+        cacheKey: asset.thumbhash,
+      });
+    });
+
+    it('does nothing for undefined asset', () => {
+      imageManager.preload(undefined);
+      expect(getAssetMediaUrl).not.toHaveBeenCalled();
+    });
+
+    it('does nothing when getAssetMediaUrl returns falsy', () => {
+      vi.mocked(getAssetMediaUrl).mockReturnValue('');
+      const asset = assetFactory.build();
+
+      imageManager.preload(asset);
+
+      expect(getAssetMediaUrl).toHaveBeenCalled();
+    });
+
+    it('uses the specified size', () => {
+      vi.mocked(getAssetMediaUrl).mockReturnValue('/api/assets/123/media');
+      const asset = assetFactory.build();
+
+      imageManager.preload(asset, AssetMediaSize.Thumbnail);
+
+      expect(getAssetMediaUrl).toHaveBeenCalledWith({
+        id: asset.id,
+        size: AssetMediaSize.Thumbnail,
+        cacheKey: asset.thumbhash,
+      });
+    });
+  });
+
+  describe('cancel', () => {
+    it('calls cancelImageUrl with the correct URL', () => {
+      vi.mocked(getAssetMediaUrl).mockReturnValue('/api/assets/123/media');
+      const asset = assetFactory.build();
+
+      imageManager.cancel(asset, AssetMediaSize.Preview);
+
+      expect(cancelImageUrl).toHaveBeenCalledWith('/api/assets/123/media');
+    });
+
+    it('does nothing for undefined asset', () => {
+      imageManager.cancel(undefined);
+      expect(getAssetMediaUrl).not.toHaveBeenCalled();
+      expect(cancelImageUrl).not.toHaveBeenCalled();
+    });
+
+    it('cancels all sizes when size is "all"', () => {
+      vi.mocked(getAssetMediaUrl).mockImplementation(({ size }) => `/api/assets/123/${size}`);
+      const asset = assetFactory.build();
+
+      imageManager.cancel(asset, 'all');
+
+      expect(getAssetMediaUrl).toHaveBeenCalledTimes(Object.values(AssetMediaSize).length);
+      for (const size of Object.values(AssetMediaSize)) {
+        expect(cancelImageUrl).toHaveBeenCalledWith(`/api/assets/123/${size}`);
+      }
+    });
+
+    it('does not call cancelImageUrl when URL is falsy', () => {
+      vi.mocked(getAssetMediaUrl).mockReturnValue('');
+      const asset = assetFactory.build();
+
+      imageManager.cancel(asset, AssetMediaSize.Preview);
+
+      expect(cancelImageUrl).not.toHaveBeenCalled();
+    });
+  });
+});