improved motion photo handling

mobile/lib/pages/common/gallery_viewer.page.dart

@@ -55,23 +55,12 @@ class GalleryViewerPage extends HookConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final totalAssets = useState(renderList.totalAssets);
     final isZoomed = useState(false);
-    final isPlayingMotionVideo = useState(false);
+    final isPlayingMotionVideo = useValueNotifier(false);
     final stackIndex = useState(0);
     final localPosition = useRef<Offset?>(null);
     final currentIndex = useValueNotifier(initialIndex);
     final loadAsset = renderList.loadAsset;
 
-    // // Update is playing motion video
-    ref.listen(
-        videoPlaybackValueProvider.select(
-          (playback) => playback.state == VideoPlaybackState.playing,
-        ), (_, isPlaying) {
-      final asset = ref.read(currentAssetProvider);
-      if (asset != null && asset.isMotionPhoto) {
-        isPlayingMotionVideo.value = isPlaying;
-      }
-    });
-
     Future<void> precacheNextImage(int index) async {
       if (!context.mounted) {
         return;
@@ -237,7 +226,8 @@ class GalleryViewerPage extends HookConsumerWidget {
           child: NativeVideoViewerPage(
             key: key,
             asset: asset,
-            placeholder: Image(
+            isPlayingMotionVideo: isPlayingMotionVideo,
+            image: Image(
               key: ValueKey(asset),
               image: ImmichImage.imageProvider(
                 asset: asset,
@@ -266,7 +256,7 @@ class GalleryViewerPage extends HookConsumerWidget {
         }
       }
 
-      if (newAsset.isImage && !isPlayingMotionVideo.value) {
+      if (newAsset.isImage && !newAsset.isMotionPhoto) {
         return buildImage(context, newAsset);
       }
       return buildVideo(context, newAsset);

mobile/lib/pages/common/native_video_viewer.page.dart

@@ -24,12 +24,17 @@ import 'package:wakelock_plus/wakelock_plus.dart';
 class NativeVideoViewerPage extends HookConsumerWidget {
   final Asset asset;
   final bool showControls;
-  final Widget placeholder;
+  final Widget image;
+
+  /// Whether to display the video part of the motion photo
+  /// TODO: this should probably be a provider
+  final ValueNotifier<bool>? isPlayingMotionVideo;
 
   const NativeVideoViewerPage({
     super.key,
     required this.asset,
-    required this.placeholder,
+    required this.image,
+    this.isPlayingMotionVideo,
     this.showControls = true,
   });
 
@@ -44,6 +49,12 @@ class NativeVideoViewerPage extends HookConsumerWidget {
     final lastVideoPosition = useRef(-1);
     final isBuffering = useRef(false);
 
+    if (isPlayingMotionVideo != null) {
+      useListenable(isPlayingMotionVideo);
+    }
+    final showMotionVideo =
+        isPlayingMotionVideo != null && isPlayingMotionVideo!.value;
+
     // When a video is opened through the timeline, `isCurrent` will immediately be true.
     // When swiping from video A to video B, `isCurrent` will initially be true for video A and false for video B.
     // If the swipe is completed, `isCurrent` will be true for video B after a delay.
@@ -413,19 +424,24 @@ class NativeVideoViewerPage extends HookConsumerWidget {
 
     return Stack(
       children: [
-        placeholder, // this is always under the video to avoid flickering
+        // This remains under the video to avoid flickering
+        // For motion videos, this is the image portion of the asset
+        image,
         if (aspectRatio.value != null)
-          Center(
-            key: ValueKey(asset),
-            child: AspectRatio(
+          Visibility.maintain(
+            visible: asset.isVideo || showMotionVideo,
+            child: Center(
               key: ValueKey(asset),
-              aspectRatio: aspectRatio.value!,
-              child: isCurrent
-                  ? NativeVideoPlayerView(
-                      key: ValueKey(asset),
-                      onViewReady: initController,
-                    )
-                  : null,
+              child: AspectRatio(
+                key: ValueKey(asset),
+                aspectRatio: aspectRatio.value!,
+                child: isCurrent
+                    ? NativeVideoPlayerView(
+                        key: ValueKey(asset),
+                        onViewReady: initController,
+                      )
+                    : null,
+              ),
             ),
           ),
         if (showControls) const Center(child: CustomVideoPlayerControls()),