Refactors video player controller

format

fixing video

format

Working

format

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

@@ -2,12 +2,10 @@ import 'dart:async';
 import 'dart:io';
 import 'dart:math';
 import 'dart:ui' as ui;
-import 'package:easy_localization/easy_localization.dart';
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
-import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/album/providers/current_album.provider.dart';
@@ -17,7 +15,6 @@ import 'package:immich_mobile/modules/asset_viewer/providers/current_asset.provi
 import 'package:immich_mobile/modules/asset_viewer/providers/show_controls.provider.dart';
 import 'package:immich_mobile/modules/album/ui/add_to_album_bottom_sheet.dart';
 import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_state.provider.dart';
-import 'package:immich_mobile/modules/asset_viewer/services/asset_stack.service.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/advanced_bottom_sheet.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/bottom_gallery_bar.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
@@ -27,14 +24,11 @@ import 'package:immich_mobile/modules/backup/providers/manual_upload.provider.da
 import 'package:immich_mobile/modules/home/ui/upload_dialog.dart';
 import 'package:immich_mobile/modules/partner/providers/partner.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/modules/home/ui/delete_dialog.dart';
 import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
-import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:immich_mobile/shared/providers/user.provider.dart';
 import 'package:immich_mobile/shared/ui/immich_image.dart';
 import 'package:immich_mobile/shared/ui/immich_thumbnail.dart';
-import 'package:immich_mobile/shared/ui/immich_toast.dart';
 import 'package:immich_mobile/shared/ui/photo_view/photo_view_gallery.dart';
 import 'package:immich_mobile/shared/ui/photo_view/src/photo_view_computed_scale.dart';
 import 'package:immich_mobile/shared/ui/photo_view/src/photo_view_scale_state.dart';
@@ -74,16 +68,10 @@ class GalleryViewerPage extends HookConsumerWidget {
     final isLoadOriginal = useState(AppSettingsEnum.loadOriginal.defaultValue);
     final isZoomed = useState<bool>(false);
     final isPlayingMotionVideo = useState(false);
-    final isPlayingVideo = useState(false);
     Offset? localPosition;
     final currentIndex = useState(initialIndex);
     final currentAsset = loadAsset(currentIndex.value);
-    final isTrashEnabled =
-        ref.watch(serverInfoProvider.select((v) => v.serverFeatures.trash));
-    final navStack = AutoRouter.of(context).stackData;
-    final isFromTrash = isTrashEnabled &&
-        navStack.length > 2 &&
-        navStack.elementAt(navStack.length - 2).name == TrashRoute.name;
+
     final stackIndex = useState(-1);
     final stack = showStack && currentAsset.stackChildrenCount > 0
         ? ref.watch(assetStackStateProvider(currentAsset))
@@ -102,7 +90,6 @@ class GalleryViewerPage extends HookConsumerWidget {
         .map((e) => e.isarId)
         .contains(asset.ownerId);
 
-
     // Listen provider to prevent autoDispose when navigating to other routes from within the gallery page
     ref.listen(currentAssetProvider, (_, __) {});
     useEffect(
@@ -223,6 +210,21 @@ class GalleryViewerPage extends HookConsumerWidget {
       }
     }
 
+    handleUpload(Asset asset) {
+      showDialog(
+        context: context,
+        builder: (BuildContext _) {
+          return UploadDialog(
+            onUpload: () {
+              ref
+                  .read(manualUploadProvider.notifier)
+                  .uploadAssets(context, [asset]);
+            },
+          );
+        },
+      );
+    }
+
     buildAppBar() {
       return IgnorePointer(
         ignoring: !ref.watch(showControlsProvider),
@@ -238,8 +240,7 @@ class GalleryViewerPage extends HookConsumerWidget {
               asset: asset,
               onMoreInfoPressed: showInfo,
               onFavorite: toggleFavorite,
-              onUploadPressed:
-                  asset.isLocal ? () => handleUpload(asset) : null,
+              onUploadPressed: asset.isLocal ? () => handleUpload(asset) : null,
               onDownloadPressed: asset.isLocal
                   ? null
                   : () =>
@@ -258,10 +259,6 @@ class GalleryViewerPage extends HookConsumerWidget {
       );
     }
 
-    // TODO: Migrate to a custom bottom bar and handle long press to delete
-    Widget buildBottomBar() {
-    }
-
     useEffect(
       () {
         if (ref.read(showControlsProvider)) {
@@ -297,11 +294,16 @@ class GalleryViewerPage extends HookConsumerWidget {
       }
     });
 
-   Widget buildStackedChildren() {
+    Widget buildStackedChildren() {
       return ListView.builder(
         shrinkWrap: true,
         scrollDirection: Axis.horizontal,
         itemCount: stackElements.length,
+        padding: const EdgeInsets.only(
+          left: 10,
+          right: 10,
+          bottom: 30,
+        ),
         itemBuilder: (context, index) {
           final assetId = stackElements.elementAt(index).remoteId;
           return Padding(
@@ -434,13 +436,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                     minScale: 1.0,
                     basePosition: Alignment.center,
                     child: VideoViewerPage(
-                      onPlaying: () {
-                        isPlayingVideo.value = true;
-                      },
-                      onPaused: () =>
-                          WidgetsBinding.instance.addPostFrameCallback(
-                        (_) => isPlayingVideo.value = false,
-                      ),
+                      key: ValueKey(a),
                       asset: a,
                       isMotionVideo: isPlayingMotionVideo.value,
                       placeholder: Image(
@@ -472,9 +468,24 @@ class GalleryViewerPage extends HookConsumerWidget {
               right: 0,
               child: Column(
                 children: [
-                  buildStackedChildren(),
-                  BottomGalleryBar(
+                  Visibility(
+                    visible: stack.isNotEmpty,
+                    child: SizedBox(
+                      height: 40,
+                      child: buildStackedChildren(),
+                    ),
                   ),
+                  BottomGalleryBar(
+                    totalAssets: totalAssets,
+                    controller: controller,
+                    showStack: showStack,
+                    stackIndex: stackIndex.value,
+                    asset: asset,
+                    showVideoPlayerControls:
+                        !asset.isImage && !isPlayingMotionVideo.value,
+                  ),
+                ],
+              ),
             ),
           ],
         ),

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

@@ -2,15 +2,18 @@ import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:chewie/chewie.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/asset_viewer/hooks/chewiew_controller_hook.dart';
-import 'package:immich_mobile/modules/asset_viewer/ui/video_controls.dart';
-import 'package:immich_mobile/modules/asset_viewer/ui/video_player_controls.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/show_controls.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/video_player_controls_provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/video_player_value_provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/custom_video_player_controls.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/ui/delayed_loading_indicator.dart';
 
 @RoutePage()
 // ignore: must_be_immutable
-class VideoViewerPage extends HookWidget {
+class VideoViewerPage extends HookConsumerWidget {
   final Asset asset;
   final bool isMotionVideo;
   final Widget? placeholder;
@@ -35,25 +38,108 @@ class VideoViewerPage extends HookWidget {
   });
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     final controller = useChewieController(
       asset,
       controlsSafeAreaMinimum: const EdgeInsets.only(
         bottom: 100,
       ),
       placeholder: SizedBox.expand(child: placeholder),
+      customControls: CustomVideoPlayerControls(
+        hideTimerDuration: hideControlsTimer,
+      ),
       showControls: showControls && !isMotionVideo,
       hideControlsTimer: hideControlsTimer,
-      customControls: const VideoPlayerControls(),
       onPlaying: onPlaying,
       onPaused: onPaused,
       onVideoEnded: onVideoEnded,
     );
 
-    // Loading
+    // The last volume of the video used when mute is toggled
+    final lastVolume = useState(0.0);
+
+    // When the volume changes, set the volume
+    ref.listen(videoPlayerControlsProvider.select((value) => value.mute),
+        (_, mute) {
+      if (mute) {
+        controller?.setVolume(0.0);
+      } else {
+        controller?.setVolume(lastVolume.value);
+      }
+    });
+
+    // When the position changes, seek to the position
+    ref.listen(videoPlayerControlsProvider.select((value) => value.position),
+        (_, position) {
+      final video = controller?.videoPlayerController.value;
+      if (video == null) {
+        // No seeeking if there is no video
+        return;
+      }
+
+      // Find the position to seek to
+      final Duration seek = video.duration * (position / 100.0);
+      controller?.seekTo(seek);
+    });
+
+    // When the custom video controls paus or plays
+    ref.listen(videoPlayerControlsProvider.select((value) => value.pause),
+        (_, pause) {
+      if (pause) {
+        controller?.pause();
+      } else {
+        controller?.play();
+      }
+    });
+
+    // Updates the [videoPlaybackValueProvider] with the current
+    // position and duration of the video from the Chewie [controller]
+    // Also sets the error if there is an error in the playback
+    void updateVideoPlayback() {
+      ref.read(videoPlaybackValueProvider.notifier).value =
+          VideoPlaybackValue.fromController(
+        controller?.videoPlayerController,
+      );
+    }
+
+    // Hide the controls when we load
+    useEffect(
+      () {
+        ref.read(showControlsProvider.notifier).show = false;
+        return null;
+      },
+      [],
+    );
+
+    // Adds and removes the listener to the video player
+    useEffect(
+      () {
+        // Guard no controller
+        if (controller == null) {
+          return null;
+        }
+
+        final video = controller.videoPlayerController.value;
+
+        // Hold initial volume
+        lastVolume.value = video.volume;
+
+        // Subscribes to listener
+        controller.videoPlayerController.addListener(updateVideoPlayback);
+        return () {
+          // Removes listener when we dispose
+          controller.videoPlayerController.removeListener(updateVideoPlayback);
+        };
+      },
+      [controller],
+    );
+
     final size = MediaQuery.of(context).size;
-    print('showControls $showControls and isMotion $isMotionVideo');
     return PopScope(
+      onPopInvoked: (pop) {
+        ref.read(videoPlaybackValueProvider.notifier).value =
+            VideoPlaybackValue.uninitialized();
+      },
       child: AnimatedSwitcher(
         duration: const Duration(milliseconds: 400),
         child: Stack(
@@ -81,19 +167,6 @@ class VideoViewerPage extends HookWidget {
                   controller: controller,
                 ),
               ),
-            if (controller != null)
-              Positioned(
-                bottom: 0,
-                left: 0,
-                right: 0,
-                child: SizedBox(
-                  width: size.width,
-                  child: Visibility(
-                    visible: true,
-                    child: const VideoControls(),
-                  ),
-                ),
-              ),
           ],
         ),
       ),