feat(mobile): enable zoom of preview images & reuse cached thumbnails (#1049)

mobile/lib/modules/album/ui/album_thumbnail_card.dart

@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:auto_route/auto_route.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -41,7 +39,6 @@ class AlbumThumbnailCard extends StatelessWidget {
 
     buildAlbumThumbnail() {
       return CachedNetworkImage(
-        memCacheHeight: max(400, cardSize.toInt() * 3),
         width: cardSize,
         height: cardSize,
         fit: BoxFit.cover,
@@ -51,7 +48,7 @@ class AlbumThumbnailCard extends StatelessWidget {
           type: ThumbnailFormat.JPEG,
         ),
         httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
-        cacheKey: "${album.albumThumbnailAssetId}",
+        cacheKey: getAlbumThumbNailCacheKey(album, type: ThumbnailFormat.JPEG),
       );
     }
 

mobile/lib/modules/album/views/sharing_page.dart

@@ -42,10 +42,9 @@ class SharingPage extends HookConsumerWidget {
                 child: CachedNetworkImage(
                   width: 60,
                   height: 60,
-                  memCacheHeight: 200,
                   fit: BoxFit.cover,
                   imageUrl: getAlbumThumbnailUrl(album),
-                  cacheKey: album.albumThumbnailAssetId,
+                  cacheKey: getAlbumThumbNailCacheKey(album),
                   httpHeaders: {
                     "Authorization": "Bearer ${box.get(accessTokenKey)}"
                   },

mobile/lib/modules/asset_viewer/ui/remote_photo_view.dart

@@ -20,10 +20,10 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
 
   @override
   Widget build(BuildContext context) {
-    bool allowMoving = _status == _RemoteImageStatus.full;
+    final bool forbidZoom = _status == _RemoteImageStatus.thumbnail;
 
     return IgnorePointer(
-      ignoring: !allowMoving,
+      ignoring: forbidZoom,
       child: Listener(
         onPointerMove: handleSwipUpDown,
         child: PhotoView(
@@ -115,7 +115,7 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
 
     _thumbnailProvider = _authorizedImageProvider(
       getThumbnailUrl(widget.asset.remote!),
-      widget.asset.id,
+      getThumbnailCacheKey(widget.asset.remote!),
     );
     _imageProvider = _thumbnailProvider;
 
@@ -131,7 +131,7 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
     if (widget.loadPreview) {
       _previewProvider = _authorizedImageProvider(
         getThumbnailUrl(widget.asset.remote!, type: ThumbnailFormat.JPEG),
-        "${widget.asset.id}_previewStage",
+        getThumbnailCacheKey(widget.asset.remote!, type: ThumbnailFormat.JPEG),
       );
       _previewProvider.resolve(const ImageConfiguration()).addListener(
         ImageStreamListener((ImageInfo imageInfo, _) {
@@ -143,7 +143,7 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
     if (widget.loadOriginal) {
       _fullProvider = _authorizedImageProvider(
         getImageUrl(widget.asset.remote!),
-        "${widget.asset.id}_fullStage",
+        getImageCacheKey(widget.asset.remote!),
       );
       _fullProvider.resolve(const ImageConfiguration()).addListener(
         ImageStreamListener((ImageInfo imageInfo, _) {

mobile/lib/modules/home/ui/control_bottom_app_bar.dart

@@ -75,14 +75,11 @@ class ControlBottomAppBar extends ConsumerWidget {
                       width: 100,
                       height: 100,
                       fit: BoxFit.cover,
-                      imageUrl: getAlbumThumbnailUrl(
-                        album,
-                        type: ThumbnailFormat.JPEG,
-                      ),
+                      imageUrl: getAlbumThumbnailUrl(album),
                       httpHeaders: {
                         "Authorization": "Bearer ${box.get(accessTokenKey)}"
                       },
-                      cacheKey: "${album.albumThumbnailAssetId}",
+                      cacheKey: getAlbumThumbNailCacheKey(album),
                     ),
                   ),
                   Padding(

mobile/lib/shared/ui/immich_image.dart

@@ -62,7 +62,7 @@ class ImmichImage extends StatelessWidget {
     return CachedNetworkImage(
       imageUrl: thumbnailRequestUrl,
       httpHeaders: {"Authorization": "Bearer $token"},
-      cacheKey: 'thumbnail-image-${asset.id}',
+      cacheKey: getThumbnailCacheKey(asset.remote!),
       width: width,
       height: height,
       // keeping memCacheWidth, memCacheHeight, maxWidthDiskCache and

mobile/lib/utils/image_url_builder.dart

@@ -10,6 +10,19 @@ String getThumbnailUrl(
   return _getThumbnailUrl(asset.id, type: type);
 }
 
+String getThumbnailCacheKey(final AssetResponseDto asset,
+    {ThumbnailFormat type = ThumbnailFormat.WEBP}) {
+  return _getThumbnailCacheKey(asset.id, type);
+}
+
+String _getThumbnailCacheKey(final String id, final ThumbnailFormat type) {
+  if (type == ThumbnailFormat.WEBP) {
+    return 'thumbnail-image-$id';
+  } else {
+    return '${id}_previewStage';
+  }
+}
+
 String getAlbumThumbnailUrl(
   final AlbumResponseDto album, {
   ThumbnailFormat type = ThumbnailFormat.WEBP,
@@ -20,11 +33,25 @@ String getAlbumThumbnailUrl(
   return _getThumbnailUrl(album.albumThumbnailAssetId!, type: type);
 }
 
+String getAlbumThumbNailCacheKey(
+  final AlbumResponseDto album, {
+  ThumbnailFormat type = ThumbnailFormat.WEBP,
+}) {
+  if (album.albumThumbnailAssetId == null) {
+    return '';
+  }
+  return _getThumbnailCacheKey(album.albumThumbnailAssetId!, type);
+}
+
 String getImageUrl(final AssetResponseDto asset) {
   final box = Hive.box(userInfoBox);
   return '${box.get(serverEndpointKey)}/asset/file/${asset.id}?isThumb=false';
 }
 
+String getImageCacheKey(final AssetResponseDto asset) {
+  return '${asset.id}_fullStage';
+}
+
 String _getThumbnailUrl(
   final String id, {
   ThumbnailFormat type = ThumbnailFormat.WEBP,