mirror of
				https://github.com/KevinMidboe/immich.git
				synced 2025-10-29 17:40:28 +00:00 
			
		
		
		
	Use CachedNetworkImage and separate cache for thumbnails on library page (#509)
* Use CachedNetworkImage and separate cache for thumbnails on library page * Use caching for shared albums as well * Introduce cache service
This commit is contained in:
		@@ -1,4 +1,5 @@
 | 
			
		||||
import 'package:auto_route/auto_route.dart';
 | 
			
		||||
import 'package:cached_network_image/cached_network_image.dart';
 | 
			
		||||
import 'package:easy_localization/easy_localization.dart';
 | 
			
		||||
import 'package:flutter/material.dart';
 | 
			
		||||
import 'package:flutter_hooks/flutter_hooks.dart';
 | 
			
		||||
@@ -8,8 +9,9 @@ import 'package:immich_mobile/constants/hive_box.dart';
 | 
			
		||||
import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
 | 
			
		||||
import 'package:immich_mobile/modules/album/ui/sharing_sliver_appbar.dart';
 | 
			
		||||
import 'package:immich_mobile/routing/router.dart';
 | 
			
		||||
import 'package:immich_mobile/shared/services/cache.service.dart';
 | 
			
		||||
import 'package:immich_mobile/utils/image_url_builder.dart';
 | 
			
		||||
import 'package:openapi/api.dart';
 | 
			
		||||
import 'package:transparent_image/transparent_image.dart';
 | 
			
		||||
 | 
			
		||||
class SharingPage extends HookConsumerWidget {
 | 
			
		||||
  const SharingPage({Key? key}) : super(key: key);
 | 
			
		||||
@@ -19,6 +21,7 @@ class SharingPage extends HookConsumerWidget {
 | 
			
		||||
    var box = Hive.box(userInfoBox);
 | 
			
		||||
    var thumbnailRequestUrl = '${box.get(serverEndpointKey)}/asset/thumbnail';
 | 
			
		||||
    final List<AlbumResponseDto> sharedAlbums = ref.watch(sharedAlbumProvider);
 | 
			
		||||
    final CacheService cacheService = ref.watch(cacheServiceProvider);
 | 
			
		||||
 | 
			
		||||
    useEffect(
 | 
			
		||||
      () {
 | 
			
		||||
@@ -32,29 +35,26 @@ class SharingPage extends HookConsumerWidget {
 | 
			
		||||
      return SliverList(
 | 
			
		||||
        delegate: SliverChildBuilderDelegate(
 | 
			
		||||
          (BuildContext context, int index) {
 | 
			
		||||
            String thumbnailUrl = sharedAlbums[index].albumThumbnailAssetId !=
 | 
			
		||||
                    null
 | 
			
		||||
                ? "$thumbnailRequestUrl/${sharedAlbums[index].albumThumbnailAssetId}"
 | 
			
		||||
                : "https://images.unsplash.com/photo-1612178537253-bccd437b730e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Ymxhbmt8ZW58MHx8MHx8&auto=format&fit=crop&w=700&q=60";
 | 
			
		||||
            final album = sharedAlbums[index];
 | 
			
		||||
 | 
			
		||||
            return ListTile(
 | 
			
		||||
              contentPadding:
 | 
			
		||||
                  const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
 | 
			
		||||
              leading: ClipRRect(
 | 
			
		||||
                borderRadius: BorderRadius.circular(8),
 | 
			
		||||
                child: FadeInImage(
 | 
			
		||||
                child: CachedNetworkImage(
 | 
			
		||||
                  width: 60,
 | 
			
		||||
                  height: 60,
 | 
			
		||||
                  memCacheHeight: 200,
 | 
			
		||||
                  fit: BoxFit.cover,
 | 
			
		||||
                  placeholder: MemoryImage(kTransparentImage),
 | 
			
		||||
                  image: NetworkImage(
 | 
			
		||||
                    thumbnailUrl,
 | 
			
		||||
                    headers: {
 | 
			
		||||
                      "Authorization": "Bearer ${box.get(accessTokenKey)}"
 | 
			
		||||
                    },
 | 
			
		||||
                  ),
 | 
			
		||||
                  cacheManager:
 | 
			
		||||
                      cacheService.getCache(CacheType.sharedAlbumThumbnail),
 | 
			
		||||
                  imageUrl: getAlbumThumbnailUrl(album),
 | 
			
		||||
                  cacheKey: album.albumThumbnailAssetId,
 | 
			
		||||
                  httpHeaders: {
 | 
			
		||||
                    "Authorization": "Bearer ${box.get(accessTokenKey)}"
 | 
			
		||||
                  },
 | 
			
		||||
                  fadeInDuration: const Duration(milliseconds: 200),
 | 
			
		||||
                  fadeOutDuration: const Duration(milliseconds: 200),
 | 
			
		||||
                ),
 | 
			
		||||
              ),
 | 
			
		||||
              title: Text(
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user