Better caching for mobile (#521)

* Use custom caches in all modules

* Cache Settings

* Fix wrong key

* Create custom cache repository based on hive

* Show cache usage in settings

* Show cache sizes

* Change settings ranges and default value

* Handle cache clear by operating system

* Resolve review comments

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

@@ -1,6 +1,7 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_cache_manager/flutter_cache_manager.dart';
 import 'package:photo_view/photo_view.dart';
 
 enum _RemoteImageStatus { empty, thumbnail, preview, full }
@@ -63,11 +64,13 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
     widget.onLoadingCompleted();
   }
 
-  CachedNetworkImageProvider _authorizedImageProvider(String url) {
+  CachedNetworkImageProvider _authorizedImageProvider(
+      String url, String cacheKey, BaseCacheManager? cacheManager) {
     return CachedNetworkImageProvider(
       url,
       headers: {"Authorization": widget.authToken},
-      cacheKey: url,
+      cacheKey: cacheKey,
+      cacheManager: cacheManager,
     );
   }
 
@@ -101,8 +104,11 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
   }
 
   void _loadImages() {
-    CachedNetworkImageProvider thumbnailProvider =
-        _authorizedImageProvider(widget.thumbnailUrl);
+    CachedNetworkImageProvider thumbnailProvider = _authorizedImageProvider(
+      widget.thumbnailUrl,
+      widget.cacheKey,
+      widget.thumbnailCacheManager,
+    );
     _imageProvider = thumbnailProvider;
 
     thumbnailProvider.resolve(const ImageConfiguration()).addListener(
@@ -115,8 +121,11 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
     );
 
     if (widget.previewUrl != null) {
-      CachedNetworkImageProvider previewProvider =
-          _authorizedImageProvider(widget.previewUrl!);
+      CachedNetworkImageProvider previewProvider = _authorizedImageProvider(
+        widget.previewUrl!,
+        "${widget.cacheKey}_previewStage",
+        widget.previewCacheManager,
+      );
       previewProvider.resolve(const ImageConfiguration()).addListener(
         ImageStreamListener((ImageInfo imageInfo, _) {
           _performStateTransition(_RemoteImageStatus.preview, previewProvider);
@@ -124,8 +133,11 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
       );
     }
 
-    CachedNetworkImageProvider fullProvider =
-        _authorizedImageProvider(widget.imageUrl);
+    CachedNetworkImageProvider fullProvider = _authorizedImageProvider(
+      widget.imageUrl,
+      "${widget.cacheKey}_fullStage",
+      widget.fullCacheManager,
+    );
     fullProvider.resolve(const ImageConfiguration()).addListener(
       ImageStreamListener((ImageInfo imageInfo, _) {
         _performStateTransition(_RemoteImageStatus.full, fullProvider);
@@ -153,6 +165,10 @@ class RemotePhotoView extends StatefulWidget {
     this.previewUrl,
     required this.onLoadingCompleted,
     required this.onLoadingStart,
+    this.thumbnailCacheManager,
+    this.previewCacheManager,
+    this.fullCacheManager,
+    required this.cacheKey,
   }) : super(key: key);
 
   final String thumbnailUrl;
@@ -161,6 +177,10 @@ class RemotePhotoView extends StatefulWidget {
   final String? previewUrl;
   final Function onLoadingCompleted;
   final Function onLoadingStart;
+  final BaseCacheManager? thumbnailCacheManager;
+  final BaseCacheManager? previewCacheManager;
+  final BaseCacheManager? fullCacheManager;
+  final String cacheKey;
 
   final void Function() onSwipeDown;
   final void Function() onSwipeUp;

mobile/lib/modules/asset_viewer/views/image_viewer_page.dart

@@ -8,6 +8,7 @@ import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator
 import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/remote_photo_view.dart';
 import 'package:immich_mobile/modules/home/services/asset.service.dart';
+import 'package:immich_mobile/shared/services/cache.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:openapi/api.dart';
 
@@ -40,6 +41,7 @@ class ImageViewerPage extends HookConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final downloadAssetStatus =
         ref.watch(imageViewerStateProvider).downloadAssetStatus;
+    final cacheService = ref.watch(cacheServiceProvider);
 
     getAssetExif() async {
       assetDetail =
@@ -73,6 +75,7 @@ class ImageViewerPage extends HookConsumerWidget {
             tag: heroTag,
             child: RemotePhotoView(
               thumbnailUrl: getThumbnailUrl(asset),
+              cacheKey: asset.id,
               imageUrl: getImageUrl(asset),
               previewUrl: threeStageLoading
                   ? getThumbnailUrl(asset, type: ThumbnailFormat.JPEG)
@@ -84,6 +87,12 @@ class ImageViewerPage extends HookConsumerWidget {
               onSwipeUp: () => showInfo(),
               onLoadingCompleted: onLoadingCompleted,
               onLoadingStart: onLoadingStart,
+              thumbnailCacheManager:
+                  cacheService.getCache(CacheType.thumbnail),
+              previewCacheManager:
+                  cacheService.getCache(CacheType.imageViewerPreview),
+              fullCacheManager:
+                  cacheService.getCache(CacheType.imageViewerFull),
             ),
           ),
         ),