feat: handle live photos on new asset viewer (#19926)

sync and handle livePhotoVideoId in asset viewer

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

mobile/lib/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
+
+class MotionPhotoActionButton extends ConsumerWidget {
+  const MotionPhotoActionButton({super.key, this.menuItem = true});
+
+  final bool menuItem;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isPlaying = ref.watch(isPlayingMotionVideoProvider);
+
+    return BaseActionButton(
+      iconData: isPlaying
+          ? Icons.motion_photos_pause_outlined
+          : Icons.play_circle_outline_rounded,
+      label: "play_motion_photo".t(context: context),
+      onPressed: ref.read(isPlayingMotionVideoProvider.notifier).toggle,
+      menuItem: menuItem,
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -15,6 +15,7 @@ import 'package:immich_mobile/presentation/widgets/asset_viewer/top_app_bar.widg
 import 'package:immich_mobile/presentation/widgets/asset_viewer/video_viewer.widget.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.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/providers/infrastructure/asset_viewer/current_asset.provider.dart';
@@ -165,7 +166,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   void _onAssetChanged(int index) {
     final asset = ref.read(timelineServiceProvider).getAsset(index);
     ref.read(currentAssetNotifier.notifier).setAsset(asset);
-    if (asset.isVideo) {
+    if (asset.isVideo || asset.isMotionPhoto) {
       ref.read(videoPlaybackValueProvider.notifier).reset();
       ref.read(videoPlayerControlsProvider.notifier).pause();
     }
@@ -473,11 +474,16 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     }
   }
 
+  void _onLongPress(_, __, ___) {
+    ref.read(isPlayingMotionVideoProvider.notifier).playing = true;
+  }
+
   PhotoViewGalleryPageOptions _assetBuilder(BuildContext ctx, int index) {
     scaffoldContext ??= ctx;
     final asset = ref.read(timelineServiceProvider).getAsset(index);
+    final isPlayingMotionVideo = ref.read(isPlayingMotionVideoProvider);
 
-    if (asset.isImage) {
+    if (asset.isImage && !isPlayingMotionVideo) {
       return _imageBuilder(ctx, asset);
     }
 
@@ -500,6 +506,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       onDragUpdate: _onDragUpdate,
       onDragEnd: _onDragEnd,
       onTapDown: _onTapDown,
+      onLongPressStart: asset.isMotionPhoto ? _onLongPress : null,
       errorBuilder: (_, __, ___) => Container(
         width: ctx.width,
         height: ctx.height,
@@ -561,6 +568,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     // Using multiple selectors to avoid unnecessary rebuilds for other state changes
     ref.watch(assetViewerProvider.select((s) => s.showingBottomSheet));
     ref.watch(assetViewerProvider.select((s) => s.backgroundOpacity));
+    ref.watch(isPlayingMotionVideoProvider);
 
     // Currently it is not possible to scroll the asset when the bottom sheet is open all the way.
     // Issue: https://github.com/flutter/flutter/issues/109037

mobile/lib/presentation/widgets/asset_viewer/top_app_bar.widget.dart

@@ -6,6 +6,7 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
@@ -44,6 +45,7 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
           source: ActionSource.viewer,
           menuItem: true,
         ),
+      if (asset.isMotionPhoto) const MotionPhotoActionButton(menuItem: true),
       const _KebabMenu(),
     ];
 

mobile/lib/presentation/widgets/asset_viewer/video_viewer.widget.dart

@@ -270,10 +270,7 @@ class NativeVideoViewer extends HookConsumerWidget {
         return;
       }
 
-      if (videoController.playbackInfo?.status == PlaybackStatus.stopped &&
-          !ref
-              .read(appSettingsServiceProvider)
-              .getSetting<bool>(AppSettingsEnum.loopVideo)) {
+      if (videoController.playbackInfo?.status == PlaybackStatus.stopped) {
         ref.read(isPlayingMotionVideoProvider.notifier).playing = false;
       }
     }
@@ -310,7 +307,7 @@ class NativeVideoViewer extends HookConsumerWidget {
       final loopVideo = ref
           .read(appSettingsServiceProvider)
           .getSetting<bool>(AppSettingsEnum.loopVideo);
-      nc.setLoop(loopVideo);
+      nc.setLoop(!asset.isMotionPhoto && loopVideo);
 
       controller.value = nc;
       Timer(const Duration(milliseconds: 200), checkIfBuffering);

mobile/lib/presentation/widgets/timeline/fixed/segment.model.dart

@@ -10,6 +10,7 @@ import 'package:immich_mobile/presentation/widgets/timeline/header.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/segment_builder.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.state.dart';
+import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
 import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
@@ -171,6 +172,7 @@ class _AssetTileWidget extends ConsumerWidget {
       ref.read(multiSelectProvider.notifier).toggleAssetSelection(asset);
     } else {
       await ref.read(timelineServiceProvider).loadAssets(assetIndex, 1);
+      ref.read(isPlayingMotionVideoProvider.notifier).playing = false;
       ctx.pushRoute(
         AssetViewerRoute(
           initialIndex: assetIndex,