fixing issues with sync between controls

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

@@ -31,6 +31,7 @@ ChewieController? useChewieController(
 }) {
   return use(
     _ChewieControllerHook(
+      keys: [asset],
       asset: asset,
       placeholder: placeholder,
       showOptions: showOptions,
@@ -66,6 +67,7 @@ class _ChewieControllerHook extends Hook<ChewieController?> {
   final VoidCallback? onVideoEnded;
 
   const _ChewieControllerHook({
+    super.keys,
     required this.asset,
     this.controlsSafeAreaMinimum = const EdgeInsets.only(
       bottom: 100,
@@ -94,7 +96,7 @@ class _ChewieControllerHookState
   VideoPlayerController? videoPlayerController;
 
   @override
-  void initHook() async {
+  void initHook() {
     super.initHook();
     _initialize().whenComplete(() => setState(() {}));
   }

mobile/lib/modules/asset_viewer/providers/video_player_controls_provider.dart

@@ -35,6 +35,14 @@ class VideoPlayerControls extends StateNotifier<VideoPlaybackControls> {
     state = value;
   }
 
+  void reset() {
+    state = VideoPlaybackControls(
+      position: 0,
+      pause: false,
+      mute: false,
+    );
+  }
+
   double get position => state.position;
   bool get mute => state.mute;
 

mobile/lib/modules/asset_viewer/ui/custom_video_player_controls.dart

@@ -61,7 +61,12 @@ class CustomVideoPlayerControls extends HookConsumerWidget {
     /// Toggles between playing and pausing depending on the state of the video
     void togglePlay() {
       showControlsAndStartHideTimer();
-      ref.read(videoPlayerControlsProvider.notifier).togglePlay();
+      final state = ref.read(videoPlaybackValueProvider).state;
+      if (state == VideoPlaybackState.playing) {
+        ref.read(videoPlayerControlsProvider.notifier).pause();
+      } else {
+        ref.read(videoPlayerControlsProvider.notifier).play();
+      }
     }
 
     return GestureDetector(

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

@@ -446,7 +446,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                     child: VideoViewerPage(
                       key: ValueKey(a),
                       asset: a,
-                      isMotionVideo: isPlayingVideo.value,
+                      isMotionVideo: a.livePhotoVideoId != null,
                       placeholder: Image(
                         image: provider,
                         fit: BoxFit.contain,

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

@@ -96,8 +96,12 @@ class VideoViewerPage extends HookConsumerWidget {
 
       // Enable the WakeLock while the video is playing
       if (state == VideoPlaybackState.playing) {
+        // Sync with the controls playing
+        ref.read(videoPlayerControlsProvider.notifier).play();
         WakelockPlus.enable();
       } else {
+        // Sync with the controls pause
+        ref.read(videoPlayerControlsProvider.notifier).pause();
         WakelockPlus.disable();
       }
     }
@@ -113,9 +117,10 @@ class VideoViewerPage extends HookConsumerWidget {
         // Hide the controls
         // Done in a microtask to avoid setting the state while the widget is building
         if (!isMotionVideo) {
-          Future.microtask(
+          Future.microtask(() {
-            () => ref.read(showControlsProvider.notifier).show = false,
+            ref.read(showControlsProvider.notifier).show = false;
-          );
+            ref.read(videoPlayerControlsProvider.notifier).reset();
+          });
         }
 
         final video = controller.videoPlayerController.value;
@@ -127,8 +132,8 @@ class VideoViewerPage extends HookConsumerWidget {
         controller.videoPlayerController.addListener(updateVideoPlayback);
         return () {
           // Removes listener when we dispose
-          controller.pause();
           controller.videoPlayerController.removeListener(updateVideoPlayback);
+          controller.pause();
         };
       },
       [controller],