mirror of
https://github.com/immich-app/immich.git
synced 2025-05-24 01:12:58 -04:00
59fa8fbd0e
* Remove small thumbnail and cache generated thumbnails * Creating the small thumbnails takes quite some time, which should not be underestimated. * The time needed to generate the small or big thumbnail is not too different from each other. Therefore there is no real benefit of the small thumbnail and it only adds frustration to the end user experience. That is because the image appeared to have loaded (the visual move from blur to something better) but it's still so bad that it is basically a blur. The better solution is therefore to stay at the blur until the actual thumbnail has loaded. * Additionaly to the faster generation of the thumbnail, it now also gets cached similarly to the remote thumbnail which already gets cached. This further speeds up the all over usage of the app and prevents a repeatet thumbnail generation when opening the app. * Decreased the quality from the default 95 to 80 to provide similar quality with much reduces thumbnail size. * Use try catch around the read of the cache file. * Use the key provided in the loadImage method instead of the asset of the constructor. * Use userId instead of ownerId * Remove import * Add checksum to thumbnail cache key
95 lines
2.6 KiB
Dart
95 lines
2.6 KiB
Dart
import 'dart:typed_data';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
import 'package:immich_mobile/providers/image/immich_local_thumbnail_provider.dart';
|
|
import 'package:immich_mobile/providers/image/immich_remote_thumbnail_provider.dart';
|
|
import 'package:immich_mobile/entities/asset.entity.dart';
|
|
import 'package:immich_mobile/utils/hooks/blurhash_hook.dart';
|
|
import 'package:immich_mobile/widgets/common/immich_image.dart';
|
|
import 'package:immich_mobile/widgets/common/thumbhash_placeholder.dart';
|
|
import 'package:octo_image/octo_image.dart';
|
|
import 'package:immich_mobile/providers/user.provider.dart';
|
|
|
|
class ImmichThumbnail extends HookConsumerWidget {
|
|
const ImmichThumbnail({
|
|
this.asset,
|
|
this.width = 250,
|
|
this.height = 250,
|
|
this.fit = BoxFit.cover,
|
|
super.key,
|
|
});
|
|
|
|
final Asset? asset;
|
|
final double width;
|
|
final double height;
|
|
final BoxFit fit;
|
|
|
|
/// Helper function to return the image provider for the asset thumbnail
|
|
/// either by using the asset ID or the asset itself
|
|
/// [asset] is the Asset to request, or else use [assetId] to get a remote
|
|
/// image provider
|
|
static ImageProvider imageProvider({
|
|
Asset? asset,
|
|
String? assetId,
|
|
String? userId,
|
|
int thumbnailSize = 256,
|
|
}) {
|
|
if (asset == null && assetId == null) {
|
|
throw Exception('Must supply either asset or assetId');
|
|
}
|
|
|
|
if (asset == null) {
|
|
return ImmichRemoteThumbnailProvider(
|
|
assetId: assetId!,
|
|
);
|
|
}
|
|
|
|
if (ImmichImage.useLocal(asset)) {
|
|
return ImmichLocalThumbnailProvider(
|
|
asset: asset,
|
|
height: thumbnailSize,
|
|
width: thumbnailSize,
|
|
userId: userId,
|
|
);
|
|
} else {
|
|
return ImmichRemoteThumbnailProvider(
|
|
assetId: asset.remoteId!,
|
|
height: thumbnailSize,
|
|
width: thumbnailSize,
|
|
);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
Uint8List? blurhash = useBlurHashRef(asset).value;
|
|
final userId = ref.watch(currentUserProvider)?.id;
|
|
|
|
if (asset == null) {
|
|
return Container(
|
|
color: Colors.grey,
|
|
width: width,
|
|
height: height,
|
|
child: const Center(
|
|
child: Icon(Icons.no_photography),
|
|
),
|
|
);
|
|
}
|
|
|
|
return OctoImage.fromSet(
|
|
placeholderFadeInDuration: Duration.zero,
|
|
fadeInDuration: Duration.zero,
|
|
fadeOutDuration: const Duration(milliseconds: 100),
|
|
octoSet: blurHashOrPlaceholder(blurhash),
|
|
image: ImmichThumbnail.imageProvider(
|
|
asset: asset,
|
|
userId: userId,
|
|
),
|
|
width: width,
|
|
height: height,
|
|
fit: fit,
|
|
);
|
|
}
|
|
}
|