Source Code added

mobile/lib/providers/image/cache/image_loader.dart

@@ -0,0 +1,40 @@
+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/providers/image/exceptions/image_loading_exception.dart';
+import 'package:immich_mobile/services/api.service.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 CacheManager cache,
+    required ImageDecoderCallback decode,
+    StreamController<ImageChunkEvent>? chunkEvents,
+  }) async {
+    final headers = ApiService.getRequestHeaders();
+
+    final stream = cache.getFileStream(uri, withProgress: chunkEvents != null, headers: headers);
+
+    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),
+        );
+      } else if (result is FileInfo) {
+        // We have the file
+        final buffer = await ui.ImmutableBuffer.fromFilePath(result.file.path);
+        return decode(buffer);
+      }
+    }
+
+    // If we get here, the image failed to load from the cache stream
+    throw const ImageLoadingException('Could not load image from stream');
+  }
+}

mobile/lib/providers/image/cache/remote_image_cache_manager.dart

@@ -0,0 +1,25 @@
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+
+class RemoteImageCacheManager extends CacheManager {
+  static const key = 'remoteImageCacheKey';
+  static final RemoteImageCacheManager _instance = RemoteImageCacheManager._();
+  static final _config = Config(key, maxNrOfCacheObjects: 500, stalePeriod: const Duration(days: 30));
+
+  factory RemoteImageCacheManager() {
+    return _instance;
+  }
+
+  RemoteImageCacheManager._() : super(_config);
+}
+
+class RemoteThumbnailCacheManager extends CacheManager {
+  static const key = 'remoteThumbnailCacheKey';
+  static final RemoteThumbnailCacheManager _instance = RemoteThumbnailCacheManager._();
+  static final _config = Config(key, maxNrOfCacheObjects: 5000, stalePeriod: const Duration(days: 30));
+
+  factory RemoteThumbnailCacheManager() {
+    return _instance;
+  }
+
+  RemoteThumbnailCacheManager._() : super(_config);
+}

mobile/lib/providers/image/cache/thumbnail_image_cache_manager.dart

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

mobile/lib/providers/image/exceptions/image_loading_exception.dart

@@ -0,0 +1,5 @@
+/// An exception for the [ImageLoader] and the Immich image providers
+class ImageLoadingException implements Exception {
+  final String message;
+  const ImageLoadingException(this.message);
+}

mobile/lib/providers/image/immich_local_image_provider.dart

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,61 @@
+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;
+}