fix(mobile): handle image stream completion when no image is emitted

mobile/lib/constants/enums.dart

@@ -1,4 +1,11 @@
-enum SortOrder { asc, desc }
+enum SortOrder {
+  asc,
+  desc;
+
+  SortOrder reverse() {
+    return this == SortOrder.asc ? SortOrder.desc : SortOrder.asc;
+  }
+}
 
 enum TextSearchType { context, filename, description, ocr }
 

mobile/lib/domain/services/remote_album.service.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:collection/collection.dart';
+import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/user.model.dart';
@@ -36,6 +37,7 @@ class RemoteAlbumService {
     AlbumSortMode sortMode, {
     bool isReverse = false,
   }) async {
+    // list of albums sorted ascendingly according to the selected sort mode
     final List<RemoteAlbum> sorted = switch (sortMode) {
       AlbumSortMode.created => albums.sortedBy((album) => album.createdAt),
       AlbumSortMode.title => albums.sortedBy((album) => album.name),
@@ -44,8 +46,9 @@ class RemoteAlbumService {
       AlbumSortMode.mostRecent => await _sortByNewestAsset(albums),
       AlbumSortMode.mostOldest => await _sortByOldestAsset(albums),
     };
+    final effectiveOrder = isReverse ? sortMode.defaultOrder.reverse() : sortMode.defaultOrder;
 
-    return (isReverse ? sorted.reversed : sorted).toList();
+    return (effectiveOrder == SortOrder.asc ? sorted : sorted.reversed).toList();
   }
 
   List<RemoteAlbum> searchAlbums(
@@ -209,6 +212,6 @@ class RemoteAlbumService {
       return aDate.compareTo(bDate);
     });
 
-    return sorted.reversed.toList();
+    return sorted;
   }
 }

mobile/lib/presentation/widgets/album/album_selector.widget.dart

@@ -5,6 +5,7 @@ import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
@@ -281,6 +282,8 @@ class _SortButtonState extends ConsumerState<_SortButton> {
       setState(() {
         albumSortOption = sortMode;
         isSorting = true;
+        // reset sort order to default state when switching option
+        albumSortIsReverse = false;
       });
     }
 
@@ -293,6 +296,7 @@ class _SortButtonState extends ConsumerState<_SortButton> {
 
   @override
   Widget build(BuildContext context) {
+    final effectiveOrder = albumSortOption.effectiveOrder(albumSortIsReverse);
     return MenuAnchor(
       controller: widget.controller,
       style: MenuStyle(
@@ -307,7 +311,7 @@ class _SortButtonState extends ConsumerState<_SortButton> {
           .map(
             (sortMode) => MenuItemButton(
               leadingIcon: albumSortOption == sortMode
-                  ? albumSortIsReverse
+                  ? effectiveOrder == SortOrder.desc
                         ? Icon(
                             Icons.keyboard_arrow_down,
                             color: albumSortOption == sortMode
@@ -355,7 +359,7 @@ class _SortButtonState extends ConsumerState<_SortButton> {
             children: [
               Padding(
                 padding: const EdgeInsets.only(right: 5),
-                child: albumSortIsReverse
+                child: effectiveOrder == SortOrder.desc
                     ? Icon(Icons.keyboard_arrow_down, color: context.colorScheme.onSurface)
                     : Icon(Icons.keyboard_arrow_up_rounded, color: context.colorScheme.onSurface),
               ),

mobile/lib/presentation/widgets/images/local_image_provider.dart

@@ -31,7 +31,7 @@ class LocalThumbProvider extends CancellableImageProvider<LocalThumbProvider>
         DiagnosticsProperty<String>('Id', key.id),
         DiagnosticsProperty<Size>('Size', key.size),
       ],
-      onDispose: cancel,
+      onLastListenerRemoved: cancel,
     );
   }
 
@@ -76,7 +76,7 @@ class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProv
         DiagnosticsProperty<String>('Id', key.id),
         DiagnosticsProperty<Size>('Size', key.size),
       ],
-      onDispose: cancel,
+      onLastListenerRemoved: cancel,
     );
   }
 

mobile/lib/presentation/widgets/images/one_frame_multi_image_stream_completer.dart

@@ -9,8 +9,6 @@ import 'package:flutter/painting.dart';
 
 /// An ImageStreamCompleter with support for loading multiple images.
 class OneFramePlaceholderImageStreamCompleter extends ImageStreamCompleter {
-  void Function()? _onDispose;
-
   /// The constructor to create an OneFramePlaceholderImageStreamCompleter. The [images]
   /// should be the primary images to display (typically asynchronously as they load).
   /// The [initialImage] is an optional image that will be emitted synchronously
@@ -19,12 +17,11 @@ class OneFramePlaceholderImageStreamCompleter extends ImageStreamCompleter {
     Stream<ImageInfo> images, {
     ImageInfo? initialImage,
     InformationCollector? informationCollector,
-    void Function()? onDispose,
+    void Function()? onLastListenerRemoved,
   }) {
     if (initialImage != null) {
       setImage(initialImage);
     }
-    _onDispose = onDispose;
     images.listen(
       setImage,
       onError: (Object error, StackTrace stack) {
@@ -37,15 +34,11 @@ class OneFramePlaceholderImageStreamCompleter extends ImageStreamCompleter {
         );
       },
     );
-  }
 
-  @override
-  void onDisposed() {
-    final onDispose = _onDispose;
-    if (onDispose != null) {
-      _onDispose = null;
-      onDispose();
-    }
-    super.onDisposed();
+    addOnLastListenerRemovedCallback(() {
+      if (onLastListenerRemoved != null) {
+        onLastListenerRemoved();
+      }
+    });
   }
 }

mobile/lib/presentation/widgets/images/remote_image_provider.dart

@@ -30,7 +30,7 @@ class RemoteThumbProvider extends CancellableImageProvider<RemoteThumbProvider>
         DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Asset Id', key.assetId),
       ],
-      onDispose: cancel,
+      onLastListenerRemoved: cancel,
     );
   }
 
@@ -78,7 +78,7 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
         DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Asset Id', key.assetId),
       ],
-      onDispose: cancel,
+      onLastListenerRemoved: cancel,
     );
   }
 

mobile/lib/presentation/widgets/images/thumb_hash_provider.dart

@@ -17,7 +17,7 @@ class ThumbHashProvider extends CancellableImageProvider<ThumbHashProvider>
 
   @override
   ImageStreamCompleter loadImage(ThumbHashProvider key, ImageDecoderCallback decode) {
-    return OneFramePlaceholderImageStreamCompleter(_loadCodec(key, decode), onDispose: cancel);
+    return OneFramePlaceholderImageStreamCompleter(_loadCodec(key, decode), onLastListenerRemoved: cancel);
   }
 
   Stream<ImageInfo> _loadCodec(ThumbHashProvider key, ImageDecoderCallback decode) {

mobile/lib/presentation/widgets/images/thumbnail.widget.dart

@@ -233,16 +233,6 @@ class _ThumbnailState extends State<Thumbnail> with SingleTickerProviderStateMix
 
   @override
   void dispose() {
-    final imageProvider = widget.imageProvider;
-    if (imageProvider is CancellableImageProvider) {
-      imageProvider.cancel();
-    }
-
-    final thumbhashProvider = widget.thumbhashProvider;
-    if (thumbhashProvider is CancellableImageProvider) {
-      thumbhashProvider.cancel();
-    }
-
     _fadeController.removeStatusListener(_onAnimationStatusChanged);
     _fadeController.dispose();
     _stopListeningToStream();

mobile/lib/providers/album/album_sort_by_options.provider.dart

@@ -1,4 +1,5 @@
 import 'package:collection/collection.dart';
+import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/entities/album.entity.dart';
@@ -73,18 +74,21 @@ class _AlbumSortHandlers {
 
 // Store index allows us to re-arrange the values without affecting the saved prefs
 enum AlbumSortMode {
-  title(1, "library_page_sort_title", _AlbumSortHandlers.title),
-  assetCount(4, "library_page_sort_asset_count", _AlbumSortHandlers.assetCount),
-  lastModified(3, "library_page_sort_last_modified", _AlbumSortHandlers.lastModified),
-  created(0, "library_page_sort_created", _AlbumSortHandlers.created),
-  mostRecent(2, "sort_recent", _AlbumSortHandlers.mostRecent),
-  mostOldest(5, "sort_oldest", _AlbumSortHandlers.mostOldest);
+  title(1, "library_page_sort_title", _AlbumSortHandlers.title, SortOrder.asc),
+  assetCount(4, "library_page_sort_asset_count", _AlbumSortHandlers.assetCount, SortOrder.desc),
+  lastModified(3, "library_page_sort_last_modified", _AlbumSortHandlers.lastModified, SortOrder.desc),
+  created(0, "library_page_sort_created", _AlbumSortHandlers.created, SortOrder.desc),
+  mostRecent(2, "sort_recent", _AlbumSortHandlers.mostRecent, SortOrder.desc),
+  mostOldest(5, "sort_oldest", _AlbumSortHandlers.mostOldest, SortOrder.asc);
 
   final int storeIndex;
   final String label;
   final AlbumSortFn sortFn;
+  final SortOrder defaultOrder;
 
-  const AlbumSortMode(this.storeIndex, this.label, this.sortFn);
+  const AlbumSortMode(this.storeIndex, this.label, this.sortFn, this.defaultOrder);
+
+  SortOrder effectiveOrder(bool isReverse) => isReverse ? defaultOrder.reverse() : defaultOrder;
 }
 
 @riverpod

mobile/test/domain/services/album.service_test.dart

@@ -85,35 +85,47 @@ void main() {
       final albums = [albumB, albumA];
 
       final result = await sut.sortAlbums(albums, AlbumSortMode.created);
-      expect(result, [albumA, albumB]);
+      expect(result, [albumB, albumA]);
     });
 
     test('should sort correctly based on updatedAt', () async {
       final albums = [albumB, albumA];
 
       final result = await sut.sortAlbums(albums, AlbumSortMode.lastModified);
-      expect(result, [albumA, albumB]);
+      expect(result, [albumB, albumA]);
     });
 
     test('should sort correctly based on assetCount', () async {
       final albums = [albumB, albumA];
 
       final result = await sut.sortAlbums(albums, AlbumSortMode.assetCount);
-      expect(result, [albumA, albumB]);
+      expect(result, [albumB, albumA]);
     });
 
     test('should sort correctly based on newestAssetTimestamp', () async {
       final albums = [albumB, albumA];
 
       final result = await sut.sortAlbums(albums, AlbumSortMode.mostRecent);
-      expect(result, [albumA, albumB]);
+      expect(result, [albumB, albumA]);
     });
 
     test('should sort correctly based on oldestAssetTimestamp', () async {
       final albums = [albumB, albumA];
 
       final result = await sut.sortAlbums(albums, AlbumSortMode.mostOldest);
-      expect(result, [albumB, albumA]);
+      expect(result, [albumA, albumB]);
+    });
+
+    test('should flip order when isReverse is true for all modes', () async {
+      final albums = [albumB, albumA];
+
+      for (final mode in AlbumSortMode.values) {
+        final normal = await sut.sortAlbums(albums, mode, isReverse: false);
+        final reversed = await sut.sortAlbums(albums, mode, isReverse: true);
+
+        // reversed should be the exact inverse of normal
+        expect(reversed, normal.reversed.toList(), reason: 'Mode: $mode');
+      }
     });
   });
 }