image thumbnail refactor

mobile/lib/extensions/duration_extensions.dart

@@ -3,3 +3,15 @@ extension TZOffsetExtension on Duration {
   String formatAsOffset() =>
       "${isNegative ? '-' : '+'}${inHours.abs().toString().padLeft(2, '0')}:${inMinutes.abs().remainder(60).toString().padLeft(2, '0')}";
 }
+
+extension DurationFormatExtension on Duration {
+  String format() {
+    final seconds = inSeconds.remainder(60).toString().padLeft(2, '0');
+    final minutes = inMinutes.remainder(60).toString().padLeft(2, '0');
+    if (inHours == 0) {
+      return "$minutes:$seconds";
+    }
+    final hours = inHours.toString().padLeft(2, '0');
+    return "$hours:$minutes:$seconds";
+  }
+}

mobile/lib/utils/storage_indicator.dart

@@ -1,9 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-
-/// Returns the suitable [IconData] to represent an [Asset]s storage location
-IconData storageIcon(Asset asset) => switch (asset.storage) {
-      AssetState.local => Icons.cloud_off_outlined,
-      AssetState.remote => Icons.cloud_outlined,
-      AssetState.merged => Icons.cloud_done_outlined,
-    };

mobile/lib/widgets/asset_grid/thumbnail_image.dart

@@ -1,13 +1,12 @@
 import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/constants.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/widgets/common/immich_thumbnail.dart';
-import 'package:immich_mobile/utils/storage_indicator.dart';
 
-class ThumbnailImage extends ConsumerWidget {
+class ThumbnailImage extends StatelessWidget {
   /// The asset to show the thumbnail image for
   final Asset asset;
 
@@ -41,16 +40,86 @@ class ThumbnailImage extends ConsumerWidget {
   });
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
     final assetContainerColor = context.isDarkTheme
         ? context.primaryColor.darken(amount: 0.6)
         : context.primaryColor.lighten(amount: 0.8);
-    // Assets from response DTOs do not have an isar id, querying which would give us the default autoIncrement id
-    final isFromDto = asset.id == noDbId;
 
-    Widget buildSelectionIcon() {
+    return Stack(
-      if (isSelected) {
+      children: [
-        return Container(
+        AnimatedContainer(
+          duration: const Duration(milliseconds: 300),
+          curve: Curves.decelerate,
+          decoration: BoxDecoration(
+            border: multiselectEnabled && isSelected
+                ? canDeselect
+                    ? Border.all(
+                        color: assetContainerColor,
+                        width: 8,
+                      )
+                    : const Border(
+                        top: BorderSide(color: Colors.grey, width: 8),
+                        right: BorderSide(color: Colors.grey, width: 8),
+                        bottom: BorderSide(color: Colors.grey, width: 8),
+                        left: BorderSide(color: Colors.grey, width: 8),
+                      )
+                : const Border(),
+          ),
+          child: Stack(
+            children: [
+              ImageIcon(
+                heroOffset: heroOffset,
+                asset: asset,
+                assetContainerColor: assetContainerColor,
+                multiselectEnabled: multiselectEnabled,
+                canDeselect: canDeselect,
+                isSelected: isSelected,
+              ),
+              if (showStorageIndicator) StorageIcon(storage: asset.storage),
+              if (asset.isFavorite)
+                const Positioned(
+                  left: 8,
+                  bottom: 5,
+                  child: Icon(
+                    Icons.favorite,
+                    color: Colors.white,
+                    size: 16,
+                  ),
+                ),
+              if (asset.isVideo) VideoIcon(duration: asset.duration),
+              if (asset.stackCount > 0)
+                StackIcon(isVideo: asset.isVideo, stackCount: asset.stackCount),
+            ],
+          ),
+        ),
+        if (multiselectEnabled)
+          isSelected
+              ? const Padding(
+                  padding: EdgeInsets.all(3.0),
+                  child: Align(
+                    alignment: Alignment.topLeft,
+                    child: SelectedIcon(),
+                  ),
+                )
+              : const Icon(
+                  Icons.circle_outlined,
+                  color: Colors.white,
+                ),
+      ],
+    );
+  }
+}
+
+class SelectedIcon extends StatelessWidget {
+  const SelectedIcon({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final assetContainerColor = context.isDarkTheme
+        ? context.primaryColor.darken(amount: 0.6)
+        : context.primaryColor.lighten(amount: 0.8);
+
+    return DecoratedBox(
       decoration: BoxDecoration(
         shape: BoxShape.circle,
         color: assetContainerColor,
@@ -60,37 +129,30 @@ class ThumbnailImage extends ConsumerWidget {
         color: context.primaryColor,
       ),
     );
-      } else {
-        return const Icon(
-          Icons.circle_outlined,
-          color: Colors.white,
-        );
-      }
   }
+}
 
-    Widget buildVideoIcon() {
+class VideoIcon extends StatelessWidget {
-      final minutes = asset.duration.inMinutes;
+  final Duration duration;
-      final durationString = asset.duration.toString();
+
+  const VideoIcon({super.key, required this.duration});
+
+  @override
+  Widget build(BuildContext context) {
     return Positioned(
       top: 5,
       right: 8,
       child: Row(
         children: [
           Text(
-              minutes > 59
+            duration.format(),
-                  ? durationString.substring(0, 7) // h:mm:ss
-                  : minutes > 0
-                      ? durationString.substring(2, 7) // mm:ss
-                      : durationString.substring(3, 7), // m:ss
             style: const TextStyle(
               color: Colors.white,
               fontSize: 10,
               fontWeight: FontWeight.bold,
             ),
           ),
-            const SizedBox(
+          const SizedBox(width: 3),
-              width: 3,
-            ),
           const Icon(
             Icons.play_circle_fill_rounded,
             color: Colors.white,
@@ -100,23 +162,31 @@ class ThumbnailImage extends ConsumerWidget {
       ),
     );
   }
+}
 
-    Widget buildStackIcon() {
+class StackIcon extends StatelessWidget {
+  final bool isVideo;
+  final int stackCount;
+
+  const StackIcon({super.key, required this.isVideo, required this.stackCount});
+
+  @override
+  Widget build(BuildContext context) {
     return Positioned(
-        top: !asset.isImage ? 28 : 5,
+      top: isVideo ? 28 : 5,
       right: 8,
       child: Row(
         children: [
-            if (asset.stackCount > 1)
+          if (stackCount > 1)
             Text(
-                "${asset.stackCount}",
+              "$stackCount",
               style: const TextStyle(
                 color: Colors.white,
                 fontSize: 10,
                 fontWeight: FontWeight.bold,
               ),
             ),
-            if (asset.stackCount > 1)
+          if (stackCount > 1)
             const SizedBox(
               width: 3,
             ),
@@ -129,13 +199,93 @@ class ThumbnailImage extends ConsumerWidget {
       ),
     );
   }
+}
 
-    Widget buildImage() {
+class StorageIcon extends StatelessWidget {
+  final AssetState storage;
+
+  const StorageIcon({super.key, required this.storage});
+
+  @override
+  Widget build(BuildContext context) {
+    return switch (storage) {
+      AssetState.local => const Positioned(
+          right: 8,
+          bottom: 5,
+          child: Icon(
+            Icons.cloud_off_outlined,
+            color: Color.fromRGBO(255, 255, 255, 0.8),
+            size: 16,
+            shadows: [
+              Shadow(
+                blurRadius: 5.0,
+                color: Color.fromRGBO(0, 0, 0, 0.6),
+                offset: Offset(0.0, 0.0),
+              ),
+            ],
+          ),
+        ),
+      AssetState.remote => const Positioned(
+          right: 8,
+          bottom: 5,
+          child: Icon(
+            Icons.cloud_outlined,
+            color: Color.fromRGBO(255, 255, 255, 0.8),
+            size: 16,
+            shadows: [
+              Shadow(
+                blurRadius: 5.0,
+                color: Color.fromRGBO(0, 0, 0, 0.6),
+                offset: Offset(0.0, 0.0),
+              ),
+            ],
+          ),
+        ),
+      AssetState.merged => const Positioned(
+          right: 8,
+          bottom: 5,
+          child: Icon(
+            Icons.cloud_done_outlined,
+            color: Color.fromRGBO(255, 255, 255, 0.8),
+            size: 16,
+            shadows: [
+              Shadow(
+                blurRadius: 5.0,
+                color: Color.fromRGBO(0, 0, 0, 0.6),
+                offset: Offset(0.0, 0.0),
+              ),
+            ],
+          ),
+        ),
+    };
+  }
+}
+
+class ImageIcon extends StatelessWidget {
+  final int heroOffset;
+  final Asset asset;
+  final Color assetContainerColor;
+  final bool multiselectEnabled;
+  final bool canDeselect;
+  final bool isSelected;
+
+  const ImageIcon({
+    super.key,
+    required this.heroOffset,
+    required this.asset,
+    required this.assetContainerColor,
+    required this.multiselectEnabled,
+    required this.canDeselect,
+    required this.isSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // Assets from response DTOs do not have an isar id, querying which would give us the default autoIncrement id
+    final isDto = asset.id == noDbId;
     final image = SizedBox.expand(
       child: Hero(
-          tag: isFromDto
+        tag: isDto ? '${asset.remoteId}-$heroOffset' : asset.id + heroOffset,
-              ? '${asset.remoteId}-$heroOffset'
-              : asset.id + heroOffset,
         child: Stack(
           children: [
             SizedBox.expand(
@@ -145,8 +295,8 @@ class ThumbnailImage extends ConsumerWidget {
                 width: 250,
               ),
             ),
-              Container(
+            const DecoratedBox(
-                decoration: const BoxDecoration(
+              decoration: BoxDecoration(
                 gradient: LinearGradient(
                   colors: [
                     Color.fromRGBO(0, 0, 0, 0.1),
@@ -164,79 +314,19 @@ class ThumbnailImage extends ConsumerWidget {
         ),
       ),
     );
+
     if (!multiselectEnabled || !isSelected) {
       return image;
     }
-      return Container(
+
-        decoration: BoxDecoration(
+    return DecoratedBox(
-          color: canDeselect ? assetContainerColor : Colors.grey,
+      decoration: canDeselect
-        ),
+          ? BoxDecoration(color: assetContainerColor)
+          : const BoxDecoration(color: Colors.grey),
       child: ClipRRect(
-          borderRadius: const BorderRadius.all(
+        borderRadius: const BorderRadius.all(Radius.circular(15.0)),
-            Radius.circular(15.0),
-          ),
         child: image,
       ),
     );
   }
-
-    return Stack(
-      children: [
-        AnimatedContainer(
-          duration: const Duration(milliseconds: 300),
-          curve: Curves.decelerate,
-          decoration: BoxDecoration(
-            border: multiselectEnabled && isSelected
-                ? Border.all(
-                    color: canDeselect ? assetContainerColor : Colors.grey,
-                    width: 8,
-                  )
-                : const Border(),
-          ),
-          child: Stack(
-            children: [
-              buildImage(),
-              if (showStorageIndicator)
-                Positioned(
-                  right: 8,
-                  bottom: 5,
-                  child: Icon(
-                    storageIcon(asset),
-                    color: Colors.white.withValues(alpha: .8),
-                    size: 16,
-                    shadows: [
-                      Shadow(
-                        blurRadius: 5.0,
-                        color: Colors.black.withValues(alpha: 0.6),
-                        offset: const Offset(0.0, 0.0),
-                      ),
-                    ],
-                  ),
-                ),
-              if (asset.isFavorite)
-                const Positioned(
-                  left: 8,
-                  bottom: 5,
-                  child: Icon(
-                    Icons.favorite,
-                    color: Colors.white,
-                    size: 16,
-                  ),
-                ),
-              if (!asset.isImage) buildVideoIcon(),
-              if (asset.stackCount > 0) buildStackIcon(),
-            ],
-          ),
-        ),
-        if (multiselectEnabled)
-          Padding(
-            padding: const EdgeInsets.all(3.0),
-            child: Align(
-              alignment: Alignment.topLeft,
-              child: buildSelectionIcon(),
-            ),
-          ),
-      ],
-    );
-  }
 }

mobile/lib/widgets/asset_viewer/formatted_duration.dart

@@ -1,15 +1,5 @@
 import 'package:flutter/material.dart';
-
+import 'package:immich_mobile/extensions/duration_extensions.dart';
-@pragma('vm:prefer-inline')
-String _formatDuration(Duration position) {
-  final seconds = position.inSeconds.remainder(60).toString().padLeft(2, "0");
-  final minutes = position.inMinutes.remainder(60).toString().padLeft(2, "0");
-  if (position.inHours == 0) {
-    return "$minutes:$seconds";
-  }
-  final hours = position.inHours.toString().padLeft(2, '0');
-  return "$hours:$minutes:$seconds";
-}
 
 class FormattedDuration extends StatelessWidget {
   final Duration data;
@@ -20,7 +10,7 @@ class FormattedDuration extends StatelessWidget {
     return SizedBox(
       width: data.inHours > 0 ? 70 : 60, // use a fixed width to prevent jitter
       child: Text(
-        _formatDuration(data),
+        data.format(),
         style: const TextStyle(
           fontSize: 14.0,
           color: Colors.white,