feat(mobile): Remote thumbnails and images use an on-disk image cache (#7929)

* Fixes remote full / thumbnail provider

* Adds image cache manager to both remote image providers

format

format

Fix typo in equals

remove unused import

renames image loader

* Adds height and width to the image cache for thumbs

format

* Uses a separate remote and thumbnail cache

format

* Fixes key name

* Changes uri to string, fixes comment

* Chunk events are optional and remote thumbnails don't report chunk events

* better exception handling

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

mobile/lib/modules/asset_viewer/image_providers/cache/image_loader.dart

@@ -0,0 +1,58 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+import 'package:immich_mobile/modules/asset_viewer/image_providers/exceptions/image_loading_exception.dart';
+import 'package:immich_mobile/shared/models/store.dart';
+
+/// Loads the codec from the URI and sends the events to the [chunkEvents] stream
+///
+/// Credit to [flutter_cached_network_image](https://github.com/Baseflow/flutter_cached_network_image/blob/develop/cached_network_image/lib/src/image_provider/_image_loader.dart)
+/// for this wonderful implementation of their image loader
+class ImageLoader {
+  static Future<ui.Codec> loadImageFromCache(
+    String uri, {
+    required ImageCacheManager cache,
+    required ImageDecoderCallback decode,
+    StreamController<ImageChunkEvent>? chunkEvents,
+    int? height,
+    int? width,
+  }) async {
+    final headers = {
+      'x-immich-user-token': Store.get(StoreKey.accessToken),
+    };
+
+    final stream = cache.getImageFile(
+      uri,
+      withProgress: true,
+      headers: headers,
+      maxHeight: height,
+      maxWidth: width,
+    );
+
+    await for (final result in stream) {
+      if (result is DownloadProgress) {
+        // We are downloading the file, so update the [chunkEvents]
+        chunkEvents?.add(
+          ImageChunkEvent(
+            cumulativeBytesLoaded: result.downloaded,
+            expectedTotalBytes: result.totalSize,
+          ),
+        );
+      }
+
+      if (result is FileInfo) {
+        // We have the file
+        final file = result.file;
+        final bytes = await file.readAsBytes();
+        final buffer = await ui.ImmutableBuffer.fromUint8List(bytes);
+        final decoded = await decode(buffer);
+        return decoded;
+      }
+    }
+
+    // If we get here, the image failed to load from the cache stream
+    throw ImageLoadingException('Could not load image from stream');
+  }
+}

mobile/lib/modules/asset_viewer/image_providers/cache/remote_image_cache_manager.dart

@@ -0,0 +1,20 @@
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+
+/// The cache manager for full size images [ImmichRemoteImageProvider]
+class RemoteImageCacheManager extends CacheManager with ImageCacheManager {
+  static const key = 'remoteImageCacheKey';
+  static final RemoteImageCacheManager _instance = RemoteImageCacheManager._();
+
+  factory RemoteImageCacheManager() {
+    return _instance;
+  }
+
+  RemoteImageCacheManager._()
+      : super(
+          Config(
+            key,
+            maxNrOfCacheObjects: 500,
+            stalePeriod: const Duration(days: 30),
+          ),
+        );
+}

mobile/lib/modules/asset_viewer/image_providers/cache/thumbnail_image_cache_manager.dart

@@ -0,0 +1,21 @@
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+
+/// The cache manager for thumbnail images [ImmichRemoteThumbnailProvider]
+class ThumbnailImageCacheManager extends CacheManager with ImageCacheManager {
+  static const key = 'thumbnailImageCacheKey';
+  static final ThumbnailImageCacheManager _instance =
+      ThumbnailImageCacheManager._();
+
+  factory ThumbnailImageCacheManager() {
+    return _instance;
+  }
+
+  ThumbnailImageCacheManager._()
+      : super(
+          Config(
+            key,
+            maxNrOfCacheObjects: 5000,
+            stalePeriod: const Duration(days: 30),
+          ),
+        );
+}