refinements and fixes

fix orientation for remote assets wip separate widget separate video loader widget fixed memory leak optimized seeking, cleanup debug context pop use global key back to one widget fixed rebuild wait for swipe animation to finish smooth hero animation for remote videos faster scroll animation
2024-11-07 17:14:35 -05:00
parent 3272ad4a7b
commit 49c4d7cff9
12 changed files with 624 additions and 436 deletions
@@ -11,6 +11,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 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/extensions/scroll_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/providers/app_settings.provider.dart';
@@ -53,21 +54,15 @@ class GalleryViewerPage extends HookConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {
-    final settings = ref.watch(appSettingsServiceProvider);
-    final loadAsset = renderList.loadAsset;
    final totalAssets = useState(renderList.totalAssets);
-    final shouldLoopVideo = useState(AppSettingsEnum.loopVideo.defaultValue);
    final isZoomed = useState(false);
-    final isPlayingVideo = useState(false);
-    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;
-    });
-
+    final isPlayingMotionVideo = useState(false);
    final stackIndex = useState(-1);
+    final localPosition = useRef<Offset?>(null);
+    final currentIndex = useValueNotifier(initialIndex);
+    final loadAsset = renderList.loadAsset;
+    final currentAsset = loadAsset(currentIndex.value);
+
    final stack = showStack && currentAsset.stackCount > 0
        ? ref.watch(assetStackStateProvider(currentAsset))
        : <Asset>[];
@@ -79,30 +74,23 @@ class GalleryViewerPage extends HookConsumerWidget {
        ? currentAsset
        : stackElements.elementAt(stackIndex.value);

-    final isMotionPhoto = asset.livePhotoVideoId != null;
-    // Listen provider to prevent autoDispose when navigating to other routes from within the gallery page
-    ref.listen(currentAssetProvider, (_, __) {});
-    useEffect(
-      () {
-        // Delay state update to after the execution of build method
-        Future.microtask(
-          () => ref.read(currentAssetProvider.notifier).set(asset),
-        );
-        return null;
-      },
-      [asset],
-    );
-
-    useEffect(
-      () {
-        shouldLoopVideo.value =
-            settings.getSetting<bool>(AppSettingsEnum.loopVideo);
-        return null;
-      },
-      [],
-    );
+    // // Update is playing motion video
+    if (asset.isMotionPhoto) {
+      ref.listen(
+          videoPlaybackValueProvider.select(
+            (playback) => playback.state == VideoPlaybackState.playing,
+          ), (wasPlaying, isPlaying) {
+        if (wasPlaying != null && wasPlaying && !isPlaying) {
+          isPlayingMotionVideo.value = false;
+        }
+      });
+    }

    Future<void> precacheNextImage(int index) async {
+      if (!context.mounted) {
+        return;
+      }
+
      void onError(Object exception, StackTrace? stackTrace) {
        // swallow error silently
        debugPrint('Error precaching next image: $exception, $stackTrace');
@@ -110,6 +98,7 @@ class GalleryViewerPage extends HookConsumerWidget {

      try {
        if (index < totalAssets.value && index >= 0) {
+          log.info('Precaching next image at index $index');
          final asset = loadAsset(index);
          await precacheImage(
            ImmichImage.imageProvider(asset: asset),
@@ -124,6 +113,27 @@ class GalleryViewerPage extends HookConsumerWidget {
      }
    }

+    // Listen provider to prevent autoDispose when navigating to other routes from within the gallery page
+    ref.listen(currentAssetProvider, (prev, cur) {
+      log.info('Current asset changed from ${prev?.id} to ${cur?.id}');
+    });
+
+    useEffect(() {
+      ref.read(currentAssetProvider.notifier).set(asset);
+      if (ref.read(showControlsProvider)) {
+        SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+      } else {
+        SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
+      }
+
+      // Delay this a bit so we can finish loading the page
+      Timer(const Duration(milliseconds: 400), () {
+        precacheNextImage(currentIndex.value + 1);
+      });
+
+      return null;
+    });
+
    void showInfo() {
      showModalBottomSheet(
        shape: const RoundedRectangleBorder(
@@ -182,34 +192,6 @@ class GalleryViewerPage extends HookConsumerWidget {
      }
    }

-    useEffect(
-      () {
-        if (ref.read(showControlsProvider)) {
-          SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
-        } else {
-          SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
-        }
-        isPlayingVideo.value = false;
-        return null;
-      },
-      [],
-    );
-
-    useEffect(
-      () {
-        // No need to await this
-        unawaited(
-          // Delay this a bit so we can finish loading the page
-          Future.delayed(const Duration(milliseconds: 400)).then(
-            // Precache the next image
-            (_) => precacheNextImage(currentIndex.value + 1),
-          ),
-        );
-        return null;
-      },
-      [],
-    );
-
    ref.listen(showControlsProvider, (_, show) {
      if (show) {
        SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
@@ -219,7 +201,12 @@ class GalleryViewerPage extends HookConsumerWidget {
    });

    Widget buildStackedChildren() {
+      if (!showStack) {
+        return const SizedBox();
+      }
+
      return ListView.builder(
+        key: ValueKey(currentAsset),
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: stackElements.length,
@@ -230,7 +217,11 @@ class GalleryViewerPage extends HookConsumerWidget {
        ),
        itemBuilder: (context, index) {
          final assetId = stackElements.elementAt(index).remoteId;
+          if (assetId == null) {
+            return const SizedBox();
+          }
          return Padding(
+            key: ValueKey(assetId),
            padding: const EdgeInsets.only(right: 5),
            child: GestureDetector(
              onTap: () => stackIndex.value = index,
@@ -252,7 +243,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                  borderRadius: BorderRadius.circular(4),
                  child: Image(
                    fit: BoxFit.cover,
-                    image: ImmichRemoteImageProvider(assetId: assetId!),
+                    image: ImmichRemoteImageProvider(assetId: assetId),
                  ),
                ),
              ),
@@ -262,6 +253,95 @@ class GalleryViewerPage extends HookConsumerWidget {
      );
    }

+    Object getHeroTag(Asset asset) {
+      return isFromDto
+          ? '${asset.remoteId}-$heroOffset'
+          : asset.id + heroOffset;
+    }
+
+    PhotoViewGalleryPageOptions buildImage(BuildContext context, Asset asset) {
+      return PhotoViewGalleryPageOptions(
+        onDragStart: (_, details, __) {
+          localPosition.value = details.localPosition;
+        },
+        onDragUpdate: (_, details, __) {
+          handleSwipeUpDown(details);
+        },
+        onTapDown: (_, __, ___) {
+          ref.read(showControlsProvider.notifier).toggle();
+        },
+        onLongPressStart: (_, __, ___) {
+          if (asset.livePhotoVideoId != null) {
+            isPlayingMotionVideo.value = true;
+          }
+        },
+        imageProvider: ImmichImage.imageProvider(asset: asset),
+        heroAttributes: PhotoViewHeroAttributes(
+          tag: getHeroTag(asset),
+          transitionOnUserGestures: true,
+        ),
+        filterQuality: FilterQuality.high,
+        tightMode: true,
+        minScale: PhotoViewComputedScale.contained,
+        errorBuilder: (context, error, stackTrace) => ImmichImage(
+          asset,
+          fit: BoxFit.contain,
+        ),
+      );
+    }
+
+    PhotoViewGalleryPageOptions buildVideo(BuildContext context, Asset asset) {
+      final key = GlobalKey();
+      final tag = getHeroTag(asset);
+      return PhotoViewGalleryPageOptions.customChild(
+        onDragStart: (_, details, __) =>
+            localPosition.value = details.localPosition,
+        onDragUpdate: (_, details, __) => handleSwipeUpDown(details),
+        heroAttributes: PhotoViewHeroAttributes(
+          tag: tag,
+          transitionOnUserGestures: true,
+        ),
+        filterQuality: FilterQuality.high,
+        initialScale: 1.0,
+        maxScale: 1.0,
+        minScale: 1.0,
+        basePosition: Alignment.center,
+        child: Hero(
+          tag: tag,
+          child: SizedBox(
+            width: context.width,
+            height: context.height,
+            child: NativeVideoViewerPage(
+              key: key,
+              asset: asset,
+              placeholder: Image(
+                key: ValueKey(asset),
+                image: ImmichImage.imageProvider(asset: asset),
+                fit: BoxFit.contain,
+                height: context.height,
+                width: context.width,
+                alignment: Alignment.center,
+              ),
+            ),
+          ),
+        ),
+      );
+    }
+
+    PhotoViewGalleryPageOptions buildAsset(BuildContext context, int index) {
+      final newAsset = index == currentIndex.value ? asset : loadAsset(index);
+
+      if (newAsset.isImage) {
+        ref.read(showControlsProvider.notifier).show = false;
+      }
+
+      if (newAsset.isImage && !isPlayingMotionVideo.value) {
+        return buildImage(context, newAsset);
+      }
+      log.info('Loading asset ${newAsset.id} (index $index) as video');
+      return buildVideo(context, newAsset);
+    }
+
    return PopScope(
      // Change immersive mode back to normal "edgeToEdge" mode
      onPopInvokedWithResult: (didPop, _) =>
@@ -271,10 +351,13 @@ class GalleryViewerPage extends HookConsumerWidget {
        body: Stack(
          children: [
            PhotoViewGallery.builder(
+              key: ValueKey(asset),
              scaleStateChangedCallback: (state) {
                isZoomed.value = state != PhotoViewScaleState.initial;
                ref.read(showControlsProvider.notifier).show = !isZoomed.value;
              },
+              // wantKeepAlive: true,
+              gaplessPlayback: true,
              loadingBuilder: (context, event, index) => ClipRect(
                child: Stack(
                  fit: StackFit.expand,
@@ -286,6 +369,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                      ),
                    ),
                    ImmichThumbnail(
+                      key: ValueKey(asset),
                      asset: asset,
                      fit: BoxFit.contain,
                    ),
@@ -296,92 +380,40 @@ class GalleryViewerPage extends HookConsumerWidget {
              scrollPhysics: isZoomed.value
                  ? const NeverScrollableScrollPhysics() // Don't allow paging while scrolled in
                  : (Platform.isIOS
-                      ? const ScrollPhysics() // Use bouncing physics for iOS
-                      : const ClampingScrollPhysics() // Use heavy physics for Android
+                      ? const FastScrollPhysics() // Use bouncing physics for iOS
+                      : const FastClampingScrollPhysics() // Use heavy physics for Android
                  ),
              itemCount: totalAssets.value,
              scrollDirection: Axis.horizontal,
-              onPageChanged: (value) async {
+              onPageChanged: (value) {
+                log.info('Page changed to $value');
                final next = currentIndex.value < value ? value + 1 : value - 1;

                ref.read(hapticFeedbackProvider.notifier).selectionClick();

+                final newAsset =
+                    value == currentIndex.value ? asset : loadAsset(value);
+                if (!newAsset.isImage || newAsset.isMotionPhoto) {
+                  ref.read(videoPlaybackValueProvider.notifier).reset();
+                }
+
                currentIndex.value = value;
                stackIndex.value = -1;
-                isPlayingVideo.value = false;
+                isPlayingMotionVideo.value = false;

-                // Wait for page change animation to finish
-                await Future.delayed(const Duration(milliseconds: 400));
-                // Then precache the next image
-                unawaited(precacheNextImage(next));
-              },
-              builder: (context, index) {
-                final a =
-                    index == currentIndex.value ? asset : loadAsset(index);
-
-                final ImageProvider provider =
-                    ImmichImage.imageProvider(asset: a);
-
-                if (a.isImage && !isPlayingVideo.value) {
-                  return PhotoViewGalleryPageOptions(
-                    onDragStart: (_, details, __) =>
-                        localPosition.value = details.localPosition,
-                    onDragUpdate: (_, details, __) =>
-                        handleSwipeUpDown(details),
-                    onTapDown: (_, __, ___) {
-                      ref.read(showControlsProvider.notifier).toggle();
-                    },
-                    onLongPressStart: (_, __, ___) {
-                      if (asset.livePhotoVideoId != null) {
-                        isPlayingVideo.value = true;
-                      }
-                    },
-                    imageProvider: provider,
-                    heroAttributes: PhotoViewHeroAttributes(
-                      tag: isFromDto
-                          ? '${currentAsset.remoteId}-$heroOffset'
-                          : currentAsset.id + heroOffset,
-                      transitionOnUserGestures: true,
-                    ),
-                    filterQuality: FilterQuality.high,
-                    tightMode: true,
-                    minScale: PhotoViewComputedScale.contained,
-                    errorBuilder: (context, error, stackTrace) => ImmichImage(
-                      a,
-                      fit: BoxFit.contain,
-                    ),
-                  );
-                } else {
-                  return PhotoViewGalleryPageOptions.customChild(
-                    onDragStart: (_, details, __) =>
-                        localPosition.value = details.localPosition,
-                    onDragUpdate: (_, details, __) =>
-                        handleSwipeUpDown(details),
-                    heroAttributes: PhotoViewHeroAttributes(
-                      tag: isFromDto
-                          ? '${currentAsset.remoteId}-$heroOffset'
-                          : currentAsset.id + heroOffset,
-                    ),
-                    filterQuality: FilterQuality.high,
-                    maxScale: 1.0,
-                    minScale: 1.0,
-                    basePosition: Alignment.center,
-                    child: NativeVideoViewerPage(
-                      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,
-                      ),
-                    ),
-                  );
-                }
+                // Delay setting the new asset to avoid a stutter in the page change animation
+                // TODO: make the scroll animation finish more quickly, and ideally have a callback for when it's done
+                ref.read(currentAssetProvider.notifier).set(newAsset);
+                // Timer(const Duration(milliseconds: 450), () {
+                // ref.read(currentAssetProvider.notifier).set(newAsset);
+                // });
+
+                // Wait for page change animation to finish, then precache the next image
+                Timer(const Duration(milliseconds: 400), () {
+                  precacheNextImage(next);
+                });
              },
+              builder: buildAsset,
            ),
            Positioned(
              top: 0,
@@ -390,9 +422,9 @@ class GalleryViewerPage extends HookConsumerWidget {
              child: GalleryAppBar(
                asset: asset,
                showInfo: showInfo,
-                isPlayingVideo: isPlayingVideo.value,
+                isPlayingVideo: isPlayingMotionVideo.value,
                onToggleMotionVideo: () =>
-                    isPlayingVideo.value = !isPlayingVideo.value,
+                    isPlayingMotionVideo.value = !isPlayingMotionVideo.value,
              ),
            ),
            Positioned(
@@ -416,7 +448,8 @@ class GalleryViewerPage extends HookConsumerWidget {
                    stackIndex: stackIndex.value,
                    asset: asset,
                    assetIndex: currentIndex,
-                    showVideoPlayerControls: !asset.isImage && !isMotionPhoto,
+                    showVideoPlayerControls:
+                        !asset.isImage && !asset.isMotionPhoto,
                  ),
                ],
              ),
@@ -5,304 +5,429 @@ import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
-import 'package:immich_mobile/providers/asset_viewer/show_controls.provider.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/current_asset.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/services/api.service.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/services/asset.service.dart';
+import 'package:immich_mobile/utils/hooks/interval_hook.dart';
 import 'package:immich_mobile/widgets/asset_viewer/custom_video_player_controls.dart';
-import 'package:immich_mobile/widgets/common/delayed_loading_indicator.dart';
+import 'package:logging/logging.dart';
 import 'package:native_video_player/native_video_player.dart';
+import 'package:photo_manager/photo_manager.dart';
 import 'package:wakelock_plus/wakelock_plus.dart';

 class NativeVideoViewerPage extends HookConsumerWidget {
  final Asset asset;
-  final bool isMotionVideo;
-  final Widget? placeholder;
  final bool showControls;
  final Duration hideControlsTimer;
-  final bool loopVideo;
+  final Widget placeholder;
+  // final ValueNotifier<bool>? doInitialize;

  const NativeVideoViewerPage({
    super.key,
    required this.asset,
-    this.isMotionVideo = false,
-    this.placeholder,
+    required this.placeholder,
    this.showControls = true,
    this.hideControlsTimer = const Duration(seconds: 5),
-    this.loopVideo = false,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
+    final loopVideo = ref.watch(
+      appSettingsServiceProvider.select(
+        (settings) => settings.getSetting<bool>(AppSettingsEnum.loopVideo),
+      ),
+    );
    final controller = useState<NativeVideoPlayerController?>(null);
    final lastVideoPosition = useRef(-1);
    final isBuffering = useRef(false);
-    final width = useRef<double>(asset.width?.toDouble() ?? 1.0);
-    final height = useRef<double>(asset.height?.toDouble() ?? 1.0);
+    final currentAsset = useState(ref.read(currentAssetProvider));
+    final isCurrent = currentAsset.value == asset;

-    void checkIfBuffering([Timer? timer]) {
+    final log = Logger('NativeVideoViewerPage');
+    log.info('Building NativeVideoViewerPage');
+
+    final localEntity = useMemoized(() {
+      if (!asset.isLocal) {
+        return null;
+      }
+
+      return AssetEntity.fromId(asset.localId!);
+    });
+
+    Future<double?> calculateAspectRatio() async {
+      if (!context.mounted) {
+        log.info('calculateAspectRatio: Context is not mounted');
+        return null;
+      }
+
+      log.info('Calculating aspect ratio');
+      late final double? orientatedWidth;
+      late final double? orientatedHeight;
+
+      if (asset.exifInfo != null) {
+        orientatedWidth = asset.orientatedWidth?.toDouble();
+        orientatedHeight = asset.orientatedHeight?.toDouble();
+      } else if (localEntity != null) {
+        final entity = await localEntity;
+        orientatedWidth = entity?.orientatedWidth.toDouble();
+        orientatedHeight = entity?.orientatedHeight.toDouble();
+      } else {
+        final entity = await ref.read(assetServiceProvider).loadExif(asset);
+        orientatedWidth = entity.orientatedWidth?.toDouble();
+        orientatedHeight = entity.orientatedHeight?.toDouble();
+      }
+
+      log.info('Calculated aspect ratio');
+      if (orientatedWidth != null &&
+          orientatedHeight != null &&
+          orientatedWidth > 0 &&
+          orientatedHeight > 0) {
+        return orientatedWidth / orientatedHeight;
+      }
+
+      return 1.0;
+    }
+
+    Future<VideoSource?> createSource() async {
+      if (!context.mounted) {
+        log.info('createSource: Context is not mounted');
+        return null;
+      }
+
+      if (localEntity != null && asset.livePhotoVideoId == null) {
+        log.info('Loading video from local storage');
+
+        final file = await (await localEntity)!.file;
+        if (file == null) {
+          throw Exception('No file found for the video');
+        }
+
+        final source = await VideoSource.init(
+          path: file.path,
+          type: VideoSourceType.file,
+        );
+        log.info('Loaded video from local storage');
+        return source;
+      }
+
+      log.info('Loading video from server');
+
+      // Use a network URL for the video player controller
+      final serverEndpoint = Store.get(StoreKey.serverEndpoint);
+      final String videoUrl = asset.livePhotoVideoId != null
+          ? '$serverEndpoint/assets/${asset.livePhotoVideoId}/video/playback'
+          : '$serverEndpoint/assets/${asset.remoteId}/video/playback';
+
+      final source = await VideoSource.init(
+        path: videoUrl,
+        type: VideoSourceType.network,
+        headers: ApiService.getRequestHeaders(),
+      );
+      log.info('Loaded video from server');
+      return source;
+    }
+
+    final videoSource = useState<VideoSource?>(null);
+    final aspectRatio = useState<double?>(null);
+    useMemoized(
+      () async {
+        if (!context.mounted) {
+          log.info('combined: Context is not mounted');
+          return null;
+        }
+
+        final (videoSourceRes, aspectRatioRes) =
+            await (createSource(), calculateAspectRatio()).wait;
+        if (videoSourceRes == null || aspectRatioRes == null) {
+          log.info('combined: Video source or aspect ratio is null');
+          return;
+        }
+
+        // if opening a remote video from a hero animation, delay initialization to avoid a stutter
+        if (!asset.isLocal && isCurrent) {
+          await Future.delayed(const Duration(milliseconds: 150));
+        }
+
+        videoSource.value = videoSourceRes;
+        aspectRatio.value = aspectRatioRes;
+      },
+    );
+
+    void checkIfBuffering() {
      if (!context.mounted) {
-        timer?.cancel();
        return;
      }

+      log.info('Checking if buffering');
      final videoPlayback = ref.read(videoPlaybackValueProvider);
      if ((isBuffering.value ||
              videoPlayback.state == VideoPlaybackState.initializing) &&
          videoPlayback.state != VideoPlaybackState.buffering) {
+        log.info('Marking video as buffering');
        ref.read(videoPlaybackValueProvider.notifier).value =
            videoPlayback.copyWith(state: VideoPlaybackState.buffering);
      }
    }

    // timer to mark videos as buffering if the position does not change
-    final bufferingTimer = useRef<Timer>(
-      Timer.periodic(const Duration(seconds: 5), checkIfBuffering),
-    );
-
-    Future<VideoSource> createSource(Asset asset) async {
-      if (asset.isLocal && asset.livePhotoVideoId == null) {
-        final entity = await asset.local!.obtainForNewProperties();
-        final file = await entity?.file;
-        if (entity == null || file == null) {
-          throw Exception('No file found for the video');
-        }
-
-        width.value = entity.orientatedWidth.toDouble();
-        height.value = entity.orientatedHeight.toDouble();
-
-        return await VideoSource.init(
-          path: file.path,
-          type: VideoSourceType.file,
-        );
-      } else {
-        final assetWithExif =
-            await ref.read(assetServiceProvider).loadExif(asset);
-        final shouldFlip = assetWithExif.exifInfo?.isFlipped ?? false;
-        width.value = (shouldFlip ? assetWithExif.height : assetWithExif.width)
-                ?.toDouble() ??
-            width.value;
-        height.value = (shouldFlip ? assetWithExif.width : assetWithExif.height)
-                ?.toDouble() ??
-            height.value;
-
-        // Use a network URL for the video player controller
-        final serverEndpoint = Store.get(StoreKey.serverEndpoint);
-        final String videoUrl = asset.livePhotoVideoId != null
-            ? '$serverEndpoint/assets/${asset.livePhotoVideoId}/video/playback'
-            : '$serverEndpoint/assets/${asset.remoteId}/video/playback';
-
-        return await VideoSource.init(
-          path: videoUrl,
-          type: VideoSourceType.network,
-          headers: ApiService.getRequestHeaders(),
-        );
-      }
-    }
+    useInterval(const Duration(seconds: 5), checkIfBuffering);

    // When the volume changes, set the volume
    ref.listen(videoPlayerControlsProvider.select((value) => value.mute),
        (_, mute) {
+      final playerController = controller.value;
+      if (playerController == null) {
+        return;
+      }
+
+      final playbackInfo = playerController.playbackInfo;
+      if (playbackInfo == null) {
+        return;
+      }
+
      try {
-        if (mute) {
-          controller.value?.setVolume(0.0);
-        } else {
-          controller.value?.setVolume(0.7);
+        if (mute && playbackInfo.volume != 0.0) {
+          playerController.setVolume(0.0);
+        } else if (!mute && playbackInfo.volume != 0.7) {
+          playerController.setVolume(0.7);
        }
-      } catch (_) {
-        // Consume error from the controller
+      } catch (error) {
+        log.severe('Error setting volume: $error');
      }
    });

    // When the position changes, seek to the position
    ref.listen(videoPlayerControlsProvider.select((value) => value.position),
        (_, position) {
-      if (controller.value == null) {
-        // No seeeking if there is no video
+      final playerController = controller.value;
+      if (playerController == null) {
+        return;
+      }
+
+      final playbackInfo = playerController.playbackInfo;
+      if (playbackInfo == null) {
        return;
      }

      // Find the position to seek to
-      final Duration seek = asset.duration * (position / 100.0);
-      try {
-        controller.value?.seekTo(seek.inSeconds);
-      } catch (_) {
-        // Consume error from the controller
+      final int seek = (asset.duration * (position / 100.0)).inSeconds;
+      if (seek != playbackInfo.position) {
+        try {
+          playerController.seekTo(seek);
+        } catch (error) {
+          log.severe('Error seeking to position $position: $error');
+        }
      }
+
+      ref.read(videoPlaybackValueProvider.notifier).position =
+          Duration(seconds: seek);
    });

-    // When the custom video controls paus or plays
+    // // When the custom video controls pause or play
    ref.listen(videoPlayerControlsProvider.select((value) => value.pause),
        (_, pause) {
+      final videoController = controller.value;
+      if (videoController == null || !context.mounted) {
+        return;
+      }
+
      try {
        if (pause) {
-          controller.value?.pause();
+          log.info('Pausing video');
+          videoController.pause();
        } else {
-          controller.value?.play();
+          log.info('Playing video');
+          videoController.play();
        }
-      } catch (_) {
-        // Consume error from the controller
+      } catch (error) {
+        log.severe('Error pausing or playing video: $error');
      }
    });

-    void updateVideoPlayback() {
-      if (controller.value == null || !context.mounted) {
+    void onPlaybackReady() {
+      final videoController = controller.value;
+      if (videoController == null || !isCurrent || !context.mounted) {
+        return;
+      }
+
+      log.info('Playback ready for video ${asset.id}');
+
+      try {
+        videoController.play();
+        videoController.setVolume(0.9);
+      } catch (error) {
+        log.severe('Error playing video: $error');
+      }
+    }
+
+    ref.listen(currentAssetProvider, (_, value) {
+      log.info(
+        'Changing currentAsset from ${currentAsset.value?.id} isCurrent to ${value?.id}',
+      );
+      // Delay the video playback to avoid a stutter in the swipe animation
+      Timer(const Duration(milliseconds: 350), () {
+        if (!context.mounted) {
+          return;
+        }
+
+        log.info(
+          'Changed currentAsset from ${currentAsset.value?.id} isCurrent to ${value?.id}',
+        );
+        currentAsset.value = value;
+        if (currentAsset.value == asset) {
+          onPlaybackReady();
+        }
+      });
+    });
+
+    void onPlaybackStatusChanged() {
+      final videoController = controller.value;
+      if (videoController == null || !context.mounted) {
        return;
      }

      final videoPlayback =
-          VideoPlaybackValue.fromNativeController(controller.value!);
-      ref.read(videoPlaybackValueProvider.notifier).value = videoPlayback;
-      // Check if the video is buffering
-      if (videoPlayback.state == VideoPlaybackState.playing) {
-        isBuffering.value =
-            lastVideoPosition.value == videoPlayback.position.inSeconds;
-        lastVideoPosition.value = videoPlayback.position.inSeconds;
-      } else {
-        isBuffering.value = false;
-        lastVideoPosition.value = -1;
+          VideoPlaybackValue.fromNativeController(videoController);
+      if (videoPlayback.state == VideoPlaybackState.completed && loopVideo) {
+        return;
      }
-      final state = videoPlayback.state;
+      ref.read(videoPlaybackValueProvider.notifier).value = videoPlayback;

-      // Enable the WakeLock while the video is playing
-      if (state == VideoPlaybackState.playing) {
+      if (videoPlayback.state == VideoPlaybackState.playing) {
        // Sync with the controls playing
        WakelockPlus.enable();
+        log.info('Video ${asset.id} is playing; enabled wakelock');
      } else {
        // Sync with the controls pause
        WakelockPlus.disable();
-      }
-    }
-
-    void onPlaybackReady() {
-      try {
-        controller.value?.play();
-        controller.value?.setVolume(0.9);
-      } catch (_) {
-        // Consume error from the controller
+        log.info('Video ${asset.id} is not playing; disabled wakelock');
      }
    }

    void onPlaybackPositionChanged() {
-      updateVideoPlayback();
-    }
-
-    void onPlaybackEnded() {
-      try {
-        if (loopVideo) {
-          controller.value?.play();
-        }
-      } catch (_) {
-        // Consume error from the controller
-      }
-    }
-
-    Future<void> initController(NativeVideoPlayerController nc) async {
-      if (controller.value != null) {
+      final videoController = controller.value;
+      if (videoController == null || !context.mounted) {
        return;
      }

+      final playbackInfo = videoController.playbackInfo;
+      if (playbackInfo == null) {
+        return;
+      }
+
+      ref.read(videoPlaybackValueProvider.notifier).position =
+          Duration(seconds: playbackInfo.position);
+
+      // Check if the video is buffering
+      if (playbackInfo.status == PlaybackStatus.playing) {
+        isBuffering.value = lastVideoPosition.value == playbackInfo.position;
+        lastVideoPosition.value = playbackInfo.position;
+      } else {
+        isBuffering.value = false;
+        lastVideoPosition.value = -1;
+      }
+    }
+
+    void onPlaybackEnded() {
+      final videoController = controller.value;
+      if (videoController == null || !context.mounted) {
+        return;
+      }
+
+      if (loopVideo) {
+        try {
+          videoController.play();
+        } catch (error) {
+          log.severe('Error looping video: $error');
+        }
+      } else {
+        WakelockPlus.disable();
+      }
+    }
+
+    void initController(NativeVideoPlayerController nc) {
+      log.info('initController for ${asset.id} started');
+      if (controller.value != null) {
+        log.info(
+            'initController for ${asset.id}: Controller already initialized');
+        return;
+      }
+      ref.read(videoPlayerControlsProvider.notifier).reset();
+      ref.read(videoPlaybackValueProvider.notifier).reset();
+
      nc.onPlaybackPositionChanged.addListener(onPlaybackPositionChanged);
-      nc.onPlaybackStatusChanged.addListener(onPlaybackPositionChanged);
+      nc.onPlaybackStatusChanged.addListener(onPlaybackStatusChanged);
      nc.onPlaybackReady.addListener(onPlaybackReady);
      nc.onPlaybackEnded.addListener(onPlaybackEnded);

-      final videoSource = await createSource(asset);
-      nc.loadVideoSource(videoSource);
+      nc.loadVideoSource(videoSource.value!);

+      log.info('initController for ${asset.id}: setting controller');
      controller.value = nc;
      Timer(const Duration(milliseconds: 200), checkIfBuffering);
    }

    useEffect(
      () {
-        Future.microtask(
-          () => ref.read(videoPlayerControlsProvider.notifier).reset(),
-        );
-
-        if (isMotionVideo) {
-          // ignore: prefer-extracting-callbacks
-          Future.microtask(() {
-            ref.read(showControlsProvider.notifier).show = false;
-          });
-        }
-
        return () {
-          bufferingTimer.value.cancel();
-          try {
-            controller.value?.onPlaybackPositionChanged
-                .removeListener(onPlaybackPositionChanged);
-            controller.value?.onPlaybackStatusChanged
-                .removeListener(onPlaybackPositionChanged);
-            controller.value?.onPlaybackReady.removeListener(onPlaybackReady);
-            controller.value?.onPlaybackEnded.removeListener(onPlaybackEnded);
-            controller.value?.stop();
-          } catch (_) {
-            // Consume error from the controller
+          log.info('Cleaning up video ${asset.id}');
+          final playerController = controller.value;
+          if (playerController == null) {
+            log.info('Controller is null');
+            return;
          }
+
+          try {
+            playerController.stop();
+
+            playerController.onPlaybackPositionChanged
+                .removeListener(onPlaybackPositionChanged);
+            playerController.onPlaybackStatusChanged
+                .removeListener(onPlaybackStatusChanged);
+            playerController.onPlaybackReady.removeListener(onPlaybackReady);
+            playerController.onPlaybackEnded.removeListener(onPlaybackEnded);
+          } catch (error) {
+            log.severe('Error during useEffect cleanup: $error');
+          }
+
+          controller.value = null;
+          WakelockPlus.disable();
        };
      },
-      [],
+      [videoSource],
    );

-    double calculateAspectRatio() {
-      if (width.value == 0 || height.value == 0) {
-        return 1;
-      }
-      return width.value / height.value;
-    }
-
-    final size = MediaQuery.sizeOf(context);
-
-    return SizedBox(
-      height: size.height,
-      width: size.width,
-      child: GestureDetector(
-        behavior: HitTestBehavior.deferToChild,
-        child: PopScope(
-          onPopInvokedWithResult: (didPop, _) => ref
-              .read(videoPlaybackValueProvider.notifier)
-              .value = VideoPlaybackValue.uninitialized(),
-          child: SizedBox(
-            height: size.height,
-            width: size.width,
-            child: Stack(
-              children: [
-                Center(
-                  child: AspectRatio(
-                    aspectRatio: calculateAspectRatio(),
-                    child: NativeVideoPlayerView(
-                      onViewReady: initController,
-                    ),
-                  ),
-                ),
-                if (showControls)
-                  Center(
-                    child: CustomVideoPlayerControls(
-                      hideTimerDuration: hideControlsTimer,
-                    ),
-                  ),
-                Visibility(
-                  visible: controller.value == null,
-                  child: Stack(
-                    children: [
-                      if (placeholder != null) placeholder!,
-                      const Positioned.fill(
-                        child: Center(
-                          child: DelayedLoadingIndicator(
-                            fadeInDuration: Duration(milliseconds: 500),
-                          ),
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-              ],
+    return Stack(
+      children: [
+        placeholder,
+        Center(
+          key: ValueKey('player-${asset.hashCode}'),
+          child: aspectRatio.value != null
+              ? AspectRatio(
+                  key: ValueKey(asset),
+                  aspectRatio: aspectRatio.value!,
+                  child: isCurrent
+                      ? NativeVideoPlayerView(
+                          key: ValueKey(asset),
+                          onViewReady: initController,
+                        )
+                      : null,
+                )
+              : null,
+        ),
+        // covers the video with the placeholder
+        if (showControls)
+          Center(
+            key: ValueKey('controls-${asset.hashCode}'),
+            child: CustomVideoPlayerControls(
+              hideTimerDuration: hideControlsTimer,
            ),
          ),
-        ),
-      ),
+      ],
    );
  }
 }
@@ -124,8 +124,7 @@ class VideoViewerPage extends HookConsumerWidget {

    return PopScope(
      onPopInvokedWithResult: (didPop, _) {
-        ref.read(videoPlaybackValueProvider.notifier).value =
-            VideoPlaybackValue.uninitialized();
+        ref.read(videoPlaybackValueProvider.notifier).reset();
      },
      child: AnimatedSwitcher(
        duration: const Duration(milliseconds: 400),