feat(mobile): Videos play in memories now

mobile/lib/modules/asset_viewer/views/video_viewer_page.dart

@@ -21,40 +21,45 @@ class VideoViewerPage extends HookConsumerWidget {
   final Asset asset;
   final bool isMotionVideo;
   final Widget? placeholder;
-  final VoidCallback onVideoEnded;
+  final VoidCallback? onVideoEnded;
   final VoidCallback? onPlaying;
   final VoidCallback? onPaused;
+  final Duration hideControlsTimer;
+  final bool showControls;
+  final bool showDownloadingIndicator;
 
   const VideoViewerPage({
     super.key,
     required this.asset,
-    required this.isMotionVideo,
-    required this.onVideoEnded,
+    this.isMotionVideo = false,
+    this.onVideoEnded,
     this.onPlaying,
     this.onPaused,
     this.placeholder,
+    this.showControls = true,
+    this.hideControlsTimer = const Duration(seconds: 5),
+    this.showDownloadingIndicator = true,
   });
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     if (asset.isLocal && asset.livePhotoVideoId == null) {
       final AsyncValue<File> videoFile = ref.watch(_fileFamily(asset.local!));
-      return videoFile.when(
-        data: (data) => VideoPlayer(
-          file: data,
-          isMotionVideo: false,
-          onVideoEnded: () {},
-        ),
-        error: (error, stackTrace) => Icon(
-          Icons.image_not_supported_outlined,
-          color: context.primaryColor,
-        ),
-        loading: () => const Center(
-          child: SizedBox(
-            width: 75,
-            height: 75,
-            child: CircularProgressIndicator.adaptive(),
+      return AnimatedSwitcher(
+        duration: const Duration(milliseconds: 200),
+        child: videoFile.when(
+          data: (data) => VideoPlayer(
+            file: data,
+            isMotionVideo: false,
+            onVideoEnded: () {},
           ),
+          error: (error, stackTrace) => Icon(
+            Icons.image_not_supported_outlined,
+            color: context.primaryColor,
+          ),
+          loading: () => showDownloadingIndicator
+              ? const Center(child: ImmichLoadingIndicator())
+              : Container(),
         ),
       );
     }
@@ -74,15 +79,24 @@ class VideoViewerPage extends HookConsumerWidget {
           onPaused: onPaused,
           onPlaying: onPlaying,
           placeholder: placeholder,
+          hideControlsTimer: hideControlsTimer,
+          showControls: showControls,
+          showDownloadingIndicator: showDownloadingIndicator,
         ),
-        if (downloadAssetStatus == DownloadAssetStatus.loading)
-          SizedBox(
+        AnimatedOpacity(
+          duration: const Duration(milliseconds: 400),
+          opacity: (downloadAssetStatus == DownloadAssetStatus.loading &&
+                  showDownloadingIndicator)
+              ? 1.0
+              : 0.0,
+          child: SizedBox(
             height: context.height,
             width: context.width,
             child: const Center(
               child: ImmichLoadingIndicator(),
             ),
           ),
+        ),
       ],
     );
   }
@@ -102,7 +116,9 @@ class VideoPlayer extends StatefulWidget {
   final String? jwtToken;
   final File? file;
   final bool isMotionVideo;
-  final VoidCallback onVideoEnded;
+  final VoidCallback? onVideoEnded;
+  final Duration hideControlsTimer;
+  final bool showControls;
 
   final Function()? onPlaying;
   final Function()? onPaused;
@@ -111,16 +127,23 @@ class VideoPlayer extends StatefulWidget {
   /// usually, a thumbnail of the video
   final Widget? placeholder;
 
+  final bool showDownloadingIndicator;
+
   const VideoPlayer({
     super.key,
     this.url,
     this.jwtToken,
     this.file,
-    required this.onVideoEnded,
+    this.onVideoEnded,
     required this.isMotionVideo,
     this.onPlaying,
     this.onPaused,
     this.placeholder,
+    this.hideControlsTimer = const Duration(
+      seconds: 5,
+    ),
+    this.showControls = true,
+    this.showDownloadingIndicator = true,
   });
 
   @override
@@ -149,7 +172,7 @@ class _VideoPlayerState extends State<VideoPlayer> {
         if (videoPlayerController.value.position ==
             videoPlayerController.value.duration) {
           WakelockPlus.disable();
-          widget.onVideoEnded();
+          widget.onVideoEnded?.call();
         }
       }
     });
@@ -184,9 +207,9 @@ class _VideoPlayerState extends State<VideoPlayer> {
       autoInitialize: true,
       allowFullScreen: false,
       allowedScreenSleep: false,
-      showControls: !widget.isMotionVideo,
+      showControls: widget.showControls && !widget.isMotionVideo,
       customControls: const VideoPlayerControls(),
-      hideControlsTimer: const Duration(seconds: 5),
+      hideControlsTimer: widget.hideControlsTimer,
     );
   }
 
@@ -214,9 +237,10 @@ class _VideoPlayerState extends State<VideoPlayer> {
           child: Stack(
             children: [
               if (widget.placeholder != null) widget.placeholder!,
-              const Center(
-                child: ImmichLoadingIndicator(),
-              ),
+              if (widget.showDownloadingIndicator)
+                const Center(
+                  child: ImmichLoadingIndicator(),
+                ),
             ],
           ),
         ),

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

@@ -3,6 +3,7 @@ import 'dart:ui';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/modules/asset_viewer/views/video_viewer_page.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/models/store.dart';
 import 'package:immich_mobile/shared/ui/immich_image.dart';
@@ -11,19 +12,15 @@ 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;
+  final Function()? onVideoEnded;
 
   const MemoryCard({
     required this.asset,
-    required this.onTap,
-    required this.onClose,
     required this.title,
     required this.showTitle,
-    this.rightCornerText,
+    this.onVideoEnded,
     super.key,
   });
 
@@ -63,37 +60,53 @@ class MemoryCard extends StatelessWidget {
               child: Container(color: Colors.black.withOpacity(0.2)),
             ),
           ),
-          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,
-              ),
-            ),
+          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;
+                }
+              }
+
+              if (asset.isImage) {
+                return Hero(
+                  tag: 'memory-${asset.id}',
+                  child: ImmichImage(
+                    asset,
+                    fit: fit,
+                    height: double.infinity,
+                    width: double.infinity,
+                    type: ThumbnailFormat.JPEG,
+                    preferredLocalAssetSize: 2048,
+                  ),
+                );
+              } else {
+                return Hero(
+                  tag: 'memory-${asset.id}',
+                  child: VideoViewerPage(
+                    asset: asset,
+                    showDownloadingIndicator: false,
+                    placeholder: ImmichImage(
+                      asset,
+                      fit: fit,
+                      type: ThumbnailFormat.JPEG,
+                      preferredLocalAssetSize: 2048,
+                    ),
+                    hideControlsTimer: const Duration(seconds: 2),
+                    onVideoEnded: onVideoEnded,
+                    showControls: false,
+                  ),
+                );
+              }
+            },
           ),
           if (showTitle)
             Positioned(