feat: support iOS LivePhoto backup (#950)

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

@@ -33,10 +33,10 @@ class GalleryViewerPage extends HookConsumerWidget {
     final Box<dynamic> box = Hive.box(userInfoBox);
     final appSettingService = ref.watch(appSettingsServiceProvider);
     final threeStageLoading = useState(false);
-    final loading = useState(false);
     final isZoomed = useState<bool>(false);
-    ValueNotifier<bool> isZoomedListener = ValueNotifier<bool>(false);
     final indexOfAsset = useState(assetList.indexOf(asset));
+    final isPlayingMotionVideo = useState(false);
+    ValueNotifier<bool> isZoomedListener = ValueNotifier<bool>(false);
 
     PageController controller =
         PageController(initialPage: assetList.indexOf(asset));
@@ -45,6 +45,7 @@ class GalleryViewerPage extends HookConsumerWidget {
       () {
         threeStageLoading.value = appSettingService
             .getSetting<bool>(AppSettingsEnum.threeStageLoading);
+        isPlayingMotionVideo.value = false;
         return null;
       },
       [],
@@ -85,7 +86,7 @@ class GalleryViewerPage extends HookConsumerWidget {
     return Scaffold(
       backgroundColor: Colors.black,
       appBar: TopControlAppBar(
-        loading: loading.value,
+        isPlayingMotionVideo: isPlayingMotionVideo.value,
         asset: assetList[indexOfAsset.value],
         onMoreInfoPressed: () {
           showInfo();
@@ -94,13 +95,18 @@ class GalleryViewerPage extends HookConsumerWidget {
             ? null
             : () {
                 ref.watch(imageViewerStateProvider.notifier).downloadAsset(
-                    assetList[indexOfAsset.value].remote!, context);
+                      assetList[indexOfAsset.value].remote!,
+                      context,
+                    );
               },
         onSharePressed: () {
           ref
               .watch(imageViewerStateProvider.notifier)
               .shareAsset(assetList[indexOfAsset.value], context);
         },
+        onToggleMotionVideo: (() {
+          isPlayingMotionVideo.value = !isPlayingMotionVideo.value;
+        }),
       ),
       body: SafeArea(
         child: PageView.builder(
@@ -119,18 +125,28 @@ class GalleryViewerPage extends HookConsumerWidget {
             getAssetExif();
 
             if (assetList[index].isImage) {
-              return ImageViewerPage(
-                authToken: 'Bearer ${box.get(accessTokenKey)}',
-                isZoomedFunction: isZoomedMethod,
-                isZoomedListener: isZoomedListener,
-                asset: assetList[index],
-                heroTag: assetList[index].id,
-                threeStageLoading: threeStageLoading.value,
-              );
+              if (isPlayingMotionVideo.value) {
+                return VideoViewerPage(
+                  asset: assetList[index],
+                  isMotionVideo: true,
+                  onVideoEnded: () {
+                    isPlayingMotionVideo.value = false;
+                  },
+                );
+              } else {
+                return ImageViewerPage(
+                  authToken: 'Bearer ${box.get(accessTokenKey)}',
+                  isZoomedFunction: isZoomedMethod,
+                  isZoomedListener: isZoomedListener,
+                  asset: assetList[index],
+                  heroTag: assetList[index].id,
+                  threeStageLoading: threeStageLoading.value,
+                );
+              }
             } else {
               return GestureDetector(
                 onVerticalDragUpdate: (details) {
-                  const int sensitivity = 10;
+                  const int sensitivity = 15;
                   if (details.delta.dy > sensitivity) {
                     // swipe down
                     AutoRouter.of(context).pop();
@@ -141,7 +157,11 @@ class GalleryViewerPage extends HookConsumerWidget {
                 },
                 child: Hero(
                   tag: assetList[index].id,
-                  child: VideoViewerPage(asset: assetList[index]),
+                  child: VideoViewerPage(
+                    asset: assetList[index],
+                    isMotionVideo: false,
+                    onVideoEnded: () {},
+                  ),
                 ),
               );
             }

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

@@ -15,15 +15,26 @@ import 'package:video_player/video_player.dart';
 // ignore: must_be_immutable
 class VideoViewerPage extends HookConsumerWidget {
   final Asset asset;
+  final bool isMotionVideo;
+  final VoidCallback onVideoEnded;
 
-  const VideoViewerPage({Key? key, required this.asset}) : super(key: key);
+  const VideoViewerPage({
+    Key? key,
+    required this.asset,
+    required this.isMotionVideo,
+    required this.onVideoEnded,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     if (asset.isLocal) {
       final AsyncValue<File> videoFile = ref.watch(_fileFamily(asset.local!));
       return videoFile.when(
-        data: (data) => VideoThumbnailPlayer(file: data),
+        data: (data) => VideoThumbnailPlayer(
+          file: data,
+          isMotionVideo: false,
+          onVideoEnded: () {},
+        ),
         error: (error, stackTrace) => Icon(
           Icons.image_not_supported_outlined,
           color: Theme.of(context).primaryColor,
@@ -41,14 +52,17 @@ class VideoViewerPage extends HookConsumerWidget {
         ref.watch(imageViewerStateProvider).downloadAssetStatus;
     final box = Hive.box(userInfoBox);
     final String jwtToken = box.get(accessTokenKey);
-    final String videoUrl =
-        '${box.get(serverEndpointKey)}/asset/file/${asset.id}';
+    final String videoUrl = isMotionVideo
+        ? '${box.get(serverEndpointKey)}/asset/file/${asset.remote?.livePhotoVideoId!}'
+        : '${box.get(serverEndpointKey)}/asset/file/${asset.id}';
 
     return Stack(
       children: [
         VideoThumbnailPlayer(
           url: videoUrl,
           jwtToken: jwtToken,
+          isMotionVideo: isMotionVideo,
+          onVideoEnded: onVideoEnded,
         ),
         if (downloadAssetStatus == DownloadAssetStatus.loading)
           const Center(
@@ -72,9 +86,17 @@ class VideoThumbnailPlayer extends StatefulWidget {
   final String? url;
   final String? jwtToken;
   final File? file;
+  final bool isMotionVideo;
+  final VoidCallback onVideoEnded;
 
-  const VideoThumbnailPlayer({Key? key, this.url, this.jwtToken, this.file})
-      : super(key: key);
+  const VideoThumbnailPlayer({
+    Key? key,
+    this.url,
+    this.jwtToken,
+    this.file,
+    required this.onVideoEnded,
+    required this.isMotionVideo,
+  }) : super(key: key);
 
   @override
   State<VideoThumbnailPlayer> createState() => _VideoThumbnailPlayerState();
@@ -88,6 +110,13 @@ class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
   void initState() {
     super.initState();
     initializePlayer();
+
+    videoPlayerController.addListener(() {
+      if (videoPlayerController.value.position ==
+          videoPlayerController.value.duration) {
+        widget.onVideoEnded();
+      }
+    });
   }
 
   Future<void> initializePlayer() async {
@@ -115,7 +144,7 @@ class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
       autoPlay: true,
       autoInitialize: true,
       allowFullScreen: true,
-      showControls: true,
+      showControls: !widget.isMotionVideo,
       hideControlsTimer: const Duration(seconds: 5),
     );
   }