fix(mobile): AssetCount reset and Elliptical progress in Memories (#3355)

* fix: Constraint CircularProgressIndicator in Memories

* fix(mobile): Asset count reset when scroll cancelled midway in Memories

mobile/lib/modules/memories/views/memory_page.dart

@@ -22,6 +22,7 @@ class MemoryPage extends HookConsumerWidget {
     final memoryPageController = usePageController(initialPage: memoryIndex);
     final memoryAssetPageController = usePageController();
     final currentMemory = useState(memories[memoryIndex]);
+    final previousMemoryIndex = useState(memoryIndex);
     final currentAssetPage = useState(0);
     final assetProgress = useState(
       "${currentAssetPage.value + 1}|${currentMemory.value.assets.length}",
@@ -48,21 +49,13 @@ class MemoryPage extends HookConsumerWidget {
           "${currentAssetPage.value + 1}|${currentMemory.value.assets.length}";
     }
 
-    onMemoryChanged(int otherIndex) {
-      HapticFeedback.mediumImpact();
-      currentMemory.value = memories[otherIndex];
-      currentAssetPage.value = 0;
-      updateProgressText();
-    }
-
     onAssetChanged(int otherIndex) {
       HapticFeedback.selectionClick();
-
       currentAssetPage.value = otherIndex;
       updateProgressText();
     }
 
-    buildBottomInfo() {
+    buildBottomInfo(Memory memory) {
       return Padding(
         padding: const EdgeInsets.all(16.0),
         child: Row(
@@ -71,7 +64,7 @@ class MemoryPage extends HookConsumerWidget {
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Text(
-                  currentMemory.value.title,
+                  memory.title,
                   style: TextStyle(
                     color: Colors.grey[400],
                     fontSize: 11.0,
@@ -80,7 +73,7 @@ class MemoryPage extends HookConsumerWidget {
                 ),
                 Text(
                   DateFormat.yMMMMd().format(
-                    currentMemory.value.assets[0].fileCreatedAt,
+                    memory.assets[0].fileCreatedAt,
                   ),
                   style: const TextStyle(
                     color: Colors.white,
@@ -95,44 +88,66 @@ class MemoryPage extends HookConsumerWidget {
       );
     }
 
-    return Scaffold(
+    /* Notification listener is used instead of OnPageChanged callback since OnPageChanged is called
-      backgroundColor: bgColor,
+     * when the page in the **center** of the viewer changes. We want to reset currentAssetPage only when the final
-      body: SafeArea(
+     * page during the end of scroll is different than the current page
-        child: PageView.builder(
+     */
-          scrollDirection: Axis.vertical,
+    return NotificationListener<ScrollNotification>(
-          controller: memoryPageController,
+      onNotification: (ScrollNotification notification) {
-          onPageChanged: onMemoryChanged,
+        if (notification.depth == 0) {
-          itemCount: memories.length,
+          var currentPageNumber = memoryPageController.page!.toInt();
-          itemBuilder: (context, mIndex) {
+          currentMemory.value = memories[currentPageNumber];
-            // Build horizontal page
+          if (notification is ScrollStartNotification) {
-            return Column(
+            assetProgress.value = "";
-              children: [
+          } else if (notification is ScrollEndNotification) {
-                Expanded(
+            HapticFeedback.mediumImpact();
-                  child: PageView.builder(
+            if (currentPageNumber != previousMemoryIndex.value) {
-                    controller: memoryAssetPageController,
+              currentAssetPage.value = 0;
-                    onPageChanged: onAssetChanged,
+              previousMemoryIndex.value = currentPageNumber;
-                    scrollDirection: Axis.horizontal,
+            }
-                    itemCount: memories[mIndex].assets.length,
+            updateProgressText();
-                    itemBuilder: (context, index) {
+          }
-                      final asset = memories[mIndex].assets[index];
+        }
-                      return Container(
+        return false;
-                        color: Colors.black,
+      },
-                        child: MemoryCard(
+      child: Scaffold(
-                          asset: asset,
+        backgroundColor: bgColor,
-                          onTap: () => toNextAsset(index),
+        body: SafeArea(
-                          onClose: () => AutoRouter.of(context).pop(),
+          child: PageView.builder(
-                          rightCornerText: assetProgress.value,
+            scrollDirection: Axis.vertical,
-                          title: memories[mIndex].title,
+            controller: memoryPageController,
-                          showTitle: index == 0,
+            itemCount: memories.length,
-                        ),
+            itemBuilder: (context, mIndex) {
-                      );
+              // Build horizontal page
-                    },
+              return Column(
+                children: [
+                  Expanded(
+                    child: PageView.builder(
+                      controller: memoryAssetPageController,
+                      onPageChanged: onAssetChanged,
+                      scrollDirection: Axis.horizontal,
+                      itemCount: memories[mIndex].assets.length,
+                      itemBuilder: (context, index) {
+                        final asset = memories[mIndex].assets[index];
+                        return Container(
+                          color: Colors.black,
+                          child: MemoryCard(
+                            asset: asset,
+                            onTap: () => toNextAsset(index),
+                            onClose: () => AutoRouter.of(context).pop(),
+                            rightCornerText: assetProgress.value,
+                            title: memories[mIndex].title,
+                            showTitle: index == 0,
+                          ),
+                        );
+                      },
+                    ),
                   ),
-                ),
+                  buildBottomInfo(memories[mIndex]),
-                buildBottomInfo(),
+                ],
-              ],
+              );
-            );
+            },
-          },
+          ),
         ),
       ),
     );

mobile/lib/shared/ui/immich_image.dart

@@ -108,9 +108,12 @@ class ImmichImage extends StatelessWidget {
           );
         }
         return Transform.scale(
-          scale: 0.2,
+          scale: 2,
-          child: CircularProgressIndicator.adaptive(
+          child: Center(
-            value: downloadProgress.progress,
+            child: CircularProgressIndicator.adaptive(
+              strokeWidth: 1,
+              value: downloadProgress.progress,
+            ),
           ),
         );
       },