fix(mobile): unique hero tag for assets from api response (#4600)

* fix(mobile): render error on switching asset while video playing

* fix(mobile): generate proper hero tags for assets from DTOs

---------

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

mobile/lib/main.dart

@@ -131,17 +131,14 @@ class ImmichAppState extends ConsumerState<ImmichApp>
         debugPrint("[APP STATE] resumed");
         ref.read(appStateProvider.notifier).handleAppResume();
         break;
-
       case AppLifecycleState.inactive:
         debugPrint("[APP STATE] inactive");
         ref.read(appStateProvider.notifier).handleAppInactivity();
         break;
-
       case AppLifecycleState.paused:
         debugPrint("[APP STATE] paused");
         ref.read(appStateProvider.notifier).handleAppPause();
         break;
-
       case AppLifecycleState.detached:
         debugPrint("[APP STATE] detached");
         ref.read(appStateProvider.notifier).handleAppDetached();

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

@@ -38,6 +38,7 @@ import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
+import 'package:isar/isar.dart';
 import 'package:openapi/api.dart' show ThumbnailFormat;
 
 // ignore: must_be_immutable
@@ -86,6 +87,8 @@ class GalleryViewerPage extends HookConsumerWidget {
         ? ref.watch(assetStackStateProvider(currentAsset))
         : <Asset>[];
     final stackElements = showStack ? [currentAsset, ...stack] : <Asset>[];
+    // Assets from response DTOs do not have an isar id, querying which would give us the default autoIncrement id
+    final isFromResponse = currentAsset.id == Isar.autoIncrement;
 
     Asset asset() => stackIndex.value == -1
         ? currentAsset
@@ -752,7 +755,9 @@ class GalleryViewerPage extends HookConsumerWidget {
                     },
                     imageProvider: provider,
                     heroAttributes: PhotoViewHeroAttributes(
-                      tag: a.id + heroOffset,
+                      tag: isFromResponse
+                          ? '${a.remoteId}-$heroOffset'
+                          : a.id + heroOffset,
                     ),
                     filterQuality: FilterQuality.high,
                     tightMode: true,
@@ -769,7 +774,9 @@ class GalleryViewerPage extends HookConsumerWidget {
                     onDragUpdate: (_, details, __) =>
                         handleSwipeUpDown(details),
                     heroAttributes: PhotoViewHeroAttributes(
-                      tag: a.id + heroOffset,
+                      tag: isFromResponse
+                          ? '${a.remoteId}-$heroOffset'
+                          : a.id + heroOffset,
                     ),
                     filterQuality: FilterQuality.high,
                     maxScale: 1.0,
@@ -777,7 +784,10 @@ class GalleryViewerPage extends HookConsumerWidget {
                     basePosition: Alignment.center,
                     child: VideoViewerPage(
                       onPlaying: () => isPlayingVideo.value = true,
-                      onPaused: () => isPlayingVideo.value = false,
+                      onPaused: () =>
+                          WidgetsBinding.instance.addPostFrameCallback(
+                        (_) => isPlayingVideo.value = false,
+                      ),
                       asset: a,
                       isMotionVideo: isPlayingMotionVideo.value,
                       placeholder: Image(

mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart

@@ -5,6 +5,7 @@ import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/ui/immich_image.dart';
 import 'package:immich_mobile/utils/storage_indicator.dart';
+import 'package:isar/isar.dart';
 
 class ThumbnailImage extends StatelessWidget {
   final Asset asset;
@@ -41,6 +42,8 @@ class ThumbnailImage extends StatelessWidget {
     final isDarkTheme = Theme.of(context).brightness == Brightness.dark;
     final assetContainerColor =
         isDarkTheme ? Colors.blueGrey : Theme.of(context).primaryColorLight;
+    // Assets from response DTOs do not have an isar id, querying which would give us the default autoIncrement id
+    final isFromResponse = asset.id == Isar.autoIncrement;
 
     Widget buildSelectionIcon(Asset asset) {
       if (isSelected) {
@@ -129,7 +132,9 @@ class ThumbnailImage extends StatelessWidget {
         width: 300,
         height: 300,
         child: Hero(
-          tag: asset.id + heroOffset,
+          tag: isFromResponse
+              ? '${asset.remoteId}-$heroOffset'
+              : asset.id + heroOffset,
           child: ImmichImage(
             asset,
             useGrayBoxPlaceholder: useGrayBoxPlaceholder,