feat: photo-viewer; use <img> instead of blob urls, simplify/refactor, avoid window.events (#9883)

* Photoviewer

* make copyImage/zoomToggle optional

* Add e2e test

* lint

* Accept bo0tzz suggestion

Co-authored-by: bo0tzz <git@bo0tzz.me>

* Bad merge and review comments

* unused import

---------

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

e2e/src/utils.ts

@@ -323,6 +323,40 @@ export const utils = {
     return body as AssetMediaResponseDto;
   },
 
+  replaceAsset: async (
+    accessToken: string,
+    assetId: string,
+    dto?: Partial<Omit<AssetMediaCreateDto, 'assetData'>> & { assetData?: AssetData },
+  ) => {
+    const _dto = {
+      deviceAssetId: 'test-1',
+      deviceId: 'test',
+      fileCreatedAt: new Date().toISOString(),
+      fileModifiedAt: new Date().toISOString(),
+      ...dto,
+    };
+
+    const assetData = dto?.assetData?.bytes || makeRandomImage();
+    const filename = dto?.assetData?.filename || 'example.png';
+
+    if (dto?.assetData?.bytes) {
+      console.log(`Uploading ${filename}`);
+    }
+
+    const builder = request(app)
+      .put(`/assets/${assetId}/original`)
+      .attach('assetData', assetData, filename)
+      .set('Authorization', `Bearer ${accessToken}`);
+
+    for (const [key, value] of Object.entries(_dto)) {
+      void builder.field(key, String(value));
+    }
+
+    const { body } = await builder;
+
+    return body as AssetMediaResponseDto;
+  },
+
   createImageFile: (path: string) => {
     if (!existsSync(dirname(path))) {
       mkdirSync(dirname(path), { recursive: true });

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

@@ -0,0 +1,57 @@
+import { AssetMediaResponseDto, LoginResponseDto } from '@immich/sdk';
+import { Page, expect, test } from '@playwright/test';
+import { utils } from 'src/utils';
+
+function imageLocator(page: Page) {
+  return page.getByAltText('Image taken on').locator('visible=true');
+}
+test.describe('Photo Viewer', () => {
+  let admin: LoginResponseDto;
+  let asset: AssetMediaResponseDto;
+
+  test.beforeAll(async () => {
+    utils.initSdk();
+    await utils.resetDatabase();
+    admin = await utils.adminSetup();
+    asset = await utils.createAsset(admin.accessToken);
+  });
+
+  test.beforeEach(async ({ context, page }) => {
+    // before each test, login as user
+    await utils.setAuthCookies(context, admin.accessToken);
+    await page.goto('/photos');
+    await page.waitForLoadState('networkidle');
+  });
+
+  test('initially shows a loading spinner', async ({ page }) => {
+    await page.route(`/api/assets/${asset.id}/thumbnail**`, async (route) => {
+      // slow down the request for thumbnail, so spiner has chance to show up
+      await new Promise((f) => setTimeout(f, 2000));
+      await route.continue();
+    });
+    await page.goto(`/photos/${asset.id}`);
+    await page.waitForLoadState('load');
+    // this is the spinner
+    await page.waitForSelector('svg[role=status]');
+    await expect(page.getByRole('status')).toBeVisible();
+  });
+
+  test('loads high resolution photo when zoomed', async ({ page }) => {
+    await page.goto(`/photos/${asset.id}`);
+    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('thumbnail');
+    const box = await imageLocator(page).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.poll(async () => await imageLocator(page).getAttribute('src')).toContain('original');
+  });
+
+  test('reloads photo when checksum changes', async ({ page }) => {
+    await page.goto(`/photos/${asset.id}`);
+    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('thumbnail');
+    const initialSrc = await imageLocator(page).getAttribute('src');
+    await utils.replaceAsset(admin.accessToken, asset.id);
+    await expect.poll(async () => await imageLocator(page).getAttribute('src')).not.toBe(initialSrc);
+  });
+});