remote url image provider

remove cached_network_image

formatting

linting

remove thumb provider

formatting

e2e/src/generators/memory.ts

@@ -0,0 +1,2 @@
+export { generateMemoriesFromTimeline, generateMemory } from './memory/model-objects';
+export type { MemoryConfig, MemoryYearConfig } from './memory/model-objects';

e2e/src/generators/memory/model-objects.ts

@@ -0,0 +1,84 @@
+import { faker } from '@faker-js/faker';
+import { MemoryType, type MemoryResponseDto, type OnThisDayDto } from '@immich/sdk';
+import { DateTime } from 'luxon';
+import { toAssetResponseDto } from 'src/generators/timeline/rest-response';
+import type { MockTimelineAsset } from 'src/generators/timeline/timeline-config';
+import { SeededRandom, selectRandomMultiple } from 'src/generators/timeline/utils';
+
+export type MemoryConfig = {
+  id?: string;
+  ownerId: string;
+  year: number;
+  memoryAt: string;
+  isSaved?: boolean;
+};
+
+export type MemoryYearConfig = {
+  year: number;
+  assetCount: number;
+};
+
+export function generateMemory(config: MemoryConfig, assets: MockTimelineAsset[]): MemoryResponseDto {
+  const now = new Date().toISOString();
+  const memoryId = config.id ?? faker.string.uuid();
+
+  return {
+    id: memoryId,
+    assets: assets.map((asset) => toAssetResponseDto(asset)),
+    data: { year: config.year } as OnThisDayDto,
+    memoryAt: config.memoryAt,
+    createdAt: now,
+    updatedAt: now,
+    isSaved: config.isSaved ?? false,
+    ownerId: config.ownerId,
+    type: MemoryType.OnThisDay,
+  };
+}
+
+export function generateMemoriesFromTimeline(
+  timelineAssets: MockTimelineAsset[],
+  ownerId: string,
+  memoryConfigs: MemoryYearConfig[],
+  seed: number = 42,
+): MemoryResponseDto[] {
+  const rng = new SeededRandom(seed);
+  const memories: MemoryResponseDto[] = [];
+  const usedAssetIds = new Set<string>();
+
+  for (const config of memoryConfigs) {
+    const yearAssets = timelineAssets.filter((asset) => {
+      const assetYear = DateTime.fromISO(asset.fileCreatedAt).year;
+      return assetYear === config.year && !usedAssetIds.has(asset.id);
+    });
+
+    if (yearAssets.length === 0) {
+      continue;
+    }
+
+    const countToSelect = Math.min(config.assetCount, yearAssets.length);
+    const selectedAssets = selectRandomMultiple(yearAssets, countToSelect, rng);
+
+    for (const asset of selectedAssets) {
+      usedAssetIds.add(asset.id);
+    }
+
+    selectedAssets.sort(
+      (a, b) => DateTime.fromISO(b.fileCreatedAt).diff(DateTime.fromISO(a.fileCreatedAt)).milliseconds,
+    );
+
+    const memoryAt = DateTime.now().set({ year: config.year }).toISO()!;
+
+    memories.push(
+      generateMemory(
+        {
+          ownerId,
+          year: config.year,
+          memoryAt,
+        },
+        selectedAssets,
+      ),
+    );
+  }
+
+  return memories;
+}

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

@@ -0,0 +1,65 @@
+import type { MemoryResponseDto } from '@immich/sdk';
+import { BrowserContext } from '@playwright/test';
+
+export type MemoryChanges = {
+  memoryDeletions: string[];
+  assetRemovals: Map<string, string[]>;
+};
+
+export const setupMemoryMockApiRoutes = async (
+  context: BrowserContext,
+  memories: MemoryResponseDto[],
+  changes: MemoryChanges,
+) => {
+  await context.route('**/api/memories*', async (route, request) => {
+    const url = new URL(request.url());
+    const pathname = url.pathname;
+
+    if (pathname === '/api/memories' && request.method() === 'GET') {
+      const activeMemories = memories
+        .filter((memory) => !changes.memoryDeletions.includes(memory.id))
+        .map((memory) => {
+          const removedAssets = changes.assetRemovals.get(memory.id) ?? [];
+          return {
+            ...memory,
+            assets: memory.assets.filter((asset) => !removedAssets.includes(asset.id)),
+          };
+        })
+        .filter((memory) => memory.assets.length > 0);
+
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        json: activeMemories,
+      });
+    }
+
+    const memoryMatch = pathname.match(/\/api\/memories\/([^/]+)$/);
+    if (memoryMatch && request.method() === 'GET') {
+      const memoryId = memoryMatch[1];
+      const memory = memories.find((m) => m.id === memoryId);
+
+      if (!memory || changes.memoryDeletions.includes(memoryId)) {
+        return route.fulfill({ status: 404 });
+      }
+
+      const removedAssets = changes.assetRemovals.get(memoryId) ?? [];
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        json: {
+          ...memory,
+          assets: memory.assets.filter((asset) => !removedAssets.includes(asset.id)),
+        },
+      });
+    }
+
+    if (/\/api\/memories\/([^/]+)$/.test(pathname) && request.method() === 'DELETE') {
+      const memoryId = pathname.split('/').pop()!;
+      changes.memoryDeletions.push(memoryId);
+      return route.fulfill({ status: 204 });
+    }
+
+    await route.fallback();
+  });
+};

e2e/src/web/specs/memory/memory-viewer.ui-spec.ts

@@ -0,0 +1,289 @@
+import { faker } from '@faker-js/faker';
+import type { MemoryResponseDto } from '@immich/sdk';
+import { test } from '@playwright/test';
+import { generateMemoriesFromTimeline } from 'src/generators/memory';
+import {
+  Changes,
+  createDefaultTimelineConfig,
+  generateTimelineData,
+  TimelineAssetConfig,
+  TimelineData,
+} from 'src/generators/timeline';
+import { setupBaseMockApiRoutes } from 'src/mock-network/base-network';
+import { MemoryChanges, setupMemoryMockApiRoutes } from 'src/mock-network/memory-network';
+import { setupTimelineMockApiRoutes, TimelineTestContext } from 'src/mock-network/timeline-network';
+import { memoryAssetViewerUtils, memoryGalleryUtils, memoryViewerUtils } from 'src/web/specs/memory/utils';
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('Memory Viewer - Gallery Asset Viewer Navigation', () => {
+  let adminUserId: string;
+  let timelineRestData: TimelineData;
+  let memories: MemoryResponseDto[];
+  const assets: TimelineAssetConfig[] = [];
+  const testContext = new TimelineTestContext();
+  const changes: Changes = {
+    albumAdditions: [],
+    assetDeletions: [],
+    assetArchivals: [],
+    assetFavorites: [],
+  };
+  const memoryChanges: MemoryChanges = {
+    memoryDeletions: [],
+    assetRemovals: new Map(),
+  };
+
+  test.beforeAll(async () => {
+    adminUserId = faker.string.uuid();
+    testContext.adminId = adminUserId;
+
+    timelineRestData = generateTimelineData({
+      ...createDefaultTimelineConfig(),
+      ownerId: adminUserId,
+    });
+
+    for (const timeBucket of timelineRestData.buckets.values()) {
+      assets.push(...timeBucket);
+    }
+
+    memories = generateMemoriesFromTimeline(
+      assets,
+      adminUserId,
+      [
+        { year: 2024, assetCount: 3 },
+        { year: 2023, assetCount: 2 },
+        { year: 2022, assetCount: 4 },
+      ],
+      42,
+    );
+  });
+
+  test.beforeEach(async ({ context }) => {
+    await setupBaseMockApiRoutes(context, adminUserId);
+    await setupTimelineMockApiRoutes(context, timelineRestData, changes, testContext);
+    await setupMemoryMockApiRoutes(context, memories, memoryChanges);
+  });
+
+  test.afterEach(() => {
+    testContext.slowBucket = false;
+    changes.albumAdditions = [];
+    changes.assetDeletions = [];
+    changes.assetArchivals = [];
+    changes.assetFavorites = [];
+    memoryChanges.memoryDeletions = [];
+    memoryChanges.assetRemovals.clear();
+  });
+
+  test.describe('Asset viewer navigation from gallery', () => {
+    test('shows both prev/next buttons for middle asset within a memory', async ({ page }) => {
+      const firstMemory = memories[0];
+      const middleAsset = firstMemory.assets[1];
+
+      await memoryViewerUtils.openMemoryPageWithAsset(page, middleAsset.id);
+      await memoryGalleryUtils.clickThumbnail(page, middleAsset.id);
+
+      await memoryAssetViewerUtils.waitForViewerOpen(page);
+      await memoryAssetViewerUtils.waitForAssetLoad(page, middleAsset);
+
+      await memoryAssetViewerUtils.expectPreviousButtonVisible(page);
+      await memoryAssetViewerUtils.expectNextButtonVisible(page);
+    });
+
+    test('shows next button when at last asset of first memory (next memory exists)', async ({ page }) => {
+      const firstMemory = memories[0];
+      const lastAssetOfFirstMemory = firstMemory.assets.at(-1)!;
+
+      await memoryViewerUtils.openMemoryPageWithAsset(page, lastAssetOfFirstMemory.id);
+      await memoryGalleryUtils.clickThumbnail(page, lastAssetOfFirstMemory.id);
+
+      await memoryAssetViewerUtils.waitForViewerOpen(page);
+      await memoryAssetViewerUtils.waitForAssetLoad(page, lastAssetOfFirstMemory);
+
+      await memoryAssetViewerUtils.expectNextButtonVisible(page);
+      await memoryAssetViewerUtils.expectPreviousButtonVisible(page);
+    });
+
+    test('shows prev button when at first asset of last memory (prev memory exists)', async ({ page }) => {
+      const lastMemory = memories.at(-1)!;
+      const firstAssetOfLastMemory = lastMemory.assets[0];
+
+      await memoryViewerUtils.openMemoryPageWithAsset(page, firstAssetOfLastMemory.id);
+      await memoryGalleryUtils.clickThumbnail(page, firstAssetOfLastMemory.id);
+
+      await memoryAssetViewerUtils.waitForViewerOpen(page);
+      await memoryAssetViewerUtils.waitForAssetLoad(page, firstAssetOfLastMemory);
+
+      await memoryAssetViewerUtils.expectPreviousButtonVisible(page);
+      await memoryAssetViewerUtils.expectNextButtonVisible(page);
+    });
+
+    test('can navigate from last asset of memory to first asset of next memory', async ({ page }) => {
+      const firstMemory = memories[0];
+      const secondMemory = memories[1];
+      const lastAssetOfFirst = firstMemory.assets.at(-1)!;
+      const firstAssetOfSecond = secondMemory.assets[0];
+
+      await memoryViewerUtils.openMemoryPageWithAsset(page, lastAssetOfFirst.id);
+      await memoryGalleryUtils.clickThumbnail(page, lastAssetOfFirst.id);
+
+      await memoryAssetViewerUtils.waitForViewerOpen(page);
+      await memoryAssetViewerUtils.waitForAssetLoad(page, lastAssetOfFirst);
+
+      await memoryAssetViewerUtils.clickNextButton(page);
+      await memoryAssetViewerUtils.waitForAssetLoad(page, firstAssetOfSecond);
+
+      await memoryAssetViewerUtils.expectCurrentAssetId(page, firstAssetOfSecond.id);
+    });
+
+    test('can navigate from first asset of memory to last asset of previous memory', async ({ page }) => {
+      const firstMemory = memories[0];
+      const secondMemory = memories[1];
+      const lastAssetOfFirst = firstMemory.assets.at(-1)!;
+      const firstAssetOfSecond = secondMemory.assets[0];
+
+      await memoryViewerUtils.openMemoryPageWithAsset(page, firstAssetOfSecond.id);
+      await memoryGalleryUtils.clickThumbnail(page, firstAssetOfSecond.id);
+
+      await memoryAssetViewerUtils.waitForViewerOpen(page);
+      await memoryAssetViewerUtils.waitForAssetLoad(page, firstAssetOfSecond);
+
+      await memoryAssetViewerUtils.clickPreviousButton(page);
+      await memoryAssetViewerUtils.waitForAssetLoad(page, lastAssetOfFirst);
+    });
+
+    test('hides prev button at very first asset (first memory, first asset, no prev memory)', async ({ page }) => {
+      const firstMemory = memories[0];
+      const veryFirstAsset = firstMemory.assets[0];
+
+      await memoryViewerUtils.openMemoryPageWithAsset(page, veryFirstAsset.id);
+      await memoryGalleryUtils.clickThumbnail(page, veryFirstAsset.id);
+
+      await memoryAssetViewerUtils.waitForViewerOpen(page);
+      await memoryAssetViewerUtils.waitForAssetLoad(page, veryFirstAsset);
+
+      await memoryAssetViewerUtils.expectPreviousButtonNotVisible(page);
+      await memoryAssetViewerUtils.expectNextButtonVisible(page);
+    });
+
+    test('hides next button at very last asset (last memory, last asset, no next memory)', async ({ page }) => {
+      const lastMemory = memories.at(-1)!;
+      const veryLastAsset = lastMemory.assets.at(-1)!;
+
+      await memoryViewerUtils.openMemoryPageWithAsset(page, veryLastAsset.id);
+      await memoryGalleryUtils.clickThumbnail(page, veryLastAsset.id);
+
+      await memoryAssetViewerUtils.waitForViewerOpen(page);
+      await memoryAssetViewerUtils.waitForAssetLoad(page, veryLastAsset);
+
+      await memoryAssetViewerUtils.expectNextButtonNotVisible(page);
+      await memoryAssetViewerUtils.expectPreviousButtonVisible(page);
+    });
+  });
+
+  test.describe('Keyboard navigation', () => {
+    test('ArrowLeft navigates to previous asset across memory boundary', async ({ page }) => {
+      const firstMemory = memories[0];
+      const secondMemory = memories[1];
+      const lastAssetOfFirst = firstMemory.assets.at(-1)!;
+      const firstAssetOfSecond = secondMemory.assets[0];
+
+      await memoryViewerUtils.openMemoryPageWithAsset(page, firstAssetOfSecond.id);
+      await memoryGalleryUtils.clickThumbnail(page, firstAssetOfSecond.id);
+
+      await memoryAssetViewerUtils.waitForViewerOpen(page);
+      await memoryAssetViewerUtils.waitForAssetLoad(page, firstAssetOfSecond);
+
+      await page.keyboard.press('ArrowLeft');
+      await memoryAssetViewerUtils.waitForAssetLoad(page, lastAssetOfFirst);
+    });
+
+    test('ArrowRight navigates to next asset across memory boundary', async ({ page }) => {
+      const firstMemory = memories[0];
+      const secondMemory = memories[1];
+      const lastAssetOfFirst = firstMemory.assets.at(-1)!;
+      const firstAssetOfSecond = secondMemory.assets[0];
+
+      await memoryViewerUtils.openMemoryPageWithAsset(page, lastAssetOfFirst.id);
+      await memoryGalleryUtils.clickThumbnail(page, lastAssetOfFirst.id);
+
+      await memoryAssetViewerUtils.waitForViewerOpen(page);
+      await memoryAssetViewerUtils.waitForAssetLoad(page, lastAssetOfFirst);
+
+      await page.keyboard.press('ArrowRight');
+      await memoryAssetViewerUtils.waitForAssetLoad(page, firstAssetOfSecond);
+    });
+  });
+});
+
+test.describe('Memory Viewer - Single Asset Memory Edge Cases', () => {
+  let adminUserId: string;
+  let timelineRestData: TimelineData;
+  let memories: MemoryResponseDto[];
+  const assets: TimelineAssetConfig[] = [];
+  const testContext = new TimelineTestContext();
+  const changes: Changes = {
+    albumAdditions: [],
+    assetDeletions: [],
+    assetArchivals: [],
+    assetFavorites: [],
+  };
+  const memoryChanges: MemoryChanges = {
+    memoryDeletions: [],
+    assetRemovals: new Map(),
+  };
+
+  test.beforeAll(async () => {
+    adminUserId = faker.string.uuid();
+    testContext.adminId = adminUserId;
+
+    timelineRestData = generateTimelineData({
+      ...createDefaultTimelineConfig(),
+      ownerId: adminUserId,
+    });
+
+    for (const timeBucket of timelineRestData.buckets.values()) {
+      assets.push(...timeBucket);
+    }
+
+    memories = generateMemoriesFromTimeline(
+      assets,
+      adminUserId,
+      [
+        { year: 2024, assetCount: 2 },
+        { year: 2023, assetCount: 1 },
+        { year: 2022, assetCount: 2 },
+      ],
+      123,
+    );
+  });
+
+  test.beforeEach(async ({ context }) => {
+    await setupBaseMockApiRoutes(context, adminUserId);
+    await setupTimelineMockApiRoutes(context, timelineRestData, changes, testContext);
+    await setupMemoryMockApiRoutes(context, memories, memoryChanges);
+  });
+
+  test.afterEach(() => {
+    testContext.slowBucket = false;
+    changes.albumAdditions = [];
+    changes.assetDeletions = [];
+    changes.assetArchivals = [];
+    changes.assetFavorites = [];
+    memoryChanges.memoryDeletions = [];
+    memoryChanges.assetRemovals.clear();
+  });
+
+  test('single asset memory shows both prev/next when surrounded by other memories', async ({ page }) => {
+    const singleAssetMemory = memories[1];
+    const singleAsset = singleAssetMemory.assets[0];
+
+    await memoryViewerUtils.openMemoryPageWithAsset(page, singleAsset.id);
+    await memoryGalleryUtils.clickThumbnail(page, singleAsset.id);
+
+    await memoryAssetViewerUtils.waitForViewerOpen(page);
+    await memoryAssetViewerUtils.waitForAssetLoad(page, singleAsset);
+
+    await memoryAssetViewerUtils.expectPreviousButtonVisible(page);
+    await memoryAssetViewerUtils.expectNextButtonVisible(page);
+  });
+});

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

@@ -0,0 +1,123 @@
+import type { AssetResponseDto } from '@immich/sdk';
+import { expect, Page } from '@playwright/test';
+
+function getAssetIdFromUrl(url: URL): string | null {
+  const pathMatch = url.pathname.match(/\/memory\/photos\/([^/]+)/);
+  if (pathMatch) {
+    return pathMatch[1];
+  }
+  return url.searchParams.get('id');
+}
+
+export const memoryViewerUtils = {
+  locator(page: Page) {
+    return page.locator('#memory-viewer');
+  },
+
+  async waitForMemoryLoad(page: Page) {
+    await expect(this.locator(page)).toBeVisible();
+    await expect(page.locator('#memory-viewer img').first()).toBeVisible();
+  },
+
+  async openMemoryPage(page: Page) {
+    await page.goto('/memory');
+    await this.waitForMemoryLoad(page);
+  },
+
+  async openMemoryPageWithAsset(page: Page, assetId: string) {
+    await page.goto(`/memory?id=${assetId}`);
+    await this.waitForMemoryLoad(page);
+  },
+};
+
+export const memoryGalleryUtils = {
+  locator(page: Page) {
+    return page.locator('#gallery-memory');
+  },
+
+  thumbnailWithAssetId(page: Page, assetId: string) {
+    return page.locator(`#gallery-memory [data-thumbnail-focus-container][data-asset="${assetId}"]`);
+  },
+
+  async scrollToGallery(page: Page) {
+    const showGalleryButton = page.getByLabel('Show gallery');
+    if (await showGalleryButton.isVisible()) {
+      await showGalleryButton.click();
+    }
+    await expect(this.locator(page)).toBeInViewport();
+  },
+
+  async clickThumbnail(page: Page, assetId: string) {
+    await this.scrollToGallery(page);
+    await this.thumbnailWithAssetId(page, assetId).click();
+  },
+
+  async getAllThumbnails(page: Page) {
+    await this.scrollToGallery(page);
+    return page.locator('#gallery-memory [data-thumbnail-focus-container]');
+  },
+};
+
+export const memoryAssetViewerUtils = {
+  locator(page: Page) {
+    return page.locator('#immich-asset-viewer');
+  },
+
+  async waitForViewerOpen(page: Page) {
+    await expect(this.locator(page)).toBeVisible();
+  },
+
+  async waitForAssetLoad(page: Page, asset: AssetResponseDto) {
+    const viewer = this.locator(page);
+    const imgLocator = viewer.locator(`img[draggable="false"][src*="/api/assets/${asset.id}/thumbnail?size=preview"]`);
+    const videoLocator = viewer.locator(`video[poster*="/api/assets/${asset.id}/thumbnail?size=preview"]`);
+
+    await imgLocator.or(videoLocator).waitFor({ timeout: 10_000 });
+  },
+
+  nextButton(page: Page) {
+    return page.getByLabel('View next asset');
+  },
+
+  previousButton(page: Page) {
+    return page.getByLabel('View previous asset');
+  },
+
+  async expectNextButtonVisible(page: Page) {
+    await expect(this.nextButton(page)).toBeVisible();
+  },
+
+  async expectNextButtonNotVisible(page: Page) {
+    await expect(this.nextButton(page)).toHaveCount(0);
+  },
+
+  async expectPreviousButtonVisible(page: Page) {
+    await expect(this.previousButton(page)).toBeVisible();
+  },
+
+  async expectPreviousButtonNotVisible(page: Page) {
+    await expect(this.previousButton(page)).toHaveCount(0);
+  },
+
+  async clickNextButton(page: Page) {
+    await this.nextButton(page).click();
+  },
+
+  async clickPreviousButton(page: Page) {
+    await this.previousButton(page).click();
+  },
+
+  async closeViewer(page: Page) {
+    await page.keyboard.press('Escape');
+    await expect(this.locator(page)).not.toBeVisible();
+  },
+
+  getCurrentAssetId(page: Page): string | null {
+    const url = new URL(page.url());
+    return getAssetIdFromUrl(url);
+  },
+
+  async expectCurrentAssetId(page: Page, expectedAssetId: string) {
+    await expect.poll(() => this.getCurrentAssetId(page)).toBe(expectedAssetId);
+  },
+};

mobile/lib/pages/backup/failed_backup_status.page.dart

@@ -2,9 +2,10 @@ import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/local_image_provider.dart';
 import 'package:immich_mobile/providers/backup/error_backup_list.provider.dart';
-import 'package:immich_mobile/providers/image/immich_local_thumbnail_provider.dart';
 import 'package:intl/intl.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart' as base_asset;
 
 @RoutePage()
 class FailedBackupStatusPage extends HookConsumerWidget {
@@ -58,7 +59,7 @@ class FailedBackupStatusPage extends HookConsumerWidget {
                       clipBehavior: Clip.hardEdge,
                       child: Image(
                         fit: BoxFit.cover,
-                        image: ImmichLocalThumbnailProvider(asset: errorAsset.asset, height: 512, width: 512),
+                        image: LocalThumbProvider(id: errorAsset.asset.localId!, assetType: base_asset.AssetType.video),
                       ),
                     ),
                   ),

mobile/lib/pages/common/gallery_stacked_children.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/asset_stack.provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/show_controls.provider.dart';
-import 'package:immich_mobile/providers/image/immich_remote_image_provider.dart';
 
 class GalleryStackedChildren extends HookConsumerWidget {
   final ValueNotifier<int> stackIndex;
@@ -70,7 +70,7 @@ class GalleryStackedChildren extends HookConsumerWidget {
                       borderRadius: const BorderRadius.all(Radius.circular(4)),
                       child: Image(
                         fit: BoxFit.cover,
-                        image: ImmichRemoteImageProvider(assetId: assetId),
+                        image: RemoteImageProvider.thumbnail(assetId: assetId, thumbhash: asset.thumbhash ?? ""),
                       ),
                     ),
                   ),

mobile/lib/pages/library/library.page.dart

@@ -11,7 +11,7 @@ import 'package:immich_mobile/providers/partner.provider.dart';
 import 'package:immich_mobile/providers/search/people.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/widgets/album/album_thumbnail_card.dart';
 import 'package:immich_mobile/widgets/common/immich_app_bar.dart';
@@ -221,12 +221,7 @@ class PeopleCollectionCard extends ConsumerWidget {
                       mainAxisSpacing: 8,
                       physics: const NeverScrollableScrollPhysics(),
                       children: people.take(4).map((person) {
-                        return CircleAvatar(
-                          backgroundImage: NetworkImage(
-                            getFaceThumbnailUrl(person.id),
-                            headers: ApiService.getRequestHeaders(),
-                          ),
-                        );
+                        return CircleAvatar(backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)));
                       }).toList(),
                     );
                   },

mobile/lib/pages/library/people/people_collection.page.dart

@@ -5,8 +5,8 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/providers/search/people.provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/widgets/common/search_field.dart';
 import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
@@ -17,7 +17,6 @@ class PeopleCollectionPage extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final people = ref.watch(getAllPeopleProvider);
-    final headers = ApiService.getRequestHeaders();
     final formFocus = useFocusNode();
     final ValueNotifier<String?> search = useState(null);
 
@@ -88,7 +87,7 @@ class PeopleCollectionPage extends HookConsumerWidget {
                             elevation: 3,
                             child: CircleAvatar(
                               maxRadius: isTablet ? 120 / 2 : 96 / 2,
-                              backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
+                              backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
                             ),
                           ),
                         ),

mobile/lib/pages/library/places/places_collection.page.dart

@@ -1,5 +1,4 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
@@ -10,9 +9,10 @@ import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/models/search/search_filter.model.dart';
 import 'package:immich_mobile/pages/common/large_leading_tile.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/providers/search/search_page_state.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/widgets/common/search_field.dart';
 import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
@@ -125,13 +125,10 @@ class PlaceTile extends StatelessWidget {
       title: Text(name, style: context.textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w500)),
       leading: ClipRRect(
         borderRadius: const BorderRadius.all(Radius.circular(20)),
-        child: CachedNetworkImage(
+        child: SizedBox(
           width: 80,
           height: 80,
-          fit: BoxFit.cover,
-          imageUrl: thumbnailUrl,
-          httpHeaders: ApiService.getRequestHeaders(),
-          errorWidget: (context, url, error) => const Icon(Icons.image_not_supported_outlined),
+          child: Thumbnail(imageProvider: RemoteImageProvider(url: thumbnailUrl)),
         ),
       ),
     );

mobile/lib/pages/search/person_result.page.dart

@@ -4,8 +4,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/search/people.provider.dart';
-import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/widgets/search/person_name_edit_form.dart';
 import 'package:immich_mobile/widgets/asset_grid/multiselect_grid.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
@@ -88,10 +88,7 @@ class PersonResultPage extends HookConsumerWidget {
           padding: const EdgeInsets.only(left: 8.0, top: 24),
           child: Row(
             children: [
-              CircleAvatar(
-                radius: 36,
-                backgroundImage: NetworkImage(getFaceThumbnailUrl(personId), headers: ApiService.getRequestHeaders()),
-              ),
+              CircleAvatar(radius: 36, backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(personId))),
               Expanded(
                 child: Padding(padding: const EdgeInsets.only(left: 16.0, right: 16.0), child: buildTitleBlock()),
               ),

mobile/lib/presentation/pages/drift_library.page.dart

@@ -12,8 +12,8 @@ import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/partner.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
 import 'package:immich_mobile/providers/server_info.provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/widgets/common/immich_sliver_app_bar.dart';
 import 'package:immich_mobile/widgets/map/map_thumbnail.dart';
@@ -179,12 +179,7 @@ class _PeopleCollectionCard extends ConsumerWidget {
                       mainAxisSpacing: 8,
                       physics: const NeverScrollableScrollPhysics(),
                       children: people.take(4).map((person) {
-                        return CircleAvatar(
-                          backgroundImage: NetworkImage(
-                            getFaceThumbnailUrl(person.id),
-                            headers: ApiService.getRequestHeaders(),
-                          ),
-                        );
+                        return CircleAvatar(backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)));
                       }).toList(),
                     );
                   },

mobile/lib/presentation/pages/drift_people_collection.page.dart

@@ -4,8 +4,8 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/utils/people.utils.dart';
 import 'package:immich_mobile/widgets/common/search_field.dart';
@@ -31,7 +31,6 @@ class _DriftPeopleCollectionPageState extends ConsumerState<DriftPeopleCollectio
   @override
   Widget build(BuildContext context) {
     final people = ref.watch(driftGetAllPeopleProvider);
-    final headers = ApiService.getRequestHeaders();
 
     return LayoutBuilder(
       builder: (context, constraints) {
@@ -90,7 +89,7 @@ class _DriftPeopleCollectionPageState extends ConsumerState<DriftPeopleCollectio
                             elevation: 3,
                             child: CircleAvatar(
                               maxRadius: isTablet ? 100 / 2 : 96 / 2,
-                              backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
+                              backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
                             ),
                           ),
                         ),

mobile/lib/presentation/widgets/asset_viewer/bottom_sheet/sheet_people_details.widget.dart

@@ -10,8 +10,8 @@ import 'package:immich_mobile/presentation/widgets/people/person_edit_name_modal
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
 import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/utils/people.utils.dart';
 
@@ -108,8 +108,6 @@ class _PeopleAvatar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final headers = ApiService.getRequestHeaders();
-
     return ConstrainedBox(
       constraints: const BoxConstraints(maxWidth: 96),
       child: Padding(
@@ -127,7 +125,7 @@ class _PeopleAvatar extends StatelessWidget {
                   elevation: 3,
                   child: CircleAvatar(
                     maxRadius: imageSize / 2,
-                    backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
+                    backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
                   ),
                 ),
               ),

mobile/lib/presentation/widgets/images/image_provider.dart

@@ -134,7 +134,7 @@ ImageProvider? getThumbnailImageProvider(BaseAsset asset, {Size size = kThumbnai
 
   final assetId = asset is RemoteAsset ? asset.id : (asset as LocalAsset).remoteId;
   final thumbhash = asset is RemoteAsset ? asset.thumbHash ?? "" : "";
-  return assetId != null ? RemoteThumbProvider(assetId: assetId, thumbhash: thumbhash) : null;
+  return assetId != null ? RemoteImageProvider.thumbnail(assetId: assetId, thumbhash: thumbhash) : null;
 }
 
 bool _shouldUseLocalAsset(BaseAsset asset) =>

mobile/lib/presentation/widgets/images/remote_image_provider.dart

@@ -10,50 +10,48 @@ import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:openapi/api.dart';
 
-class RemoteThumbProvider extends CancellableImageProvider<RemoteThumbProvider>
-    with CancellableImageProviderMixin<RemoteThumbProvider> {
-  final String assetId;
-  final String thumbhash;
+class RemoteImageProvider extends CancellableImageProvider<RemoteImageProvider>
+    with CancellableImageProviderMixin<RemoteImageProvider> {
+  final String url;
 
-  RemoteThumbProvider({required this.assetId, required this.thumbhash});
+  RemoteImageProvider({required this.url});
+
+  RemoteImageProvider.thumbnail({required String assetId, required String thumbhash})
+    : url = getThumbnailUrlForRemoteId(assetId, thumbhash: thumbhash);
 
   @override
-  Future<RemoteThumbProvider> obtainKey(ImageConfiguration configuration) {
+  Future<RemoteImageProvider> obtainKey(ImageConfiguration configuration) {
     return SynchronousFuture(this);
   }
 
   @override
-  ImageStreamCompleter loadImage(RemoteThumbProvider key, ImageDecoderCallback decode) {
+  ImageStreamCompleter loadImage(RemoteImageProvider key, ImageDecoderCallback decode) {
     return OneFramePlaceholderImageStreamCompleter(
       _codec(key, decode),
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<ImageProvider>('Image provider', this),
-        DiagnosticsProperty<String>('Asset Id', key.assetId),
+        DiagnosticsProperty<String>('URL', key.url),
       ],
       onDispose: cancel,
     );
   }
 
-  Stream<ImageInfo> _codec(RemoteThumbProvider key, ImageDecoderCallback decode) {
-    final request = this.request = RemoteImageRequest(
-      uri: getThumbnailUrlForRemoteId(key.assetId, thumbhash: key.thumbhash),
-      headers: ApiService.getRequestHeaders(),
-    );
+  Stream<ImageInfo> _codec(RemoteImageProvider key, ImageDecoderCallback decode) {
+    final request = this.request = RemoteImageRequest(uri: key.url, headers: ApiService.getRequestHeaders());
     return loadRequest(request, decode);
   }
 
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
-    if (other is RemoteThumbProvider) {
-      return assetId == other.assetId && thumbhash == other.thumbhash;
+    if (other is RemoteImageProvider) {
+      return url == other.url;
     }
-
     return false;
   }
 
   @override
-  int get hashCode => assetId.hashCode ^ thumbhash.hashCode;
+  int get hashCode => url.hashCode;
 }
 
 class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImageProvider>
@@ -73,7 +71,7 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
   ImageStreamCompleter loadImage(RemoteFullImageProvider key, ImageDecoderCallback decode) {
     return OneFramePlaceholderImageStreamCompleter(
       _codec(key, decode),
-      initialImage: getInitialImage(RemoteThumbProvider(assetId: key.assetId, thumbhash: key.thumbhash)),
+      initialImage: getInitialImage(RemoteImageProvider.thumbnail(assetId: key.assetId, thumbhash: key.thumbhash)),
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Asset Id', key.assetId),

mobile/lib/presentation/widgets/images/thumbnail.widget.dart

@@ -27,7 +27,7 @@ class Thumbnail extends StatefulWidget {
     this.fit = BoxFit.cover,
     Size size = kThumbnailResolution,
     super.key,
-  }) : imageProvider = RemoteThumbProvider(assetId: remoteId, thumbhash: thumbhash),
+  }) : imageProvider = RemoteImageProvider.thumbnail(assetId: remoteId, thumbhash: thumbhash),
        thumbhashProvider = null;
 
   Thumbnail.fromAsset({

mobile/lib/presentation/widgets/people/partner_user_avatar.widget.dart

@@ -1,10 +1,9 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 
 class PartnerUserAvatar extends StatelessWidget {
   const PartnerUserAvatar({super.key, required this.partner});
@@ -18,11 +17,7 @@ class PartnerUserAvatar extends StatelessWidget {
     return CircleAvatar(
       radius: 16,
       backgroundColor: context.primaryColor.withAlpha(50),
-      foregroundImage: CachedNetworkImageProvider(
-        url,
-        headers: ApiService.getRequestHeaders(),
-        cacheKey: "user-${partner.id}-profile",
-      ),
+      foregroundImage: RemoteImageProvider(url: url),
       // silence errors if user has no profile image, use initials as fallback
       onForegroundImageError: (exception, stackTrace) {},
       child: Text(nameFirstLetter.toUpperCase()),

mobile/lib/providers/image/immich_local_image_provider.dart

@@ -1,94 +0,0 @@
-import 'dart:async';
-import 'dart:io';
-import 'dart:ui' as ui;
-
-import 'package:cached_network_image/cached_network_image.dart';
-import 'package:flutter/foundation.dart';
-import 'package:flutter/painting.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:logging/logging.dart';
-import 'package:photo_manager/photo_manager.dart' show ThumbnailSize;
-
-/// The local image provider for an asset
-class ImmichLocalImageProvider extends ImageProvider<ImmichLocalImageProvider> {
-  final Asset asset;
-  // only used for videos
-  final double width;
-  final double height;
-  final Logger log = Logger('ImmichLocalImageProvider');
-
-  ImmichLocalImageProvider({required this.asset, required this.width, required this.height})
-    : assert(asset.local != null, 'Only usable when asset.local is set');
-
-  /// Converts an [ImageProvider]'s settings plus an [ImageConfiguration] to a key
-  /// that describes the precise image to load.
-  @override
-  Future<ImmichLocalImageProvider> obtainKey(ImageConfiguration configuration) {
-    return SynchronousFuture(this);
-  }
-
-  @override
-  ImageStreamCompleter loadImage(ImmichLocalImageProvider key, ImageDecoderCallback decode) {
-    final chunkEvents = StreamController<ImageChunkEvent>();
-    return MultiImageStreamCompleter(
-      codec: _codec(key.asset, decode, chunkEvents),
-      scale: 1.0,
-      chunkEvents: chunkEvents.stream,
-      informationCollector: () sync* {
-        yield ErrorDescription(asset.fileName);
-      },
-    );
-  }
-
-  // Streams in each stage of the image as we ask for it
-  Stream<ui.Codec> _codec(
-    Asset asset,
-    ImageDecoderCallback decode,
-    StreamController<ImageChunkEvent> chunkEvents,
-  ) async* {
-    try {
-      final local = asset.local;
-      if (local == null) {
-        throw StateError('Asset ${asset.fileName} has no local data');
-      }
-
-      switch (asset.type) {
-        case AssetType.image:
-          final File? file = await local.originFile;
-          if (file == null) {
-            throw StateError("Opening file for asset ${asset.fileName} failed");
-          }
-          final buffer = await ui.ImmutableBuffer.fromFilePath(file.path);
-          yield await decode(buffer);
-          break;
-        case AssetType.video:
-          final size = ThumbnailSize(width.ceil(), height.ceil());
-          final thumbBytes = await local.thumbnailDataWithSize(size);
-          if (thumbBytes == null) {
-            throw StateError("Failed to load preview for ${asset.fileName}");
-          }
-          final buffer = await ui.ImmutableBuffer.fromUint8List(thumbBytes);
-          yield await decode(buffer);
-          break;
-        default:
-          throw StateError('Unsupported asset type ${asset.type}');
-      }
-    } catch (error, stack) {
-      log.severe('Error loading local image ${asset.fileName}', error, stack);
-    } finally {
-      unawaited(chunkEvents.close());
-    }
-  }
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-    if (other is ImmichLocalImageProvider) {
-      return asset.id == other.asset.id && asset.localId == other.asset.localId;
-    }
-    return false;
-  }
-
-  @override
-  int get hashCode => Object.hash(asset.id, asset.localId);
-}

mobile/lib/providers/image/immich_local_thumbnail_provider.dart

@@ -1,88 +0,0 @@
-import 'dart:async';
-import 'dart:ui' as ui;
-
-import 'package:cached_network_image/cached_network_image.dart';
-import 'package:flutter_cache_manager/flutter_cache_manager.dart';
-import 'package:immich_mobile/providers/image/cache/thumbnail_image_cache_manager.dart';
-
-import 'package:flutter/foundation.dart';
-import 'package:flutter/painting.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:photo_manager/photo_manager.dart' show ThumbnailSize;
-import 'package:logging/logging.dart';
-
-/// The local image provider for an asset
-/// Only viable
-class ImmichLocalThumbnailProvider extends ImageProvider<ImmichLocalThumbnailProvider> {
-  final Asset asset;
-  final int height;
-  final int width;
-  final CacheManager? cacheManager;
-  final Logger log = Logger("ImmichLocalThumbnailProvider");
-  final String? userId;
-
-  ImmichLocalThumbnailProvider({
-    required this.asset,
-    this.height = 256,
-    this.width = 256,
-    this.cacheManager,
-    this.userId,
-  }) : assert(asset.local != null, 'Only usable when asset.local is set');
-
-  /// Converts an [ImageProvider]'s settings plus an [ImageConfiguration] to a key
-  /// that describes the precise image to load.
-  @override
-  Future<ImmichLocalThumbnailProvider> obtainKey(ImageConfiguration configuration) {
-    return SynchronousFuture(this);
-  }
-
-  @override
-  ImageStreamCompleter loadImage(ImmichLocalThumbnailProvider key, ImageDecoderCallback decode) {
-    final cache = cacheManager ?? ThumbnailImageCacheManager();
-    return MultiImageStreamCompleter(
-      codec: _codec(key.asset, cache, decode),
-      scale: 1.0,
-      informationCollector: () sync* {
-        yield ErrorDescription(key.asset.fileName);
-      },
-    );
-  }
-
-  // Streams in each stage of the image as we ask for it
-  Stream<ui.Codec> _codec(Asset assetData, CacheManager cache, ImageDecoderCallback decode) async* {
-    final cacheKey = '$userId${assetData.localId}${assetData.checksum}$width$height';
-    final fileFromCache = await cache.getFileFromCache(cacheKey);
-    if (fileFromCache != null) {
-      try {
-        final buffer = await ui.ImmutableBuffer.fromFilePath(fileFromCache.file.path);
-        final codec = await decode(buffer);
-        yield codec;
-        return;
-      } catch (error) {
-        log.severe('Found thumbnail in cache, but loading it failed', error);
-      }
-    }
-
-    final thumbnailBytes = await assetData.local?.thumbnailDataWithSize(ThumbnailSize(width, height), quality: 80);
-    if (thumbnailBytes == null) {
-      throw StateError("Loading thumb for local photo ${assetData.fileName} failed");
-    }
-
-    final buffer = await ui.ImmutableBuffer.fromUint8List(thumbnailBytes);
-    final codec = await decode(buffer);
-    yield codec;
-    await cache.putFile(cacheKey, thumbnailBytes);
-  }
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-    if (other is ImmichLocalThumbnailProvider) {
-      return asset.id == other.asset.id && asset.localId == other.asset.localId;
-    }
-    return false;
-  }
-
-  @override
-  int get hashCode => Object.hash(asset.id, asset.localId);
-}

mobile/lib/providers/image/immich_remote_image_provider.dart

@@ -1,82 +0,0 @@
-import 'dart:async';
-import 'dart:ui' as ui;
-
-import 'package:cached_network_image/cached_network_image.dart';
-import 'package:flutter_cache_manager/flutter_cache_manager.dart';
-import 'package:immich_mobile/providers/image/cache/image_loader.dart';
-import 'package:immich_mobile/providers/image/cache/remote_image_cache_manager.dart';
-import 'package:openapi/api.dart' as api;
-
-import 'package:flutter/foundation.dart';
-import 'package:flutter/painting.dart';
-import 'package:immich_mobile/services/app_settings.service.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:immich_mobile/entities/store.entity.dart';
-import 'package:immich_mobile/utils/image_url_builder.dart';
-
-/// The remote image provider for full size remote images
-class ImmichRemoteImageProvider extends ImageProvider<ImmichRemoteImageProvider> {
-  /// The [Asset.remoteId] of the asset to fetch
-  final String assetId;
-
-  /// The image cache manager
-  final CacheManager? cacheManager;
-
-  const ImmichRemoteImageProvider({required this.assetId, this.cacheManager});
-
-  /// Converts an [ImageProvider]'s settings plus an [ImageConfiguration] to a key
-  /// that describes the precise image to load.
-  @override
-  Future<ImmichRemoteImageProvider> obtainKey(ImageConfiguration configuration) {
-    return SynchronousFuture(this);
-  }
-
-  @override
-  ImageStreamCompleter loadImage(ImmichRemoteImageProvider key, ImageDecoderCallback decode) {
-    final cache = cacheManager ?? RemoteImageCacheManager();
-    final chunkEvents = StreamController<ImageChunkEvent>();
-    return MultiImageStreamCompleter(
-      codec: _codec(key, cache, decode, chunkEvents),
-      scale: 1.0,
-      chunkEvents: chunkEvents.stream,
-    );
-  }
-
-  /// Whether to show the original file or load a compressed version
-  bool get _useOriginal => Store.get(AppSettingsEnum.loadOriginal.storeKey, AppSettingsEnum.loadOriginal.defaultValue);
-
-  // Streams in each stage of the image as we ask for it
-  Stream<ui.Codec> _codec(
-    ImmichRemoteImageProvider key,
-    CacheManager cache,
-    ImageDecoderCallback decode,
-    StreamController<ImageChunkEvent> chunkEvents,
-  ) async* {
-    // Load the higher resolution version of the image
-    final url = getThumbnailUrlForRemoteId(key.assetId, type: api.AssetMediaSize.preview);
-    final codec = await ImageLoader.loadImageFromCache(url, cache: cache, decode: decode, chunkEvents: chunkEvents);
-    yield codec;
-
-    // Load the final remote image
-    if (_useOriginal) {
-      // Load the original image
-      final url = getOriginalUrlForRemoteId(key.assetId);
-      final codec = await ImageLoader.loadImageFromCache(url, cache: cache, decode: decode, chunkEvents: chunkEvents);
-      yield codec;
-    }
-    await chunkEvents.close();
-  }
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-    if (other is ImmichRemoteImageProvider) {
-      return assetId == other.assetId;
-    }
-
-    return false;
-  }
-
-  @override
-  int get hashCode => assetId.hashCode;
-}

mobile/lib/providers/image/immich_remote_thumbnail_provider.dart

@@ -1,61 +0,0 @@
-import 'dart:async';
-import 'dart:ui' as ui;
-
-import 'package:cached_network_image/cached_network_image.dart';
-import 'package:flutter_cache_manager/flutter_cache_manager.dart';
-import 'package:immich_mobile/providers/image/cache/image_loader.dart';
-import 'package:immich_mobile/providers/image/cache/thumbnail_image_cache_manager.dart';
-import 'package:openapi/api.dart' as api;
-
-import 'package:flutter/foundation.dart';
-import 'package:flutter/painting.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:immich_mobile/utils/image_url_builder.dart';
-
-/// The remote image provider
-class ImmichRemoteThumbnailProvider extends ImageProvider<ImmichRemoteThumbnailProvider> {
-  /// The [Asset.remoteId] of the asset to fetch
-  final String assetId;
-
-  final int? height;
-  final int? width;
-
-  /// The image cache manager
-  final CacheManager? cacheManager;
-
-  const ImmichRemoteThumbnailProvider({required this.assetId, this.height, this.width, this.cacheManager});
-
-  /// Converts an [ImageProvider]'s settings plus an [ImageConfiguration] to a key
-  /// that describes the precise image to load.
-  @override
-  Future<ImmichRemoteThumbnailProvider> obtainKey(ImageConfiguration configuration) {
-    return SynchronousFuture(this);
-  }
-
-  @override
-  ImageStreamCompleter loadImage(ImmichRemoteThumbnailProvider key, ImageDecoderCallback decode) {
-    final cache = cacheManager ?? ThumbnailImageCacheManager();
-    return MultiImageStreamCompleter(codec: _codec(key, cache, decode), scale: 1.0);
-  }
-
-  // Streams in each stage of the image as we ask for it
-  Stream<ui.Codec> _codec(ImmichRemoteThumbnailProvider key, CacheManager cache, ImageDecoderCallback decode) async* {
-    // Load a preview to the chunk events
-    final preview = getThumbnailUrlForRemoteId(key.assetId, type: api.AssetMediaSize.thumbnail);
-
-    yield await ImageLoader.loadImageFromCache(preview, cache: cache, decode: decode);
-  }
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-    if (other is ImmichRemoteThumbnailProvider) {
-      return assetId == other.assetId;
-    }
-
-    return false;
-  }
-
-  @override
-  int get hashCode => assetId.hashCode;
-}

mobile/lib/utils/cache/custom_image_cache.dart

@@ -2,10 +2,6 @@ import 'package:flutter/painting.dart';
 import 'package:immich_mobile/presentation/widgets/images/local_image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumb_hash_provider.dart';
-import 'package:immich_mobile/providers/image/immich_local_image_provider.dart';
-import 'package:immich_mobile/providers/image/immich_local_thumbnail_provider.dart';
-import 'package:immich_mobile/providers/image/immich_remote_image_provider.dart';
-import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
 
 /// [ImageCache] that uses two caches for small and large images
 /// so that a single large image does not evict all small images
@@ -39,14 +35,9 @@ final class CustomImageCache implements ImageCache {
   }
 
   /// Gets the cache for the given key
-  /// [_large] is used for [ImmichLocalImageProvider] and [ImmichRemoteImageProvider]
-  /// [_small] is used for [ImmichLocalThumbnailProvider] and [ImmichRemoteThumbnailProvider]
   ImageCache _cacheForKey(Object key) {
     return switch (key) {
-      ImmichLocalImageProvider() ||
-      ImmichRemoteImageProvider() ||
-      LocalFullImageProvider() ||
-      RemoteFullImageProvider() => _large,
+      LocalFullImageProvider() || RemoteFullImageProvider() => _large,
       ThumbHashProvider() => _thumbhash,
       _ => _small,
     };

mobile/lib/widgets/activities/activity_tile.dart

@@ -4,8 +4,8 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/datetime_extensions.dart';
 import 'package:immich_mobile/models/activities/activity.model.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/activity_service.provider.dart';
-import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
 
@@ -102,7 +102,7 @@ class _ActivityAssetThumbnail extends StatelessWidget {
         decoration: BoxDecoration(
           borderRadius: const BorderRadius.all(Radius.circular(4)),
           image: DecorationImage(
-            image: ImmichRemoteThumbnailProvider(assetId: assetId),
+            image: RemoteImageProvider.thumbnail(assetId: assetId, thumbhash: ""),
             fit: BoxFit.cover,
           ),
         ),

mobile/lib/widgets/activities/comment_bubble.dart

@@ -4,9 +4,9 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/datetime_extensions.dart';
 import 'package:immich_mobile/models/activities/activity.model.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/activity.provider.dart';
 import 'package:immich_mobile/providers/activity_service.provider.dart';
-import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
 import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/widgets/activities/dismissible_activity.dart';
@@ -56,7 +56,7 @@ class CommentBubble extends ConsumerWidget {
               child: ClipRRect(
                 borderRadius: const BorderRadius.all(Radius.circular(10)),
                 child: Image(
-                  image: ImmichRemoteThumbnailProvider(assetId: activity.assetId!),
+                  image: RemoteImageProvider.thumbnail(assetId: activity.assetId!, thumbhash: ""),
                   fit: BoxFit.cover,
                 ),
               ),

mobile/lib/widgets/album/album_thumbnail_listtile.dart

@@ -1,12 +1,12 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/entities/album.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:openapi/api.dart';
 
@@ -32,15 +32,12 @@ class AlbumThumbnailListTile extends StatelessWidget {
     }
 
     buildAlbumThumbnail() {
-      return CachedNetworkImage(
+      return SizedBox(
         width: cardSize,
         height: cardSize,
-        fit: BoxFit.cover,
-        fadeInDuration: const Duration(milliseconds: 200),
-        imageUrl: getAlbumThumbnailUrl(album, type: AssetMediaSize.thumbnail),
-        httpHeaders: ApiService.getRequestHeaders(),
-        cacheKey: getAlbumThumbNailCacheKey(album, type: AssetMediaSize.thumbnail),
-        errorWidget: (context, url, error) => const Icon(Icons.image_not_supported_outlined),
+        child: Thumbnail(
+          imageProvider: RemoteImageProvider(url: getAlbumThumbnailUrl(album, type: AssetMediaSize.thumbnail)),
+        ),
       );
     }
 

mobile/lib/widgets/common/immich_image.dart

@@ -1,10 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart' as base_asset;
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/providers/image/immich_local_image_provider.dart';
-import 'package:immich_mobile/providers/image/immich_remote_image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/local_image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
 import 'package:octo_image/octo_image.dart';
 
@@ -34,13 +35,21 @@ class ImmichImage extends StatelessWidget {
     }
 
     if (asset == null) {
-      return ImmichRemoteImageProvider(assetId: assetId!);
+      return RemoteFullImageProvider(assetId: assetId!, thumbhash: '', assetType: base_asset.AssetType.video);
     }
 
     if (useLocal(asset)) {
-      return ImmichLocalImageProvider(asset: asset, width: width, height: height);
+      return LocalFullImageProvider(
+        id: asset.localId!,
+        assetType: base_asset.AssetType.video,
+        size: Size(width, height),
+      );
     } else {
-      return ImmichRemoteImageProvider(assetId: asset.remoteId!);
+      return RemoteFullImageProvider(
+        assetId: asset.remoteId!,
+        thumbhash: asset.thumbhash ?? '',
+        assetType: base_asset.AssetType.video,
+      );
     }
   }
 

mobile/lib/widgets/common/immich_thumbnail.dart

@@ -2,15 +2,15 @@ import 'dart:typed_data';
 
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/providers/image/immich_local_thumbnail_provider.dart';
-import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/local_image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/utils/hooks/blurhash_hook.dart';
 import 'package:immich_mobile/utils/thumbnail_utils.dart';
 import 'package:immich_mobile/widgets/common/immich_image.dart';
 import 'package:immich_mobile/widgets/common/thumbhash_placeholder.dart';
 import 'package:octo_image/octo_image.dart';
-import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart' as base_asset;
 
 class ImmichThumbnail extends HookConsumerWidget {
   const ImmichThumbnail({this.asset, this.width = 250, this.height = 250, this.fit = BoxFit.cover, super.key});
@@ -24,26 +24,29 @@ class ImmichThumbnail extends HookConsumerWidget {
   /// either by using the asset ID or the asset itself
   /// [asset] is the Asset to request, or else use [assetId] to get a remote
   /// image provider
-  static ImageProvider imageProvider({Asset? asset, String? assetId, String? userId, int thumbnailSize = 256}) {
+  static ImageProvider imageProvider({Asset? asset, String? assetId, int thumbnailSize = 256}) {
     if (asset == null && assetId == null) {
       throw Exception('Must supply either asset or assetId');
     }
 
     if (asset == null) {
-      return ImmichRemoteThumbnailProvider(assetId: assetId!);
+      return RemoteImageProvider.thumbnail(assetId: assetId!, thumbhash: "");
     }
 
     if (ImmichImage.useLocal(asset)) {
-      return ImmichLocalThumbnailProvider(asset: asset, height: thumbnailSize, width: thumbnailSize, userId: userId);
+      return LocalThumbProvider(
+        id: asset.localId!,
+        assetType: base_asset.AssetType.video,
+        size: Size(thumbnailSize.toDouble(), thumbnailSize.toDouble()),
+      );
     } else {
-      return ImmichRemoteThumbnailProvider(assetId: asset.remoteId!, height: thumbnailSize, width: thumbnailSize);
+      return RemoteImageProvider.thumbnail(assetId: asset.remoteId!, thumbhash: asset.thumbhash ?? "");
     }
   }
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     Uint8List? blurhash = useBlurHashRef(asset).value;
-    final userId = ref.watch(currentUserProvider)?.id;
 
     if (asset == null) {
       return Container(
@@ -56,7 +59,7 @@ class ImmichThumbnail extends HookConsumerWidget {
 
     final assetAltText = getAltText(asset!.exifInfo, asset!.fileCreatedAt, asset!.type, []);
 
-    final thumbnailProviderInstance = ImmichThumbnail.imageProvider(asset: asset, userId: userId);
+    final thumbnailProviderInstance = ImmichThumbnail.imageProvider(asset: asset);
 
     customErrorBuilder(BuildContext ctx, Object error, StackTrace? stackTrace) {
       thumbnailProviderInstance.evict();

mobile/lib/widgets/common/person_sliver_app_bar.dart

@@ -14,8 +14,8 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
-import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/people.utils.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 
@@ -230,10 +230,7 @@ class _ExpandedBackgroundState extends ConsumerState<_ExpandedBackground> with S
                     elevation: 3,
                     child: CircleAvatar(
                       maxRadius: 84 / 2,
-                      backgroundImage: NetworkImage(
-                        getFaceThumbnailUrl(widget.person.id),
-                        headers: ApiService.getRequestHeaders(),
-                      ),
+                      backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(widget.person.id)),
                     ),
                   ),
                 ),

mobile/lib/widgets/common/user_avatar.dart

@@ -1,10 +1,9 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 
 Widget userAvatar(BuildContext context, UserDto u, {double? radius}) {
   final url = "${Store.get(StoreKey.serverEndpoint)}/users/${u.id}/profile-image";
@@ -12,11 +11,7 @@ Widget userAvatar(BuildContext context, UserDto u, {double? radius}) {
   return CircleAvatar(
     radius: radius,
     backgroundColor: context.primaryColor.withAlpha(50),
-    foregroundImage: CachedNetworkImageProvider(
-      url,
-      headers: ApiService.getRequestHeaders(),
-      cacheKey: "user-${u.id}-profile",
-    ),
+    foregroundImage: RemoteImageProvider(url: url),
     // silence errors if user has no profile image, use initials as fallback
     onForegroundImageError: (exception, stackTrace) {},
     child: Text(nameFirstLetter.toUpperCase()),

mobile/lib/widgets/common/user_circle_avatar.dart

@@ -1,13 +1,11 @@
 import 'dart:math';
 
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
-import 'package:immich_mobile/services/api.service.dart';
-import 'package:immich_mobile/widgets/common/transparent_image.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 
 // ignore: must_be_immutable
 class UserCircleAvatar extends ConsumerWidget {
@@ -46,16 +44,12 @@ class UserCircleAvatar extends ConsumerWidget {
           child: user.hasProfileImage
               ? ClipRRect(
                   borderRadius: const BorderRadius.all(Radius.circular(50)),
-                  child: CachedNetworkImage(
+                  child: Image(
                     fit: BoxFit.cover,
-                    cacheKey: '${user.id}-${user.profileChangedAt.toIso8601String()}',
                     width: size,
                     height: size,
-                    placeholder: (_, __) => Image.memory(kTransparentImage),
-                    imageUrl: profileImageUrl,
-                    httpHeaders: ApiService.getRequestHeaders(),
-                    fadeInDuration: const Duration(milliseconds: 300),
-                    errorWidget: (context, error, stackTrace) => textIcon,
+                    image: RemoteImageProvider(url: profileImageUrl),
+                    errorBuilder: (context, error, stackTrace) => textIcon,
                   ),
                 )
               : textIcon,

mobile/lib/widgets/map/positioned_asset_marker_icon.dart

@@ -1,10 +1,9 @@
 import 'dart:io';
 import 'dart:math';
 
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 
 class PositionedAssetMarkerIcon extends StatelessWidget {
@@ -53,7 +52,6 @@ class _AssetMarkerIcon extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final imageUrl = getThumbnailUrlForRemoteId(id);
-    final cacheKey = getThumbnailCacheKeyForRemoteId(id, thumbhash);
     return LayoutBuilder(
       builder: (context, constraints) {
         return Stack(
@@ -79,12 +77,7 @@ class _AssetMarkerIcon extends StatelessWidget {
                 backgroundColor: context.colorScheme.onSurface,
                 child: CircleAvatar(
                   radius: constraints.maxHeight * 0.37,
-                  backgroundImage: CachedNetworkImageProvider(
-                    imageUrl,
-                    cacheKey: cacheKey,
-                    headers: ApiService.getRequestHeaders(),
-                    errorListener: (_) => const Icon(Icons.image_not_supported_outlined),
-                  ),
+                  backgroundImage: RemoteImageProvider(url: imageUrl),
                 ),
               ),
             ),

mobile/lib/widgets/search/curated_people_row.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/models/search/search_curated_content.model.dart';
-import 'package:immich_mobile/services/api.service.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 
 class CuratedPeopleRow extends StatelessWidget {
@@ -29,7 +29,6 @@ class CuratedPeopleRow extends StatelessWidget {
           crossAxisAlignment: CrossAxisAlignment.start,
           children: List.generate(content.length, (index) {
             final person = content[index];
-            final headers = ApiService.getRequestHeaders();
             return Padding(
               padding: const EdgeInsets.only(right: 16.0),
               child: Column(
@@ -44,7 +43,7 @@ class CuratedPeopleRow extends StatelessWidget {
                         elevation: 3,
                         child: CircleAvatar(
                           maxRadius: imageSize / 2,
-                          backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
+                          backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
                         ),
                       ),
                     ),

mobile/lib/widgets/search/search_filter/people_picker.dart

@@ -6,8 +6,8 @@ import 'package:immich_mobile/domain/models/person.model.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/pages/common/large_leading_tile.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/providers/search/people.provider.dart';
-import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/widgets/common/search_field.dart';
 
@@ -23,7 +23,6 @@ class PeoplePicker extends HookConsumerWidget {
     final imageSize = 60.0;
     final searchQuery = useState('');
     final people = ref.watch(getAllPeopleProvider);
-    final headers = ApiService.getRequestHeaders();
     final selectedPeople = useState<Set<PersonDto>>(filter ?? {});
 
     return Column(
@@ -75,7 +74,7 @@ class PeoplePicker extends HookConsumerWidget {
                           elevation: 3,
                           child: CircleAvatar(
                             maxRadius: imageSize / 2,
-                            backgroundImage: NetworkImage(getFaceThumbnailUrl(person.id), headers: headers),
+                            backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
                           ),
                         ),
                       ),

mobile/lib/widgets/search/thumbnail_with_info.dart

@@ -1,8 +1,8 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/widgets/search/thumbnail_with_info_container.dart';
-import 'package:immich_mobile/services/api.service.dart';
 
 class ThumbnailWithInfo extends StatelessWidget {
   const ThumbnailWithInfo({
@@ -30,14 +30,7 @@ class ThumbnailWithInfo extends StatelessWidget {
       child: imageUrl != null
           ? ClipRRect(
               borderRadius: BorderRadius.circular(borderRadius),
-              child: CachedNetworkImage(
-                width: double.infinity,
-                height: double.infinity,
-                fit: BoxFit.cover,
-                imageUrl: imageUrl!,
-                httpHeaders: ApiService.getRequestHeaders(),
-                errorWidget: (context, url, error) => const Icon(Icons.image_not_supported_outlined),
-              ),
+              child: Thumbnail(imageProvider: RemoteImageProvider(url: imageUrl!)),
             )
           : Center(child: Icon(noImageIcon ?? Icons.not_listed_location, color: textAndIconColor)),
     );

mobile/pubspec.lock

@@ -201,30 +201,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "8.9.5"
-  cached_network_image:
-    dependency: "direct main"
-    description:
-      name: cached_network_image
-      sha256: "7c1183e361e5c8b0a0f21a28401eecdbde252441106a9816400dd4c2b2424916"
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.4.1"
-  cached_network_image_platform_interface:
-    dependency: transitive
-    description:
-      name: cached_network_image_platform_interface
-      sha256: "35814b016e37fbdc91f7ae18c8caf49ba5c88501813f73ce8a07027a395e2829"
-      url: "https://pub.dev"
-    source: hosted
-    version: "4.1.1"
-  cached_network_image_web:
-    dependency: transitive
-    description:
-      name: cached_network_image_web
-      sha256: "980842f4e8e2535b8dbd3d5ca0b1f0ba66bf61d14cc3a17a9b4788a3685ba062"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.3.1"
   cancellation_token:
     dependency: transitive
     description:
@@ -1249,10 +1225,10 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
+      sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
       url: "https://pub.dev"
     source: hosted
-    version: "1.16.0"
+    version: "1.17.0"
   mime:
     dependency: transitive
     description:
@@ -1942,10 +1918,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
+      sha256: ab2726c1a94d3176a45960b6234466ec367179b87dd74f1611adb1f3b5fb9d55
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.6"
+    version: "0.7.7"
   thumbhash:
     dependency: "direct main"
     description:

mobile/pubspec.yaml

@@ -12,7 +12,6 @@ dependencies:
   async: ^2.13.0
   auto_route: ^9.2.0
   background_downloader: ^9.3.0
-  cached_network_image: ^3.4.1
   cancellation_token_http: ^2.1.0
   cast: ^2.1.0
   collection: ^1.19.1

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -68,7 +68,11 @@
   let currentMemoryAssetFull = $derived.by(async () =>
     current?.asset ? await getAssetInfo({ ...authManager.params, id: current.asset.id }) : undefined,
   );
-  let currentTimelineAssets = $derived(current?.memory.assets || []);
+  let currentTimelineAssets = $derived([
+    ...(current?.previousMemory?.assets ?? []),
+    ...(current?.memory.assets ?? []),
+    ...(current?.nextMemory?.assets ?? []),
+  ]);
 
   let isSaved = $derived(current?.memory.isSaved);
   let viewerHeight = $state(0);