Enable swiping between assets (#381)

Enable swiping between assets (#381) Co-authored-by: Alex <alex.tran1502@gmail.com> Co-authored-by: Malte Kiefer <59220985+MalteKiefer@users.noreply.github.com> Co-authored-by: Matthias Rupp <matthias.rupp@posteo.de>
2025-10-29 17:40:28 +00:00 · 2022-08-03 16:36:12 -04:00
parent e8d1f89a47
commit 8c184dc4d4
17 changed files with 436 additions and 240 deletions
--- a/mobile/lib/modules/asset_viewer/ui/remote_photo_view.dart
+++ b/mobile/lib/modules/asset_viewer/ui/remote_photo_view.dart
@@ -15,7 +15,6 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
  @override
  Widget build(BuildContext context) {
    bool allowMoving = _status == _RemoteImageStatus.full;
-
    return PhotoView(
      imageProvider: _imageProvider,
      minScale: PhotoViewComputedScale.contained,
@@ -32,8 +31,9 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
    PhotoViewControllerValue controllerValue,
  ) {
    // Disable swipe events when zoomed in
-    if (_zoomedIn) return;
-
+    if (_zoomedIn) {
+      return;
+    }
    if (controllerValue.position.dy > swipeThreshold) {
      widget.onSwipeDown();
    } else if (controllerValue.position.dy < -swipeThreshold) {
@@ -42,7 +42,14 @@ class _RemotePhotoViewState extends State<RemotePhotoView> {
  }

  void _scaleStateChanged(PhotoViewScaleState state) {
-    _zoomedIn = state == PhotoViewScaleState.zoomedIn;
+    // _onScaleListener;
+    _zoomedIn = state != PhotoViewScaleState.initial;
+    if (_zoomedIn) {
+      widget.isZoomedListener.value = true;
+    } else {
+      widget.isZoomedListener.value = false;
+    }
+    widget.isZoomedFunction();
  }

  CachedNetworkImageProvider _authorizedImageProvider(String url) {
@@ -107,6 +114,8 @@ class RemotePhotoView extends StatefulWidget {
    required this.thumbnailUrl,
    required this.imageUrl,
    required this.authToken,
+    required this.isZoomedFunction,
+    required this.isZoomedListener,
    required this.onSwipeDown,
    required this.onSwipeUp,
  }) : super(key: key);
@@ -117,6 +126,9 @@ class RemotePhotoView extends StatefulWidget {

  final void Function() onSwipeDown;
  final void Function() onSwipeUp;
+  final void Function() isZoomedFunction;
+
+  final ValueNotifier<bool> isZoomedListener;

  @override
  State<StatefulWidget> createState() {
--- a/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
+++ b/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
@@ -0,0 +1,134 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_swipe_detector/flutter_swipe_detector.dart';
+import 'package:hive/hive.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_state.provider.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/top_control_app_bar.dart';
+import 'package:immich_mobile/modules/asset_viewer/views/image_viewer_page.dart';
+import 'package:immich_mobile/modules/asset_viewer/views/video_viewer_page.dart';
+import 'package:immich_mobile/modules/home/services/asset.service.dart';
+import 'package:openapi/api.dart';
+
+// ignore: must_be_immutable
+class GalleryViewerPage extends HookConsumerWidget {
+  late List<AssetResponseDto> assetList;
+  final AssetResponseDto asset;
+  final String thumbnailRequestUrl;
+
+  GalleryViewerPage({
+    Key? key,
+    required this.assetList,
+    required this.asset,
+    required this.thumbnailRequestUrl,
+  }) : super(key: key);
+
+  AssetResponseDto? assetDetail;
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final Box<dynamic> box = Hive.box(userInfoBox);
+
+    int indexOfAsset = assetList.indexOf(asset);
+
+    @override
+    void initState(int index) {
+      indexOfAsset = index;
+    }
+
+    PageController controller =
+        PageController(initialPage: assetList.indexOf(asset));
+
+    getAssetExif() async {
+      assetDetail = await ref
+          .watch(assetServiceProvider)
+          .getAssetById(assetList[indexOfAsset].id);
+    }
+
+    void showInfo() {
+      showModalBottomSheet(
+        backgroundColor: Colors.black,
+        barrierColor: Colors.transparent,
+        isScrollControlled: false,
+        context: context,
+        builder: (context) {
+          return ExifBottomSheet(assetDetail: assetDetail!);
+        },
+      );
+    }
+
+    final isZoomed = useState<bool>(false);
+    ValueNotifier<bool> isZoomedListener = ValueNotifier<bool>(false);
+
+    //make isZoomed listener call instead
+    void isZoomedMethod() {
+      if (isZoomedListener.value) {
+        isZoomed.value = true;
+      } else {
+        isZoomed.value = false;
+      }
+    }
+
+    return Scaffold(
+      backgroundColor: Colors.black,
+      appBar: TopControlAppBar(
+        asset: assetList[indexOfAsset],
+        onMoreInfoPressed: () {
+          showInfo();
+        },
+        onDownloadPressed: () {
+          ref
+              .watch(imageViewerStateProvider.notifier)
+              .downloadAsset(assetList[indexOfAsset], context);
+        },
+      ),
+      body: SafeArea(
+        child: PageView.builder(
+          controller: controller,
+          pageSnapping: true,
+          physics: isZoomed.value
+              ? const NeverScrollableScrollPhysics()
+              : const BouncingScrollPhysics(),
+          itemCount: assetList.length,
+          scrollDirection: Axis.horizontal,
+          itemBuilder: (context, index) {
+            initState(index);
+            getAssetExif();
+            if (assetList[index].type == AssetTypeEnum.IMAGE) {
+              return ImageViewerPage(
+                thumbnailUrl:
+                    '${box.get(serverEndpointKey)}/asset/thumbnail/${assetList[index].id}',
+                imageUrl:
+                    '${box.get(serverEndpointKey)}/asset/file?aid=${assetList[index].deviceAssetId}&did=${assetList[index].deviceId}&isThumb=false',
+                authToken: 'Bearer ${box.get(accessTokenKey)}',
+                isZoomedFunction: isZoomedMethod,
+                isZoomedListener: isZoomedListener,
+                asset: assetList[index],
+                heroTag: assetList[index].id,
+              );
+            } else {
+              return SwipeDetector(
+                onSwipeDown: (_) {
+                  AutoRouter.of(context).pop();
+                },
+                onSwipeUp: (_) {
+                  showInfo();
+                },
+                child: Hero(
+                  tag: assetList[index].id,
+                  child: VideoViewerPage(
+                    asset: assetList[index],
+                    videoUrl:
+                        '${box.get(serverEndpointKey)}/asset/file?aid=${assetList[index].deviceAssetId}&did=${assetList[index].deviceId}',
+                  ),
+                ),
+              );
+            }
+          },
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/asset_viewer/views/image_viewer_page.dart
+++ b/mobile/lib/modules/asset_viewer/views/image_viewer_page.dart
@@ -1,15 +1,12 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:hive/hive.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:immich_mobile/modules/asset_viewer/models/image_viewer_page_state.model.dart';
 import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_state.provider.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/remote_photo_view.dart';
-import 'package:immich_mobile/modules/asset_viewer/ui/top_control_app_bar.dart';
 import 'package:immich_mobile/modules/home/services/asset.service.dart';
 import 'package:openapi/api.dart';

@@ -19,8 +16,9 @@ class ImageViewerPage extends HookConsumerWidget {
  final String heroTag;
  final String thumbnailUrl;
  final AssetResponseDto asset;
-
-  AssetResponseDto? assetDetail;
+  final String authToken;
+  final ValueNotifier<bool> isZoomedListener;
+  final void Function() isZoomedFunction;

  ImageViewerPage({
    Key? key,
@@ -28,31 +26,22 @@ class ImageViewerPage extends HookConsumerWidget {
    required this.heroTag,
    required this.thumbnailUrl,
    required this.asset,
+    required this.authToken,
+    required this.isZoomedFunction,
+    required this.isZoomedListener,
  }) : super(key: key);

+  AssetResponseDto? assetDetail;
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final downloadAssetStatus =
        ref.watch(imageViewerStateProvider).downloadAssetStatus;
-    var box = Hive.box(userInfoBox);

    getAssetExif() async {
      assetDetail =
          await ref.watch(assetServiceProvider).getAssetById(asset.id);
    }

-    showInfo() {
-      showModalBottomSheet(
-        backgroundColor: Colors.black,
-        barrierColor: Colors.transparent,
-        isScrollControlled: false,
-        context: context,
-        builder: (context) {
-          return ExifBottomSheet(assetDetail: assetDetail!);
-        },
-      );
-    }
-
    useEffect(
      () {
        getAssetExif();
@@ -61,39 +50,39 @@ class ImageViewerPage extends HookConsumerWidget {
      [],
    );

-    return Scaffold(
-      backgroundColor: Colors.black,
-      appBar: TopControlAppBar(
-        asset: asset,
-        onMoreInfoPressed: showInfo,
-        onDownloadPressed: () {
-          ref
-              .watch(imageViewerStateProvider.notifier)
-              .downloadAsset(asset, context);
+    showInfo() {
+      showModalBottomSheet(
+        backgroundColor: Colors.black,
+        barrierColor: Colors.transparent,
+        isScrollControlled: false,
+        context: context,
+        builder: (context) {
+          return ExifBottomSheet(assetDetail: assetDetail ?? asset);
        },
-      ),
-      body: SafeArea(
-        child: Stack(
-          children: [
-            Center(
-              child: Hero(
-                tag: heroTag,
-                child: RemotePhotoView(
-                  thumbnailUrl: thumbnailUrl,
-                  imageUrl: imageUrl,
-                  authToken: "Bearer ${box.get(accessTokenKey)}",
-                  onSwipeDown: () => AutoRouter.of(context).pop(),
-                  onSwipeUp: () => showInfo(),
-                ),
-              ),
+      );
+    }
+
+    return Stack(
+      children: [
+        Center(
+          child: Hero(
+            tag: heroTag,
+            child: RemotePhotoView(
+              thumbnailUrl: thumbnailUrl,
+              imageUrl: imageUrl,
+              authToken: authToken,
+              isZoomedFunction: isZoomedFunction,
+              isZoomedListener: isZoomedListener,
+              onSwipeDown: () => AutoRouter.of(context).pop(),
+              onSwipeUp: () => showInfo(),
            ),
-            if (downloadAssetStatus == DownloadAssetStatus.loading)
-              const Center(
-                child: DownloadLoadingIndicator(),
-              ),
-          ],
+          ),
        ),
-      ),
+        if (downloadAssetStatus == DownloadAssetStatus.loading)
+          const Center(
+            child: DownloadLoadingIndicator(),
+          ),
+      ],
    );
  }
 }
--- a/mobile/lib/modules/asset_viewer/views/video_viewer_page.dart
+++ b/mobile/lib/modules/asset_viewer/views/video_viewer_page.dart
@@ -1,7 +1,4 @@
-import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:flutter_swipe_detector/flutter_swipe_detector.dart';
 import 'package:hive/hive.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
@@ -9,9 +6,6 @@ import 'package:chewie/chewie.dart';
 import 'package:immich_mobile/modules/asset_viewer/models/image_viewer_page_state.model.dart';
 import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_state.provider.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator.dart';
-import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
-import 'package:immich_mobile/modules/asset_viewer/ui/top_control_app_bar.dart';
-import 'package:immich_mobile/modules/home/services/asset.service.dart';
 import 'package:openapi/api.dart';
 import 'package:video_player/video_player.dart';

@@ -31,66 +25,17 @@ class VideoViewerPage extends HookConsumerWidget {

    String jwtToken = Hive.box(userInfoBox).get(accessTokenKey);

-    void showInfo() {
-      showModalBottomSheet(
-        backgroundColor: Colors.black,
-        barrierColor: Colors.transparent,
-        isScrollControlled: false,
-        context: context,
-        builder: (context) {
-          return ExifBottomSheet(assetDetail: assetDetail!);
-        },
-      );
-    }
-
-    getAssetExif() async {
-      assetDetail =
-          await ref.watch(assetServiceProvider).getAssetById(asset.id);
-    }
-
-    useEffect(
-      () {
-        getAssetExif();
-        return null;
-      },
-      [],
-    );
-
-    return Scaffold(
-      backgroundColor: Colors.black,
-      appBar: TopControlAppBar(
-        asset: asset,
-        onMoreInfoPressed: () {
-          showInfo();
-        },
-        onDownloadPressed: () {
-          ref
-              .watch(imageViewerStateProvider.notifier)
-              .downloadAsset(asset, context);
-        },
-      ),
-      body: SwipeDetector(
-        onSwipeDown: (_) {
-          AutoRouter.of(context).pop();
-        },
-        onSwipeUp: (_) {
-          showInfo();
-        },
-        child: SafeArea(
-          child: Stack(
-            children: [
-              VideoThumbnailPlayer(
-                url: videoUrl,
-                jwtToken: jwtToken,
-              ),
-              if (downloadAssetStatus == DownloadAssetStatus.loading)
-                const Center(
-                  child: DownloadLoadingIndicator(),
-                ),
-            ],
-          ),
+    return Stack(
+      children: [
+        VideoThumbnailPlayer(
+          url: videoUrl,
+          jwtToken: jwtToken,
        ),
-      ),
+        if (downloadAssetStatus == DownloadAssetStatus.loading)
+          const Center(
+            child: DownloadLoadingIndicator(),
+          ),
+      ],
    );
  }
 }
@@ -134,10 +79,13 @@ class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
  _createChewieController() {
    chewieController = ChewieController(
      showOptions: true,
-      showControlsOnInitialize: false,
+      showControlsOnInitialize: true,
      videoPlayerController: videoPlayerController,
      autoPlay: true,
-      autoInitialize: false,
+      autoInitialize: true,
+      allowFullScreen: true,
+      showControls: true,
+      hideControlsTimer: const Duration(seconds: 5),
    );
  }

@@ -157,11 +105,13 @@ class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
              controller: chewieController!,
            ),
          )
-        : const SizedBox(
-            width: 75,
-            height: 75,
-            child: CircularProgressIndicator.adaptive(
-              strokeWidth: 2,
+        : const Center(
+            child: SizedBox(
+              width: 75,
+              height: 75,
+              child: CircularProgressIndicator.adaptive(
+                strokeWidth: 2,
+              ),
            ),
          );
  }