Adds ticks to the progress indicator

mobile/lib/modules/memories/ui/memory_card.dart

@@ -12,18 +12,14 @@ import 'package:openapi/api.dart';
 class MemoryCard extends StatelessWidget {
   final Asset asset;
   final void Function() onTap;
-  final void Function() onClose;
   final String title;
-  final String? rightCornerText;
   final bool showTitle;
 
   const MemoryCard({
     required this.asset,
     required this.onTap,
-    required this.onClose,
     required this.title,
     required this.showTitle,
-    this.rightCornerText,
     super.key,
   });
 
@@ -65,34 +61,31 @@ class MemoryCard extends StatelessWidget {
           ),
           GestureDetector(
             onTap: onTap,
-            child: ImmichImage(
-              asset,
-              fit: BoxFit.fitWidth,
-              height: double.infinity,
-              width: double.infinity,
-              type: ThumbnailFormat.JPEG,
-              preferredLocalAssetSize: 2048,
-            ),
-          ),
-          Positioned(
-            top: 2.0,
-            left: 2.0,
-            child: IconButton(
-              onPressed: onClose,
-              icon: const Icon(Icons.close_rounded),
-              color: Colors.grey[400],
-            ),
-          ),
-          Positioned(
-            right: 18.0,
-            top: 18.0,
-            child: Text(
-              rightCornerText ?? "",
-              style: TextStyle(
-                color: Colors.grey[200],
-                fontSize: 12.0,
-                fontWeight: FontWeight.bold,
-              ),
+            child: LayoutBuilder(
+              builder: (context, constraints) {
+                // Determine the fit using the aspect ratio
+                BoxFit fit = BoxFit.fitWidth;
+                if (asset.width != null && asset.height != null) {
+                  final aspectRatio = asset.height! / asset.width!;
+                  final phoneAspectRatio =
+                      constraints.maxWidth / constraints.maxHeight;
+                  // Look for a 25% difference in either direction
+                  if (phoneAspectRatio * .75 < aspectRatio &&
+                      phoneAspectRatio * 1.25 > aspectRatio) {
+                    // Cover to look nice if we have nearly the same aspect ratio
+                    fit = BoxFit.cover;
+                  }
+                }
+
+                return ImmichImage(
+                  asset,
+                  fit: fit,
+                  height: double.infinity,
+                  width: double.infinity,
+                  type: ThumbnailFormat.JPEG,
+                  preferredLocalAssetSize: 2048,
+                );
+              },
             ),
           ),
           if (showTitle)

mobile/lib/modules/memories/ui/memory_epilogue.dart

@@ -16,7 +16,7 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
   late final _animationController = AnimationController(
     vsync: this,
     duration: const Duration(
-      seconds: 3,
+      seconds: 2,
     ),
   )..repeat(
       reverse: true,
@@ -29,7 +29,7 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
     super.initState();
     _animation = CurvedAnimation(
       parent: _animationController,
-      curve: Curves.easeInOut,
+      curve: Curves.easeIn,
     );
   }
 
@@ -41,74 +41,82 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.center,
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        Expanded(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              const Icon(
-                Icons.check_circle_outline_sharp,
-                color: immichDarkThemePrimaryColor,
-                size: 64.0,
-              ),
-              const SizedBox(height: 16.0),
-              Text(
-                'All caught up',
-                style: Theme.of(context).textTheme.headlineMedium?.copyWith(
-                      color: Colors.white,
+    return SafeArea(
+      child: Stack(
+        children: [
+          Positioned.fill(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                const Icon(
+                  Icons.check_circle_outline_sharp,
+                  color: immichDarkThemePrimaryColor,
+                  size: 64.0,
+                ),
+                const SizedBox(height: 16.0),
+                Text(
+                  'All caught up',
+                  style: Theme.of(context).textTheme.headlineMedium?.copyWith(
+                        color: Colors.white,
+                      ),
+                ),
+                const SizedBox(height: 16.0),
+                Text(
+                  'Check back tomorrow for more memories',
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        color: Colors.white,
+                      ),
+                ),
+                const SizedBox(height: 16.0),
+                TextButton(
+                  onPressed: widget.onStartOver,
+                  child: Text(
+                    'Start Over',
+                    style: context.textTheme.displayMedium?.copyWith(
+                      color: immichDarkThemePrimaryColor,
                     ),
-              ),
-              const SizedBox(height: 16.0),
-              Text(
-                'Check back tomorrow for more memories',
-                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                      color: Colors.white,
-                    ),
-              ),
-              const SizedBox(height: 16.0),
-              TextButton(
-                onPressed: widget.onStartOver,
-                child: Text(
-                  'Start Over',
-                  style: context.textTheme.displayMedium?.copyWith(
-                    color: immichDarkThemePrimaryColor,
                   ),
                 ),
-              ),
-            ],
+              ],
+            ),
           ),
-        ),
-        Column(
-          children: [
-            SizedBox(
-              height: 48,
-              child: AnimatedBuilder(
-                animation: _animation,
-                builder: (context, child) {
-                  return Transform.translate(
-                    offset: Offset(0, 5 * _animationController.value),
-                    child: child,
-                  );
-                },
-                child: const Icon(
-                  size: 32,
-                  Icons.expand_less_sharp,
-                  color: Colors.white,
-                ),
+          Positioned(
+            bottom: 0,
+            left: 0,
+            right: 0,
+            child: Padding(
+              padding: const EdgeInsets.only(bottom: 16.0),
+              child: Column(
+                children: [
+                  SizedBox(
+                    height: 48,
+                    child: AnimatedBuilder(
+                      animation: _animation,
+                      builder: (context, child) {
+                        return Transform.translate(
+                          offset: Offset(0, 8 * _animationController.value),
+                          child: child,
+                        );
+                      },
+                      child: const Icon(
+                        size: 32,
+                        Icons.expand_less_sharp,
+                        color: Colors.white,
+                      ),
+                    ),
+                  ),
+                  Text(
+                    'Swipe up to close',
+                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                          color: Colors.white,
+                        ),
+                  ),
+                ],
               ),
             ),
-            Text(
-              'Swipe up to close',
-              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                    color: Colors.white,
-                  ),
-            ),
-          ],
-        ),
-      ],
+          ),
+        ],
+      ),
     );
   }
 }

mobile/lib/modules/memories/ui/memory_progress_indicator.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+
+class MemoryProgressIndicator extends StatelessWidget {
+  /// The number of ticks in the progress indicator
+  final int ticks;
+
+  /// The current value of the indicator
+  final double value;
+
+  const MemoryProgressIndicator(
+      {super.key, required this.ticks, required this.value});
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final tickWidth = constraints.maxWidth / ticks;
+        return Stack(
+          children: [
+            LinearProgressIndicator(
+              value: value,
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: List.generate(
+                ticks,
+                (i) => Container(
+                  width: tickWidth,
+                  height: 4,
+                  decoration: BoxDecoration(
+                    border: i == 0
+                        ? null
+                        : Border(
+                            left: BorderSide(
+                              color: Theme.of(context).scaffoldBackgroundColor,
+                              width: 1,
+                            ),
+                          ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

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

@@ -7,6 +7,7 @@ import 'package:immich_mobile/modules/memories/models/memory.dart';
 import 'package:immich_mobile/modules/memories/ui/memory_bottom_info.dart';
 import 'package:immich_mobile/modules/memories/ui/memory_card.dart';
 import 'package:immich_mobile/modules/memories/ui/memory_epilogue.dart';
+import 'package:immich_mobile/modules/memories/ui/memory_progress_indicator.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/ui/immich_image.dart';
 import 'package:openapi/api.dart' as api;
@@ -24,15 +25,31 @@ class MemoryPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final memoryPageController = usePageController(initialPage: memoryIndex);
-    final memoryAssetPageController = usePageController();
     final currentMemory = useState(memories[memoryIndex]);
     final currentAssetPage = useState(0);
+    final currentMemoryIndex = useState(0);
     final assetProgress = useState(
       "${currentAssetPage.value + 1}|${currentMemory.value.assets.length}",
     );
     const bgColor = Colors.black;
 
+    /// The list of all of the asset page controllers
+    final memoryAssetPageControllers =
+        List.generate(memories.length, (i) => usePageController());
+
+    /// The main vertically scrolling page controller with each list of memories
+    final memoryPageController = usePageController(initialPage: memoryIndex);
+
+    // The Page Controller that scrolls horizontally with all of the assets
+    PageController currentMemoryAssetPageController =
+        memoryAssetPageControllers[currentMemoryIndex.value];
+
+    useEffect(() {
+      // Memories is an immersive activity
+      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
+      return null;
+    });
+
     toNextMemory() {
       memoryPageController.nextPage(
         duration: const Duration(milliseconds: 500),
@@ -43,7 +60,7 @@ class MemoryPage extends HookConsumerWidget {
     toNextAsset(int currentAssetIndex) {
       if (currentAssetIndex + 1 < currentMemory.value.assets.length) {
         // Go to the next asset
-        memoryAssetPageController.nextPage(
+        currentMemoryAssetPageController.nextPage(
           curve: Curves.easeInOut,
           duration: const Duration(milliseconds: 500),
         );
@@ -154,67 +171,121 @@ class MemoryPage extends HookConsumerWidget {
       },
       child: Scaffold(
         backgroundColor: bgColor,
-        body: SafeArea(
-          child: PageView.builder(
-            physics: const BouncingScrollPhysics(
-              parent: AlwaysScrollableScrollPhysics(),
-            ),
-            scrollDirection: Axis.vertical,
-            controller: memoryPageController,
-            onPageChanged: (pageNumber) {
-              HapticFeedback.mediumImpact();
-              if (pageNumber < memories.length) {
-                currentMemory.value = memories[pageNumber];
-              }
+        body: PopScope(
+          onPopInvoked: (didPop) {
+            // Remove immersive mode and go back to normal mode
+            SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+          },
+          child: SafeArea(
+            child: PageView.builder(
+              physics: const BouncingScrollPhysics(
+                parent: AlwaysScrollableScrollPhysics(),
+              ),
+              scrollDirection: Axis.vertical,
+              controller: memoryPageController,
+              onPageChanged: (pageNumber) {
+                HapticFeedback.mediumImpact();
+                if (pageNumber < memories.length) {
+                  currentMemoryIndex.value = pageNumber;
+                  currentMemory.value = memories[pageNumber];
+                }
 
-              currentAssetPage.value = 0;
+                currentAssetPage.value = 0;
 
-              updateProgressText();
-            },
-            itemCount: memories.length + 1,
-            itemBuilder: (context, mIndex) {
-              // Build last page
-              if (mIndex == memories.length) {
-                return MemoryEpilogue(
-                  onStartOver: () => memoryPageController.animateToPage(
-                    0,
-                    duration: const Duration(seconds: 1),
-                    curve: Curves.easeInOut,
-                  ),
-                );
-              }
-              // Build horizontal page
-              return Column(
-                children: [
-                  Expanded(
-                    child: PageView.builder(
-                      physics: const BouncingScrollPhysics(
-                        parent: AlwaysScrollableScrollPhysics(),
-                      ),
-                      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: () => context.popRoute(),
-                            rightCornerText: assetProgress.value,
-                            title: memories[mIndex].title,
-                            showTitle: index == 0,
-                          ),
-                        );
-                      },
+                updateProgressText();
+              },
+              itemCount: memories.length + 1,
+              itemBuilder: (context, mIndex) {
+                // Build last page
+                if (mIndex == memories.length) {
+                  return MemoryEpilogue(
+                    onStartOver: () => memoryPageController.animateToPage(
+                      0,
+                      duration: const Duration(seconds: 1),
+                      curve: Curves.easeInOut,
                     ),
-                  ),
-                  MemoryBottomInfo(memory: memories[mIndex]),
-                ],
-              );
-            },
+                  );
+                }
+                // Build horizontal page
+                return Column(
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.only(
+                        left: 24.0,
+                        right: 24.0,
+                        top: 8.0,
+                        bottom: 2.0,
+                      ),
+                      child: AnimatedBuilder(
+                        animation: currentMemoryAssetPageController,
+                        builder: (context, child) {
+                          double value = 0.0;
+                          if (currentMemoryAssetPageController.hasClients) {
+                            // We can only access [page] if this has clients
+                            value = currentMemoryAssetPageController.page ?? 0;
+                          }
+                          return MemoryProgressIndicator(
+                            ticks: memories[mIndex].assets.length,
+                            value: (value + 1) / memories[mIndex].assets.length,
+                          );
+                        },
+                      ),
+                    ),
+                    Expanded(
+                      child: Stack(
+                        children: [
+                          PageView.builder(
+                            physics: const BouncingScrollPhysics(
+                              parent: AlwaysScrollableScrollPhysics(),
+                            ),
+                            controller: memoryAssetPageControllers[mIndex],
+                            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),
+                                  title: memories[mIndex].title,
+                                  showTitle: index == 0,
+                                ),
+                              );
+                            },
+                          ),
+                          Positioned(
+                            top: 8,
+                            left: 8,
+                            child: MaterialButton(
+                              minWidth: 0,
+                              onPressed: () {
+                                // auto_route doesn't invoke pop scope, so
+                                // turn off full screen mode here
+                                // https://github.com/Milad-Akarie/auto_route_library/issues/1799
+                                context.popRoute();
+                                SystemChrome.setEnabledSystemUIMode(
+                                  SystemUiMode.edgeToEdge,
+                                );
+                              },
+                              shape: const CircleBorder(),
+                              color: Colors.white.withOpacity(0.2),
+                              elevation: 0,
+                              child: const Icon(
+                                Icons.close_rounded,
+                                color: Colors.white,
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    MemoryBottomInfo(memory: memories[mIndex]),
+                  ],
+                );
+              },
+            ),
           ),
         ),
       ),