refactor(mobile): Refactor video player page and gallery bottom app bar (#7625)

* Fixes double video auto initialize issue and placeholder for video controller

* WIP unravel stack index

* Refactors video player controller

format

fixing video

format

Working

format

* Fixes hide on pause

* Got hiding when tapped working

* Hides controls when video starts and fixes placeholder for memory card

Remove prints

* Fixes show controls with microtask

* fix LivePhotos not playing

* removes unused function callbacks and moves wakelock

* Update motion video

* Fixing motion photo playing

* Renames to isPlayingVideo

* Fixes playing video on change

* pause on dispose

* fixing issues with sync between controls

* Adds gallery app bar

* Switches to memoized

* Fixes pause

* Revert "Switches to memoized"

This reverts commit 234e6741dea05aa0b967dde746f1d625f15bed94.

* uses stateful widget

* Fixes double video play by using provider and new chewie video player

wip

format

Fixes motion photos

format

---------

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

mobile/lib/modules/asset_viewer/hooks/chewiew_controller_hook.dart

@@ -1,26 +1,19 @@
-import 'dart:async';
-
 import 'package:chewie/chewie.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:immich_mobile/shared/models/asset.dart';
-import 'package:immich_mobile/shared/models/store.dart';
 import 'package:video_player/video_player.dart';
-import 'package:immich_mobile/shared/models/store.dart' as store;
-import 'package:wakelock_plus/wakelock_plus.dart';
 
 /// Provides the initialized video player controller
 /// If the asset is local, use the local file
 /// Otherwise, use a video player with a URL
-ChewieController? useChewieController(
-  Asset asset, {
+ChewieController useChewieController({
+  required VideoPlayerController controller,
   EdgeInsets controlsSafeAreaMinimum = const EdgeInsets.only(
     bottom: 100,
   ),
   bool showOptions = true,
   bool showControlsOnInitialize = false,
   bool autoPlay = true,
-  bool autoInitialize = true,
   bool allowFullScreen = false,
   bool allowedScreenSleep = false,
   bool showControls = true,
@@ -33,7 +26,7 @@ ChewieController? useChewieController(
 }) {
   return use(
     _ChewieControllerHook(
-      asset: asset,
+      controller: controller,
       placeholder: placeholder,
       showOptions: showOptions,
       controlsSafeAreaMinimum: controlsSafeAreaMinimum,
@@ -43,7 +36,6 @@ ChewieController? useChewieController(
       hideControlsTimer: hideControlsTimer,
       showControlsOnInitialize: showControlsOnInitialize,
       showControls: showControls,
-      autoInitialize: autoInitialize,
       allowedScreenSleep: allowedScreenSleep,
       onPlaying: onPlaying,
       onPaused: onPaused,
@@ -52,13 +44,12 @@ ChewieController? useChewieController(
   );
 }
 
-class _ChewieControllerHook extends Hook<ChewieController?> {
-  final Asset asset;
+class _ChewieControllerHook extends Hook<ChewieController> {
+  final VideoPlayerController controller;
   final EdgeInsets controlsSafeAreaMinimum;
   final bool showOptions;
   final bool showControlsOnInitialize;
   final bool autoPlay;
-  final bool autoInitialize;
   final bool allowFullScreen;
   final bool allowedScreenSleep;
   final bool showControls;
@@ -70,14 +61,13 @@ class _ChewieControllerHook extends Hook<ChewieController?> {
   final VoidCallback? onVideoEnded;
 
   const _ChewieControllerHook({
-    required this.asset,
+    required this.controller,
     this.controlsSafeAreaMinimum = const EdgeInsets.only(
       bottom: 100,
     ),
     this.showOptions = true,
     this.showControlsOnInitialize = false,
     this.autoPlay = true,
-    this.autoInitialize = true,
     this.allowFullScreen = false,
     this.allowedScreenSleep = false,
     this.showControls = true,
@@ -94,28 +84,33 @@ class _ChewieControllerHook extends Hook<ChewieController?> {
 }
 
 class _ChewieControllerHookState
-    extends HookState<ChewieController?, _ChewieControllerHook> {
-  ChewieController? chewieController;
-  VideoPlayerController? videoPlayerController;
-
-  @override
-  void initHook() async {
-    super.initHook();
-    unawaited(_initialize());
-  }
+    extends HookState<ChewieController, _ChewieControllerHook> {
+  late ChewieController chewieController = ChewieController(
+    videoPlayerController: hook.controller,
+    controlsSafeAreaMinimum: hook.controlsSafeAreaMinimum,
+    showOptions: hook.showOptions,
+    showControlsOnInitialize: hook.showControlsOnInitialize,
+    autoPlay: hook.autoPlay,
+    allowFullScreen: hook.allowFullScreen,
+    allowedScreenSleep: hook.allowedScreenSleep,
+    showControls: hook.showControls,
+    customControls: hook.customControls,
+    placeholder: hook.placeholder,
+    hideControlsTimer: hook.hideControlsTimer,
+  );
 
   @override
   void dispose() {
-    chewieController?.dispose();
-    videoPlayerController?.dispose();
+    chewieController.dispose();
     super.dispose();
   }
 
   @override
-  ChewieController? build(BuildContext context) {
+  ChewieController build(BuildContext context) {
     return chewieController;
   }
 
+  /*
   /// Initializes the chewie controller and video player controller
   Future<void> _initialize() async {
     if (hook.asset.isLocal && hook.asset.livePhotoVideoId == null) {
@@ -141,39 +136,21 @@ class _ChewieControllerHookState
       );
     }
 
-    videoPlayerController!.addListener(() {
-      final value = videoPlayerController!.value;
-      if (value.isPlaying) {
-        WakelockPlus.enable();
-        hook.onPlaying?.call();
-      } else if (!value.isPlaying) {
-        WakelockPlus.disable();
-        hook.onPaused?.call();
-      }
-
-      if (value.position == value.duration) {
-        WakelockPlus.disable();
-        hook.onVideoEnded?.call();
-      }
-    });
-
     await videoPlayerController!.initialize();
 
-    setState(() {
-      chewieController = ChewieController(
-        videoPlayerController: videoPlayerController!,
-        controlsSafeAreaMinimum: hook.controlsSafeAreaMinimum,
-        showOptions: hook.showOptions,
-        showControlsOnInitialize: hook.showControlsOnInitialize,
-        autoPlay: hook.autoPlay,
-        autoInitialize: hook.autoInitialize,
-        allowFullScreen: hook.allowFullScreen,
-        allowedScreenSleep: hook.allowedScreenSleep,
-        showControls: hook.showControls,
-        customControls: hook.customControls,
-        placeholder: hook.placeholder,
-        hideControlsTimer: hook.hideControlsTimer,
-      );
-    });
+    chewieController = ChewieController(
+      videoPlayerController: videoPlayerController!,
+      controlsSafeAreaMinimum: hook.controlsSafeAreaMinimum,
+      showOptions: hook.showOptions,
+      showControlsOnInitialize: hook.showControlsOnInitialize,
+      autoPlay: hook.autoPlay,
+      allowFullScreen: hook.allowFullScreen,
+      allowedScreenSleep: hook.allowedScreenSleep,
+      showControls: hook.showControls,
+      customControls: hook.customControls,
+      placeholder: hook.placeholder,
+      hideControlsTimer: hook.hideControlsTimer,
+    );
   }
+  */
 }