1
0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00

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

This commit is contained in:
Fynn Petersen-Frey 2022-12-04 04:59:39 +01:00 committed by GitHub
parent 99854e90be
commit 83c7434eb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 37 additions and 17 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -10,6 +10,19 @@ String getThumbnailUrl(
return _getThumbnailUrl(asset.id, type: type); 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( String getAlbumThumbnailUrl(
final AlbumResponseDto album, { final AlbumResponseDto album, {
ThumbnailFormat type = ThumbnailFormat.WEBP, ThumbnailFormat type = ThumbnailFormat.WEBP,
@ -20,11 +33,25 @@ String getAlbumThumbnailUrl(
return _getThumbnailUrl(album.albumThumbnailAssetId!, type: type); 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) { String getImageUrl(final AssetResponseDto asset) {
final box = Hive.box(userInfoBox); final box = Hive.box(userInfoBox);
return '${box.get(serverEndpointKey)}/asset/file/${asset.id}?isThumb=false'; return '${box.get(serverEndpointKey)}/asset/file/${asset.id}?isThumb=false';
} }
String getImageCacheKey(final AssetResponseDto asset) {
return '${asset.id}_fullStage';
}
String _getThumbnailUrl( String _getThumbnailUrl(
final String id, { final String id, {
ThumbnailFormat type = ThumbnailFormat.WEBP, ThumbnailFormat type = ThumbnailFormat.WEBP,