fix: load original image for gifs (#10252)

web/src/lib/components/asset-viewer/photo-viewer.spec.ts

@@ -0,0 +1,49 @@
+import PhotoViewer from '$lib/components/asset-viewer/photo-viewer.svelte';
+import * as utils from '$lib/utils';
+import { AssetMediaSize } from '@immich/sdk';
+import { assetFactory } from '@test-data/factories/asset-factory';
+import { render } from '@testing-library/svelte';
+import type { MockInstance } from 'vitest';
+
+vi.mock('$lib/utils', async (originalImport) => {
+  const meta = await originalImport<typeof import('$lib/utils')>();
+  return {
+    ...meta,
+    getAssetOriginalUrl: vi.fn(),
+    getAssetThumbnailUrl: vi.fn(),
+  };
+});
+
+describe('PhotoViewer component', () => {
+  let getAssetOriginalUrlSpy: MockInstance;
+  let getAssetThumbnailUrlSpy: MockInstance;
+
+  beforeAll(() => {
+    getAssetOriginalUrlSpy = vi.spyOn(utils, 'getAssetOriginalUrl');
+    getAssetThumbnailUrlSpy = vi.spyOn(utils, 'getAssetThumbnailUrl');
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('loads the thumbnail', () => {
+    const asset = assetFactory.build({ originalPath: 'image.jpg', originalMimeType: 'image/jpeg' });
+    render(PhotoViewer, { asset });
+
+    expect(getAssetThumbnailUrlSpy).toBeCalledWith({
+      id: asset.id,
+      size: AssetMediaSize.Preview,
+      checksum: asset.checksum,
+    });
+    expect(getAssetOriginalUrlSpy).not.toBeCalled();
+  });
+
+  it('loads the original image for gifs', () => {
+    const asset = assetFactory.build({ originalPath: 'image.gif', originalMimeType: 'image/gif' });
+    render(PhotoViewer, { asset });
+
+    expect(getAssetThumbnailUrlSpy).not.toBeCalled();
+    expect(getAssetOriginalUrlSpy).toBeCalledWith({ id: asset.id, checksum: asset.checksum });
+  });
+});

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -38,7 +38,8 @@
   $: useOriginalByDefault = isWebCompatible && $alwaysLoadOriginalFile;
   $: useOriginalImage = useOriginalByDefault || forceUseOriginal;
   // when true, will force loading of the original image
-  $: forceUseOriginal = forceUseOriginal || ($photoZoomState.currentZoom > 1 && isWebCompatible);
+  $: forceUseOriginal =
+    forceUseOriginal || asset.originalMimeType === 'image/gif' || ($photoZoomState.currentZoom > 1 && isWebCompatible);
 
   $: preload(useOriginalImage, preloadAssets);
   $: imageLoaderUrl = getAssetUrl(asset.id, useOriginalImage, asset.checksum);

web/src/lib/utils/asset-utils.ts

@@ -257,20 +257,20 @@ export function getAssetRatio(asset: AssetResponseDto) {
 }
 
 // list of supported image extensions from https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types excluding svg
-const supportedImageExtensions = new Set(['apng', 'avif', 'gif', 'jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp', 'png', 'webp']);
+const supportedImageMimeTypes = new Set([
+  'image/apng',
+  'image/avif',
+  'image/gif',
+  'image/jpeg',
+  'image/png',
+  'image/webp',
+]);
 
 /**
  * Returns true if the asset is an image supported by web browsers, false otherwise
  */
 export function isWebCompatibleImage(asset: AssetResponseDto): boolean {
-  // originalPath is undefined when public shared link has metadata option turned off
-  if (!asset.originalPath) {
-    return false;
-  }
-
-  const imgExtension = getFilenameExtension(asset.originalPath);
-
-  return supportedImageExtensions.has(imgExtension);
+  return supportedImageMimeTypes.has(asset.originalMimeType);
 }
 
 export const getAssetType = (type: AssetTypeEnum) => {

web/src/test-data/factories/asset-factory.ts

@@ -11,6 +11,7 @@ export const assetFactory = Sync.makeFactory<AssetResponseDto>({
   type: Sync.each(() => faker.helpers.enumValue(AssetTypeEnum)),
   originalPath: Sync.each(() => faker.system.filePath()),
   originalFileName: Sync.each(() => faker.system.fileName()),
+  originalMimeType: Sync.each(() => faker.system.mimeType()),
   resized: true,
   thumbhash: Sync.each(() => faker.string.alphanumeric(28)),
   fileCreatedAt: Sync.each(() => faker.date.past().toISOString()),