refactor(mobile): Use ImmichThumbnail and local thumbnail image provider (#7279)

* Refactor to use ImmichThumbnail and local thumbnail image provider format * dart format linter errors linter * Adds blurhash format * Fixes image blur * uses hook instead of stateful widget to be more consistent * Uses blurhash hook state * Uses blurhash ref instead of state * Fixes fade in duration for fade in placeholder * Fixes an issue where thumbnails fail to load if too many thumbnail requests are made simultaenously --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2024-02-27 10:51:19 -05:00
parent 5e485e35e9
commit d76baee50d
20 changed files with 588 additions and 129 deletions
@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/shared/ui/transparent_image.dart';
+
+class FadeInPlaceholderImage extends StatelessWidget {
+  final Widget placeholder;
+  final ImageProvider image;
+  final Duration duration;
+  final BoxFit fit;
+
+  const FadeInPlaceholderImage({
+    super.key,
+    required this.placeholder,
+    required this.image,
+    this.duration = const Duration(milliseconds: 100),
+    this.fit = BoxFit.cover,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox.expand(
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          placeholder,
+          FadeInImage(
+            fadeInDuration: duration,
+            image: image,
+            fit: fit,
+            placeholder: MemoryImage(kTransparentImage),
+          ),
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,17 @@
+import 'dart:convert';
+import 'dart:typed_data';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:thumbhash/thumbhash.dart' as thumbhash;
+
+ObjectRef<Uint8List?> useBlurHashRef(Asset? asset) {
+  if (asset?.thumbhash == null) {
+    return useRef(null);
+  }
+
+  final rbga = thumbhash.thumbHashToRGBA(
+    base64Decode(asset!.thumbhash!),
+  );
+
+  return useRef(thumbhash.rgbaToBmp(rbga));
+}
@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
@@ -9,8 +7,6 @@ import 'package:immich_mobile/modules/home/ui/asset_grid/thumbnail_placeholder.d
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/models/store.dart';
 import 'package:octo_image/octo_image.dart';
-import 'package:photo_manager/photo_manager.dart';
-import 'package:photo_manager_image_provider/photo_manager_image_provider.dart';

 class ImmichImage extends StatelessWidget {
  const ImmichImage(
@@ -19,8 +15,6 @@ class ImmichImage extends StatelessWidget {
    this.height,
    this.fit = BoxFit.cover,
    this.placeholder = const ThumbnailPlaceholder(),
-    this.isThumbnail = false,
-    this.thumbnailSize = 250,
    super.key,
  });

@@ -29,32 +23,6 @@ class ImmichImage extends StatelessWidget {
  final double? width;
  final double? height;
  final BoxFit fit;
-  final bool isThumbnail;
-  final int thumbnailSize;
-
-  /// Factory constructor to use the thumbnail variant
-  factory ImmichImage.thumbnail(
-    Asset? asset, {
-    BoxFit fit = BoxFit.cover,
-    double? width,
-    double? height,
-  }) {
-    // Use the width and height to derive thumbnail size
-    final thumbnailSize = max(width ?? 250, height ?? 250).toInt();
-
-    return ImmichImage(
-      asset,
-      isThumbnail: true,
-      fit: fit,
-      width: width,
-      height: height,
-      placeholder: ThumbnailPlaceholder(
-        height: thumbnailSize.toDouble(),
-        width: thumbnailSize.toDouble(),
-      ),
-      thumbnailSize: thumbnailSize,
-    );
-  }

  // Helper function to return the image provider for the asset
  // either by using the asset ID or the asset itself
@@ -66,8 +34,6 @@ class ImmichImage extends StatelessWidget {
  static ImageProvider imageProvider({
    Asset? asset,
    String? assetId,
-    bool isThumbnail = false,
-    int thumbnailSize = 250,
  }) {
    if (asset == null && assetId == null) {
      throw Exception('Must supply either asset or assetId');
@@ -76,24 +42,18 @@ class ImmichImage extends StatelessWidget {
    if (asset == null) {
      return ImmichRemoteImageProvider(
        assetId: assetId!,
-        isThumbnail: isThumbnail,
+        isThumbnail: false,
      );
    }

-    if (useLocal(asset) && isThumbnail) {
-      return AssetEntityImageProvider(
-        asset.local!,
-        isOriginal: false,
-        thumbnailSize: ThumbnailSize.square(thumbnailSize),
-      );
-    } else if (useLocal(asset) && !isThumbnail) {
+    if (useLocal(asset)) {
      return ImmichLocalImageProvider(
        asset: asset,
      );
    } else {
      return ImmichRemoteImageProvider(
        assetId: asset.remoteId!,
-        isThumbnail: isThumbnail,
+        isThumbnail: false,
      );
    }
  }
@@ -105,15 +65,11 @@ class ImmichImage extends StatelessWidget {
  Widget build(BuildContext context) {
    if (asset == null) {
      return Container(
-        decoration: const BoxDecoration(
-          color: Colors.grey,
-        ),
-        child: SizedBox(
-          width: width,
-          height: height,
-          child: const Center(
-            child: Icon(Icons.no_photography),
-          ),
+        color: Colors.grey,
+        width: width,
+        height: height,
+        child: const Center(
+          child: Icon(Icons.no_photography),
        ),
      );
    }
@@ -131,7 +87,6 @@ class ImmichImage extends StatelessWidget {
      },
      image: ImmichImage.imageProvider(
        asset: asset,
-        isThumbnail: isThumbnail,
      ),
      width: width,
      height: height,
@@ -0,0 +1,89 @@
+import 'dart:typed_data';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:immich_mobile/modules/asset_viewer/image_providers/immich_local_thumbnail_provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/image_providers/immich_remote_image_provider.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/ui/hooks/blurhash_hook.dart';
+import 'package:immich_mobile/shared/ui/thumbhash_placeholder.dart';
+import 'package:octo_image/octo_image.dart';
+
+class ImmichThumbnail extends HookWidget {
+  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,
+    int thumbnailSize = 256,
+  }) {
+    if (asset == null && assetId == null) {
+      throw Exception('Must supply either asset or assetId');
+    }
+
+    if (asset == null) {
+      return ImmichRemoteImageProvider(
+        assetId: assetId!,
+        isThumbnail: true,
+      );
+    }
+
+    if (useLocal(asset)) {
+      return ImmichLocalThumbnailProvider(
+        asset: asset,
+        height: thumbnailSize,
+        width: thumbnailSize,
+      );
+    } else {
+      return ImmichRemoteImageProvider(
+        assetId: asset.remoteId!,
+        isThumbnail: true,
+      );
+    }
+  }
+
+  static bool useLocal(Asset asset) => !asset.isRemote || asset.isLocal;
+
+  @override
+  Widget build(BuildContext context) {
+    Uint8List? blurhash = useBlurHashRef(asset).value;
+    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,
+      ),
+      width: width,
+      height: height,
+      fit: fit,
+    );
+  }
+}
@@ -0,0 +1,48 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/modules/home/ui/asset_grid/thumbnail_placeholder.dart';
+import 'package:immich_mobile/shared/ui/fade_in_placeholder_image.dart';
+import 'package:octo_image/octo_image.dart';
+
+/// Simple set to show [OctoPlaceholder.circularProgressIndicator] as
+/// placeholder and [OctoError.icon] as error.
+OctoSet blurHashOrPlaceholder(
+  Uint8List? blurhash, {
+  BoxFit? fit,
+  Text? errorMessage,
+}) {
+  return OctoSet(
+    placeholderBuilder: blurHashPlaceholderBuilder(blurhash, fit: fit),
+    errorBuilder: blurHashErrorBuilder(blurhash, fit: fit),
+  );
+}
+
+OctoPlaceholderBuilder blurHashPlaceholderBuilder(
+  Uint8List? blurhash, {
+  BoxFit? fit,
+}) {
+  return (context) => blurhash == null
+      ? const ThumbnailPlaceholder()
+      : FadeInPlaceholderImage(
+          placeholder: const ThumbnailPlaceholder(),
+          image: MemoryImage(blurhash),
+          fit: fit ?? BoxFit.cover,
+        );
+}
+
+OctoErrorBuilder blurHashErrorBuilder(
+  Uint8List? blurhash, {
+  BoxFit? fit,
+  Text? message,
+  IconData? icon,
+  Color? iconColor,
+  double? iconSize,
+}) {
+  return OctoError.placeholderWithErrorIcon(
+    blurHashPlaceholderBuilder(blurhash, fit: fit),
+    message: message,
+    icon: icon,
+    iconColor: iconColor,
+    iconSize: iconSize,
+  );
+}