refactor(mobile): image thumbnails (#19821)

* image thumbnail refactor

* minor const-ification in new thumbnail tile

* underscore helper classes

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

mobile/lib/domain/models/asset/base_asset.model.dart

@@ -43,6 +43,14 @@ sealed class BaseAsset {
   bool get isImage => type == AssetType.image;
   bool get isVideo => type == AssetType.video;
 
+  Duration get duration {
+    final durationInSeconds = this.durationInSeconds;
+    if (durationInSeconds != null) {
+      return Duration(seconds: durationInSeconds);
+    }
+    return const Duration();
+  }
+
   bool get hasRemote =>
       storage == AssetState.remote || storage == AssetState.merged;
   bool get hasLocal =>

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/presentation/widgets/images/thumbnail_tile.widget.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
@@ -76,23 +77,33 @@ class ThumbnailTile extends ConsumerWidget {
                     alignment: Alignment.topRight,
                     child: Padding(
                       padding: const EdgeInsets.only(right: 10.0, top: 6.0),
-                      child: _VideoIndicator(asset.durationInSeconds ?? 0),
+                      child: _VideoIndicator(asset.duration),
                     ),
                   ),
                 if (showStorageIndicator)
-                  Align(
+                  switch (asset.storage) {
+                    AssetState.local => const Align(
                         alignment: Alignment.bottomRight,
                         child: Padding(
-                      padding: const EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
-                      child: _TileOverlayIcon(
+                          child: _TileOverlayIcon(Icons.cloud_off_outlined),
-                        switch (asset.storage) {
+                        ),
-                          AssetState.local => Icons.cloud_off_outlined,
+                      ),
-                          AssetState.remote => Icons.cloud_outlined,
+                    AssetState.remote => const Align(
-                          AssetState.merged => Icons.cloud_done_outlined,
+                        alignment: Alignment.bottomRight,
+                        child: Padding(
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          child: _TileOverlayIcon(Icons.cloud_outlined),
+                        ),
+                      ),
+                    AssetState.merged => const Align(
+                        alignment: Alignment.bottomRight,
+                        child: Padding(
+                          padding: EdgeInsets.only(right: 10.0, bottom: 6.0),
+                          child: _TileOverlayIcon(Icons.cloud_done_outlined),
+                        ),
+                      ),
                   },
-                      ),
-                    ),
-                  ),
                 if (asset.isFavorite)
                   const Align(
                     alignment: Alignment.bottomLeft,
@@ -138,7 +149,7 @@ class _SelectionIndicator extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     if (isLocked) {
-      return Container(
+      return DecoratedBox(
         decoration: BoxDecoration(
           shape: BoxShape.circle,
           color: color,
@@ -149,7 +160,7 @@ class _SelectionIndicator extends StatelessWidget {
         ),
       );
     } else if (isSelected) {
-      return Container(
+      return DecoratedBox(
         decoration: BoxDecoration(
           shape: BoxShape.circle,
           color: color,
@@ -169,23 +180,8 @@ class _SelectionIndicator extends StatelessWidget {
 }
 
 class _VideoIndicator extends StatelessWidget {
-  final int durationInSeconds;
+  final Duration duration;
-  const _VideoIndicator(this.durationInSeconds);
+  const _VideoIndicator(this.duration);
-
-  String _formatDuration(int durationInSec) {
-    final int hours = durationInSec ~/ 3600;
-    final int minutes = (durationInSec % 3600) ~/ 60;
-    final int seconds = durationInSec % 60;
-
-    final String minutesPadded = minutes.toString().padLeft(2, '0');
-    final String secondsPadded = seconds.toString().padLeft(2, '0');
-
-    if (hours > 0) {
-      return "$hours:$minutesPadded:$secondsPadded"; // H:MM:SS
-    } else {
-      return "$minutesPadded:$secondsPadded"; // MM:SS
-    }
-  }
 
   @override
   Widget build(BuildContext context) {
@@ -197,15 +193,15 @@ class _VideoIndicator extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.end,
       children: [
         Text(
-          _formatDuration(durationInSeconds),
+          duration.format(),
-          style: TextStyle(
+          style: const TextStyle(
             color: Colors.white,
             fontSize: 12,
             fontWeight: FontWeight.bold,
             shadows: [
               Shadow(
                 blurRadius: 5.0,
-                color: Colors.black.withValues(alpha: 0.6),
+                color: Color.fromRGBO(0, 0, 0, 0.6),
               ),
             ],
           ),
@@ -228,10 +224,10 @@ class _TileOverlayIcon extends StatelessWidget {
       color: Colors.white,
       size: 16,
       shadows: [
-        Shadow(
+        const Shadow(
           blurRadius: 5.0,
-          color: Colors.black.withValues(alpha: 0.6),
+          color: Color.fromRGBO(0, 0, 0, 0.6),
-          offset: const Offset(0.0, 0.0),
+          offset: Offset(0.0, 0.0),
         ),
       ],
     );

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,89 @@ 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();
+
+  @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 +132,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({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 +165,31 @@ class ThumbnailImage extends ConsumerWidget {
       ),
     );
   }
+}
 
-    Widget buildStackIcon() {
+class _StackIcon extends StatelessWidget {
+  final bool isVideo;
+  final int stackCount;
+
+  const _StackIcon({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 +202,92 @@ class ThumbnailImage extends ConsumerWidget {
       ),
     );
   }
+}
 
-    Widget buildImage() {
+class _StorageIcon extends StatelessWidget {
+  final AssetState storage;
+
+  const _StorageIcon({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({
+    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 +297,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 +316,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,