mirror of https://github.com/immich-app/immich.git
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>pull/10026/head
Min Idzelis
GitHub
parent
def5f59242
commit
4b49d3a85d
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import { photoZoomState, zoomed } from '$lib/stores/zoom-image.store';
|
||||||
|
import { useZoomImageWheel } from '@zoom-image/svelte';
|
||||||
|
import { get } from 'svelte/store';
|
||||||
|
|
||||||
|
export { zoomed } from '$lib/stores/zoom-image.store';
|
||||||
|
|
||||||
|
export const zoomImageAction = (node: HTMLElement) => {
|
||||||
|
const { createZoomImage, zoomImageState, setZoomImageState } = useZoomImageWheel();
|
||||||
|
|
||||||
|
createZoomImage(node, {
|
||||||
|
maxZoom: 10,
|
||||||
|
wheelZoomRatio: 0.2,
|
||||||
|
});
|
||||||
|
|
||||||
|
const state = get(photoZoomState);
|
||||||
|
if (state) {
|
||||||
|
setZoomImageState(state);
|
||||||
|
}
|
||||||
|
|
||||||
|
const unsubscribes = [
|
||||||
|
zoomed.subscribe((state) => setZoomImageState({ currentZoom: state ? 2 : 1 })),
|
||||||
|
zoomImageState.subscribe((state) => photoZoomState.set(state)),
|
||||||
|
];
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
for (const unsubscribe of unsubscribes) {
|
||||||
|
unsubscribe();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -1,83 +0,0 @@
|
|||||||
import * as utils from '$lib/utils';
|
|
||||||
import type { AssetResponseDto } from '@immich/sdk';
|
|
||||||
import { assetFactory } from '@test-data/factories/asset-factory';
|
|
||||||
import '@testing-library/jest-dom';
|
|
||||||
import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
|
|
||||||
import type { Mock, MockInstance } from 'vitest';
|
|
||||||
import PhotoViewer from './photo-viewer.svelte';
|
|
||||||
|
|
||||||
vi.mock('$lib/utils', async (originalImport) => {
|
|
||||||
const meta = await originalImport<typeof import('$lib/utils')>();
|
|
||||||
return {
|
|
||||||
...meta,
|
|
||||||
downloadRequest: vi.fn(),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('PhotoViewer component', () => {
|
|
||||||
let downloadRequestMock: MockInstance;
|
|
||||||
let createObjectURLMock: Mock<[obj: Blob], string>;
|
|
||||||
let asset: AssetResponseDto;
|
|
||||||
|
|
||||||
beforeAll(() => {
|
|
||||||
downloadRequestMock = vi.spyOn(utils, 'downloadRequest').mockResolvedValue({
|
|
||||||
data: new Blob(),
|
|
||||||
status: 200,
|
|
||||||
});
|
|
||||||
createObjectURLMock = vi.fn();
|
|
||||||
window.URL.createObjectURL = createObjectURLMock;
|
|
||||||
asset = assetFactory.build({ originalPath: 'image.png' });
|
|
||||||
});
|
|
||||||
|
|
||||||
afterAll(() => {
|
|
||||||
vi.resetAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('initially shows a loading spinner', () => {
|
|
||||||
render(PhotoViewer, { asset });
|
|
||||||
expect(screen.getByRole('status')).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('loads and shows a photo', async () => {
|
|
||||||
createObjectURLMock.mockReturnValueOnce('url-one');
|
|
||||||
render(PhotoViewer, { asset });
|
|
||||||
|
|
||||||
expect(downloadRequestMock).toBeCalledWith(
|
|
||||||
expect.objectContaining({
|
|
||||||
url: `/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.checksum}`,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
await waitFor(() => expect(screen.getByRole('img')).toBeInTheDocument());
|
|
||||||
expect(screen.getByRole('img')).toHaveAttribute('src', 'url-one');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('loads high resolution photo when zoomed', async () => {
|
|
||||||
createObjectURLMock.mockReturnValueOnce('url-one');
|
|
||||||
render(PhotoViewer, { asset });
|
|
||||||
createObjectURLMock.mockReturnValueOnce('url-two');
|
|
||||||
|
|
||||||
await waitFor(() => expect(screen.getByRole('img')).toBeInTheDocument());
|
|
||||||
await fireEvent(window, new CustomEvent('zoomImage'));
|
|
||||||
await waitFor(() => expect(screen.getByRole('img')).toHaveAttribute('src', 'url-two'));
|
|
||||||
expect(downloadRequestMock).toBeCalledWith(
|
|
||||||
expect.objectContaining({
|
|
||||||
url: `/api/assets/${asset.id}/original?c=${asset.checksum}`,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('reloads photo when checksum changes', async () => {
|
|
||||||
const { component } = render(PhotoViewer, { asset });
|
|
||||||
createObjectURLMock.mockReturnValueOnce('url-two');
|
|
||||||
|
|
||||||
await waitFor(() => expect(screen.getByRole('img')).toBeInTheDocument());
|
|
||||||
component.$set({ asset: { ...asset, checksum: 'new-checksum' } });
|
|
||||||
|
|
||||||
await waitFor(() => expect(screen.getByRole('img')).toHaveAttribute('src', 'url-two'));
|
|
||||||
expect(downloadRequestMock).toBeCalledWith(
|
|
||||||
expect.objectContaining({
|
|
||||||
url: `/api/assets/${asset.id}/thumbnail?size=preview&c=new-checksum`,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue