github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: adaptive progressive image loading for photo viewer

Browse Source 
fully rework/condense/simplify AdaptiveImage.svelte
This commit is contained in:
midzelis
2026-01-15 20:34:21 +00:00
parent 6e9a425592
commit e21c99c420
25 changed files with 1086 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/src/ui/mock-network/timeline-network.ts
+2 -2
View File
@@ -99,13 +99,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/ui/specs/asset-viewer/broken-asset.e2e-spec.ts
+1 -1
View File
@@ -73,7 +73,7 @@ test.describe('broken-asset responsiveness', () => {
await page.goto(`/photos/${fixture.primaryAsset.id}`);
await page.waitForSelector('#immich-asset-viewer');
const viewerBrokenAsset = page.locator('#immich-asset-viewer #broken-asset [data-broken-asset]');
const viewerBrokenAsset = page.locator('[data-viewer-content] [data-broken-asset]');
await expect(viewerBrokenAsset).toBeVisible();
await expect(viewerBrokenAsset.locator('svg')).toBeVisible();
e2e/src/ui/specs/search/search-gallery.e2e-spec.ts
+2 -1
View File
@@ -6,6 +6,7 @@ import {
generateTimelineData,
TimelineAssetConfig,
TimelineData,
toAssetResponseDto,
} from 'src/ui/generators/timeline';
import { setupBaseMockApiRoutes } from 'src/ui/mock-network/base-network';
import { setupTimelineMockApiRoutes, TimelineTestContext } from 'src/ui/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/ui/specs/timeline/utils.ts
+7 -8
View File
@@ -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) {
@@ -215,8 +213,9 @@ export const pageUtils = {
await page.getByText('Confirm').click();
},
async selectDay(page: Page, day: string) {
await page.getByTitle(day).hover();
await page.locator('[data-group] .w-8').click();
const section = page.getByTitle(day).locator('xpath=ancestor::section[@data-group]');
await section.hover();
await section.locator('.w-8').click();
},
async pauseTestDebug() {
console.log('NOTE: pausing test indefinately for debug');