Source Code added

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

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
+import 'package:octo_image/octo_image.dart';
+
+class FullImage extends StatelessWidget {
+  const FullImage(
+    this.asset, {
+    required this.size,
+    this.fit = BoxFit.cover,
+    this.placeholder = const ThumbnailPlaceholder(),
+    super.key,
+  });
+
+  final BaseAsset asset;
+  final Size size;
+  final Widget? placeholder;
+  final BoxFit fit;
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = getFullImageProvider(asset, size: size);
+    return OctoImage(
+      fadeInDuration: const Duration(milliseconds: 0),
+      fadeOutDuration: const Duration(milliseconds: 100),
+      placeholderBuilder: placeholder != null ? (_) => placeholder! : null,
+      image: provider,
+      width: size.width,
+      height: size.height,
+      fit: fit,
+      errorBuilder: (context, error, stackTrace) {
+        provider.evict();
+        return const Icon(Icons.image_not_supported_outlined, size: 32);
+      },
+    );
+  }
+}

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

@@ -0,0 +1,141 @@
+import 'package:async/async.dart';
+import 'package:flutter/widgets.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/setting.model.dart';
+import 'package:immich_mobile/domain/services/setting.service.dart';
+import 'package:immich_mobile/infrastructure/loaders/image_request.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/timeline/constants.dart';
+import 'package:logging/logging.dart';
+
+abstract class CancellableImageProvider<T extends Object> extends ImageProvider<T> {
+  void cancel();
+}
+
+mixin CancellableImageProviderMixin<T extends Object> on CancellableImageProvider<T> {
+  static final _log = Logger('CancellableImageProviderMixin');
+
+  bool isCancelled = false;
+  ImageRequest? request;
+  CancelableOperation<ImageInfo?>? cachedOperation;
+
+  ImageInfo? getInitialImage(CancellableImageProvider provider) {
+    final completer = CancelableCompleter<ImageInfo?>(onCancel: provider.cancel);
+    final cachedStream = provider.resolve(const ImageConfiguration());
+    ImageInfo? cachedImage;
+    final listener = ImageStreamListener((image, synchronousCall) {
+      if (synchronousCall) {
+        cachedImage = image;
+      }
+
+      if (!completer.isCompleted) {
+        completer.complete(image);
+      }
+    }, onError: completer.completeError);
+
+    cachedStream.addListener(listener);
+    if (cachedImage != null) {
+      cachedStream.removeListener(listener);
+      return cachedImage;
+    }
+
+    completer.operation.valueOrCancellation().whenComplete(() {
+      cachedStream.removeListener(listener);
+      cachedOperation = null;
+    });
+    cachedOperation = completer.operation;
+    return null;
+  }
+
+  Stream<ImageInfo> loadRequest(ImageRequest request, ImageDecoderCallback decode) async* {
+    if (isCancelled) {
+      this.request = null;
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    try {
+      final image = await request.load(decode);
+      if (image == null || isCancelled) {
+        PaintingBinding.instance.imageCache.evict(this);
+        return;
+      }
+      yield image;
+    } finally {
+      this.request = null;
+    }
+  }
+
+  Stream<ImageInfo> initialImageStream() async* {
+    final cachedOperation = this.cachedOperation;
+    if (cachedOperation == null) {
+      return;
+    }
+
+    try {
+      final cachedImage = await cachedOperation.valueOrCancellation();
+      if (cachedImage != null && !isCancelled) {
+        yield cachedImage;
+      }
+    } catch (e, stack) {
+      _log.severe('Error loading initial image', e, stack);
+    } finally {
+      this.cachedOperation = null;
+    }
+  }
+
+  @override
+  void cancel() {
+    isCancelled = true;
+    final request = this.request;
+    if (request != null) {
+      this.request = null;
+      request.cancel();
+    }
+
+    final operation = cachedOperation;
+    if (operation != null) {
+      cachedOperation = null;
+      operation.cancel();
+    }
+  }
+}
+
+ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080, 1920)}) {
+  // Create new provider and cache it
+  final ImageProvider provider;
+  if (_shouldUseLocalAsset(asset)) {
+    final id = asset is LocalAsset ? asset.id : (asset as RemoteAsset).localId!;
+    provider = LocalFullImageProvider(id: id, size: size, assetType: asset.type);
+  } else {
+    final String assetId;
+    final String thumbhash;
+    if (asset is LocalAsset && asset.hasRemote) {
+      assetId = asset.remoteId!;
+      thumbhash = "";
+    } else if (asset is RemoteAsset) {
+      assetId = asset.id;
+      thumbhash = asset.thumbHash ?? "";
+    } else {
+      throw ArgumentError("Unsupported asset type: ${asset.runtimeType}");
+    }
+    provider = RemoteFullImageProvider(assetId: assetId, thumbhash: thumbhash, assetType: asset.type);
+  }
+
+  return provider;
+}
+
+ImageProvider? getThumbnailImageProvider(BaseAsset asset, {Size size = kThumbnailResolution}) {
+  if (_shouldUseLocalAsset(asset)) {
+    final id = asset is LocalAsset ? asset.id : (asset as RemoteAsset).localId!;
+    return LocalThumbProvider(id: id, size: size, assetType: asset.type);
+  }
+
+  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;
+}
+
+bool _shouldUseLocalAsset(BaseAsset asset) =>
+    asset.hasLocal && (!asset.hasRemote || !AppSetting.get(Setting.preferRemoteImage)) && !asset.isEdited;

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

@@ -0,0 +1,38 @@
+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/thumbnail.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
+
+class LocalAlbumThumbnail extends ConsumerWidget {
+  const LocalAlbumThumbnail({super.key, required this.albumId});
+
+  final String albumId;
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final localAlbumThumbnail = ref.watch(localAlbumThumbnailProvider(albumId));
+    return localAlbumThumbnail.when(
+      data: (data) {
+        if (data == null) {
+          return Container(
+            decoration: BoxDecoration(
+              color: context.colorScheme.surfaceContainer,
+              borderRadius: const BorderRadius.all(Radius.circular(16)),
+              border: Border.all(color: context.colorScheme.outline.withAlpha(50), width: 1),
+            ),
+            child: Icon(Icons.collections, size: 24, color: context.primaryColor),
+          );
+        }
+
+        return ClipRRect(
+          borderRadius: const BorderRadius.all(Radius.circular(16)),
+          child: Thumbnail.fromAsset(asset: data),
+        );
+      },
+      error: (error, stack) {
+        return const Icon(Icons.error, size: 24);
+      },
+      loading: () => const SizedBox(width: 24, height: 24, child: Center(child: CircularProgressIndicator())),
+    );
+  }
+}

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

@@ -0,0 +1,125 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/store.model.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/infrastructure/loaders/image_request.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+
+class LocalThumbProvider extends CancellableImageProvider<LocalThumbProvider>
+    with CancellableImageProviderMixin<LocalThumbProvider> {
+  final String id;
+  final Size size;
+  final AssetType assetType;
+
+  LocalThumbProvider({required this.id, required this.assetType, this.size = kThumbnailResolution});
+
+  @override
+  Future<LocalThumbProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(LocalThumbProvider key, ImageDecoderCallback decode) {
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<String>('Id', key.id),
+        DiagnosticsProperty<Size>('Size', key.size),
+      ],
+      onDispose: cancel,
+    );
+  }
+
+  Stream<ImageInfo> _codec(LocalThumbProvider key, ImageDecoderCallback decode) {
+    final request = this.request = LocalImageRequest(localId: key.id, size: key.size, assetType: key.assetType);
+    return loadRequest(request, decode);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is LocalThumbProvider) {
+      return id == other.id;
+    }
+    return false;
+  }
+
+  @override
+  int get hashCode => id.hashCode;
+}
+
+class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProvider>
+    with CancellableImageProviderMixin<LocalFullImageProvider> {
+  final String id;
+  final Size size;
+  final AssetType assetType;
+
+  LocalFullImageProvider({required this.id, required this.assetType, required this.size});
+
+  @override
+  Future<LocalFullImageProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(LocalFullImageProvider key, ImageDecoderCallback decode) {
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
+      initialImage: getInitialImage(LocalThumbProvider(id: key.id, assetType: key.assetType)),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
+        DiagnosticsProperty<String>('Id', key.id),
+        DiagnosticsProperty<Size>('Size', key.size),
+      ],
+      onDispose: cancel,
+    );
+  }
+
+  Stream<ImageInfo> _codec(LocalFullImageProvider key, ImageDecoderCallback decode) async* {
+    yield* initialImageStream();
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    final devicePixelRatio = PlatformDispatcher.instance.views.first.devicePixelRatio;
+    var request = this.request = LocalImageRequest(
+      localId: key.id,
+      size: Size(size.width * devicePixelRatio, size.height * devicePixelRatio),
+      assetType: key.assetType,
+    );
+
+    yield* loadRequest(request, decode);
+
+    if (!Store.get(StoreKey.loadOriginal, false)) {
+      return;
+    }
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    request = this.request = LocalImageRequest(localId: key.id, assetType: key.assetType, size: Size.zero);
+
+    yield* loadRequest(request, decode);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is LocalFullImageProvider) {
+      return id == other.id && size == other.size;
+    }
+    return false;
+  }
+
+  @override
+  int get hashCode => id.hashCode ^ size.hashCode;
+}

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

@@ -0,0 +1,51 @@
+// The below code is adapted from cached_network_image package's
+// MultiImageStreamCompleter to better suit one-frame image loading.
+// In particular, it allows providing an initial image to emit synchronously.
+
+import 'dart:async';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/painting.dart';
+
+/// An ImageStreamCompleter with support for loading multiple images.
+class OneFramePlaceholderImageStreamCompleter extends ImageStreamCompleter {
+  void Function()? _onDispose;
+
+  /// The constructor to create an OneFramePlaceholderImageStreamCompleter. The [images]
+  /// should be the primary images to display (typically asynchronously as they load).
+  /// The [initialImage] is an optional image that will be emitted synchronously
+  /// until the first stream image is completed, useful as a thumbnail or placeholder.
+  OneFramePlaceholderImageStreamCompleter(
+    Stream<ImageInfo> images, {
+    ImageInfo? initialImage,
+    InformationCollector? informationCollector,
+    void Function()? onDispose,
+  }) {
+    if (initialImage != null) {
+      setImage(initialImage);
+    }
+    _onDispose = onDispose;
+    images.listen(
+      setImage,
+      onError: (Object error, StackTrace stack) {
+        reportError(
+          context: ErrorDescription('resolving a single-frame image stream'),
+          exception: error,
+          stack: stack,
+          informationCollector: informationCollector,
+          silent: true,
+        );
+      },
+    );
+  }
+
+  @override
+  void onDisposed() {
+    final onDispose = _onDispose;
+    if (onDispose != null) {
+      _onDispose = null;
+      onDispose();
+    }
+    super.onDisposed();
+  }
+}

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

@@ -0,0 +1,125 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/painting.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/setting.model.dart';
+import 'package:immich_mobile/domain/services/setting.service.dart';
+import 'package:immich_mobile/infrastructure/loaders/image_request.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
+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;
+
+  RemoteThumbProvider({required this.assetId, required this.thumbhash});
+
+  @override
+  Future<RemoteThumbProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(RemoteThumbProvider key, ImageDecoderCallback decode) {
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
+        DiagnosticsProperty<String>('Asset Id', key.assetId),
+      ],
+      onDispose: cancel,
+    );
+  }
+
+  Stream<ImageInfo> _codec(RemoteThumbProvider key, ImageDecoderCallback decode) {
+    final request = this.request = RemoteImageRequest(
+      uri: getThumbnailUrlForRemoteId(key.assetId, thumbhash: key.thumbhash),
+      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;
+    }
+
+    return false;
+  }
+
+  @override
+  int get hashCode => assetId.hashCode ^ thumbhash.hashCode;
+}
+
+class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImageProvider>
+    with CancellableImageProviderMixin<RemoteFullImageProvider> {
+  final String assetId;
+  final String thumbhash;
+  final AssetType assetType;
+
+  RemoteFullImageProvider({required this.assetId, required this.thumbhash, required this.assetType});
+
+  @override
+  Future<RemoteFullImageProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(RemoteFullImageProvider key, ImageDecoderCallback decode) {
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
+      initialImage: getInitialImage(RemoteThumbProvider(assetId: key.assetId, thumbhash: key.thumbhash)),
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
+        DiagnosticsProperty<String>('Asset Id', key.assetId),
+      ],
+      onDispose: cancel,
+    );
+  }
+
+  Stream<ImageInfo> _codec(RemoteFullImageProvider key, ImageDecoderCallback decode) async* {
+    yield* initialImageStream();
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    final headers = ApiService.getRequestHeaders();
+    final previewRequest = request = RemoteImageRequest(
+      uri: getThumbnailUrlForRemoteId(key.assetId, type: AssetMediaSize.preview, thumbhash: key.thumbhash),
+      headers: headers,
+    );
+    yield* loadRequest(previewRequest, decode);
+
+    if (assetType != AssetType.image || !AppSetting.get(Setting.loadOriginal)) {
+      return;
+    }
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    final originalRequest = request = RemoteImageRequest(uri: getOriginalUrlForRemoteId(key.assetId), headers: headers);
+    yield* loadRequest(originalRequest, decode);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is RemoteFullImageProvider) {
+      return assetId == other.assetId && thumbhash == other.thumbhash;
+    }
+
+    return false;
+  }
+
+  @override
+  int get hashCode => assetId.hashCode ^ thumbhash.hashCode;
+}

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

@@ -0,0 +1,39 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/rendering.dart';
+import 'package:immich_mobile/infrastructure/loaders/image_request.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
+
+class ThumbHashProvider extends CancellableImageProvider<ThumbHashProvider>
+    with CancellableImageProviderMixin<ThumbHashProvider> {
+  final String thumbHash;
+
+  ThumbHashProvider({required this.thumbHash});
+
+  @override
+  Future<ThumbHashProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  ImageStreamCompleter loadImage(ThumbHashProvider key, ImageDecoderCallback decode) {
+    return OneFramePlaceholderImageStreamCompleter(_loadCodec(key, decode), onDispose: cancel);
+  }
+
+  Stream<ImageInfo> _loadCodec(ThumbHashProvider key, ImageDecoderCallback decode) {
+    final request = this.request = ThumbhashImageRequest(thumbhash: key.thumbHash);
+    return loadRequest(request, decode);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is ThumbHashProvider) {
+      return thumbHash == other.thumbHash;
+    }
+    return false;
+  }
+
+  @override
+  int get hashCode => thumbHash.hashCode;
+}

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

@@ -0,0 +1,384 @@
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/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/presentation/widgets/timeline/constants.dart';
+import 'package:logging/logging.dart';
+
+final log = Logger('ThumbnailWidget');
+
+enum ThumbhashMode { enabled, disabled, only }
+
+class Thumbnail extends StatefulWidget {
+  final ImageProvider? imageProvider;
+  final ImageProvider? thumbhashProvider;
+  final BoxFit fit;
+
+  const Thumbnail({this.imageProvider, this.fit = BoxFit.cover, this.thumbhashProvider, super.key});
+
+  Thumbnail.remote({
+    required String remoteId,
+    required String thumbhash,
+    this.fit = BoxFit.cover,
+    Size size = kThumbnailResolution,
+    super.key,
+  }) : imageProvider = RemoteThumbProvider(assetId: remoteId, thumbhash: thumbhash),
+       thumbhashProvider = null;
+
+  Thumbnail.fromAsset({
+    required BaseAsset? asset,
+    this.fit = BoxFit.cover,
+
+    /// The logical UI size of the thumbnail. This is only used to determine the ideal image resolution and does not affect the widget size.
+    Size size = kThumbnailResolution,
+    super.key,
+  }) : thumbhashProvider = switch (asset) {
+         RemoteAsset() when asset.thumbHash != null && asset.localId == null => ThumbHashProvider(
+           thumbHash: asset.thumbHash!,
+         ),
+         _ => null,
+       },
+       imageProvider = asset == null ? null : getThumbnailImageProvider(asset, size: size);
+
+  @override
+  State<Thumbnail> createState() => _ThumbnailState();
+}
+
+class _ThumbnailState extends State<Thumbnail> with SingleTickerProviderStateMixin {
+  ui.Image? _providerImage;
+  ui.Image? _previousImage;
+
+  late AnimationController _fadeController;
+  late Animation<double> _fadeAnimation;
+
+  ImageStream? _imageStream;
+  ImageStreamListener? _imageStreamListener;
+  ImageStream? _thumbhashStream;
+  ImageStreamListener? _thumbhashStreamListener;
+
+  static final _gradientCache = <ColorScheme, Gradient>{};
+
+  @override
+  void initState() {
+    super.initState();
+    _fadeController = AnimationController(duration: const Duration(milliseconds: 100), vsync: this);
+    _fadeAnimation = CurvedAnimation(parent: _fadeController, curve: Curves.easeOut);
+    _fadeController.addStatusListener(_onAnimationStatusChanged);
+    _loadImage();
+  }
+
+  void _onAnimationStatusChanged(AnimationStatus status) {
+    if (status == AnimationStatus.completed) {
+      _previousImage?.dispose();
+      _previousImage = null;
+    }
+  }
+
+  void _loadFromThumbhashProvider() {
+    _stopListeningToThumbhashStream();
+    final thumbhashProvider = widget.thumbhashProvider;
+    if (thumbhashProvider == null || _providerImage != null) return;
+
+    final thumbhashStream = _thumbhashStream = thumbhashProvider.resolve(ImageConfiguration.empty);
+    final thumbhashStreamListener = _thumbhashStreamListener = ImageStreamListener(
+      (ImageInfo imageInfo, bool synchronousCall) {
+        _stopListeningToThumbhashStream();
+        if (!mounted || _providerImage != null) {
+          imageInfo.dispose();
+          return;
+        }
+        _fadeController.value = 1.0;
+        setState(() {
+          _providerImage = imageInfo.image;
+        });
+      },
+      onError: (exception, stackTrace) {
+        log.severe('Error loading thumbhash', exception, stackTrace);
+        _stopListeningToThumbhashStream();
+      },
+    );
+    thumbhashStream.addListener(thumbhashStreamListener);
+  }
+
+  void _loadFromImageProvider() {
+    _stopListeningToImageStream();
+    final imageProvider = widget.imageProvider;
+    if (imageProvider == null) return;
+
+    final imageStream = _imageStream = imageProvider.resolve(ImageConfiguration.empty);
+    final imageStreamListener = _imageStreamListener = ImageStreamListener(
+      (ImageInfo imageInfo, bool synchronousCall) {
+        _stopListeningToThumbhashStream();
+        if (!mounted) {
+          imageInfo.dispose();
+          return;
+        }
+
+        if (_providerImage == imageInfo.image) {
+          return;
+        }
+
+        if ((synchronousCall && _providerImage == null) || !_isVisible()) {
+          _fadeController.value = 1.0;
+        } else if (_fadeController.isAnimating) {
+          _fadeController.forward();
+        } else {
+          _fadeController.forward(from: 0.0);
+        }
+
+        setState(() {
+          _previousImage?.dispose();
+          if (_providerImage != null) {
+            _previousImage = _providerImage;
+          } else {
+            _previousImage = null;
+          }
+          _providerImage = imageInfo.image;
+        });
+      },
+      onError: (exception, stackTrace) {
+        log.severe('Error loading image: $exception', exception, stackTrace);
+        _stopListeningToImageStream();
+      },
+    );
+    imageStream.addListener(imageStreamListener);
+  }
+
+  void _stopListeningToImageStream() {
+    if (_imageStreamListener != null && _imageStream != null) {
+      _imageStream!.removeListener(_imageStreamListener!);
+    }
+    _imageStream = null;
+    _imageStreamListener = null;
+  }
+
+  void _stopListeningToThumbhashStream() {
+    if (_thumbhashStreamListener != null && _thumbhashStream != null) {
+      _thumbhashStream!.removeListener(_thumbhashStreamListener!);
+    }
+    _thumbhashStream = null;
+    _thumbhashStreamListener = null;
+  }
+
+  void _stopListeningToStream() {
+    _stopListeningToImageStream();
+    _stopListeningToThumbhashStream();
+  }
+
+  @override
+  void didUpdateWidget(Thumbnail oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    if (widget.imageProvider != oldWidget.imageProvider) {
+      if (_fadeController.isAnimating) {
+        _fadeController.stop();
+        _previousImage?.dispose();
+        _previousImage = null;
+      }
+      _loadFromImageProvider();
+    }
+
+    if (_providerImage == null && oldWidget.thumbhashProvider != widget.thumbhashProvider) {
+      _loadFromThumbhashProvider();
+    }
+  }
+
+  @override
+  void reassemble() {
+    super.reassemble();
+    _loadImage();
+  }
+
+  void _loadImage() {
+    _loadFromImageProvider();
+    _loadFromThumbhashProvider();
+  }
+
+  bool _isVisible() {
+    final renderObject = context.findRenderObject() as RenderBox?;
+    if (renderObject == null || !renderObject.attached) return false;
+
+    final topLeft = renderObject.localToGlobal(Offset.zero);
+    final bottomRight = renderObject.localToGlobal(Offset(renderObject.size.width, renderObject.size.height));
+    return topLeft.dy < context.height && bottomRight.dy > 0;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = context.colorScheme;
+    final gradient = _gradientCache[colorScheme] ??= LinearGradient(
+      colors: [colorScheme.surfaceContainer, colorScheme.surfaceContainer.darken(amount: .1)],
+      begin: Alignment.topCenter,
+      end: Alignment.bottomCenter,
+    );
+
+    return AnimatedBuilder(
+      animation: _fadeAnimation,
+      builder: (context, child) {
+        return _ThumbnailLeaf(
+          image: _providerImage,
+          previousImage: _previousImage,
+          fadeValue: _fadeAnimation.value,
+          fit: widget.fit,
+          placeholderGradient: gradient,
+        );
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    final imageProvider = widget.imageProvider;
+    if (imageProvider is CancellableImageProvider) {
+      imageProvider.cancel();
+    }
+
+    final thumbhashProvider = widget.thumbhashProvider;
+    if (thumbhashProvider is CancellableImageProvider) {
+      thumbhashProvider.cancel();
+    }
+
+    _fadeController.removeStatusListener(_onAnimationStatusChanged);
+    _fadeController.dispose();
+    _stopListeningToStream();
+    _providerImage?.dispose();
+    _previousImage?.dispose();
+    super.dispose();
+  }
+}
+
+class _ThumbnailLeaf extends LeafRenderObjectWidget {
+  final ui.Image? image;
+  final ui.Image? previousImage;
+  final double fadeValue;
+  final BoxFit fit;
+  final Gradient placeholderGradient;
+
+  const _ThumbnailLeaf({
+    required this.image,
+    required this.previousImage,
+    required this.fadeValue,
+    required this.fit,
+    required this.placeholderGradient,
+  });
+
+  @override
+  RenderObject createRenderObject(BuildContext context) {
+    return _ThumbnailRenderBox(
+      image: image,
+      previousImage: previousImage,
+      fadeValue: fadeValue,
+      fit: fit,
+      placeholderGradient: placeholderGradient,
+    );
+  }
+
+  @override
+  void updateRenderObject(BuildContext context, _ThumbnailRenderBox renderObject) {
+    renderObject
+      ..image = image
+      ..previousImage = previousImage
+      ..fadeValue = fadeValue
+      ..fit = fit
+      ..placeholderGradient = placeholderGradient;
+  }
+}
+
+class _ThumbnailRenderBox extends RenderBox {
+  ui.Image? _image;
+  ui.Image? _previousImage;
+  double _fadeValue;
+  BoxFit _fit;
+  Gradient _placeholderGradient;
+
+  @override
+  bool isRepaintBoundary = true;
+
+  _ThumbnailRenderBox({
+    required ui.Image? image,
+    required ui.Image? previousImage,
+    required double fadeValue,
+    required BoxFit fit,
+    required Gradient placeholderGradient,
+  }) : _image = image,
+       _previousImage = previousImage,
+       _fadeValue = fadeValue,
+       _fit = fit,
+       _placeholderGradient = placeholderGradient;
+
+  @override
+  void paint(PaintingContext context, Offset offset) {
+    final rect = offset & size;
+    final canvas = context.canvas;
+
+    if (_previousImage != null && _fadeValue < 1.0) {
+      paintImage(
+        canvas: canvas,
+        rect: rect,
+        image: _previousImage!,
+        fit: _fit,
+        filterQuality: FilterQuality.low,
+        opacity: 1.0,
+      );
+    } else if (_image == null || _fadeValue < 1.0) {
+      final paint = Paint()..shader = _placeholderGradient.createShader(rect);
+      canvas.drawRect(rect, paint);
+    }
+
+    if (_image != null) {
+      paintImage(
+        canvas: canvas,
+        rect: rect,
+        image: _image!,
+        fit: _fit,
+        filterQuality: FilterQuality.low,
+        opacity: _fadeValue,
+      );
+    }
+  }
+
+  @override
+  void performLayout() {
+    size = constraints.biggest;
+  }
+
+  set image(ui.Image? value) {
+    if (_image != value) {
+      _image = value;
+      markNeedsPaint();
+    }
+  }
+
+  set previousImage(ui.Image? value) {
+    if (_previousImage != value) {
+      _previousImage = value;
+      markNeedsPaint();
+    }
+  }
+
+  set fadeValue(double value) {
+    if (_fadeValue != value) {
+      _fadeValue = value;
+      markNeedsPaint();
+    }
+  }
+
+  set fit(BoxFit value) {
+    if (_fit != value) {
+      _fit = value;
+      markNeedsPaint();
+    }
+  }
+
+  set placeholderGradient(Gradient value) {
+    if (_placeholderGradient != value) {
+      _placeholderGradient = value;
+      markNeedsPaint();
+    }
+  }
+}

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

@@ -0,0 +1,354 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/setting.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
+import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
+import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+
+class ThumbnailTile extends ConsumerStatefulWidget {
+  const ThumbnailTile(
+    this.asset, {
+    this.size = kThumbnailResolution,
+    this.fit = BoxFit.cover,
+    this.showStorageIndicator = false,
+    this.lockSelection = false,
+    this.heroOffset,
+    super.key,
+  });
+
+  final BaseAsset? asset;
+  final Size size;
+  final BoxFit fit;
+  final bool showStorageIndicator;
+  final bool lockSelection;
+  final int? heroOffset;
+
+  @override
+  ConsumerState<ThumbnailTile> createState() => _ThumbnailTileState();
+}
+
+class _ThumbnailTileState extends ConsumerState<ThumbnailTile> {
+  bool _hideIndicators = false;
+  bool _showSelectionContainer = false;
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final asset = widget.asset;
+    final heroIndex = widget.heroOffset ?? TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
+    final isCurrentAsset = ref.watch(assetViewerProvider.select((current) => current.currentAsset == asset));
+
+    final assetContainerColor = context.isDarkTheme
+        ? context.primaryColor.darken(amount: 0.4)
+        : context.primaryColor.lighten(amount: 0.75);
+
+    final isSelected = ref.watch(
+      multiSelectProvider.select((multiselect) => multiselect.selectedAssets.contains(asset)),
+    );
+
+    final bool storageIndicator =
+        ref.watch(settingsProvider.select((s) => s.get(Setting.showStorageIndicator))) && widget.showStorageIndicator;
+
+    if (!isCurrentAsset) {
+      _hideIndicators = false;
+    }
+
+    if (isSelected) {
+      _showSelectionContainer = true;
+    }
+
+    final uploadProgress = asset is LocalAsset
+        ? ref.watch(assetUploadProgressProvider.select((map) => map[asset.id]))
+        : null;
+
+    return Stack(
+      children: [
+        Container(
+          color: widget.lockSelection
+              ? context.colorScheme.surfaceContainerHighest
+              : _showSelectionContainer
+              ? assetContainerColor
+              : Colors.transparent,
+        ),
+        AnimatedContainer(
+          duration: Durations.short4,
+          curve: Curves.decelerate,
+          onEnd: () {
+            if (!isSelected) {
+              _showSelectionContainer = false;
+            }
+          },
+          padding: EdgeInsets.all(isSelected || widget.lockSelection ? 6 : 0),
+          child: TweenAnimationBuilder<double>(
+            tween: Tween<double>(begin: 0.0, end: (isSelected || widget.lockSelection) ? 15.0 : 0.0),
+            duration: Durations.short4,
+            curve: Curves.decelerate,
+            builder: (context, value, child) {
+              return ClipRRect(borderRadius: BorderRadius.all(Radius.circular(value)), child: child);
+            },
+            child: Stack(
+              children: [
+                Positioned.fill(
+                  child: Hero(
+                    // This key resets the hero animation when the asset is changed in the asset viewer.
+                    // It doesn't seem like the best solution, and only works to reset the hero, not prime the hero of the new active asset for animation,
+                    // but other solutions have failed thus far.
+                    key: ValueKey(isCurrentAsset),
+                    tag: '${asset?.heroTag}_$heroIndex',
+                    child: Thumbnail.fromAsset(asset: asset, size: widget.size),
+                    // Placeholderbuilder used to hide indicators on first hero animation, since flightShuttleBuilder isn't called until both source and destination hero exist in widget tree.
+                    placeholderBuilder: (context, heroSize, child) {
+                      if (!_hideIndicators) {
+                        WidgetsBinding.instance.addPostFrameCallback((_) {
+                          setState(() => _hideIndicators = true);
+                        });
+                      }
+                      return const SizedBox();
+                    },
+                    flightShuttleBuilder: (context, animation, direction, from, to) {
+                      void animationStatusListener(AnimationStatus status) {
+                        final heroInFlight = status == AnimationStatus.forward || status == AnimationStatus.reverse;
+                        if (_hideIndicators != heroInFlight) {
+                          setState(() => _hideIndicators = heroInFlight);
+                        }
+                        if (status == AnimationStatus.completed || status == AnimationStatus.dismissed) {
+                          animation.removeStatusListener(animationStatusListener);
+                        }
+                      }
+
+                      animation.addStatusListener(animationStatusListener);
+                      return to.widget;
+                    },
+                  ),
+                ),
+                if (asset != null)
+                  AnimatedOpacity(
+                    opacity: _hideIndicators ? 0.0 : 1.0,
+                    duration: Durations.short4,
+                    child: Align(
+                      alignment: Alignment.topRight,
+                      child: _AssetTypeIcons(asset: asset),
+                    ),
+                  ),
+                if (storageIndicator && asset != null)
+                  AnimatedOpacity(
+                    opacity: _hideIndicators ? 0.0 : 1.0,
+                    duration: Durations.short4,
+                    child: switch (asset.storage) {
+                      AssetState.local => const Align(
+                        alignment: Alignment.bottomRight,
+                        child: Padding(
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          child: _TileOverlayIcon(Icons.cloud_off_outlined),
+                        ),
+                      ),
+                      AssetState.remote => const Align(
+                        alignment: Alignment.bottomRight,
+                        child: Padding(
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          child: _TileOverlayIcon(Icons.cloud_outlined),
+                        ),
+                      ),
+                      AssetState.merged => const Align(
+                        alignment: Alignment.bottomRight,
+                        child: Padding(
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          child: _TileOverlayIcon(Icons.cloud_done_outlined),
+                        ),
+                      ),
+                    },
+                  ),
+
+                if (asset != null && asset.isFavorite)
+                  AnimatedOpacity(
+                    duration: Durations.short4,
+                    opacity: _hideIndicators ? 0.0 : 1.0,
+                    child: const Align(
+                      alignment: Alignment.bottomLeft,
+                      child: Padding(
+                        padding: EdgeInsets.only(left: 10.0, bottom: 6.0),
+                        child: _TileOverlayIcon(Icons.favorite_rounded),
+                      ),
+                    ),
+                  ),
+                if (uploadProgress != null) _UploadProgressOverlay(progress: uploadProgress),
+              ],
+            ),
+          ),
+        ),
+        TweenAnimationBuilder<double>(
+          tween: Tween<double>(begin: 0.0, end: (isSelected || widget.lockSelection) ? 1.0 : 0.0),
+          duration: Durations.short4,
+          curve: Curves.decelerate,
+          builder: (context, value, child) {
+            return Padding(
+              padding: EdgeInsets.all((isSelected || widget.lockSelection) ? value * 3.0 : 3.0),
+              child: Align(
+                alignment: Alignment.topLeft,
+                child: Opacity(
+                  opacity: (isSelected || widget.lockSelection) ? 1 : value,
+                  child: _SelectionIndicator(
+                    isLocked: widget.lockSelection,
+                    color: widget.lockSelection ? context.colorScheme.surfaceContainerHighest : assetContainerColor,
+                  ),
+                ),
+              ),
+            );
+          },
+        ),
+      ],
+    );
+  }
+}
+
+class _SelectionIndicator extends StatelessWidget {
+  final bool isLocked;
+  final Color? color;
+
+  const _SelectionIndicator({required this.isLocked, this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    if (isLocked) {
+      return DecoratedBox(
+        decoration: BoxDecoration(shape: BoxShape.circle, color: color),
+        child: const Icon(Icons.check_circle_rounded, color: Colors.grey),
+      );
+    } else {
+      return DecoratedBox(
+        decoration: BoxDecoration(shape: BoxShape.circle, color: color),
+        child: Icon(Icons.check_circle_rounded, color: context.primaryColor),
+      );
+    }
+  }
+}
+
+class _VideoIndicator extends StatelessWidget {
+  final Duration duration;
+  const _VideoIndicator(this.duration);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      spacing: 3,
+      mainAxisSize: MainAxisSize.min,
+      mainAxisAlignment: MainAxisAlignment.end,
+      // CrossAxisAlignment.start looks more centered vertically than CrossAxisAlignment.center
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          duration.format(),
+          style: const TextStyle(
+            color: Colors.white,
+            fontSize: 12,
+            fontWeight: FontWeight.bold,
+            shadows: [Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6))],
+          ),
+        ),
+        const _TileOverlayIcon(Icons.play_circle_outline_rounded),
+      ],
+    );
+  }
+}
+
+class _TileOverlayIcon extends StatelessWidget {
+  final IconData icon;
+
+  const _TileOverlayIcon(this.icon);
+
+  @override
+  Widget build(BuildContext context) {
+    return Icon(
+      icon,
+      color: Colors.white,
+      size: 16,
+      shadows: [const Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6), offset: Offset(0.0, 0.0))],
+    );
+  }
+}
+
+class _AssetTypeIcons extends StatelessWidget {
+  final BaseAsset asset;
+
+  const _AssetTypeIcons({required this.asset});
+
+  @override
+  Widget build(BuildContext context) {
+    final hasStack = asset is RemoteAsset && (asset as RemoteAsset).stackId != null;
+    final isLivePhoto = asset is RemoteAsset && asset.livePhotoVideoId != null;
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.end,
+      children: [
+        if (asset.isVideo)
+          Padding(padding: const EdgeInsets.only(right: 10.0, top: 6.0), child: _VideoIndicator(asset.duration)),
+        if (hasStack)
+          const Padding(
+            padding: EdgeInsets.only(right: 10.0, top: 6.0),
+            child: _TileOverlayIcon(Icons.burst_mode_rounded),
+          ),
+        if (isLivePhoto)
+          const Padding(
+            padding: EdgeInsets.only(right: 10.0, top: 6.0),
+            child: _TileOverlayIcon(Icons.motion_photos_on_rounded),
+          ),
+      ],
+    );
+  }
+}
+
+class _UploadProgressOverlay extends StatelessWidget {
+  final double progress;
+
+  const _UploadProgressOverlay({required this.progress});
+
+  @override
+  Widget build(BuildContext context) {
+    final isError = progress < 0;
+    final percentage = isError ? 0 : (progress * 100).toInt();
+
+    return Positioned.fill(
+      child: Container(
+        color: isError ? Colors.red.withValues(alpha: 0.6) : Colors.black54,
+        child: Center(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              if (isError)
+                const Icon(Icons.error_outline, color: Colors.white, size: 36)
+              else
+                SizedBox(
+                  width: 36,
+                  height: 36,
+                  child: CircularProgressIndicator(
+                    value: progress,
+                    strokeWidth: 3,
+                    backgroundColor: Colors.white24,
+                    valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
+                  ),
+                ),
+              const SizedBox(height: 4),
+              Text(
+                isError ? 'Error' : '$percentage%',
+                style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}