feat(mobile): Memories activity is now full screen, better image fit, adds progress indicator (#6793)

* Made memories full screen

* Uses linear bar and fits the card better for memories

* Fixes pageview close button moving with pages

* Uses hooks instead of stateful components

* Adds ticks to the progress indicator

* Rounds the edges of the progress bar

* Fixes trailing comma analyze error

* Adds padding and hero to memories

* Fixes an issue with initial index set and adds hero / proper padding

* Fixes aspect ratio calculation

* Color

---------

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

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,34 @@ class MemoryCard extends StatelessWidget {
           ),
           GestureDetector(
             onTap: onTap,
+            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.width! / asset.height!;
+                  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 Hero(
+                  tag: 'memory-${asset.id}',
                   child: ImmichImage(
                     asset,
-              fit: BoxFit.fitWidth,
+                    fit: fit,
                     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,
-              ),
             ),
           ),
           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,11 +41,10 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return SafeArea(
-      crossAxisAlignment: CrossAxisAlignment.center,
+      child: Stack(
-      mainAxisAlignment: MainAxisAlignment.center,
         children: [
-        Expanded(
+          Positioned.fill(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
@@ -81,7 +80,13 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
               ],
             ),
           ),
-        Column(
+          Positioned(
+            bottom: 0,
+            left: 0,
+            right: 0,
+            child: Padding(
+              padding: const EdgeInsets.only(bottom: 16.0),
+              child: Column(
                 children: [
                   SizedBox(
                     height: 48,
@@ -89,7 +94,7 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
                       animation: _animation,
                       builder: (context, child) {
                         return Transform.translate(
-                    offset: Offset(0, 5 * _animationController.value),
+                          offset: Offset(0, 8 * _animationController.value),
                           child: child,
                         );
                       },
@@ -108,7 +113,10 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
                   ),
                 ],
               ),
+            ),
+          ),
         ],
+      ),
     );
   }
 }

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

@@ -16,19 +16,22 @@ class MemoryLane extends HookConsumerWidget {
     final memoryLane = memoryLaneFutureProvider
         .whenData(
           (memories) => memories != null
-              ? Container(
+              ? SizedBox(
-                  margin: const EdgeInsets.only(top: 10, left: 10),
                   height: 200,
                   child: ListView.builder(
                     scrollDirection: Axis.horizontal,
                     shrinkWrap: true,
                     itemCount: memories.length,
+                    padding: const EdgeInsets.only(
+                      right: 8.0,
+                      bottom: 8,
+                      top: 10,
+                      left: 10,
+                    ),
                     itemBuilder: (context, index) {
                       final memory = memories[index];
 
-                      return Padding(
+                      return GestureDetector(
-                        padding: const EdgeInsets.only(right: 8.0, bottom: 8),
-                        child: GestureDetector(
                         onTap: () {
                           HapticFeedback.heavyImpact();
                           context.pushRoute(
@@ -51,6 +54,8 @@ class MemoryLane extends HookConsumerWidget {
                                   Colors.black.withOpacity(0.2),
                                   BlendMode.darken,
                                 ),
+                                child: Hero(
+                                  tag: 'memory-${memory.assets[0].id}',
                                   child: ImmichImage(
                                     memory.assets[0],
                                     fit: BoxFit.cover,
@@ -61,6 +66,7 @@ class MemoryLane extends HookConsumerWidget {
                                   ),
                                 ),
                               ),
+                            ),
                             Positioned(
                               bottom: 16,
                               left: 16,
@@ -80,7 +86,6 @@ class MemoryLane extends HookConsumerWidget {
                             ),
                           ],
                         ),
-                        ),
                       );
                     },
                   ),

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

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/constants/immich_colors.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.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 ClipRRect(
+          borderRadius: const BorderRadius.all(Radius.circular(2.0)),
+          child: Stack(
+            children: [
+              LinearProgressIndicator(
+                value: value,
+                backgroundColor: Colors.grey[600],
+                color: immichDarkThemePrimaryColor,
+              ),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: List.generate(
+                  ticks,
+                  (i) => Container(
+                    width: tickWidth,
+                    height: 4,
+                    decoration: BoxDecoration(
+                      border: i == 0
+                          ? null
+                          : Border(
+                              left: BorderSide(
+                                color: context.colorScheme.onSecondaryContainer,
+                                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,28 @@ 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(memoryIndex);
     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
+    useEffect(() {
+      // Memories is an immersive activity
+      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
+      return null;
+    });
+
     toNextMemory() {
       memoryPageController.nextPage(
         duration: const Duration(milliseconds: 500),
@@ -43,7 +57,10 @@ class MemoryPage extends HookConsumerWidget {
     toNextAsset(int currentAssetIndex) {
       if (currentAssetIndex + 1 < currentMemory.value.assets.length) {
         // Go to the next asset
-        memoryAssetPageController.nextPage(
+        PageController controller =
+            memoryAssetPageControllers[currentMemoryIndex.value];
+
+        controller.nextPage(
           curve: Curves.easeInOut,
           duration: const Duration(milliseconds: 500),
         );
@@ -154,7 +171,12 @@ class MemoryPage extends HookConsumerWidget {
       },
       child: Scaffold(
         backgroundColor: bgColor,
-        body: SafeArea(
+        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(),
@@ -164,6 +186,7 @@ class MemoryPage extends HookConsumerWidget {
               onPageChanged: (pageNumber) {
                 HapticFeedback.mediumImpact();
                 if (pageNumber < memories.length) {
+                  currentMemoryIndex.value = pageNumber;
                   currentMemory.value = memories[pageNumber];
                 }
 
@@ -184,14 +207,39 @@ class MemoryPage extends HookConsumerWidget {
                   );
                 }
                 // Build horizontal page
+                final assetController = memoryAssetPageControllers[mIndex];
                 return Column(
                   children: [
+                    Padding(
+                      padding: const EdgeInsets.only(
+                        left: 24.0,
+                        right: 24.0,
+                        top: 8.0,
+                        bottom: 2.0,
+                      ),
+                      child: AnimatedBuilder(
+                        animation: assetController,
+                        builder: (context, child) {
+                          double value = 0.0;
+                          if (assetController.hasClients) {
+                            // We can only access [page] if this has clients
+                            value = assetController.page ?? 0;
+                          }
+                          return MemoryProgressIndicator(
+                            ticks: memories[mIndex].assets.length,
+                            value: (value + 1) / memories[mIndex].assets.length,
+                          );
+                        },
+                      ),
+                    ),
                     Expanded(
-                    child: PageView.builder(
+                      child: Stack(
+                        children: [
+                          PageView.builder(
                             physics: const BouncingScrollPhysics(
                               parent: AlwaysScrollableScrollPhysics(),
                             ),
-                      controller: memoryAssetPageController,
+                            controller: assetController,
                             onPageChanged: onAssetChanged,
                             scrollDirection: Axis.horizontal,
                             itemCount: memories[mIndex].assets.length,
@@ -202,14 +250,37 @@ class MemoryPage extends HookConsumerWidget {
                                 child: MemoryCard(
                                   asset: asset,
                                   onTap: () => toNextAsset(index),
-                            onClose: () => context.popRoute(),
-                            rightCornerText: assetProgress.value,
                                   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]),
                   ],
@@ -218,6 +289,7 @@ class MemoryPage extends HookConsumerWidget {
             ),
           ),
         ),
+      ),
     );
   }
 }