buttery hero animations

mobile/lib/constants/constants.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 const int noDbId = -9223372036854775808; // from Isar
 const double downloadCompleted = -1;
 const double downloadFailed = -2;
@@ -28,8 +30,8 @@ const String kDownloadGroupLivePhoto = 'group_livephoto';
 const int kTimelineNoneSegmentSize = 120;
 const int kTimelineAssetLoadBatchSize = 1024;
 const int kTimelineAssetLoadOppositeSize = 64;
-const double kTimelineThumbnailTileSize = 256.0;
-const double kTimelineThumbnailSize = 384.0;
+const Size kTimelineThumbnailTileSize = Size.square(256.0);
+const Size kTimelineThumbnailSize = Size.square(384.0);
 const int kTimelineImageCacheMemory = 250 * 1024 * 1024;
 
 // Widget keys

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -472,10 +472,8 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     if (stackChildren != null && stackChildren.isNotEmpty) {
       asset = stackChildren.elementAt(ref.read(assetViewerProvider.select((s) => s.stackIndex)));
     }
-    return Container(
-      width: double.infinity,
-      height: double.infinity,
-      color: backgroundColor,
+    return Hero(
+      tag: '${asset.heroTag}_$heroOffset',
       child: Thumbnail.fromBaseAsset(asset: asset, fit: BoxFit.contain),
     );
   }

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

@@ -3,7 +3,9 @@ import 'dart:ui';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
+import 'package:immich_mobile/constants/constants.dart';
 import 'package:immich_mobile/infrastructure/repositories/asset_media.repository.dart';
+import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
 
 class LocalThumbProvider extends ImageProvider<LocalThumbProvider> {
   static const _assetMediaRepository = AssetMediaRepository();
@@ -11,7 +13,7 @@ class LocalThumbProvider extends ImageProvider<LocalThumbProvider> {
   final String id;
   final Size size;
 
-  const LocalThumbProvider({required this.id, required this.size});
+  const LocalThumbProvider({required this.id, this.size = kTimelineThumbnailSize});
 
   @override
   Future<LocalThumbProvider> obtainKey(ImageConfiguration configuration) {
@@ -62,16 +64,45 @@ class LocalFullImageProvider extends ImageProvider<LocalFullImageProvider> {
 
   @override
   ImageStreamCompleter loadImage(LocalFullImageProvider key, ImageDecoderCallback decode) {
-    return OneFrameImageStreamCompleter(_codec(key));
+    ImageInfo? thumbnail;
+    final thumbnailProvider = LocalThumbProvider(id: key.id);
+
+    final ImageStreamCompleter? stream = PaintingBinding.instance.imageCache.putIfAbsent(
+      thumbnailProvider,
+      () => throw Exception(), // don't bother loading the thumbnail if it isn't cacched
+    );
+
+    if (stream != null) {
+      void listener(ImageInfo info, bool synchronousCall) {
+        thumbnail = info;
+      }
+
+      try {
+        stream.addListener(ImageStreamListener(listener));
+      } finally {
+        stream.removeListener(ImageStreamListener(listener));
+      }
+    }
+
+    return OneFramePlaceholderImageStreamCompleter(
+      _codec(key, decode),
+      initialImage: thumbnail,
+      informationCollector: () => <DiagnosticsNode>[
+        DiagnosticsProperty<ImageProvider>('Image provider', this),
+        DiagnosticsProperty<String>('Id', key.id),
+        DiagnosticsProperty<Size>('Size', key.size),
+      ],
+    );
   }
 
-  Future<ImageInfo> _codec(LocalFullImageProvider key) async {
+  Future<ImageInfo> _codec(LocalFullImageProvider key, ImageDecoderCallback decode) async {
     final devicePixelRatio = PlatformDispatcher.instance.views.first.devicePixelRatio;
     final codec = await _assetMediaRepository.getLocalThumbnail(
       key.id,
       Size(size.width * devicePixelRatio, size.height * devicePixelRatio),
     );
-    return ImageInfo(image: (await codec.getNextFrame()).image, scale: 1.0);
+    final frame = await codec.getNextFrame();
+    return ImageInfo(image: frame.image, scale: 1.0);
   }
 
   @override

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

@@ -29,7 +29,7 @@ class Thumbnail extends StatefulWidget {
   const Thumbnail({
     this.imageProvider,
     this.fit = BoxFit.cover,
-    this.size = const ui.Size.square(kTimelineThumbnailSize),
+    this.size = kTimelineThumbnailSize,
     this.blurhash,
     this.thumbhashMode = ThumbhashMode.enabled,
     super.key,
@@ -38,7 +38,7 @@ class Thumbnail extends StatefulWidget {
   Thumbnail.fromAsset({
     required Asset asset,
     this.fit = BoxFit.cover,
-    this.size = const ui.Size.square(kTimelineThumbnailSize),
+    this.size = kTimelineThumbnailSize,
     this.thumbhashMode = ThumbhashMode.enabled,
     super.key,
   }) : blurhash = asset.thumbhash,
@@ -47,7 +47,7 @@ class Thumbnail extends StatefulWidget {
   Thumbnail.fromBaseAsset({
     required BaseAsset? asset,
     this.fit = BoxFit.cover,
-    this.size = const ui.Size.square(kTimelineThumbnailSize),
+    this.size = kTimelineThumbnailSize,
     this.thumbhashMode = ThumbhashMode.enabled,
     super.key,
   }) : blurhash = switch (asset) {

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

@@ -15,7 +15,7 @@ import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 class ThumbnailTile extends ConsumerWidget {
   const ThumbnailTile(
     this.asset, {
-    this.size = const Size.square(kTimelineThumbnailTileSize),
+    this.size = kTimelineThumbnailTileSize,
     this.fit = BoxFit.cover,
     this.showStorageIndicator,
     this.lockSelection = false,