splitup the player

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

@@ -12,6 +12,7 @@ import 'package:immich_mobile/constants/constants.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/pages/common/download_panel.dart';
+import 'package:immich_mobile/pages/common/native_video_viewer.page.dart';
 import 'package:immich_mobile/pages/common/video_viewer.page.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/asset_stack.provider.dart';
@@ -62,7 +63,6 @@ class GalleryViewerPage extends HookConsumerWidget {
     final localPosition = useState<Offset?>(null);
     final currentIndex = useState(initialIndex);
     final currentAsset = loadAsset(currentIndex.value);
-
     // Update is playing motion video
     ref.listen(videoPlaybackValueProvider.select((v) => v.state), (_, state) {
       isPlayingVideo.value = state == VideoPlaybackState.playing;
@@ -353,6 +353,9 @@ class GalleryViewerPage extends HookConsumerWidget {
                     ),
                   );
                 } else {
+                  final useNativePlayer =
+                      asset.isLocal && asset.livePhotoVideoId == null;
+
                   return PhotoViewGalleryPageOptions.customChild(
                     onDragStart: (_, details, __) =>
                         localPosition.value = details.localPosition,
@@ -367,19 +370,32 @@ class GalleryViewerPage extends HookConsumerWidget {
                     maxScale: 1.0,
                     minScale: 1.0,
                     basePosition: Alignment.center,
-                    child: VideoViewerPage(
-                      key: ValueKey(a),
-                      asset: a,
-                      isMotionVideo: a.livePhotoVideoId != null,
-                      loopVideo: shouldLoopVideo.value,
-                      placeholder: Image(
-                        image: provider,
-                        fit: BoxFit.contain,
-                        height: context.height,
-                        width: context.width,
-                        alignment: Alignment.center,
-                      ),
-                    ),
+                    child: useNativePlayer
+                        ? NativeVideoViewerPage(
+                            key: ValueKey(a),
+                            asset: a,
+                            // loopVideo: shouldLoopVideo.value,
+                            // placeholder: Image(
+                            //   image: provider,
+                            //   fit: BoxFit.contain,
+                            //   height: context.height,
+                            //   width: context.width,
+                            //   alignment: Alignment.center,
+                            // ),
+                          )
+                        : VideoViewerPage(
+                            key: ValueKey(a),
+                            asset: a,
+                            isMotionVideo: a.livePhotoVideoId != null,
+                            loopVideo: shouldLoopVideo.value,
+                            placeholder: Image(
+                              image: provider,
+                              fit: BoxFit.contain,
+                              height: context.height,
+                              width: context.width,
+                              alignment: Alignment.center,
+                            ),
+                          ),
                   );
                 }
               },

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

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/providers/asset_viewer/native_video_player_controller_provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/show_controls.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_controller_provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_controls_provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_value_provider.dart';
+import 'package:immich_mobile/widgets/asset_viewer/video_player.dart';
+import 'package:immich_mobile/widgets/common/delayed_loading_indicator.dart';
+import 'package:native_video_player/native_video_player.dart';
+import 'package:wakelock_plus/wakelock_plus.dart';
+
+class NativeVideoViewerPage extends ConsumerStatefulWidget {
+  final Asset asset;
+  final Widget? placeholder;
+
+  const NativeVideoViewerPage({
+    super.key,
+    required this.asset,
+    this.placeholder,
+  });
+
+  @override
+  NativeVideoViewerPageState createState() => NativeVideoViewerPageState();
+}
+
+class NativeVideoViewerPageState extends ConsumerState<NativeVideoViewerPage> {
+  @override
+  Widget build(BuildContext context) {
+    final size = MediaQuery.sizeOf(context);
+    double videoWidth = size.width;
+    double videoHeight = size.height;
+
+    NativeVideoPlayerController? controller;
+
+    void initController(NativeVideoPlayerController videoCtrl) {
+      controller = videoCtrl;
+
+      controller?.onPlaybackReady.addListener(() {
+        // Emitted when the video loaded successfully and it's ready to play.
+        // At this point, videoInfo is available.
+        final videoInfo = controller?.videoInfo;
+
+        setState(() {
+          if (videoInfo != null) {
+            videoWidth = videoInfo.width.toDouble();
+            videoHeight = videoInfo.height.toDouble();
+
+            print(videoHeight);
+            print(videoWidth);
+          }
+        });
+
+        final videoDuration = videoInfo?.duration;
+
+        controller?.play();
+      });
+
+      controller?.onPlaybackStatusChanged.addListener(() {
+        final playbackStatus = controller?.playbackInfo?.status;
+        // playbackStatus can be playing, paused, or stopped.
+      });
+
+      controller?.onPlaybackPositionChanged.addListener(() {
+        final playbackPosition = controller?.playbackInfo?.position;
+      });
+
+      controller?.onPlaybackEnded.addListener(() {
+        // Emitted when the video has finished playing.
+      });
+    }
+
+    dispose() {
+      controller = null;
+      super.dispose();
+    }
+
+    return PopScope(
+      onPopInvoked: (pop) {
+        ref.read(videoPlaybackValueProvider.notifier).value =
+            VideoPlaybackValue.uninitialized();
+      },
+      child: SizedBox(
+        height: videoHeight,
+        width: videoWidth,
+        child: AspectRatio(
+          aspectRatio: 16 / 9,
+          child: NativeVideoPlayerView(
+            onViewReady: (c) async {
+              // Use a local file for the video player controller
+              final file = await widget.asset.local!.file;
+              if (file == null) {
+                throw Exception('No file found for the video');
+              }
+
+              final videoSource = await VideoSource.init(
+                path: file.path,
+                type: VideoSourceType.file,
+              );
+
+              await c.loadVideoSource(videoSource);
+              initController(c);
+            },
+          ),
+        ),
+      ),
+    );
+  }
+  // final Asset asset;
+  // final Widget? placeholder;
+  // final Duration hideControlsTimer;
+  // final bool showControls;
+  // final bool showDownloadingIndicator;
+  // final bool loopVideo;
+}

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

@@ -103,7 +103,7 @@ class VideoViewerPage extends HookConsumerWidget {
         // Done in a microtask to avoid setting the state while the is building
         if (!isMotionVideo) {
           Future.microtask(() {
-            ref.read(showControlsProvider.notifier).show = true;
+            ref.read(showControlsProvider.notifier).show = false;
           });
         }
 
@@ -148,20 +148,16 @@ class VideoViewerPage extends HookConsumerWidget {
             ),
             if (controller != null)
               SizedBox(
-                height: 16 / 9 * size.width,
+                height: size.height,
                 width: size.width,
-                child: AspectRatio(
-                  aspectRatio: 16 / 9,
-                  child: VideoPlayerViewer(
-                    controller: controller,
-                    isMotionVideo: isMotionVideo,
-                    placeholder: placeholder,
-                    hideControlsTimer: hideControlsTimer,
-                    showControls: showControls,
-                    showDownloadingIndicator: showDownloadingIndicator,
-                    loopVideo: loopVideo,
-                    asset: asset,
-                  ),
+                child: VideoPlayerViewer(
+                  controller: controller,
+                  isMotionVideo: isMotionVideo,
+                  placeholder: placeholder,
+                  hideControlsTimer: hideControlsTimer,
+                  showControls: showControls,
+                  showDownloadingIndicator: showDownloadingIndicator,
+                  loopVideo: loopVideo,
                 ),
               ),
           ],