feat: improve asset-viewer next/prev perf and standardize preloading behavior (#24422)

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/utils.spec.ts

@@ -1,6 +1,141 @@
-import { getReleaseType } from '$lib/utils';
+import { getAssetUrl, getReleaseType } from '$lib/utils';
+import { AssetTypeEnum } from '@immich/sdk';
+import { assetFactory } from '@test-data/factories/asset-factory';
+import { sharedLinkFactory } from '@test-data/factories/shared-link-factory';
 
 describe('utils', () => {
+  describe(getAssetUrl.name, () => {
+    it('should return thumbnail URL for static images', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.jpg',
+        originalMimeType: 'image/jpeg',
+        type: AssetTypeEnum.Image,
+      });
+
+      const url = getAssetUrl({ asset });
+
+      // Should return a thumbnail URL (contains /thumbnail)
+      expect(url).toContain('/thumbnail');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return thumbnail URL for static gifs', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+      });
+
+      const url = getAssetUrl({ asset });
+
+      expect(url).toContain('/thumbnail');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return thumbnail URL for static webp images', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.webp',
+        originalMimeType: 'image/webp',
+        type: AssetTypeEnum.Image,
+      });
+
+      const url = getAssetUrl({ asset });
+
+      expect(url).toContain('/thumbnail');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return original URL for animated gifs', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+        duration: '2.0',
+      });
+
+      const url = getAssetUrl({ asset });
+
+      // Should return original URL (contains /original)
+      expect(url).toContain('/original');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return original URL for animated webp images', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.webp',
+        originalMimeType: 'image/webp',
+        type: AssetTypeEnum.Image,
+        duration: '2.0',
+      });
+
+      const url = getAssetUrl({ asset });
+
+      expect(url).toContain('/original');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return thumbnail URL for static images in shared link even with download and showMetadata permissions', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+      });
+      const sharedLink = sharedLinkFactory.build({ allowDownload: true, showMetadata: true, assets: [asset] });
+
+      const url = getAssetUrl({ asset, sharedLink });
+
+      expect(url).toContain('/thumbnail');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return original URL for animated images in shared link with download and showMetadata permissions', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+        duration: '2.0',
+      });
+      const sharedLink = sharedLinkFactory.build({ allowDownload: true, showMetadata: true, assets: [asset] });
+
+      const url = getAssetUrl({ asset, sharedLink });
+
+      expect(url).toContain('/original');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return thumbnail URL (not original) for animated images when shared link download permission is false', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+        duration: '2.0',
+      });
+      const sharedLink = sharedLinkFactory.build({ allowDownload: false, assets: [asset] });
+
+      const url = getAssetUrl({ asset, sharedLink });
+
+      expect(url).toContain('/thumbnail');
+      expect(url).not.toContain('/original');
+      expect(url).toContain(asset.id);
+    });
+
+    it('should return thumbnail URL (not original) for animated images when shared link showMetadata permission is false', () => {
+      const asset = assetFactory.build({
+        originalPath: 'image.gif',
+        originalMimeType: 'image/gif',
+        type: AssetTypeEnum.Image,
+        duration: '2.0',
+      });
+      const sharedLink = sharedLinkFactory.build({ showMetadata: false, assets: [asset] });
+
+      const url = getAssetUrl({ asset, sharedLink });
+
+      expect(url).toContain('/thumbnail');
+      expect(url).not.toContain('/original');
+      expect(url).toContain(asset.id);
+    });
+  });
+
   describe(getReleaseType.name, () => {
     it('should return "major" for major version changes', () => {
       expect(getReleaseType({ major: 1, minor: 0, patch: 0 }, { major: 2, minor: 0, patch: 0 })).toBe('major');