feat(mobile): video zooming in asset viewer (#22036)

* wip

* Functional implementation, still need to bug test.

* Fixed flickering bugs

* Fixed bug with drag actions interfering with zoom panning. Fixed video being zoomable when bottom sheet is shown. Code cleanup.

* Add comments and simplify video controls

* Clearer variable name

* Fix bug where the redundant onTapDown would interfere with zooming gestures

* Fix zoom not working the second time when viewing a video.

* fix video of live photo retaining pan from photo portion

* code cleanup and simplified widget stack

---------

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

mobile/lib/presentation/widgets/asset_viewer/video_viewer.widget.dart

@@ -9,6 +9,7 @@ import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/services/setting.service.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/platform_extensions.dart';
 import 'package:immich_mobile/infrastructure/repositories/storage.repository.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
@@ -25,6 +26,7 @@ import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/utils/debounce.dart';
 import 'package:immich_mobile/utils/hooks/interval_hook.dart';
+import 'package:immich_mobile/widgets/photo_view/photo_view.dart';
 import 'package:logging/logging.dart';
 import 'package:native_video_player/native_video_player.dart';
 import 'package:wakelock_plus/wakelock_plus.dart';
@@ -52,6 +54,8 @@ class NativeVideoViewer extends HookConsumerWidget {
   final bool showControls;
   final int playbackDelayFactor;
   final Widget image;
+  final ValueNotifier<PhotoViewScaleState>? scaleStateNotifier;
+  final bool disableScaleGestures;
 
   const NativeVideoViewer({
     super.key,
@@ -59,6 +63,8 @@ class NativeVideoViewer extends HookConsumerWidget {
     required this.image,
     this.showControls = true,
     this.playbackDelayFactor = 1,
+    this.scaleStateNotifier,
+    this.disableScaleGestures = false,
   });
 
   @override
@@ -138,6 +144,7 @@ class NativeVideoViewer extends HookConsumerWidget {
 
     final videoSource = useMemoized<Future<VideoSource?>>(() => createSource());
     final aspectRatio = useState<double?>(null);
+
     useMemoized(() async {
       if (!context.mounted || aspectRatio.value != null) {
         return null;
@@ -313,6 +320,20 @@ class NativeVideoViewer extends HookConsumerWidget {
       Timer(const Duration(milliseconds: 200), checkIfBuffering);
     }
 
+    Size? videoContextSize(double? videoAspectRatio, BuildContext? context) {
+      Size? videoContextSize;
+      if (videoAspectRatio == null || context == null) {
+        return null;
+      }
+      final contextAspectRatio = context.width / context.height;
+      if (videoAspectRatio > contextAspectRatio) {
+        videoContextSize = Size(context.width, context.width / aspectRatio.value!);
+      } else {
+        videoContextSize = Size(context.height * aspectRatio.value!, context.height);
+      }
+      return videoContextSize;
+    }
+
     ref.listen(currentAssetNotifier, (_, value) {
       final playerController = controller.value;
       if (playerController != null && value != asset) {
@@ -393,26 +414,31 @@ class NativeVideoViewer extends HookConsumerWidget {
       }
     });
 
-    return Stack(
-      children: [
-        // This remains under the video to avoid flickering
-        // For motion videos, this is the image portion of the asset
-        Center(key: ValueKey(asset.heroTag), child: image),
-        if (aspectRatio.value != null && !isCasting)
-          Visibility.maintain(
-            key: ValueKey(asset),
-            visible: isVisible.value,
-            child: Center(
+    return SizedBox(
+      width: context.width,
+      height: context.height,
+      child: Stack(
+        children: [
+          // Hide thumbnail once video is visible to avoid it showing in background when zooming out on video.
+          if (!isVisible.value || controller.value == null) Center(key: ValueKey(asset.heroTag), child: image),
+          if (aspectRatio.value != null && !isCasting && isCurrent)
+            Visibility.maintain(
               key: ValueKey(asset),
-              child: AspectRatio(
+              visible: isVisible.value,
+              child: PhotoView.customChild(
                 key: ValueKey(asset),
-                aspectRatio: aspectRatio.value!,
-                child: isCurrent ? NativeVideoPlayerView(key: ValueKey(asset), onViewReady: initController) : null,
+                enableRotation: false,
+                disableScaleGestures: disableScaleGestures,
+                // Transparent to avoid a black flash when viewer becomes visible but video isn't loaded yet.
+                backgroundDecoration: const BoxDecoration(color: Colors.transparent),
+                scaleStateChangedCallback: (state) => scaleStateNotifier?.value = state,
+                childSize: videoContextSize(aspectRatio.value, context),
+                child: NativeVideoPlayerView(key: ValueKey(asset), onViewReady: initController),
               ),
             ),
-          ),
-        if (showControls) const Center(child: VideoViewerControls()),
-      ],
+          if (showControls) const Center(child: VideoViewerControls()),
+        ],
+      ),
     );
   }