feat: swipe feedback

refactor: replace onPreviousAsset/onNextAsset with onSwipe

e2e/src/mock-network/timeline-network.ts

@@ -98,13 +98,13 @@ export const setupTimelineMockApiRoutes = async (
   });
 
   await context.route('**/api/assets/*/thumbnail?size=*', async (route, request) => {
-    const pattern = /\/api\/assets\/(?<assetId>[^/]+)\/thumbnail\?size=(?<size>preview|thumbnail)/;
+    const pattern = /\/api\/assets\/(?<assetId>[^/]+)\/thumbnail\?size=(?<size>preview|thumbnail|fullsize)/;
     const match = request.url().match(pattern);
     if (!match?.groups) {
       throw new Error(`Invalid URL for thumbnail endpoint: ${request.url()}`);
     }
 
-    if (match.groups.size === 'preview') {
+    if (match.groups.size === 'preview' || match.groups.size === 'fullsize') {
       if (!route.request().serviceWorker()) {
         return route.continue();
       }

e2e/src/web/specs/photo-viewer.e2e-spec.ts

@@ -23,32 +23,44 @@ test.describe('Photo Viewer', () => {
 
   test('loads original photo when zoomed', async ({ page }) => {
     await page.goto(`/photos/${asset.id}`);
-    await expect(page.getByTestId('thumbnail')).toHaveAttribute('src', /thumbnail/);
-    const box = await page.getByTestId('thumbnail').boundingBox();
+
+    const thumbnail = page.getByTestId('thumbnail').filter({ visible: true });
+    const original = page.getByTestId('original').filter({ visible: true });
+
+    await expect(thumbnail).toHaveAttribute('src', /thumbnail/);
+    const box = await thumbnail.boundingBox();
     expect(box).toBeTruthy();
     const { x, y, width, height } = box!;
     await page.mouse.move(x + width / 2, y + height / 2);
     await page.mouse.wheel(0, -1);
-    await expect(page.getByTestId('original')).toBeInViewport();
-    await expect(page.getByTestId('original')).toHaveAttribute('src', /original/);
+    await expect(original).toBeInViewport();
+    await expect(original).toHaveAttribute('src', /original/);
   });
 
   test('loads fullsize image when zoomed and original is web-incompatible', async ({ page }) => {
     await page.goto(`/photos/${rawAsset.id}`);
-    await expect(page.getByTestId('thumbnail')).toHaveAttribute('src', /thumbnail/);
-    const box = await page.getByTestId('thumbnail').boundingBox();
+
+    const thumbnail = page.getByTestId('thumbnail').filter({ visible: true });
+    const original = page.getByTestId('original').filter({ visible: true });
+
+    await expect(thumbnail).toHaveAttribute('src', /thumbnail/);
+    const box = await thumbnail.boundingBox();
     expect(box).toBeTruthy();
     const { x, y, width, height } = box!;
     await page.mouse.move(x + width / 2, y + height / 2);
     await page.mouse.wheel(0, -1);
-    await expect(page.getByTestId('original')).toHaveAttribute('src', /fullsize/);
+    await expect(original).toHaveAttribute('src', /fullsize/);
   });
 
   test('reloads photo when checksum changes', async ({ page }) => {
     await page.goto(`/photos/${asset.id}`);
-    await expect(page.getByTestId('thumbnail')).toHaveAttribute('src', /thumbnail/);
-    const initialSrc = await page.getByTestId('thumbnail').getAttribute('src');
+
+    const thumbnail = page.getByTestId('thumbnail').filter({ visible: true });
+    const preview = page.getByTestId('preview').filter({ visible: true });
+
+    await expect(thumbnail).toHaveAttribute('src', /thumbnail/);
+    const initialSrc = await thumbnail.getAttribute('src');
     await utils.replaceAsset(admin.accessToken, asset.id);
-    await expect(page.getByTestId('preview')).not.toHaveAttribute('src', initialSrc!);
+    await expect(preview).not.toHaveAttribute('src', initialSrc!);
   });
 });

e2e/src/web/specs/search/search-gallery.ui-spec.ts

@@ -6,6 +6,7 @@ import {
   generateTimelineData,
   TimelineAssetConfig,
   TimelineData,
+  toAssetResponseDto,
 } from 'src/generators/timeline';
 import { setupBaseMockApiRoutes } from 'src/mock-network/base-network';
 import { setupTimelineMockApiRoutes, TimelineTestContext } from 'src/mock-network/timeline-network';
@@ -53,7 +54,7 @@ test.describe('search gallery-viewer', () => {
             assets: {
               total: searchAssets.length,
               count: searchAssets.length,
-              items: searchAssets,
+              items: searchAssets.map((asset) => toAssetResponseDto(asset)),
               facets: [],
               nextPage: null,
             },

e2e/src/web/specs/timeline/utils.ts

@@ -163,13 +163,11 @@ export const assetViewerUtils = {
     return page.locator('#immich-asset-viewer');
   },
   async waitForViewerLoad(page: Page, asset: TimelineAssetConfig) {
+    const previewUrl = `/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true`;
     await page
-      .locator(
-        `img[draggable="false"][src="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`,
-      )
-      .or(
-        page.locator(`video[poster="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`),
-      )
+      .getByTestId('preview')
+      .and(page.locator(`[src="${previewUrl}"]`))
+      .or(page.locator(`video[poster="${previewUrl}"]`))
       .waitFor();
   },
   async expectActiveAssetToBe(page: Page, assetId: string) {