Uses linear bar and fits the card better for memories

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(
+            child: LayoutBuilder(
-              asset,
+              builder: (context, constraints) {
-              fit: BoxFit.fitWidth,
+                // Determine the fit using the aspect ratio
-              height: double.infinity,
+                BoxFit fit = BoxFit.fitWidth;
-              width: double.infinity,
+                if (asset.width != null && asset.height != null) {
-              type: ThumbnailFormat.JPEG,
+                  final aspectRatio = asset.height! / asset.width!;
-              preferredLocalAssetSize: 2048,
+                  final phoneAspectRatio =
-            ),
+                      constraints.maxWidth / constraints.maxHeight;
-          ),
+                  // Look for a 25% difference in either direction
-          Positioned(
+                  if (phoneAspectRatio * .75 < aspectRatio &&
-            top: 2.0,
+                      phoneAspectRatio * 1.25 > aspectRatio) {
-            left: 2.0,
+                    // Cover to look nice if we have nearly the same aspect ratio
-            child: IconButton(
+                    fit = BoxFit.cover;
-              onPressed: onClose,
+                  }
-              icon: const Icon(Icons.close_rounded),
+                }
-              color: Colors.grey[400],
+
-            ),
+                return ImmichImage(
-          ),
+                  asset,
-          Positioned(
+                  fit: fit,
-            right: 18.0,
+                  height: double.infinity,
-            top: 18.0,
+                  width: double.infinity,
-            child: Text(
+                  type: ThumbnailFormat.JPEG,
-              rightCornerText ?? "",
+                  preferredLocalAssetSize: 2048,
-              style: TextStyle(
+                );
-                color: Colors.grey[200],
+              },
-                fontSize: 12.0,
-                fontWeight: FontWeight.bold,
-              ),
             ),
           ),
           if (showTitle)

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

@@ -16,23 +16,33 @@ class MemoryPage extends HookConsumerWidget {
   final List<Memory> memories;
   final int memoryIndex;
 
-  const MemoryPage({
+  MemoryPage({
     required this.memories,
     required this.memoryIndex,
     super.key,
   });
 
+  /// The list of all of the asset page controllers
+  late final memoryAssetPageControllers =
+      List.generate(memories.length, (i) => PageController());
+
+  /// The main vertically scrolling page controller with each list of memories
+  late final memoryPageController = PageController(initialPage: memoryIndex);
+
   @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 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);
@@ -49,7 +59,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),
         );
@@ -175,6 +185,7 @@ class MemoryPage extends HookConsumerWidget {
               onPageChanged: (pageNumber) {
                 HapticFeedback.mediumImpact();
                 if (pageNumber < memories.length) {
+                  currentMemoryIndex.value = pageNumber;
                   currentMemory.value = memories[pageNumber];
                 }
 
@@ -197,33 +208,65 @@ class MemoryPage extends HookConsumerWidget {
                 // Build horizontal page
                 return Column(
                   children: [
+                    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 LinearProgressIndicator(
+                          value: (value + 1) / memories[mIndex].assets.length,
+                        );
+                      },
+                    ),
                     Expanded(
                       child: PageView.builder(
                         physics: const BouncingScrollPhysics(
                           parent: AlwaysScrollableScrollPhysics(),
                         ),
-                        controller: memoryAssetPageController,
+                        controller: memoryAssetPageControllers[mIndex],
                         onPageChanged: onAssetChanged,
                         scrollDirection: Axis.horizontal,
                         itemCount: memories[mIndex].assets.length,
                         itemBuilder: (context, index) {
                           final asset = memories[mIndex].assets[index];
-                          return Container(
+                          return Stack(
-                            color: Colors.black,
+                            children: [
-                            child: MemoryCard(
+                              Container(
-                              asset: asset,
+                                color: Colors.black,
-                              onTap: () => toNextAsset(index),
+                                child: MemoryCard(
-                              onClose: () {
+                                  asset: asset,
-                                // auto_route doesn't invoke pop scope, so
+                                  onTap: () => toNextAsset(index),
-                                // turn off full screen mode here
+                                  title: memories[mIndex].title,
-                                // https://github.com/Milad-Akarie/auto_route_library/issues/1799
+                                  showTitle: index == 0,
-                                context.popRoute();
+                                ),
-                                SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+                              ),
-                              },
+                              Positioned(
-                              rightCornerText: assetProgress.value,
+                                top: 8,
-                              title: memories[mIndex].title,
+                                left: 8,
-                              showTitle: index == 0,
+                                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,
+                                  ),
+                                ),
+                              ),
+                            ],
                           );
                         },
                       ),