Merge branch 'main' into feat/custom-date-range

mobile/lib/presentation/pages/drift_activities.page.dart

@@ -5,11 +5,11 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/widgets/activities/comment_bubble.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/like_activity_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/album/drift_activity_text_field.dart';
 import 'package:immich_mobile/providers/activity.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
+import 'package:immich_mobile/widgets/activities/comment_bubble.dart';
 
 @RoutePage()
 class DriftActivitiesPage extends HookConsumerWidget {
@@ -21,8 +21,8 @@ class DriftActivitiesPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final activityNotifier = ref.read(albumActivityProvider(album.id, assetId).notifier);
-    final activities = ref.watch(albumActivityProvider(album.id, assetId));
+    final activityNotifier = ref.read(albumActivityProvider((album.id, assetId)).notifier);
+    final activities = ref.watch(albumActivityProvider((album.id, assetId)));
     final listViewScrollController = useScrollController();
 
     void scrollToBottom() {

mobile/lib/presentation/pages/drift_album_options.page.dart

@@ -34,7 +34,7 @@ class DriftAlbumOptionsPage extends HookConsumerWidget {
     final isOwner = album.ownerId == userId;
 
     void showErrorMessage() {
-      context.pop();
+      ContextHelper(context).pop();
       ImmichToast.show(
         context: context,
         msg: "shared_album_section_people_action_error".t(context: context),
@@ -60,7 +60,7 @@ class DriftAlbumOptionsPage extends HookConsumerWidget {
         showErrorMessage();
       }
 
-      context.pop();
+      ContextHelper(context).pop();
     }
 
     Future<void> addUsers() async {

mobile/lib/presentation/pages/drift_asset_troubleshoot.page.dart

@@ -112,10 +112,7 @@ class _AssetPropertiesSectionState extends ConsumerState<_AssetPropertiesSection
       _PropertyItem(label: 'Updated At', value: asset.updatedAt.toString()),
       _PropertyItem(label: 'Width', value: asset.width?.toString()),
       _PropertyItem(label: 'Height', value: asset.height?.toString()),
-      _PropertyItem(
-        label: 'Duration',
-        value: asset.durationInSeconds != null ? '${asset.durationInSeconds} seconds' : null,
-      ),
+      _PropertyItem(label: 'Duration', value: asset.durationMs != null ? '${asset.durationMs} ms' : null),
       _PropertyItem(label: 'Is Favorite', value: asset.isFavorite.toString()),
       _PropertyItem(label: 'Live Photo Video ID', value: asset.livePhotoVideoId),
       _PropertyItem(label: 'Is Edited', value: asset.isEdited.toString()),

mobile/lib/presentation/pages/drift_map.page.dart

@@ -33,7 +33,7 @@ class DriftMapPage extends StatelessWidget {
             top: 70,
             child: IconButton.filled(
               color: Colors.white,
-              onPressed: () => context.pop(),
+              onPressed: () => ContextHelper(context).pop(),
               icon: const Icon(Icons.arrow_back_ios_new_rounded),
               style: IconButton.styleFrom(
                 padding: const EdgeInsets.all(8),

mobile/lib/presentation/pages/drift_memory.page.dart

@@ -7,16 +7,15 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/memory.model.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/memory/memory_bottom_info.widget.dart';
 import 'package:immich_mobile/presentation/widgets/memory/memory_card.widget.dart';
-import 'package:immich_mobile/providers/asset_viewer/video_player_value_provider.dart';
 import 'package:immich_mobile/providers/haptic_feedback.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/widgets/memories/memory_epilogue.dart';
 import 'package:immich_mobile/widgets/memories/memory_progress_indicator.dart';
 
-/// Expects [currentAssetNotifier] to be set before navigating to this page
+/// Expects the current asset to be set via [assetViewerProvider] before navigating to this page
 @RoutePage()
 class DriftMemoryPage extends HookConsumerWidget {
   final List<DriftMemory> memories;
@@ -26,11 +25,7 @@ class DriftMemoryPage extends HookConsumerWidget {
 
   static void setMemory(WidgetRef ref, DriftMemory memory) {
     if (memory.assets.isNotEmpty) {
-      ref.read(currentAssetNotifier.notifier).setAsset(memory.assets.first);
-
-      if (memory.assets.first.isVideo) {
-        ref.read(videoPlaybackValueProvider.notifier).reset();
-      }
+      ref.read(assetViewerProvider.notifier).setAsset(memory.assets.first);
     }
   }
 
@@ -165,18 +160,27 @@ class DriftMemoryPage extends HookConsumerWidget {
       currentAssetPage.value = otherIndex;
       updateProgressText();
 
+      final activeMemory = currentMemory.value;
+
       // Wait for page change animation to finish
       await Future.delayed(const Duration(milliseconds: 400));
+
+      // check if memory is still the same and if context is still mounted
+      if (currentMemory.value != activeMemory || !context.mounted) {
+        return;
+      }
+
       // And then precache the next asset
       await precacheAsset(otherIndex + 1);
 
-      final asset = currentMemory.value.assets[otherIndex];
-      currentAsset.value = asset;
-      ref.read(currentAssetNotifier.notifier).setAsset(asset);
-      // if (asset.isVideo || asset.isMotionPhoto) {
-      if (asset.isVideo) {
-        ref.read(videoPlaybackValueProvider.notifier).reset();
+      // check again as precache involves async operations
+      if (currentMemory.value != activeMemory || !context.mounted) {
+        return;
       }
+
+      final asset = activeMemory.assets[otherIndex];
+      currentAsset.value = asset;
+      ref.read(assetViewerProvider.notifier).setAsset(asset);
     }
 
     /* Notification listener is used instead of OnPageChanged callback since OnPageChanged is called
@@ -216,6 +220,11 @@ class DriftMemoryPage extends HookConsumerWidget {
                 WidgetsBinding.instance.addPostFrameCallback((_) {
                   DriftMemoryPage.setMemory(ref, memories[pageNumber]);
                 });
+
+                // Update currentAsset to the first asset of the new memory
+                if (memories[pageNumber].assets.isNotEmpty) {
+                  currentAsset.value = memories[pageNumber].assets.first;
+                }
               }
 
               currentAssetPage.value = 0;
@@ -273,7 +282,12 @@ class DriftMemoryPage extends HookConsumerWidget {
                               children: [
                                 Container(
                                   color: Colors.black,
-                                  child: DriftMemoryCard(asset: asset, title: title, showTitle: index == 0),
+                                  child: DriftMemoryCard(
+                                    asset: asset,
+                                    title: title,
+                                    showTitle: index == 0,
+                                    isCurrent: mIndex == currentMemoryIndex.value && index == currentAssetPage.value,
+                                  ),
                                 ),
                                 Positioned.fill(
                                   child: Row(

mobile/lib/presentation/pages/drift_people_collection.page.dart

@@ -79,6 +79,7 @@ class _DriftPeopleCollectionPageState extends ConsumerState<DriftPeopleCollectio
                     final person = people[index];
 
                     return Column(
+                      key: ValueKey(person.id),
                       children: [
                         GestureDetector(
                           onTap: () {
@@ -88,6 +89,7 @@ class _DriftPeopleCollectionPageState extends ConsumerState<DriftPeopleCollectio
                             shape: const CircleBorder(side: BorderSide.none),
                             elevation: 3,
                             child: CircleAvatar(
+                              key: ValueKey(person.id),
                               maxRadius: isTablet ? 100 / 2 : 96 / 2,
                               backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
                             ),

mobile/lib/presentation/pages/drift_person.page.dart

@@ -58,11 +58,11 @@ class _DriftPersonPageState extends ConsumerState<DriftPersonPage> {
         return PersonOptionSheet(
           onEditName: () async {
             await handleEditName(context);
-            context.pop();
+            ContextHelper(context).pop();
           },
           onEditBirthday: () async {
             await handleEditBirthday(context);
-            context.pop();
+            ContextHelper(context).pop();
           },
           birthdayExists: _person.birthDate != null,
         );

mobile/lib/presentation/pages/edit/drift_edit.page.dart

@@ -0,0 +1,399 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:crop_image/crop_image.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/aspect_ratios.dart';
+import 'package:immich_mobile/domain/models/asset_edit.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/pages/edit/editor.provider.dart';
+import 'package:immich_mobile/providers/theme.provider.dart';
+import 'package:immich_mobile/theme/theme_data.dart';
+import 'package:immich_mobile/utils/editor.utils.dart';
+import 'package:immich_mobile/widgets/common/immich_toast.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:openapi/api.dart' show RotateParameters, MirrorParameters, MirrorAxis;
+
+@RoutePage()
+class DriftEditImagePage extends ConsumerStatefulWidget {
+  final Image image;
+  final Future<void> Function(List<AssetEdit> edits) applyEdits;
+
+  const DriftEditImagePage({super.key, required this.image, required this.applyEdits});
+
+  @override
+  ConsumerState<DriftEditImagePage> createState() => _DriftEditImagePageState();
+}
+
+class _DriftEditImagePageState extends ConsumerState<DriftEditImagePage> with TickerProviderStateMixin {
+  Future<void> _saveEditedImage() async {
+    ref.read(editorStateProvider.notifier).setIsEditing(true);
+
+    final editorState = ref.read(editorStateProvider);
+    final cropParameters = convertRectToCropParameters(
+      editorState.crop,
+      editorState.originalWidth,
+      editorState.originalHeight,
+    );
+    final edits = <AssetEdit>[];
+
+    if (cropParameters.width != editorState.originalWidth || cropParameters.height != editorState.originalHeight) {
+      edits.add(CropEdit(cropParameters));
+    }
+
+    if (editorState.flipHorizontal) {
+      edits.add(MirrorEdit(MirrorParameters(axis: MirrorAxis.horizontal)));
+    }
+
+    if (editorState.flipVertical) {
+      edits.add(MirrorEdit(MirrorParameters(axis: MirrorAxis.vertical)));
+    }
+
+    final normalizedRotation = (editorState.rotationAngle % 360 + 360) % 360;
+    if (normalizedRotation != 0) {
+      edits.add(RotateEdit(RotateParameters(angle: normalizedRotation)));
+    }
+
+    try {
+      await widget.applyEdits(edits);
+      ImmichToast.show(context: context, msg: 'success'.tr(), toastType: ToastType.success);
+      Navigator.of(context).pop();
+    } catch (e) {
+      ImmichToast.show(context: context, msg: 'error_title'.tr(), toastType: ToastType.error);
+    } finally {
+      ref.read(editorStateProvider.notifier).setIsEditing(false);
+    }
+  }
+
+  Future<bool?> _showDiscardChangesDialog() {
+    return showDialog<bool>(
+      context: context,
+      builder: (context) => AlertDialog(
+        title: Text('editor_discard_edits_title'.tr()),
+        content: Text('editor_discard_edits_prompt'.tr()),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.of(context).pop(false),
+            style: ButtonStyle(
+              foregroundColor: WidgetStateProperty.all(context.themeData.colorScheme.onSurfaceVariant),
+            ),
+            child: Text('cancel'.tr()),
+          ),
+          TextButton(onPressed: () => Navigator.of(context).pop(true), child: Text('confirm'.tr())),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final hasUnsavedEdits = ref.watch(editorStateProvider.select((state) => state.hasUnsavedEdits));
+
+    return PopScope(
+      canPop: !hasUnsavedEdits,
+      onPopInvokedWithResult: (didPop, result) async {
+        if (didPop) return;
+        final shouldDiscard = await _showDiscardChangesDialog() ?? false;
+        if (shouldDiscard && mounted) {
+          Navigator.of(context).pop();
+        }
+      },
+      child: Theme(
+        data: getThemeData(colorScheme: ref.watch(immichThemeProvider).dark, locale: context.locale),
+        child: Scaffold(
+          appBar: AppBar(
+            backgroundColor: Colors.black,
+            title: Text("edit".tr()),
+            leading: ImmichCloseButton(onPressed: () => Navigator.of(context).maybePop()),
+            actions: [_SaveEditsButton(onSave: _saveEditedImage)],
+          ),
+          backgroundColor: Colors.black,
+          body: SafeArea(
+            bottom: false,
+            child: Column(
+              children: [
+                Expanded(child: _EditorPreview(image: widget.image)),
+                AnimatedSize(
+                  duration: const Duration(milliseconds: 250),
+                  curve: Curves.easeInOut,
+                  alignment: Alignment.bottomCenter,
+                  clipBehavior: Clip.none,
+                  child: Container(
+                    width: double.infinity,
+                    decoration: BoxDecoration(
+                      color: ref.watch(immichThemeProvider).dark.surface,
+                      borderRadius: const BorderRadius.only(
+                        topLeft: Radius.circular(20),
+                        topRight: Radius.circular(20),
+                      ),
+                    ),
+                    child: const Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        _TransformControls(),
+                        Padding(
+                          padding: EdgeInsets.only(bottom: 36, left: 24, right: 24),
+                          child: Row(children: [Spacer(), _ResetEditsButton()]),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _AspectRatioButton extends StatelessWidget {
+  final AspectRatioPreset ratio;
+  final bool isSelected;
+  final VoidCallback onPressed;
+
+  const _AspectRatioButton({required this.ratio, required this.isSelected, required this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.max,
+      children: [
+        IconButton(
+          iconSize: 36,
+          icon: Transform.rotate(
+            angle: ratio.iconRotated ? pi / 2 : 0,
+            child: Icon(ratio.icon, color: isSelected ? context.primaryColor : context.themeData.iconTheme.color),
+          ),
+          onPressed: onPressed,
+        ),
+        Text(ratio.label, style: context.textTheme.displayMedium),
+      ],
+    );
+  }
+}
+
+class _AspectRatioSelector extends ConsumerWidget {
+  const _AspectRatioSelector();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final editorState = ref.watch(editorStateProvider);
+    final editorNotifier = ref.read(editorStateProvider.notifier);
+
+    // the whole crop view is rotated, so we need to swap the aspect ratio when the rotation is 90 or 270 degrees
+    double? selectedAspectRatio = editorState.aspectRatio;
+    if (editorState.rotationAngle % 180 != 0 && selectedAspectRatio != null) {
+      selectedAspectRatio = 1 / selectedAspectRatio;
+    }
+
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        children: AspectRatioPreset.values.map((entry) {
+          return Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            child: _AspectRatioButton(
+              ratio: entry,
+              isSelected: selectedAspectRatio == entry.ratio,
+              onPressed: () => editorNotifier.setAspectRatio(entry.ratio),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+}
+
+class _TransformControls extends ConsumerWidget {
+  const _TransformControls();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final editorNotifier = ref.read(editorStateProvider.notifier);
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 10),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Row(
+                children: [
+                  ImmichIconButton(
+                    icon: Icons.rotate_left,
+                    variant: ImmichVariant.ghost,
+                    color: ImmichColor.secondary,
+                    onPressed: editorNotifier.rotateCCW,
+                  ),
+                  const SizedBox(width: 8),
+                  ImmichIconButton(
+                    icon: Icons.rotate_right,
+                    variant: ImmichVariant.ghost,
+                    color: ImmichColor.secondary,
+                    onPressed: editorNotifier.rotateCW,
+                  ),
+                ],
+              ),
+              Row(
+                children: [
+                  ImmichIconButton(
+                    icon: Icons.flip,
+                    variant: ImmichVariant.ghost,
+                    color: ImmichColor.secondary,
+                    onPressed: editorNotifier.flipHorizontally,
+                  ),
+                  const SizedBox(width: 8),
+                  Transform.rotate(
+                    angle: pi / 2,
+                    child: ImmichIconButton(
+                      icon: Icons.flip,
+                      variant: ImmichVariant.ghost,
+                      color: ImmichColor.secondary,
+                      onPressed: editorNotifier.flipVertically,
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+        const _AspectRatioSelector(),
+        const SizedBox(height: 32),
+      ],
+    );
+  }
+}
+
+class _SaveEditsButton extends ConsumerWidget {
+  final VoidCallback onSave;
+
+  const _SaveEditsButton({required this.onSave});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isApplyingEdits = ref.watch(editorStateProvider.select((state) => state.isApplyingEdits));
+    final hasUnsavedEdits = ref.watch(editorStateProvider.select((state) => state.hasUnsavedEdits));
+
+    return isApplyingEdits
+        ? const Padding(
+            padding: EdgeInsets.all(8.0),
+            child: SizedBox(width: 28, height: 28, child: CircularProgressIndicator(strokeWidth: 2.5)),
+          )
+        : ImmichIconButton(
+            icon: Icons.done_rounded,
+            color: ImmichColor.primary,
+            variant: ImmichVariant.ghost,
+            disabled: !hasUnsavedEdits,
+            onPressed: onSave,
+          );
+  }
+}
+
+class _ResetEditsButton extends ConsumerWidget {
+  const _ResetEditsButton();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final editorState = ref.watch(editorStateProvider);
+    final editorNotifier = ref.read(editorStateProvider.notifier);
+
+    return ImmichTextButton(
+      labelText: 'reset'.tr(),
+      onPressed: editorNotifier.resetEdits,
+      variant: ImmichVariant.ghost,
+      expanded: false,
+      disabled: !editorState.hasEdits || editorState.isApplyingEdits,
+    );
+  }
+}
+
+class _EditorPreview extends ConsumerStatefulWidget {
+  final Image image;
+
+  const _EditorPreview({required this.image});
+
+  @override
+  ConsumerState<_EditorPreview> createState() => _EditorPreviewState();
+}
+
+class _EditorPreviewState extends ConsumerState<_EditorPreview> with TickerProviderStateMixin {
+  late final CropController cropController;
+
+  @override
+  void initState() {
+    super.initState();
+
+    cropController = CropController();
+    cropController.crop = ref.read(editorStateProvider.select((state) => state.crop));
+    cropController.addListener(onCrop);
+  }
+
+  void onCrop() {
+    if (!mounted || cropController.crop == ref.read(editorStateProvider).crop) {
+      return;
+    }
+
+    ref.read(editorStateProvider.notifier).setCrop(cropController.crop);
+  }
+
+  @override
+  void dispose() {
+    cropController.removeListener(onCrop);
+    cropController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final editorState = ref.watch(editorStateProvider);
+    final editorNotifier = ref.read(editorStateProvider.notifier);
+
+    ref.listen(editorStateProvider, (_, current) {
+      cropController.aspectRatio = current.aspectRatio;
+
+      if (cropController.crop != current.crop) {
+        cropController.crop = current.crop;
+      }
+    });
+
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        // Calculate the bounding box size needed for the rotated container
+        final baseWidth = constraints.maxWidth * 0.9;
+        final baseHeight = constraints.maxHeight * 0.95;
+
+        return Center(
+          child: AnimatedRotation(
+            turns: editorState.rotationAngle / 360,
+            duration: editorState.animationDuration,
+            curve: Curves.easeInOut,
+            onEnd: editorNotifier.normalizeRotation,
+            child: Transform(
+              alignment: Alignment.center,
+              transform: Matrix4.identity()
+                ..scaleByDouble(
+                  editorState.flipHorizontal ? -1.0 : 1.0,
+                  editorState.flipVertical ? -1.0 : 1.0,
+                  1.0,
+                  1.0,
+                ),
+              child: Container(
+                padding: const EdgeInsets.all(10),
+                width: (editorState.rotationAngle % 180 == 0) ? baseWidth : baseHeight,
+                height: (editorState.rotationAngle % 180 == 0) ? baseHeight : baseWidth,
+                child: CropImage(controller: cropController, image: widget.image, gridColor: Colors.white),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

mobile/lib/presentation/pages/edit/editor.provider.dart

@@ -0,0 +1,210 @@
+import 'package:flutter/services.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset_edit.model.dart';
+import 'package:immich_mobile/domain/models/exif.model.dart';
+import 'package:immich_mobile/utils/editor.utils.dart';
+
+final editorStateProvider = NotifierProvider<EditorProvider, EditorState>(EditorProvider.new);
+
+class EditorProvider extends Notifier<EditorState> {
+  @override
+  EditorState build() {
+    return const EditorState();
+  }
+
+  void clear() {
+    state = const EditorState();
+  }
+
+  void init(List<AssetEdit> edits, ExifInfo exifInfo) {
+    clear();
+
+    final existingCrop = edits.whereType<CropEdit>().firstOrNull;
+
+    final originalWidth = exifInfo.isFlipped ? exifInfo.height : exifInfo.width;
+    final originalHeight = exifInfo.isFlipped ? exifInfo.width : exifInfo.height;
+
+    Rect crop = existingCrop != null && originalWidth != null && originalHeight != null
+        ? convertCropParametersToRect(existingCrop.parameters, originalWidth, originalHeight)
+        : const Rect.fromLTRB(0, 0, 1, 1);
+
+    final transform = normalizeTransformEdits(edits);
+
+    state = state.copyWith(
+      originalWidth: originalWidth,
+      originalHeight: originalHeight,
+      crop: crop,
+      flipHorizontal: transform.mirrorHorizontal,
+      flipVertical: transform.mirrorVertical,
+    );
+
+    _animateRotation(transform.rotation.toInt(), duration: Duration.zero);
+  }
+
+  void _animateRotation(int angle, {Duration duration = const Duration(milliseconds: 300)}) {
+    state = state.copyWith(rotationAngle: angle, animationDuration: duration);
+  }
+
+  void normalizeRotation() {
+    final normalizedAngle = ((state.rotationAngle % 360) + 360) % 360;
+    if (normalizedAngle != state.rotationAngle) {
+      state = state.copyWith(rotationAngle: normalizedAngle, animationDuration: Duration.zero);
+    }
+  }
+
+  void setIsEditing(bool isApplyingEdits) {
+    state = state.copyWith(isApplyingEdits: isApplyingEdits);
+  }
+
+  void setCrop(Rect crop) {
+    state = state.copyWith(crop: crop, hasUnsavedEdits: true);
+  }
+
+  void setAspectRatio(double? aspectRatio) {
+    if (aspectRatio != null && state.rotationAngle % 180 != 0) {
+      // When rotated 90 or 270 degrees, swap width and height for aspect ratio calculations
+      aspectRatio = 1 / aspectRatio;
+    }
+
+    state = state.copyWith(aspectRatio: aspectRatio);
+  }
+
+  void resetEdits() {
+    _animateRotation(0);
+
+    state = state.copyWith(
+      flipHorizontal: false,
+      flipVertical: false,
+      crop: const Rect.fromLTRB(0, 0, 1, 1),
+      aspectRatio: null,
+      hasUnsavedEdits: true,
+    );
+  }
+
+  void rotateCCW() {
+    _animateRotation(state.rotationAngle - 90);
+    state = state.copyWith(hasUnsavedEdits: true);
+  }
+
+  void rotateCW() {
+    _animateRotation(state.rotationAngle + 90);
+    state = state.copyWith(hasUnsavedEdits: true);
+  }
+
+  void flipHorizontally() {
+    if (state.rotationAngle % 180 != 0) {
+      // When rotated 90 or 270 degrees, flipping horizontally is equivalent to flipping vertically
+      state = state.copyWith(flipVertical: !state.flipVertical, hasUnsavedEdits: true);
+    } else {
+      state = state.copyWith(flipHorizontal: !state.flipHorizontal, hasUnsavedEdits: true);
+    }
+  }
+
+  void flipVertically() {
+    if (state.rotationAngle % 180 != 0) {
+      // When rotated 90 or 270 degrees, flipping vertically is equivalent to flipping horizontally
+      state = state.copyWith(flipHorizontal: !state.flipHorizontal, hasUnsavedEdits: true);
+    } else {
+      state = state.copyWith(flipVertical: !state.flipVertical, hasUnsavedEdits: true);
+    }
+  }
+}
+
+class EditorState {
+  final bool isApplyingEdits;
+
+  final int rotationAngle;
+  final bool flipHorizontal;
+  final bool flipVertical;
+  final Rect crop;
+  final double? aspectRatio;
+
+  final int originalWidth;
+  final int originalHeight;
+
+  final Duration animationDuration;
+
+  final bool hasUnsavedEdits;
+
+  const EditorState({
+    bool? isApplyingEdits,
+    int? rotationAngle,
+    bool? flipHorizontal,
+    bool? flipVertical,
+    Rect? crop,
+    this.aspectRatio,
+    int? originalWidth,
+    int? originalHeight,
+    Duration? animationDuration,
+    bool? hasUnsavedEdits,
+  }) : isApplyingEdits = isApplyingEdits ?? false,
+       rotationAngle = rotationAngle ?? 0,
+       flipHorizontal = flipHorizontal ?? false,
+       flipVertical = flipVertical ?? false,
+       animationDuration = animationDuration ?? Duration.zero,
+       originalWidth = originalWidth ?? 0,
+       originalHeight = originalHeight ?? 0,
+       crop = crop ?? const Rect.fromLTRB(0, 0, 1, 1),
+       hasUnsavedEdits = hasUnsavedEdits ?? false;
+
+  EditorState copyWith({
+    bool? isApplyingEdits,
+    int? rotationAngle,
+    bool? flipHorizontal,
+    bool? flipVertical,
+    double? aspectRatio = double.infinity,
+    int? originalWidth,
+    int? originalHeight,
+    Duration? animationDuration,
+    Rect? crop,
+    bool? hasUnsavedEdits,
+  }) {
+    return EditorState(
+      isApplyingEdits: isApplyingEdits ?? this.isApplyingEdits,
+      rotationAngle: rotationAngle ?? this.rotationAngle,
+      flipHorizontal: flipHorizontal ?? this.flipHorizontal,
+      flipVertical: flipVertical ?? this.flipVertical,
+      aspectRatio: aspectRatio == double.infinity ? this.aspectRatio : aspectRatio,
+      animationDuration: animationDuration ?? this.animationDuration,
+      originalWidth: originalWidth ?? this.originalWidth,
+      originalHeight: originalHeight ?? this.originalHeight,
+      crop: crop ?? this.crop,
+      hasUnsavedEdits: hasUnsavedEdits ?? this.hasUnsavedEdits,
+    );
+  }
+
+  bool get hasEdits {
+    return rotationAngle != 0 || flipHorizontal || flipVertical || crop != const Rect.fromLTRB(0, 0, 1, 1);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is EditorState &&
+        other.isApplyingEdits == isApplyingEdits &&
+        other.rotationAngle == rotationAngle &&
+        other.flipHorizontal == flipHorizontal &&
+        other.flipVertical == flipVertical &&
+        other.crop == crop &&
+        other.aspectRatio == aspectRatio &&
+        other.originalWidth == originalWidth &&
+        other.originalHeight == originalHeight &&
+        other.animationDuration == animationDuration &&
+        other.hasUnsavedEdits == hasUnsavedEdits;
+  }
+
+  @override
+  int get hashCode {
+    return isApplyingEdits.hashCode ^
+        rotationAngle.hashCode ^
+        flipHorizontal.hashCode ^
+        flipVertical.hashCode ^
+        crop.hashCode ^
+        aspectRatio.hashCode ^
+        originalWidth.hashCode ^
+        originalHeight.hashCode ^
+        animationDuration.hashCode ^
+        hasUnsavedEdits.hashCode;
+  }
+}

mobile/lib/presentation/pages/editing/drift_crop.page.dart

@@ -1,179 +0,0 @@
-import 'dart:async';
-
-import 'package:auto_route/auto_route.dart';
-import 'package:crop_image/crop_image.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/utils/hooks/crop_controller_hook.dart';
-import 'package:immich_ui/immich_ui.dart';
-
-/// A widget for cropping an image.
-/// This widget uses [HookWidget] to manage its lifecycle and state. It allows
-/// users to crop an image and then navigate to the [EditImagePage] with the
-/// cropped image.
-
-@RoutePage()
-class DriftCropImagePage extends HookWidget {
-  final Image image;
-  final BaseAsset asset;
-  const DriftCropImagePage({super.key, required this.image, required this.asset});
-
-  @override
-  Widget build(BuildContext context) {
-    final cropController = useCropController();
-    final aspectRatio = useState<double?>(null);
-
-    return Scaffold(
-      appBar: AppBar(
-        backgroundColor: context.scaffoldBackgroundColor,
-        title: Text("crop".tr()),
-        leading: const ImmichCloseButton(),
-        actions: [
-          ImmichIconButton(
-            icon: Icons.done_rounded,
-            color: ImmichColor.primary,
-            variant: ImmichVariant.ghost,
-            onPressed: () async {
-              final croppedImage = await cropController.croppedImage();
-              unawaited(context.pushRoute(DriftEditImageRoute(asset: asset, image: croppedImage, isEdited: true)));
-            },
-          ),
-        ],
-      ),
-      backgroundColor: context.scaffoldBackgroundColor,
-      body: SafeArea(
-        child: LayoutBuilder(
-          builder: (BuildContext context, BoxConstraints constraints) {
-            return Column(
-              children: [
-                Container(
-                  padding: const EdgeInsets.only(top: 20),
-                  width: constraints.maxWidth * 0.9,
-                  height: constraints.maxHeight * 0.6,
-                  child: CropImage(controller: cropController, image: image, gridColor: Colors.white),
-                ),
-                Expanded(
-                  child: Container(
-                    width: double.infinity,
-                    decoration: BoxDecoration(
-                      color: context.scaffoldBackgroundColor,
-                      borderRadius: const BorderRadius.only(
-                        topLeft: Radius.circular(20),
-                        topRight: Radius.circular(20),
-                      ),
-                    ),
-                    child: Center(
-                      child: Column(
-                        mainAxisAlignment: MainAxisAlignment.center,
-                        children: [
-                          Padding(
-                            padding: const EdgeInsets.only(left: 20, right: 20, bottom: 10),
-                            child: Row(
-                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                              children: [
-                                ImmichIconButton(
-                                  icon: Icons.rotate_left,
-                                  variant: ImmichVariant.ghost,
-                                  color: ImmichColor.secondary,
-                                  onPressed: () => cropController.rotateLeft(),
-                                ),
-                                ImmichIconButton(
-                                  icon: Icons.rotate_right,
-                                  variant: ImmichVariant.ghost,
-                                  color: ImmichColor.secondary,
-                                  onPressed: () => cropController.rotateRight(),
-                                ),
-                              ],
-                            ),
-                          ),
-                          Row(
-                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                            children: <Widget>[
-                              _AspectRatioButton(
-                                cropController: cropController,
-                                aspectRatio: aspectRatio,
-                                ratio: null,
-                                label: 'Free',
-                              ),
-                              _AspectRatioButton(
-                                cropController: cropController,
-                                aspectRatio: aspectRatio,
-                                ratio: 1.0,
-                                label: '1:1',
-                              ),
-                              _AspectRatioButton(
-                                cropController: cropController,
-                                aspectRatio: aspectRatio,
-                                ratio: 16.0 / 9.0,
-                                label: '16:9',
-                              ),
-                              _AspectRatioButton(
-                                cropController: cropController,
-                                aspectRatio: aspectRatio,
-                                ratio: 3.0 / 2.0,
-                                label: '3:2',
-                              ),
-                              _AspectRatioButton(
-                                cropController: cropController,
-                                aspectRatio: aspectRatio,
-                                ratio: 7.0 / 5.0,
-                                label: '7:5',
-                              ),
-                            ],
-                          ),
-                        ],
-                      ),
-                    ),
-                  ),
-                ),
-              ],
-            );
-          },
-        ),
-      ),
-    );
-  }
-}
-
-class _AspectRatioButton extends StatelessWidget {
-  final CropController cropController;
-  final ValueNotifier<double?> aspectRatio;
-  final double? ratio;
-  final String label;
-
-  const _AspectRatioButton({
-    required this.cropController,
-    required this.aspectRatio,
-    required this.ratio,
-    required this.label,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        IconButton(
-          icon: Icon(switch (label) {
-            'Free' => Icons.crop_free_rounded,
-            '1:1' => Icons.crop_square_rounded,
-            '16:9' => Icons.crop_16_9_rounded,
-            '3:2' => Icons.crop_3_2_rounded,
-            '7:5' => Icons.crop_7_5_rounded,
-            _ => Icons.crop_free_rounded,
-          }, color: aspectRatio.value == ratio ? context.primaryColor : context.themeData.iconTheme.color),
-          onPressed: () {
-            cropController.crop = const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9);
-            aspectRatio.value = ratio;
-            cropController.aspectRatio = ratio;
-          },
-        ),
-        Text(label, style: context.textTheme.displayMedium),
-      ],
-    );
-  }
-}

mobile/lib/presentation/pages/editing/drift_edit.page.dart

@@ -1,154 +0,0 @@
-import 'dart:async';
-
-import 'package:auto_route/auto_route.dart';
-import 'package:cancellation_token_http/http.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/providers/background_sync.provider.dart';
-import 'package:immich_mobile/repositories/file_media.repository.dart';
-import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/services/foreground_upload.service.dart';
-import 'package:immich_mobile/utils/image_converter.dart';
-import 'package:immich_mobile/widgets/common/immich_toast.dart';
-import 'package:logging/logging.dart';
-import 'package:path/path.dart' as p;
-
-/// A stateless widget that provides functionality for editing an image.
-///
-/// This widget allows users to edit an image provided either as an [Asset] or
-/// directly as an [Image]. It ensures that exactly one of these is provided.
-///
-/// It also includes a conversion method to convert an [Image] to a [Uint8List] to save the image on the user's phone
-/// They automatically navigate to the [HomePage] with the edited image saved and they eventually get backed up to the server.
-@immutable
-@RoutePage()
-class DriftEditImagePage extends ConsumerWidget {
-  final BaseAsset asset;
-  final Image image;
-  final bool isEdited;
-
-  const DriftEditImagePage({super.key, required this.asset, required this.image, required this.isEdited});
-
-  void _exitEditing(BuildContext context) {
-    // this assumes that the only way to get to this page is from the AssetViewerRoute
-    context.navigator.popUntil((route) => route.data?.name == AssetViewerRoute.name);
-  }
-
-  Future<void> _saveEditedImage(BuildContext context, BaseAsset asset, Image image, WidgetRef ref) async {
-    try {
-      final Uint8List imageData = await imageToUint8List(image);
-      LocalAsset? localAsset;
-
-      try {
-        localAsset = await ref
-            .read(fileMediaRepositoryProvider)
-            .saveLocalAsset(imageData, title: "${p.withoutExtension(asset.name)}_edited.jpg");
-      } on PlatformException catch (e) {
-        // OS might not return the saved image back, so we handle that gracefully
-        // This can happen if app does not have full library access
-        Logger("SaveEditedImage").warning("Failed to retrieve the saved image back from OS", e);
-      }
-
-      unawaited(ref.read(backgroundSyncProvider).syncLocal(full: true));
-      _exitEditing(context);
-      ImmichToast.show(durationInSecond: 3, context: context, msg: 'Image Saved!');
-
-      if (localAsset == null) {
-        return;
-      }
-
-      await ref.read(foregroundUploadServiceProvider).uploadManual([localAsset], CancellationToken());
-    } catch (e) {
-      ImmichToast.show(
-        durationInSecond: 6,
-        context: context,
-        msg: "error_saving_image".tr(namedArgs: {'error': e.toString()}),
-      );
-    }
-  }
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text("edit".tr()),
-        backgroundColor: context.scaffoldBackgroundColor,
-        leading: IconButton(
-          icon: Icon(Icons.close_rounded, color: context.primaryColor, size: 24),
-          onPressed: () => _exitEditing(context),
-        ),
-        actions: <Widget>[
-          TextButton(
-            onPressed: isEdited ? () => _saveEditedImage(context, asset, image, ref) : null,
-            child: Text("save_to_gallery".tr(), style: TextStyle(color: isEdited ? context.primaryColor : Colors.grey)),
-          ),
-        ],
-      ),
-      backgroundColor: context.scaffoldBackgroundColor,
-      body: Center(
-        child: ConstrainedBox(
-          constraints: BoxConstraints(maxHeight: context.height * 0.7, maxWidth: context.width * 0.9),
-          child: Container(
-            decoration: BoxDecoration(
-              borderRadius: const BorderRadius.all(Radius.circular(7)),
-              boxShadow: [
-                BoxShadow(
-                  color: Colors.black.withValues(alpha: 0.2),
-                  spreadRadius: 2,
-                  blurRadius: 10,
-                  offset: const Offset(0, 3),
-                ),
-              ],
-            ),
-            child: ClipRRect(
-              borderRadius: const BorderRadius.all(Radius.circular(7)),
-              child: Image(image: image.image, fit: BoxFit.contain),
-            ),
-          ),
-        ),
-      ),
-      bottomNavigationBar: Container(
-        height: 70,
-        margin: const EdgeInsets.only(bottom: 60, right: 10, left: 10, top: 10),
-        decoration: BoxDecoration(
-          color: context.scaffoldBackgroundColor,
-          borderRadius: const BorderRadius.all(Radius.circular(30)),
-        ),
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-          children: <Widget>[
-            Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: <Widget>[
-                IconButton(
-                  icon: Icon(Icons.crop_rotate_rounded, color: context.themeData.iconTheme.color, size: 25),
-                  onPressed: () {
-                    context.pushRoute(DriftCropImageRoute(asset: asset, image: image));
-                  },
-                ),
-                Text("crop".tr(), style: context.textTheme.displayMedium),
-              ],
-            ),
-            Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: <Widget>[
-                IconButton(
-                  icon: Icon(Icons.filter, color: context.themeData.iconTheme.color, size: 25),
-                  onPressed: () {
-                    context.pushRoute(DriftFilterImageRoute(asset: asset, image: image));
-                  },
-                ),
-                Text("filter".tr(), style: context.textTheme.displayMedium),
-              ],
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}

mobile/lib/presentation/pages/editing/drift_filter.page.dart

@@ -1,159 +0,0 @@
-import 'dart:async';
-import 'dart:ui' as ui;
-
-import 'package:auto_route/auto_route.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:immich_mobile/constants/filters.dart';
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/routing/router.dart';
-
-/// A widget for filtering an image.
-/// This widget uses [HookWidget] to manage its lifecycle and state. It allows
-/// users to add filters to an image and then navigate to the [EditImagePage] with the
-/// final composition.'
-@RoutePage()
-class DriftFilterImagePage extends HookWidget {
-  final Image image;
-  final BaseAsset asset;
-
-  const DriftFilterImagePage({super.key, required this.image, required this.asset});
-
-  @override
-  Widget build(BuildContext context) {
-    final colorFilter = useState<ColorFilter>(filters[0]);
-    final selectedFilterIndex = useState<int>(0);
-
-    Future<ui.Image> createFilteredImage(ui.Image inputImage, ColorFilter filter) {
-      final completer = Completer<ui.Image>();
-      final size = Size(inputImage.width.toDouble(), inputImage.height.toDouble());
-      final recorder = ui.PictureRecorder();
-      final canvas = Canvas(recorder);
-
-      final paint = Paint()..colorFilter = filter;
-      canvas.drawImage(inputImage, Offset.zero, paint);
-
-      recorder.endRecording().toImage(size.width.round(), size.height.round()).then((image) {
-        completer.complete(image);
-      });
-
-      return completer.future;
-    }
-
-    void applyFilter(ColorFilter filter, int index) {
-      colorFilter.value = filter;
-      selectedFilterIndex.value = index;
-    }
-
-    Future<Image> applyFilterAndConvert(ColorFilter filter) async {
-      final completer = Completer<ui.Image>();
-      image.image
-          .resolve(ImageConfiguration.empty)
-          .addListener(
-            ImageStreamListener((ImageInfo info, bool _) {
-              completer.complete(info.image);
-            }),
-          );
-      final uiImage = await completer.future;
-
-      final filteredUiImage = await createFilteredImage(uiImage, filter);
-      final byteData = await filteredUiImage.toByteData(format: ui.ImageByteFormat.png);
-      final pngBytes = byteData!.buffer.asUint8List();
-
-      return Image.memory(pngBytes, fit: BoxFit.contain);
-    }
-
-    return Scaffold(
-      appBar: AppBar(
-        backgroundColor: context.scaffoldBackgroundColor,
-        title: Text("filter".tr()),
-        leading: CloseButton(color: context.primaryColor),
-        actions: [
-          IconButton(
-            icon: Icon(Icons.done_rounded, color: context.primaryColor, size: 24),
-            onPressed: () async {
-              final filteredImage = await applyFilterAndConvert(colorFilter.value);
-              unawaited(context.pushRoute(DriftEditImageRoute(asset: asset, image: filteredImage, isEdited: true)));
-            },
-          ),
-        ],
-      ),
-      backgroundColor: context.scaffoldBackgroundColor,
-      body: Column(
-        children: [
-          SizedBox(
-            height: context.height * 0.7,
-            child: Center(
-              child: ColorFiltered(colorFilter: colorFilter.value, child: image),
-            ),
-          ),
-          SizedBox(
-            height: 120,
-            child: ListView.builder(
-              scrollDirection: Axis.horizontal,
-              itemCount: filters.length,
-              itemBuilder: (context, index) {
-                return Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                  child: _FilterButton(
-                    image: image,
-                    label: filterNames[index],
-                    filter: filters[index],
-                    isSelected: selectedFilterIndex.value == index,
-                    onTap: () => applyFilter(filters[index], index),
-                  ),
-                );
-              },
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}
-
-class _FilterButton extends StatelessWidget {
-  final Image image;
-  final String label;
-  final ColorFilter filter;
-  final bool isSelected;
-  final VoidCallback onTap;
-
-  const _FilterButton({
-    required this.image,
-    required this.label,
-    required this.filter,
-    required this.isSelected,
-    required this.onTap,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      children: [
-        GestureDetector(
-          onTap: onTap,
-          child: Container(
-            width: 80,
-            height: 80,
-            decoration: BoxDecoration(
-              borderRadius: const BorderRadius.all(Radius.circular(10)),
-              border: isSelected ? Border.all(color: context.primaryColor, width: 3) : null,
-            ),
-            child: ClipRRect(
-              borderRadius: const BorderRadius.all(Radius.circular(10)),
-              child: ColorFiltered(
-                colorFilter: filter,
-                child: FittedBox(fit: BoxFit.cover, child: image),
-              ),
-            ),
-          ),
-        ),
-        const SizedBox(height: 10),
-        Text(label, style: context.themeData.textTheme.bodyMedium),
-      ],
-    );
-  }
-}

mobile/lib/presentation/pages/search/drift_search.page.dart

@@ -6,11 +6,11 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/person.model.dart';
 import 'package:immich_mobile/domain/models/tag.model.dart';
 import 'package:immich_mobile/domain/models/timeline.model.dart';
 import 'package:immich_mobile/domain/services/timeline.service.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/models/search/search_filter.model.dart';
@@ -52,23 +52,20 @@ class DriftSearchPage extends HookConsumerWidget {
           : 'file_name_or_extension'.t(context: context),
     );
     final textSearchController = useTextEditingController();
-    final preFilter = ref.watch(searchPreFilterProvider);
     final filter = useState<SearchFilter>(
       SearchFilter(
-        people: preFilter?.people ?? {},
-        location: preFilter?.location ?? SearchLocationFilter(),
-        camera: preFilter?.camera ?? SearchCameraFilter(),
-        date: preFilter?.date ?? SearchDateFilter(),
-        display: preFilter?.display ?? SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
-        rating: preFilter?.rating ?? SearchRatingFilter(),
-        mediaType: preFilter?.mediaType ?? AssetType.other,
+        people: {},
+        location: SearchLocationFilter(),
+        camera: SearchCameraFilter(),
+        date: SearchDateFilter(),
+        display: SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
+        rating: SearchRatingFilter(),
+        mediaType: AssetType.other,
         language: "${context.locale.languageCode}-${context.locale.countryCode}",
-        assetId: preFilter?.assetId,
-        tagIds: preFilter?.tagIds ?? [],
+        tagIds: [],
       ),
     );
 
-    final previousFilter = useState<SearchFilter?>(null);
     final dateInputFilter = useState<DateFilterInputModel?>(null);
 
     final peopleCurrentFilterWidget = useState<Widget?>(null);
@@ -80,89 +77,67 @@ class DriftSearchPage extends HookConsumerWidget {
     final ratingCurrentFilterWidget = useState<Widget?>(null);
     final displayOptionCurrentFilterWidget = useState<Widget?>(null);
 
-    final isSearching = useState(false);
-
     final userPreferences = ref.watch(userMetadataPreferencesProvider);
 
-    SnackBar searchInfoSnackBar(String message) {
-      return SnackBar(
-        content: Text(message, style: context.textTheme.labelLarge),
-        showCloseIcon: true,
-        behavior: SnackBarBehavior.fixed,
-        closeIconColor: context.colorScheme.onSurface,
-      );
-    }
-
-    searchFilter(SearchFilter filter) async {
-      if (filter.isEmpty) {
+    search(SearchFilter f) {
+      if (f == filter.value) {
         return;
       }
 
-      if (preFilter == null && filter == previousFilter.value) {
-        return;
-      }
+      filter.value = f;
 
-      isSearching.value = true;
-      ref.watch(paginatedSearchProvider.notifier).clear();
-      final hasResult = await ref.watch(paginatedSearchProvider.notifier).search(filter);
+      ref.read(paginatedSearchProvider.notifier).clear();
 
-      if (!hasResult) {
-        context.showSnackBar(searchInfoSnackBar('search_no_result'.t(context: context)));
-      }
-
-      previousFilter.value = filter;
-      isSearching.value = false;
-    }
-
-    search() => searchFilter(filter.value);
-
-    loadMoreSearchResult() async {
-      isSearching.value = true;
-      final hasResult = await ref.watch(paginatedSearchProvider.notifier).search(filter.value);
-
-      if (!hasResult) {
-        context.showSnackBar(searchInfoSnackBar('search_no_more_result'.t(context: context)));
-      }
-
-      isSearching.value = false;
-    }
-
-    searchPreFilter() {
-      if (preFilter != null) {
-        Future.delayed(Duration.zero, () {
-          searchFilter(preFilter);
-
-          if (preFilter.location.city != null) {
-            locationCurrentFilterWidget.value = Text(preFilter.location.city!, style: context.textTheme.labelLarge);
-          }
-        });
+      if (!f.isEmpty) {
+        unawaited(ref.read(paginatedSearchProvider.notifier).search(f));
       }
     }
 
+    loadMoreSearchResults() {
+      unawaited(ref.read(paginatedSearchProvider.notifier).search(filter.value));
+    }
+
+    // TODO: Use ref.listen with `fireImmediately` in the new riverpod version.
+    final preFilter = ref.watch(searchPreFilterProvider);
     useEffect(() {
-      Future.microtask(() => ref.invalidate(paginatedSearchProvider));
-      searchPreFilter();
+      if (preFilter == null) {
+        return null;
+      }
+
+      Future.microtask(() {
+        textSearchController.clear();
+        peopleCurrentFilterWidget.value = null;
+        dateRangeCurrentFilterWidget.value = null;
+        cameraCurrentFilterWidget.value = null;
+        tagCurrentFilterWidget.value = null;
+        mediaTypeCurrentFilterWidget.value = null;
+        ratingCurrentFilterWidget.value = null;
+        displayOptionCurrentFilterWidget.value = null;
+        locationCurrentFilterWidget.value = preFilter.location.city != null
+            ? Text(preFilter.location.city!, style: context.textTheme.labelLarge)
+            : null;
+        search(preFilter);
+      });
 
       return null;
     }, [preFilter]);
 
     showPeoplePicker() {
-      handleOnSelect(Set<PersonDto> value) {
-        filter.value = filter.value.copyWith(people: value);
+      var people = filter.value.people;
 
-        final label = value.map((e) => e.name != '' ? e.name : 'no_name'.t(context: context)).join(', ');
-        if (label.isNotEmpty) {
-          peopleCurrentFilterWidget.value = Text(label, style: context.textTheme.labelLarge);
-        } else {
-          peopleCurrentFilterWidget.value = null;
-        }
+      handleOnSelect(Set<PersonDto> value) {
+        people = value;
       }
 
       handleClear() {
-        filter.value = filter.value.copyWith(people: {});
-
         peopleCurrentFilterWidget.value = null;
-        search();
+        search(filter.value.copyWith(people: {}));
+      }
+
+      handleApply() {
+        final label = people.map((e) => e.name != '' ? e.name : 'no_name'.t(context: context)).join(', ');
+        peopleCurrentFilterWidget.value = label.isNotEmpty ? Text(label, style: context.textTheme.labelLarge) : null;
+        search(filter.value.copyWith(people: people));
       }
 
       showFilterBottomSheet(
@@ -173,7 +148,7 @@ class DriftSearchPage extends HookConsumerWidget {
           child: FilterBottomSheetScaffold(
             title: 'search_filter_people_title'.t(context: context),
             expanded: true,
-            onSearch: search,
+            onSearch: handleApply,
             onClear: handleClear,
             child: PeoplePicker(onSelect: handleOnSelect, filter: filter.value.people),
           ),
@@ -182,23 +157,22 @@ class DriftSearchPage extends HookConsumerWidget {
     }
 
     showTagPicker() {
+      var tagIds = filter.value.tagIds ?? [];
+      String tagLabel = '';
+
       handleOnSelect(Iterable<Tag> tags) {
-        filter.value = filter.value.copyWith(tagIds: tags.map((t) => t.id).toList());
-        final label = tags.map((t) => t.value).join(', ');
-        if (label.isEmpty) {
-          tagCurrentFilterWidget.value = null;
-        } else {
-          tagCurrentFilterWidget.value = Text(
-            label.isEmpty ? 'tags'.t(context: context) : label,
-            style: context.textTheme.labelLarge,
-          );
-        }
+        tagIds = tags.map((t) => t.id).toList();
+        tagLabel = tags.map((t) => t.value).join(', ');
       }
 
       handleClear() {
-        filter.value = filter.value.copyWith(tagIds: []);
         tagCurrentFilterWidget.value = null;
-        search();
+        search(filter.value.copyWith(tagIds: []));
+      }
+
+      handleApply() {
+        tagCurrentFilterWidget.value = tagLabel.isNotEmpty ? Text(tagLabel, style: context.textTheme.labelLarge) : null;
+        search(filter.value.copyWith(tagIds: tagIds));
       }
 
       showFilterBottomSheet(
@@ -209,7 +183,7 @@ class DriftSearchPage extends HookConsumerWidget {
           child: FilterBottomSheetScaffold(
             title: 'search_filter_tags_title'.t(context: context),
             expanded: true,
-            onSearch: search,
+            onSearch: handleApply,
             onClear: handleClear,
             child: TagPicker(onSelect: handleOnSelect, filter: (filter.value.tagIds ?? []).toSet()),
           ),
@@ -218,32 +192,27 @@ class DriftSearchPage extends HookConsumerWidget {
     }
 
     showLocationPicker() {
+      var location = filter.value.location;
+
       handleOnSelect(Map<String, String?> value) {
-        filter.value = filter.value.copyWith(
-          location: SearchLocationFilter(country: value['country'], city: value['city'], state: value['state']),
-        );
-
-        final locationText = <String>[];
-        if (value['country'] != null) {
-          locationText.add(value['country']!);
-        }
-
-        if (value['state'] != null) {
-          locationText.add(value['state']!);
-        }
-
-        if (value['city'] != null) {
-          locationText.add(value['city']!);
-        }
-
-        locationCurrentFilterWidget.value = Text(locationText.join(', '), style: context.textTheme.labelLarge);
+        location = SearchLocationFilter(country: value['country'], city: value['city'], state: value['state']);
       }
 
       handleClear() {
-        filter.value = filter.value.copyWith(location: SearchLocationFilter());
-
         locationCurrentFilterWidget.value = null;
-        search();
+        search(filter.value.copyWith(location: SearchLocationFilter()));
+      }
+
+      handleApply() {
+        final locationText = [
+          if (location.country != null) location.country!,
+          if (location.state != null) location.state!,
+          if (location.city != null) location.city!,
+        ];
+        locationCurrentFilterWidget.value = locationText.isNotEmpty
+            ? Text(locationText.join(', '), style: context.textTheme.labelLarge)
+            : null;
+        search(filter.value.copyWith(location: location));
       }
 
       showFilterBottomSheet(
@@ -252,7 +221,7 @@ class DriftSearchPage extends HookConsumerWidget {
         isDismissible: true,
         child: FilterBottomSheetScaffold(
           title: 'search_filter_location_title'.t(context: context),
-          onSearch: search,
+          onSearch: handleApply,
           onClear: handleClear,
           child: Padding(
             padding: const EdgeInsets.symmetric(vertical: 16.0),
@@ -269,22 +238,24 @@ class DriftSearchPage extends HookConsumerWidget {
     }
 
     showCameraPicker() {
-      handleOnSelect(Map<String, String?> value) {
-        filter.value = filter.value.copyWith(
-          camera: SearchCameraFilter(make: value['make'], model: value['model']),
-        );
+      var camera = filter.value.camera;
 
-        cameraCurrentFilterWidget.value = Text(
-          '${value['make'] ?? ''} ${value['model'] ?? ''}',
-          style: context.textTheme.labelLarge,
-        );
+      handleOnSelect(Map<String, String?> value) {
+        camera = SearchCameraFilter(make: value['make'], model: value['model']);
       }
 
       handleClear() {
-        filter.value = filter.value.copyWith(camera: SearchCameraFilter());
-
         cameraCurrentFilterWidget.value = null;
-        search();
+        search(filter.value.copyWith(camera: SearchCameraFilter()));
+      }
+
+      handleApply() {
+        final make = camera.make ?? '';
+        final model = camera.model ?? '';
+        cameraCurrentFilterWidget.value = (make.isNotEmpty || model.isNotEmpty)
+            ? Text('$make $model', style: context.textTheme.labelLarge)
+            : null;
+        search(filter.value.copyWith(camera: camera));
       }
 
       showFilterBottomSheet(
@@ -293,7 +264,7 @@ class DriftSearchPage extends HookConsumerWidget {
         isDismissible: true,
         child: FilterBottomSheetScaffold(
           title: 'search_filter_camera_title'.t(context: context),
-          onSearch: search,
+          onSearch: handleApply,
           onClear: handleClear,
           child: Padding(
             padding: const EdgeInsets.all(16.0),
@@ -306,28 +277,24 @@ class DriftSearchPage extends HookConsumerWidget {
     datePicked(DateFilterInputModel? selectedDate) {
       dateInputFilter.value = selectedDate;
       if (selectedDate == null) {
-        filter.value = filter.value.copyWith(date: SearchDateFilter());
-
         dateRangeCurrentFilterWidget.value = null;
-        unawaited(search());
+        search(filter.value.copyWith(date: SearchDateFilter()));
         return;
       }
 
       final date = selectedDate.asDateTimeRange();
-
-      filter.value = filter.value.copyWith(
-        date: SearchDateFilter(
-          takenAfter: date.start,
-          takenBefore: date.end.add(const Duration(hours: 23, minutes: 59, seconds: 59)),
-        ),
-      );
-
       dateRangeCurrentFilterWidget.value = Text(
         selectedDate.asHumanReadable(context),
         style: context.textTheme.labelLarge,
       );
-
-      unawaited(search());
+      search(
+        filter.value.copyWith(
+          date: SearchDateFilter(
+            takenAfter: date.start,
+            takenBefore: date.end.add(const Duration(hours: 23, minutes: 59, seconds: 59)),
+          ),
+        ),
+      );
     }
 
     showDatePicker() async {
@@ -380,11 +347,11 @@ class DriftSearchPage extends HookConsumerWidget {
           child: QuickDatePicker(
             currentInput: dateInputFilter.value,
             onRequestPicker: () {
-              context.pop();
+              ContextHelper(context).pop();
               showDatePicker();
             },
             onSelect: (date) {
-              context.pop();
+              ContextHelper(context).pop();
               datePicked(date);
             },
           ),
@@ -394,31 +361,32 @@ class DriftSearchPage extends HookConsumerWidget {
 
     // MEDIA PICKER
     showMediaTypePicker() {
-      handleOnSelected(AssetType assetType) {
-        filter.value = filter.value.copyWith(mediaType: assetType);
+      var mediaType = filter.value.mediaType;
 
-        mediaTypeCurrentFilterWidget.value = Text(
-          assetType == AssetType.image
-              ? 'image'.t(context: context)
-              : assetType == AssetType.video
-              ? 'video'.t(context: context)
-              : 'all'.t(context: context),
-          style: context.textTheme.labelLarge,
-        );
+      handleOnSelected(AssetType assetType) {
+        mediaType = assetType;
       }
 
       handleClear() {
-        filter.value = filter.value.copyWith(mediaType: AssetType.other);
-
         mediaTypeCurrentFilterWidget.value = null;
-        search();
+        search(filter.value.copyWith(mediaType: AssetType.other));
+      }
+
+      handleApply() {
+        mediaTypeCurrentFilterWidget.value = mediaType != AssetType.other
+            ? Text(
+                mediaType == AssetType.image ? 'image'.t(context: context) : 'video'.t(context: context),
+                style: context.textTheme.labelLarge,
+              )
+            : null;
+        search(filter.value.copyWith(mediaType: mediaType));
       }
 
       showFilterBottomSheet(
         context: context,
         child: FilterBottomSheetScaffold(
           title: 'search_filter_media_type_title'.t(context: context),
-          onSearch: search,
+          onSearch: handleApply,
           onClear: handleClear,
           child: MediaTypePicker(onSelect: handleOnSelected, filter: filter.value.mediaType),
         ),
@@ -427,19 +395,22 @@ class DriftSearchPage extends HookConsumerWidget {
 
     // STAR RATING PICKER
     showStarRatingPicker() {
-      handleOnSelected(SearchRatingFilter rating) {
-        filter.value = filter.value.copyWith(rating: rating);
+      var rating = filter.value.rating;
 
-        ratingCurrentFilterWidget.value = Text(
-          'rating_count'.t(args: {'count': rating.rating!}),
-          style: context.textTheme.labelLarge,
-        );
+      handleOnSelected(SearchRatingFilter value) {
+        rating = value;
       }
 
       handleClear() {
-        filter.value = filter.value.copyWith(rating: SearchRatingFilter(rating: null));
         ratingCurrentFilterWidget.value = null;
-        search();
+        search(filter.value.copyWith(rating: SearchRatingFilter(rating: null)));
+      }
+
+      handleApply() {
+        ratingCurrentFilterWidget.value = rating.rating != null
+            ? Text('rating_count'.t(args: {'count': rating.rating!}), style: context.textTheme.labelLarge)
+            : null;
+        search(filter.value.copyWith(rating: rating));
       }
 
       showFilterBottomSheet(
@@ -447,7 +418,7 @@ class DriftSearchPage extends HookConsumerWidget {
         isScrollControlled: true,
         child: FilterBottomSheetScaffold(
           title: 'rating'.t(context: context),
-          onSearch: search,
+          onSearch: handleApply,
           onClear: handleClear,
           child: StarRatingPicker(onSelect: handleOnSelected, filter: filter.value.rating),
         ),
@@ -456,79 +427,54 @@ class DriftSearchPage extends HookConsumerWidget {
 
     // DISPLAY OPTION
     showDisplayOptionPicker() {
+      var display = filter.value.display;
+
       handleOnSelect(Map<DisplayOption, bool> value) {
-        final filterText = <String>[];
-        value.forEach((key, value) {
-          switch (key) {
-            case DisplayOption.notInAlbum:
-              filter.value = filter.value.copyWith(display: filter.value.display.copyWith(isNotInAlbum: value));
-              if (value) {
-                filterText.add('search_filter_display_option_not_in_album'.t(context: context));
-              }
-              break;
-            case DisplayOption.archive:
-              filter.value = filter.value.copyWith(display: filter.value.display.copyWith(isArchive: value));
-              if (value) {
-                filterText.add('archive'.t(context: context));
-              }
-              break;
-            case DisplayOption.favorite:
-              filter.value = filter.value.copyWith(display: filter.value.display.copyWith(isFavorite: value));
-              if (value) {
-                filterText.add('favorite'.t(context: context));
-              }
-              break;
-          }
-        });
-
-        if (filterText.isEmpty) {
-          displayOptionCurrentFilterWidget.value = null;
-          return;
-        }
-
-        displayOptionCurrentFilterWidget.value = Text(filterText.join(', '), style: context.textTheme.labelLarge);
+        display = display.copyWith(
+          isNotInAlbum: value[DisplayOption.notInAlbum],
+          isArchive: value[DisplayOption.archive],
+          isFavorite: value[DisplayOption.favorite],
+        );
       }
 
       handleClear() {
-        filter.value = filter.value.copyWith(
-          display: SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
-        );
-
         displayOptionCurrentFilterWidget.value = null;
-        search();
+        search(
+          filter.value.copyWith(
+            display: SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
+          ),
+        );
+      }
+
+      handleApply() {
+        final filterText = [
+          if (display.isNotInAlbum) 'search_filter_display_option_not_in_album'.t(context: context),
+          if (display.isArchive) 'archive'.t(context: context),
+          if (display.isFavorite) 'favorite'.t(context: context),
+        ];
+        displayOptionCurrentFilterWidget.value = filterText.isNotEmpty
+            ? Text(filterText.join(', '), style: context.textTheme.labelLarge)
+            : null;
+        search(filter.value.copyWith(display: display));
       }
 
       showFilterBottomSheet(
         context: context,
         child: FilterBottomSheetScaffold(
           title: 'display_options'.t(context: context),
-          onSearch: search,
+          onSearch: handleApply,
           onClear: handleClear,
           child: DisplayOptionPicker(onSelect: handleOnSelect, filter: filter.value.display),
         ),
       );
     }
 
-    handleTextSubmitted(String value) {
-      switch (textSearchType.value) {
-        case TextSearchType.context:
-          filter.value = filter.value.copyWith(filename: '', context: value, description: '', ocr: '');
-
-          break;
-        case TextSearchType.filename:
-          filter.value = filter.value.copyWith(filename: value, context: '', description: '', ocr: '');
-
-          break;
-        case TextSearchType.description:
-          filter.value = filter.value.copyWith(filename: '', context: '', description: value, ocr: '');
-          break;
-        case TextSearchType.ocr:
-          filter.value = filter.value.copyWith(filename: '', context: '', description: '', ocr: value);
-          break;
-      }
-
-      search();
-    }
+    handleTextSubmitted(String value) => search(switch (textSearchType.value) {
+      TextSearchType.context => filter.value.copyWith(filename: '', context: value, description: '', ocr: ''),
+      TextSearchType.filename => filter.value.copyWith(filename: value, context: '', description: '', ocr: ''),
+      TextSearchType.description => filter.value.copyWith(filename: '', context: '', description: value, ocr: ''),
+      TextSearchType.ocr => filter.value.copyWith(filename: '', context: '', description: '', ocr: value),
+    });
 
     IconData getSearchPrefixIcon() => switch (textSearchType.value) {
       TextSearchType.context => Icons.image_search_rounded,
@@ -666,8 +612,10 @@ class DriftSearchPage extends HookConsumerWidget {
             hintText: searchHintText.value,
             key: const Key('search_text_field'),
             controller: textSearchController,
-            contentPadding: preFilter != null ? const EdgeInsets.only(left: 24) : const EdgeInsets.all(8),
-            prefixIcon: preFilter != null ? null : Icon(getSearchPrefixIcon(), color: context.colorScheme.primary),
+            contentPadding: filter.value.assetId != null ? const EdgeInsets.only(left: 24) : const EdgeInsets.all(8),
+            prefixIcon: filter.value.assetId != null
+                ? null
+                : Icon(getSearchPrefixIcon(), color: context.colorScheme.primary),
             onSubmitted: handleTextSubmitted,
             focusNode: ref.watch(searchInputFocusProvider),
           ),
@@ -742,10 +690,10 @@ class DriftSearchPage extends HookConsumerWidget {
               ),
             ),
           ),
-          if (isSearching.value)
-            const SliverFillRemaining(hasScrollBody: false, child: Center(child: CircularProgressIndicator()))
+          if (filter.value.isEmpty)
+            const _SearchSuggestions()
           else
-            _SearchResultGrid(onScrollEnd: loadMoreSearchResult),
+            _SearchResultGrid(onScrollEnd: loadMoreSearchResults),
         ],
       ),
     );
@@ -757,45 +705,85 @@ class _SearchResultGrid extends ConsumerWidget {
 
   const _SearchResultGrid({required this.onScrollEnd});
 
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final assets = ref.watch(paginatedSearchProvider.select((s) => s.assets));
+  bool _onScrollUpdateNotification(ScrollNotification notification) {
+    final metrics = notification.metrics;
 
-    if (assets.isEmpty) {
-      return const _SearchEmptyContent();
+    if (metrics.axis != Axis.vertical) return false;
+
+    final isBottomSheet = notification.context?.findAncestorWidgetOfExactType<DraggableScrollableSheet>() != null;
+    final remaining = metrics.maxScrollExtent - metrics.pixels;
+
+    if (remaining < metrics.viewportDimension && !isBottomSheet) {
+      onScrollEnd();
     }
 
-    return NotificationListener<ScrollEndNotification>(
-      onNotification: (notification) {
-        final isBottomSheetNotification =
-            notification.context?.findAncestorWidgetOfExactType<DraggableScrollableSheet>() != null;
+    return false;
+  }
 
-        final metrics = notification.metrics;
-        final isVerticalScroll = metrics.axis == Axis.vertical;
+  Widget? _bottomWidget(BuildContext context, WidgetRef ref) {
+    final isLoading = ref.watch(paginatedSearchProvider.select((s) => s.isLoading));
 
-        if (metrics.pixels >= metrics.maxScrollExtent && isVerticalScroll && !isBottomSheetNotification) {
-          onScrollEnd();
-          ref.read(paginatedSearchProvider.notifier).setScrollOffset(metrics.maxScrollExtent);
-        }
+    if (isLoading) {
+      return const SliverFillRemaining(
+        hasScrollBody: false,
+        child: Padding(
+          padding: EdgeInsets.all(32),
+          child: Center(child: CircularProgressIndicator()),
+        ),
+      );
+    }
 
-        return true;
-      },
+    final hasMore = ref.watch(paginatedSearchProvider.select((s) => s.nextPage != null));
+
+    if (hasMore) return null;
+
+    return SliverToBoxAdapter(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 32),
+        child: Center(
+          child: Text(
+            'search_no_more_result'.t(context: context),
+            style: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceVariant),
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final hasAssets = ref.watch(paginatedSearchProvider.select((s) => s.assets.isNotEmpty));
+    final isLoading = ref.watch(paginatedSearchProvider.select((s) => s.isLoading));
+
+    if (!hasAssets && !isLoading) {
+      return const _SearchNoResults();
+    }
+
+    return NotificationListener<ScrollUpdateNotification>(
+      onNotification: _onScrollUpdateNotification,
       child: SliverFillRemaining(
         child: ProviderScope(
           overrides: [
             timelineServiceProvider.overrideWith((ref) {
-              final timelineService = ref.watch(timelineFactoryProvider).fromAssets(assets, TimelineOrigin.search);
-              ref.onDispose(timelineService.dispose);
-              return timelineService;
+              final notifier = ref.read(paginatedSearchProvider.notifier);
+              final service = ref
+                  .watch(timelineFactoryProvider)
+                  .fromAssetStream(
+                    () => ref.read(paginatedSearchProvider).assets,
+                    notifier.assetCount,
+                    TimelineOrigin.search,
+                  );
+              ref.onDispose(service.dispose);
+              return service;
             }),
           ],
           child: Timeline(
-            key: ValueKey(assets.length),
             groupBy: GroupAssetsBy.none,
             appBar: null,
             bottomSheet: const GeneralBottomSheet(minChildSize: 0.20),
             snapToMonth: false,
-            initialScrollOffset: ref.read(paginatedSearchProvider.select((s) => s.scrollOffset)),
+            loadingWidget: const SizedBox.shrink(),
+            bottomSliverWidget: _bottomWidget(context, ref),
           ),
         ),
       ),
@@ -803,8 +791,35 @@ class _SearchResultGrid extends ConsumerWidget {
   }
 }
 
-class _SearchEmptyContent extends StatelessWidget {
-  const _SearchEmptyContent();
+class _SearchNoResults extends StatelessWidget {
+  const _SearchNoResults();
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverFillRemaining(
+      hasScrollBody: false,
+      child: Container(
+        alignment: Alignment.center,
+        padding: const EdgeInsets.all(48),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(Icons.search_off_rounded, size: 72, color: context.colorScheme.onSurfaceVariant),
+            const SizedBox(height: 24),
+            Text(
+              'search_no_result'.t(context: context),
+              textAlign: TextAlign.center,
+              style: context.textTheme.bodyLarge?.copyWith(color: context.colorScheme.onSurfaceVariant),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _SearchSuggestions extends StatelessWidget {
+  const _SearchSuggestions();
 
   @override
   Widget build(BuildContext context) {

mobile/lib/presentation/pages/search/paginated_search.provider.dart

@@ -1,5 +1,7 @@
+import 'dart:async';
+
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/domain/models/search_result.model.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/services/search.service.dart';
 import 'package:immich_mobile/models/search/search_filter.model.dart';
 import 'package:immich_mobile/providers/infrastructure/search.provider.dart';
@@ -21,40 +23,52 @@ class SearchFilterProvider extends Notifier<SearchFilter?> {
   }
 }
 
-final paginatedSearchProvider = StateNotifierProvider<PaginatedSearchNotifier, SearchResult>(
+class SearchState {
+  final List<BaseAsset> assets;
+  final int? nextPage;
+  final bool isLoading;
+
+  const SearchState({this.assets = const [], this.nextPage = 1, this.isLoading = false});
+}
+
+final paginatedSearchProvider = StateNotifierProvider<PaginatedSearchNotifier, SearchState>(
   (ref) => PaginatedSearchNotifier(ref.watch(searchServiceProvider)),
 );
 
-class PaginatedSearchNotifier extends StateNotifier<SearchResult> {
+class PaginatedSearchNotifier extends StateNotifier<SearchState> {
   final SearchService _searchService;
+  final _assetCountController = StreamController<int>.broadcast();
 
-  PaginatedSearchNotifier(this._searchService) : super(const SearchResult(assets: [], nextPage: 1));
+  PaginatedSearchNotifier(this._searchService) : super(const SearchState());
 
-  Future<bool> search(SearchFilter filter) async {
-    if (state.nextPage == null) {
-      return false;
-    }
+  Stream<int> get assetCount => _assetCountController.stream;
+
+  Future<void> search(SearchFilter filter) async {
+    if (state.nextPage == null || state.isLoading) return;
+
+    state = SearchState(assets: state.assets, nextPage: state.nextPage, isLoading: true);
 
     final result = await _searchService.search(filter, state.nextPage!);
 
     if (result == null) {
-      return false;
+      state = SearchState(assets: state.assets, nextPage: state.nextPage);
+      return;
     }
 
-    state = SearchResult(
-      assets: [...state.assets, ...result.assets],
-      nextPage: result.nextPage,
-      scrollOffset: state.scrollOffset,
-    );
+    final assets = [...state.assets, ...result.assets];
+    state = SearchState(assets: assets, nextPage: result.nextPage);
 
-    return true;
+    _assetCountController.add(assets.length);
   }
 
-  void setScrollOffset(double offset) {
-    state = state.copyWith(scrollOffset: offset);
+  void clear() {
+    state = const SearchState();
+    _assetCountController.add(0);
   }
 
-  clear() {
-    state = const SearchResult(assets: [], nextPage: 1, scrollOffset: 0.0);
+  @override
+  void dispose() {
+    _assetCountController.close();
+    super.dispose();
   }
 }

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

@@ -4,7 +4,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unarchive_action_button.widget.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/presentation/widgets/album/album_selector.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/routes.provider.dart';
@@ -49,7 +49,7 @@ class _AddActionButtonState extends ConsumerState<AddActionButton> {
   }
 
   List<Widget> _buildMenuChildren() {
-    final asset = ref.read(currentAssetNotifier);
+    final asset = ref.read(assetViewerProvider).currentAsset;
     if (asset == null) return [];
 
     final user = ref.read(currentUserProvider);
@@ -103,7 +103,7 @@ class _AddActionButtonState extends ConsumerState<AddActionButton> {
   }
 
   void _openAlbumSelector() {
-    final currentAsset = ref.read(currentAssetNotifier);
+    final currentAsset = ref.read(assetViewerProvider).currentAsset;
     if (currentAsset == null) {
       ImmichToast.show(context: context, msg: "Cannot load asset information.", toastType: ToastType.error);
       return;
@@ -133,7 +133,7 @@ class _AddActionButtonState extends ConsumerState<AddActionButton> {
   }
 
   Future<void> _addCurrentAssetToAlbum(RemoteAlbum album) async {
-    final latest = ref.read(currentAssetNotifier);
+    final latest = ref.read(assetViewerProvider).currentAsset;
 
     if (latest == null) {
       ImmichToast.show(context: context, msg: "Cannot load asset information.", toastType: ToastType.error);
@@ -169,7 +169,7 @@ class _AddActionButtonState extends ConsumerState<AddActionButton> {
 
   @override
   Widget build(BuildContext context) {
-    final asset = ref.watch(currentAssetNotifier);
+    final asset = ref.watch(assetViewerProvider.select((s) => s.currentAsset));
     if (asset == null) {
       return const SizedBox.shrink();
     }

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

@@ -14,13 +14,13 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 Future<void> performArchiveAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
-  final result = await ref.read(actionProvider.notifier).archive(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
+  final result = await ref.read(actionProvider.notifier).archive(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   final successMessage = 'archive_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
   if (context.mounted) {

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

@@ -57,13 +57,13 @@ class DeleteActionButton extends ConsumerWidget {
       if (confirm != true) return;
     }
 
-    final result = await ref.read(actionProvider.notifier).trashRemoteAndDeleteLocal(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
+    final result = await ref.read(actionProvider.notifier).trashRemoteAndDeleteLocal(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     final successMessage = 'delete_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
     if (context.mounted) {

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

@@ -8,6 +8,7 @@ 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/infrastructure/action.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/widgets/asset_grid/permanent_delete_dialog.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 /// This delete action has the following behavior:
@@ -25,13 +26,22 @@ class DeletePermanentActionButton extends ConsumerWidget {
       return;
     }
 
-    final result = await ref.read(actionProvider.notifier).deleteRemoteAndLocal(source);
-    ref.read(multiSelectProvider.notifier).reset();
+    final count = source == ActionSource.viewer ? 1 : ref.read(multiSelectProvider).selectedAssets.length;
+    final confirm =
+        await showDialog<bool>(
+          context: context,
+          builder: (context) => PermanentDeleteDialog(count: count),
+        ) ??
+        false;
+    if (!confirm) return;
 
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
+    final result = await ref.read(actionProvider.notifier).deleteRemoteAndLocal(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     final successMessage = 'delete_permanently_action_prompt'.t(
       context: context,
       args: {'count': result.count.toString()},

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

@@ -5,7 +5,7 @@ import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
-import 'package:immich_mobile/widgets/asset_grid/trash_delete_dialog.dart';
+import 'package:immich_mobile/widgets/asset_grid/permanent_delete_dialog.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 /// This delete action has the following behavior:
@@ -28,7 +28,7 @@ class DeleteTrashActionButton extends ConsumerWidget {
     final confirmDelete =
         await showDialog<bool>(
           context: context,
-          builder: (context) => TrashDeleteDialog(count: selectCount),
+          builder: (context) => PermanentDeleteDialog(count: selectCount),
         ) ??
         false;
     if (!confirmDelete) {

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

@@ -1,10 +1,17 @@
+import 'dart:async';
+
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/asset_edit.model.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/pages/edit/editor.provider.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 
 class EditImageActionButton extends ConsumerWidget {
@@ -12,15 +19,35 @@ class EditImageActionButton extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final currentAsset = ref.watch(currentAssetNotifier);
+    final currentAsset = ref.watch(assetViewerProvider.select((s) => s.currentAsset));
 
-    onPress() {
-      if (currentAsset == null) {
+    Future<void> editImage(List<AssetEdit> edits) async {
+      if (currentAsset == null || currentAsset.remoteId == null) {
         return;
       }
 
-      final image = Image(image: getFullImageProvider(currentAsset));
-      context.pushRoute(DriftEditImageRoute(asset: currentAsset, image: image, isEdited: false));
+      await ref.read(actionProvider.notifier).applyEdits(ActionSource.viewer, edits);
+    }
+
+    Future<void> onPress() async {
+      if (currentAsset == null || currentAsset.remoteId == null) {
+        return;
+      }
+
+      final imageProvider = getFullImageProvider(currentAsset, edited: false);
+
+      final image = Image(image: imageProvider);
+      final (edits, exifInfo) = await (
+        ref.read(remoteAssetRepositoryProvider).getAssetEdits(currentAsset.remoteId!),
+        ref.read(remoteAssetRepositoryProvider).getExif(currentAsset.remoteId!),
+      ).wait;
+
+      if (exifInfo == null) {
+        return;
+      }
+
+      ref.read(editorStateProvider.notifier).init(edits, exifInfo);
+      await context.pushRoute(DriftEditImageRoute(image: image, applyEdits: editImage));
     }
 
     return BaseActionButton(

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

@@ -2,8 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.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/asset_viewer.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
@@ -23,6 +25,12 @@ class FavoriteActionButton extends ConsumerWidget {
     final result = await ref.read(actionProvider.notifier).favorite(source);
 
     if (source == ActionSource.viewer) {
+      if (result.success) {
+        final currentAsset = ref.read(assetViewerProvider).currentAsset;
+        if (currentAsset is RemoteAsset && !currentAsset.isFavorite) {
+          ref.read(assetViewerProvider.notifier).setAsset(currentAsset.copyWith(isFavorite: true));
+        }
+      }
       return;
     }
 

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

@@ -7,7 +7,7 @@ import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/models/activities/activity.model.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
 import 'package:immich_mobile/providers/activity.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 
@@ -20,10 +20,10 @@ class LikeActivityActionButton extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final album = ref.watch(currentRemoteAlbumProvider);
-    final asset = ref.watch(currentAssetNotifier) as RemoteAsset?;
+    final asset = ref.watch(assetViewerProvider.select((s) => s.currentAsset)) as RemoteAsset?;
     final user = ref.watch(currentUserProvider);
 
-    final activities = ref.watch(albumActivityProvider(album?.id ?? "", asset?.id));
+    final activities = ref.watch(albumActivityProvider((album?.id ?? "", asset?.id)));
 
     onTap(Activity? liked) async {
       if (user == null) {
@@ -31,12 +31,12 @@ class LikeActivityActionButton extends ConsumerWidget {
       }
 
       if (liked != null) {
-        await ref.read(albumActivityProvider(album?.id ?? "", asset?.id).notifier).removeActivity(liked.id);
+        await ref.read(albumActivityProvider((album?.id ?? "", asset?.id)).notifier).removeActivity(liked.id);
       } else {
-        await ref.read(albumActivityProvider(album?.id ?? "", asset?.id).notifier).addLike();
+        await ref.read(albumActivityProvider((album?.id ?? "", asset?.id)).notifier).addLike();
       }
 
-      ref.invalidate(albumActivityProvider(album?.id ?? "", asset?.id));
+      ref.invalidate(albumActivityProvider((album?.id ?? "", asset?.id)));
     }
 
     return activities.when(

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

@@ -14,13 +14,13 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 Future<void> performMoveToLockFolderAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
-  final result = await ref.read(actionProvider.notifier).moveToLockFolder(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
+  final result = await ref.read(actionProvider.notifier).moveToLockFolder(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   final successMessage = 'move_to_lock_folder_action_prompt'.t(
     context: context,
     args: {'count': result.count.toString()},

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

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/store.model.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class OpenInBrowserActionButton extends ConsumerWidget {
+  final String remoteId;
+  final TimelineOrigin origin;
+  final bool iconOnly;
+  final bool menuItem;
+  final Color? iconColor;
+
+  const OpenInBrowserActionButton({
+    super.key,
+    required this.remoteId,
+    required this.origin,
+    this.iconOnly = false,
+    this.menuItem = false,
+    this.iconColor,
+  });
+
+  void _onTap() async {
+    final serverEndpoint = Store.get(StoreKey.serverEndpoint).replaceFirst('/api', '');
+
+    String originPath = '';
+    switch (origin) {
+      case TimelineOrigin.favorite:
+        originPath = '/favorites';
+        break;
+      case TimelineOrigin.trash:
+        originPath = '/trash';
+        break;
+      case TimelineOrigin.archive:
+        originPath = '/archive';
+        break;
+      default:
+        break;
+    }
+
+    final url = '$serverEndpoint$originPath/photos/$remoteId';
+    if (await canLaunchUrl(Uri.parse(url))) {
+      await launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      label: 'open_in_browser'.t(context: context),
+      iconData: Icons.open_in_browser,
+      iconColor: iconColor,
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: _onTap,
+    );
+  }
+}

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

@@ -29,13 +29,13 @@ class RemoveFromAlbumActionButton extends ConsumerWidget {
       return;
     }
 
-    final result = await ref.read(actionProvider.notifier).removeFromAlbum(source, albumId);
-    ref.read(multiSelectProvider.notifier).reset();
-
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
+    final result = await ref.read(actionProvider.notifier).removeFromAlbum(source, albumId);
+    ref.read(multiSelectProvider.notifier).reset();
+
     final successMessage = 'remove_from_album_action_prompt'.t(
       context: context,
       args: {'count': result.count.toString()},

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

@@ -3,12 +3,12 @@ import 'dart:async';
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/models/search/search_filter.model.dart';
 import 'package:immich_mobile/presentation/pages/search/paginated_search.provider.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 
 class SimilarPhotosActionButton extends ConsumerWidget {
@@ -24,20 +24,22 @@ class SimilarPhotosActionButton extends ConsumerWidget {
     }
 
     ref.invalidate(assetViewerProvider);
-    ref
-        .read(searchPreFilterProvider.notifier)
-        .setFilter(
-          SearchFilter(
-            assetId: assetId,
-            people: {},
-            location: SearchLocationFilter(),
-            camera: SearchCameraFilter(),
-            date: SearchDateFilter(),
-            display: SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
-            rating: SearchRatingFilter(),
-            mediaType: AssetType.image,
-          ),
-        );
+    ref.invalidate(paginatedSearchProvider);
+
+    ref.read(searchPreFilterProvider.notifier)
+      ..clear()
+      ..setFilter(
+        SearchFilter(
+          assetId: assetId,
+          people: {},
+          location: SearchLocationFilter(),
+          camera: SearchCameraFilter(),
+          date: SearchDateFilter(),
+          display: SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
+          rating: SearchRatingFilter(),
+          mediaType: AssetType.other,
+        ),
+      );
 
     unawaited(context.navigateTo(const DriftSearchRoute()));
   }

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

@@ -25,13 +25,13 @@ class TrashActionButton extends ConsumerWidget {
       return;
     }
 
-    final result = await ref.read(actionProvider.notifier).trash(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
+    final result = await ref.read(actionProvider.notifier).trash(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     final successMessage = 'trash_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
     if (context.mounted) {

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

@@ -16,13 +16,13 @@ import 'package:immich_mobile/domain/utils/event_stream.dart';
 Future<void> performUnArchiveAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
-  final result = await ref.read(actionProvider.notifier).unArchive(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
+  final result = await ref.read(actionProvider.notifier).unArchive(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   final successMessage = 'unarchive_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
   if (context.mounted) {

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

@@ -2,8 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.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/asset_viewer.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
@@ -23,6 +25,12 @@ class UnFavoriteActionButton extends ConsumerWidget {
     final result = await ref.read(actionProvider.notifier).unFavorite(source);
 
     if (source == ActionSource.viewer) {
+      if (result.success) {
+        final currentAsset = ref.read(assetViewerProvider).currentAsset;
+        if (currentAsset is RemoteAsset && currentAsset.isFavorite) {
+          ref.read(assetViewerProvider.notifier).setAsset(currentAsset.copyWith(isFavorite: false));
+        }
+      }
       return;
     }
 

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

@@ -101,7 +101,8 @@ class _UploadProgressDialog extends ConsumerWidget {
       actions: [
         ImmichTextButton(
           onPressed: () {
-            ref.read(manualUploadCancelTokenProvider)?.cancel();
+            ref.read(manualUploadCancelTokenProvider)?.complete();
+            ref.read(manualUploadCancelTokenProvider.notifier).state = null;
             Navigator.of(context).pop();
           },
           labelText: 'cancel'.t(context: context),

mobile/lib/presentation/widgets/album/album_selector.widget.dart

@@ -17,9 +17,9 @@ import 'package:immich_mobile/presentation/widgets/album/new_album_name_modal.wi
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
@@ -809,7 +809,7 @@ class CreateAlbumButton extends ConsumerWidget {
         return;
       }
 
-      final asset = ref.read(currentAssetNotifier);
+      final asset = ref.read(assetViewerProvider).currentAsset;
 
       if (asset == null) {
         ImmichToast.show(context: context, msg: "Cannot load asset information.", toastType: ToastType.error);
@@ -833,7 +833,7 @@ class CreateAlbumButton extends ConsumerWidget {
       // Invalidate using the asset's remote ID to refresh the "Appears in" list
       ref.invalidate(albumsContainingAssetProvider(asset.remoteId!));
 
-      context.pop();
+      ContextHelper(context).pop();
     }
 
     return SliverPadding(

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_details/appears_in_details.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_details/date_time_details.widget.dart';
@@ -11,35 +12,45 @@ import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_details/te
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 
 class AssetDetails extends ConsumerWidget {
+  final BaseAsset asset;
   final double minHeight;
 
-  const AssetDetails({required this.minHeight, super.key});
+  const AssetDetails({super.key, required this.asset, required this.minHeight});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final asset = ref.watch(currentAssetNotifier);
-    if (asset == null) {
-      return const SizedBox.shrink();
-    }
+    final exifInfo = ref.watch(assetExifProvider(asset)).valueOrNull;
+
     return Container(
       constraints: BoxConstraints(minHeight: minHeight),
       decoration: BoxDecoration(
         color: context.colorScheme.surface,
         borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
-      ),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          const DragHandle(),
-          const DateTimeDetails(),
-          const PeopleDetails(),
-          const LocationDetails(),
-          const TechnicalDetails(),
-          const RatingDetails(),
-          const AppearsInDetails(),
-          SizedBox(height: context.padding.bottom + 48),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.2),
+            offset: const Offset(0, -3),
+            blurRadius: 10,
+            spreadRadius: 2,
+          ),
         ],
       ),
+      child: SafeArea(
+        top: false,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const DragHandle(),
+            DateTimeDetails(asset: asset, exifInfo: exifInfo),
+            PeopleDetails(asset: asset),
+            LocationDetails(asset: asset, exifInfo: exifInfo),
+            TechnicalDetails(asset: asset, exifInfo: exifInfo),
+            RatingDetails(exifInfo: exifInfo),
+            AppearsInDetails(asset: asset),
+            SizedBox(height: context.padding.bottom + 48),
+          ],
+        ),
+      ),
     );
   }
 }

mobile/lib/presentation/widgets/asset_viewer/asset_details/appears_in_details.widget.dart

@@ -8,27 +8,25 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/album/album_tile.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/sheet_tile.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 
 class AppearsInDetails extends ConsumerWidget {
-  const AppearsInDetails({super.key});
+  final BaseAsset asset;
+
+  const AppearsInDetails({super.key, required this.asset});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final asset = ref.watch(currentAssetNotifier);
-    if (asset == null || !asset.hasRemote) return const SizedBox.shrink();
+    if (!asset.hasRemote) return const SizedBox.shrink();
 
-    String? remoteAssetId;
-    if (asset is RemoteAsset) {
-      remoteAssetId = asset.id;
-    } else if (asset is LocalAsset) {
-      remoteAssetId = asset.remoteAssetId;
-    }
+    final remoteAssetId = switch (asset) {
+      RemoteAsset(:final id) => id,
+      LocalAsset(:final remoteAssetId) => remoteAssetId,
+    };
 
     if (remoteAssetId == null) return const SizedBox.shrink();
 

mobile/lib/presentation/widgets/asset_viewer/asset_details/date_time_details.widget.dart

@@ -10,7 +10,6 @@ import 'package:immich_mobile/extensions/duration_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/sheet_tile.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/utils/timezone.dart';
 import 'package:immich_mobile/widgets/common/immich_toast.dart';
@@ -18,14 +17,15 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 const _kSeparator = '  •  ';
 
 class DateTimeDetails extends ConsumerWidget {
-  const DateTimeDetails({super.key});
+  final BaseAsset asset;
+  final ExifInfo? exifInfo;
+
+  const DateTimeDetails({super.key, required this.asset, this.exifInfo});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final asset = ref.watch(currentAssetNotifier);
-    if (asset == null) return const SizedBox.shrink();
-
-    final exifInfo = ref.watch(currentAssetExifProvider).valueOrNull;
+    final asset = this.asset;
+    final exifInfo = this.exifInfo;
     final isOwner = ref.watch(currentUserProvider)?.id == (asset is RemoteAsset ? asset.ownerId : null);
 
     return Column(
@@ -106,9 +106,7 @@ class _SheetAssetDescriptionState extends ConsumerState<_SheetAssetDescription>
 
   @override
   Widget build(BuildContext context) {
-    final currentExifInfo = ref.watch(currentAssetExifProvider).valueOrNull;
-
-    final currentDescription = currentExifInfo?.description ?? '';
+    final currentDescription = widget.exif.description ?? '';
     final hintText = (widget.isEditable ? 'exif_bottom_sheet_description' : 'exif_bottom_sheet_no_description').t(
       context: context,
     );
@@ -134,7 +132,7 @@ class _SheetAssetDescriptionState extends ConsumerState<_SheetAssetDescription>
             errorBorder: InputBorder.none,
             focusedErrorBorder: InputBorder.none,
           ),
-          onTapOutside: (_) => saveDescription(currentExifInfo?.description),
+          onTapOutside: (_) => saveDescription(widget.exif.description),
         ),
       ),
     );

mobile/lib/presentation/widgets/asset_viewer/asset_details/location_details.widget.dart

@@ -8,12 +8,14 @@ import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/sheet_tile.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/widgets/asset_viewer/detail_panel/exif_map.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 
 class LocationDetails extends ConsumerStatefulWidget {
-  const LocationDetails({super.key});
+  final BaseAsset asset;
+  final ExifInfo? exifInfo;
+
+  const LocationDetails({super.key, required this.asset, this.exifInfo});
 
   @override
   ConsumerState createState() => _LocationDetailsState();
@@ -40,17 +42,15 @@ class _LocationDetailsState extends ConsumerState<LocationDetails> {
     _mapController = controller;
   }
 
-  void _onExifChanged(AsyncValue<ExifInfo?>? previous, AsyncValue<ExifInfo?> current) {
-    final currentExif = current.valueOrNull;
-    if (currentExif != null && currentExif.hasCoordinates) {
-      _mapController?.moveCamera(CameraUpdate.newLatLng(LatLng(currentExif.latitude!, currentExif.longitude!)));
-    }
-  }
-
   @override
-  void initState() {
-    super.initState();
-    ref.listenManual(currentAssetExifProvider, _onExifChanged, fireImmediately: true);
+  void didUpdateWidget(LocationDetails oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.exifInfo != oldWidget.exifInfo) {
+      final exif = widget.exifInfo;
+      if (exif != null && exif.hasCoordinates) {
+        _mapController?.moveCamera(CameraUpdate.newLatLng(LatLng(exif.latitude!, exif.longitude!)));
+      }
+    }
   }
 
   void editLocation() async {
@@ -59,8 +59,8 @@ class _LocationDetailsState extends ConsumerState<LocationDetails> {
 
   @override
   Widget build(BuildContext context) {
-    final asset = ref.watch(currentAssetNotifier);
-    final exifInfo = ref.watch(currentAssetExifProvider).valueOrNull;
+    final asset = widget.asset;
+    final exifInfo = widget.exifInfo;
     final hasCoordinates = exifInfo?.hasCoordinates ?? false;
 
     // Guard local assets

mobile/lib/presentation/widgets/asset_viewer/asset_details/people_details.widget.dart

@@ -6,26 +6,22 @@ import 'package:immich_mobile/domain/models/person.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/people/person_edit_name_modal.widget.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/people.provider.dart';
 import 'package:immich_mobile/providers/routes.provider.dart';
-import 'package:immich_mobile/presentation/widgets/images/remote_image_provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:immich_mobile/utils/people.utils.dart';
 
-class PeopleDetails extends ConsumerStatefulWidget {
-  const PeopleDetails({super.key});
+class PeopleDetails extends ConsumerWidget {
+  final BaseAsset asset;
+
+  const PeopleDetails({super.key, required this.asset});
 
   @override
-  ConsumerState createState() => _PeopleDetailsState();
-}
-
-class _PeopleDetailsState extends ConsumerState<PeopleDetails> {
-  @override
-  Widget build(BuildContext context) {
-    final asset = ref.watch(currentAssetNotifier);
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = this.asset;
     if (asset is! RemoteAsset) {
       return const SizedBox.shrink();
     }
@@ -77,7 +73,7 @@ class _PeopleDetailsState extends ConsumerState<PeopleDetails> {
                             context.back();
                             return;
                           }
-                          context.pop();
+                          ContextHelper(context).pop();
                           context.pushRoute(DriftPersonRoute(person: person));
                         },
                         onNameTap: () => showNameEditModal(person),

mobile/lib/presentation/widgets/asset_viewer/asset_details/rating_details.widget.dart

@@ -1,16 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/exif.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/rating_bar.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/user_metadata.provider.dart';
 
 class RatingDetails extends ConsumerWidget {
-  const RatingDetails({super.key});
+  final ExifInfo? exifInfo;
+
+  const RatingDetails({super.key, this.exifInfo});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -20,8 +22,6 @@ class RatingDetails extends ConsumerWidget {
 
     if (!isRatingEnabled) return const SizedBox.shrink();
 
-    final exifInfo = ref.watch(currentAssetExifProvider).valueOrNull;
-
     return Padding(
       padding: const EdgeInsets.only(left: 16.0, top: 16.0),
       child: Column(

mobile/lib/presentation/widgets/asset_viewer/asset_details/technical_details.widget.dart

@@ -6,23 +6,23 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/sheet_tile.widget.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/repositories/asset_media.repository.dart';
 import 'package:immich_mobile/utils/bytes_units.dart';
 
 const _kSeparator = '  •  ';
 
 class TechnicalDetails extends ConsumerWidget {
-  const TechnicalDetails({super.key});
+  final BaseAsset asset;
+  final ExifInfo? exifInfo;
+
+  const TechnicalDetails({super.key, required this.asset, this.exifInfo});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final asset = ref.watch(currentAssetNotifier);
-    if (asset == null) return const SizedBox.shrink();
-
-    final exifInfo = ref.watch(currentAssetExifProvider).valueOrNull;
+    final exifInfo = this.exifInfo;
     final cameraTitle = _getCameraInfoTitle(exifInfo);
     final lensTitle = exifInfo?.lens != null && exifInfo!.lens!.isNotEmpty ? exifInfo.lens : null;
+    final lensSubtitle = _getLensInfoSubtitle(exifInfo);
 
     return Column(
       children: [
@@ -47,9 +47,16 @@ class TechnicalDetails extends ConsumerWidget {
             title: lensTitle,
             titleStyle: context.textTheme.labelLarge,
             leading: Icon(Icons.camera_outlined, size: 24, color: context.textTheme.labelLarge?.color),
-            subtitle: _getLensInfoSubtitle(exifInfo),
+            subtitle: lensSubtitle,
             subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
           ),
+        ] else if (lensSubtitle != null) ...[
+          const SizedBox(height: 16),
+          SheetTile(
+            title: lensSubtitle,
+            titleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+            leading: Icon(Icons.camera_outlined, size: 24, color: context.textTheme.labelLarge?.color),
+          ),
         ],
       ],
     );
@@ -124,6 +131,7 @@ class TechnicalDetails extends ConsumerWidget {
     if (exifInfo == null) return null;
     final fNumber = exifInfo.fNumber.isNotEmpty ? 'ƒ/${exifInfo.fNumber}' : null;
     final focalLength = exifInfo.focalLength.isNotEmpty ? '${exifInfo.focalLength} mm' : null;
+    if (fNumber == null && focalLength == null) return null;
     return [fNumber, focalLength].where((spec) => spec != null && spec.isNotEmpty).join(_kSeparator);
   }
 }

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

@@ -7,21 +7,20 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/scroll_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_details.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_stack.provider.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_stack.widget.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 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/app_settings.provider.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/services/app_settings.service.dart';
-import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/widgets/common/immich_loading_indicator.dart';
 import 'package:immich_mobile/widgets/photo_view/photo_view.dart';
@@ -51,10 +50,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   bool _showingDetails = false;
   bool _isZoomed = false;
 
-  final _scrollController = ScrollController();
-  late final _proxyScrollController = ProxyScrollController(scrollController: _scrollController);
-  final ValueNotifier<PhotoViewScaleState> _videoScaleStateNotifier = ValueNotifier(PhotoViewScaleState.initial);
-
+  final _scrollController = SnapScrollController();
   double _snapOffset = 0.0;
 
   DragStartDetails? _dragStart;
@@ -64,23 +60,21 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   @override
   void initState() {
     super.initState();
-    _proxyScrollController.addListener(_onScroll);
     _eventSubscription = EventStream.shared.listen(_onEvent);
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (!mounted || !_proxyScrollController.hasClients) return;
-      _proxyScrollController.snapPosition.snapOffset = _snapOffset;
+      if (!mounted || !_scrollController.hasClients) return;
+      _scrollController.snapPosition.snapOffset = _snapOffset;
       if (_showingDetails && _snapOffset > 0) {
-        _proxyScrollController.jumpTo(_snapOffset);
+        _scrollController.jumpTo(_snapOffset);
       }
     });
   }
 
   @override
   void dispose() {
-    _proxyScrollController.dispose();
+    _scrollController.dispose();
     _scaleBoundarySub?.cancel();
     _eventSubscription?.cancel();
-    _videoScaleStateNotifier.dispose();
     super.dispose();
   }
 
@@ -93,20 +87,20 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   }
 
   void _showDetails() {
-    if (!_proxyScrollController.hasClients || _snapOffset <= 0) return;
-    _proxyScrollController.animateTo(_snapOffset, duration: Durations.medium2, curve: Curves.easeOutCubic);
+    if (!_scrollController.hasClients || _snapOffset <= 0) return;
+    _viewer.setShowingDetails(true);
+    _scrollController.animateTo(_snapOffset, duration: Durations.medium2, curve: Curves.easeOutCubic);
   }
 
-  bool _willClose(double scrollVelocity) {
-    if (!_proxyScrollController.hasClients || _snapOffset <= 0) return false;
+  bool _willClose(double scrollVelocity) =>
+      _scrollController.hasClients &&
+      _snapOffset > 0 &&
+      _scrollController.position.pixels < _snapOffset &&
+      SnapScrollPhysics.target(_scrollController.position, scrollVelocity, _snapOffset) <
+          SnapScrollPhysics.minSnapDistance;
 
-    final position = _proxyScrollController.position;
-    return _proxyScrollController.position.pixels < _snapOffset &&
-        SnapScrollPhysics.target(position, scrollVelocity, _snapOffset) < SnapScrollPhysics.minSnapDistance;
-  }
-
-  void _onScroll() {
-    final offset = _proxyScrollController.offset;
+  void _syncShowingDetails() {
+    final offset = _scrollController.offset;
     if (offset > SnapScrollPhysics.minSnapDistance) {
       _viewer.setShowingDetails(true);
     } else if (offset < SnapScrollPhysics.minSnapDistance - kTouchSlop) {
@@ -128,8 +122,8 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   }
 
   void _startProxyDrag() {
-    if (_proxyScrollController.hasClients && _dragStart != null) {
-      _drag = _proxyScrollController.position.drag(_dragStart!, () => _drag = null);
+    if (_scrollController.hasClients && _dragStart != null) {
+      _drag = _scrollController.position.drag(_dragStart!, () => _drag = null);
     }
   }
 
@@ -149,6 +143,8 @@ class _AssetPageState extends ConsumerState<AssetPage> {
       case _DragIntent.scroll:
         if (_drag == null) _startProxyDrag();
         _drag?.update(details);
+
+        _syncShowingDetails();
       case _DragIntent.dismiss:
         _handleDragDown(context, details.localPosition - _dragStart!.localPosition);
     }
@@ -167,9 +163,8 @@ class _AssetPageState extends ConsumerState<AssetPage> {
       case _DragIntent.none:
       case _DragIntent.scroll:
         final scrollVelocity = -(details.primaryVelocity ?? 0.0);
-        if (_willClose(scrollVelocity)) {
-          _viewer.setShowingDetails(false);
-        }
+        _viewer.setShowingDetails(!_willClose(scrollVelocity));
+
         _drag?.end(details);
         _drag = null;
       case _DragIntent.dismiss:
@@ -248,17 +243,11 @@ class _AssetPageState extends ConsumerState<AssetPage> {
       ref.read(isPlayingMotionVideoProvider.notifier).playing = true;
 
   void _onScaleStateChanged(PhotoViewScaleState scaleState) {
-    _isZoomed =
-        scaleState == PhotoViewScaleState.zoomedIn ||
-        scaleState == PhotoViewScaleState.covering ||
-        _videoScaleStateNotifier.value == PhotoViewScaleState.zoomedIn ||
-        _videoScaleStateNotifier.value == PhotoViewScaleState.covering;
+    _isZoomed = scaleState == PhotoViewScaleState.zoomedIn || scaleState == PhotoViewScaleState.covering;
     _viewer.setZoomed(_isZoomed);
 
     if (scaleState != PhotoViewScaleState.initial) {
       if (_dragStart == null) _viewer.setControls(false);
-
-      ref.read(videoPlayerControlsProvider.notifier).pause();
       return;
     }
 
@@ -293,30 +282,26 @@ class _AssetPageState extends ConsumerState<AssetPage> {
     _listenForScaleBoundaries(controller);
   }
 
-  Widget _buildPhotoView(
-    BaseAsset displayAsset,
-    BaseAsset asset, {
-    required bool isCurrentPage,
-    required bool showingDetails,
+  Widget _buildPhotoView({
+    required BaseAsset asset,
+    required PhotoViewHeroAttributes? heroAttributes,
+    required bool isCurrent,
     required bool isPlayingMotionVideo,
-    required BoxDecoration backgroundDecoration,
   }) {
-    final heroAttributes = isCurrentPage ? PhotoViewHeroAttributes(tag: '${asset.heroTag}_${widget.heroOffset}') : null;
+    final size = context.sizeData;
 
-    if (displayAsset.isImage && !isPlayingMotionVideo) {
-      final size = context.sizeData;
+    if (asset.isImage && !isPlayingMotionVideo) {
       return PhotoView(
-        key: ValueKey(displayAsset.heroTag),
+        key: Key(asset.heroTag),
         index: widget.index,
-        imageProvider: getFullImageProvider(displayAsset, size: size),
+        imageProvider: getFullImageProvider(asset, size: size),
         heroAttributes: heroAttributes,
         loadingBuilder: (context, progress, index) => const Center(child: ImmichLoadingIndicator()),
-        backgroundDecoration: backgroundDecoration,
         gaplessPlayback: true,
         filterQuality: FilterQuality.high,
         tightMode: true,
         enablePanAlways: true,
-        disableScaleGestures: showingDetails,
+        disableScaleGestures: _showingDetails,
         scaleStateChangedCallback: _onScaleStateChanged,
         onPageBuild: _onPageBuild,
         onDragStart: _onDragStart,
@@ -324,41 +309,41 @@ class _AssetPageState extends ConsumerState<AssetPage> {
         onDragEnd: _onDragEnd,
         onDragCancel: _onDragCancel,
         onTapUp: _onTapUp,
-        onLongPressStart: displayAsset.isMotionPhoto ? _onLongPress : null,
+        onLongPressStart: asset.isMotionPhoto ? _onLongPress : null,
         errorBuilder: (_, __, ___) => SizedBox(
           width: size.width,
           height: size.height,
-          child: Thumbnail.fromAsset(asset: displayAsset, fit: BoxFit.contain),
+          child: Thumbnail.fromAsset(asset: asset, fit: BoxFit.contain),
         ),
       );
     }
 
     return PhotoView.customChild(
-      key: ValueKey(displayAsset),
+      key: Key(asset.heroTag),
+      childSize: asset.width != null && asset.height != null
+          ? Size(asset.width!.toDouble(), asset.height!.toDouble())
+          : null,
       onDragStart: _onDragStart,
       onDragUpdate: _onDragUpdate,
       onDragEnd: _onDragEnd,
       onDragCancel: _onDragCancel,
+      onTapUp: _onTapUp,
+      scaleStateChangedCallback: _onScaleStateChanged,
       heroAttributes: heroAttributes,
       filterQuality: FilterQuality.high,
       basePosition: Alignment.center,
-      disableScaleGestures: true,
+      disableScaleGestures: _showingDetails,
       minScale: PhotoViewComputedScale.contained,
       initialScale: PhotoViewComputedScale.contained,
       tightMode: true,
       onPageBuild: _onPageBuild,
       enablePanAlways: true,
-      backgroundDecoration: backgroundDecoration,
       child: NativeVideoViewer(
-        key: ValueKey(displayAsset),
-        asset: displayAsset,
-        scaleStateNotifier: _videoScaleStateNotifier,
-        disableScaleGestures: showingDetails,
+        key: _NativeVideoViewerKey(asset.heroTag),
+        asset: asset,
+        isCurrent: isCurrent,
         image: Image(
-          key: ValueKey(displayAsset.heroTag),
-          image: getFullImageProvider(displayAsset, size: context.sizeData),
-          height: context.height,
-          width: context.width,
+          image: getFullImageProvider(asset, size: size),
           fit: BoxFit.contain,
           alignment: Alignment.center,
         ),
@@ -379,11 +364,14 @@ class _AssetPageState extends ConsumerState<AssetPage> {
     }
 
     BaseAsset displayAsset = asset;
-    final stackChildren = ref.watch(stackChildrenNotifier(asset)).valueOrNull;
+    final showAssetStack = ref.watch(timelineServiceProvider.select((s) => s.origin != TimelineOrigin.trash));
+    final stackChildren = showAssetStack ? ref.watch(stackChildrenNotifier(asset)).valueOrNull : null;
     if (stackChildren != null && stackChildren.isNotEmpty) {
       displayAsset = stackChildren.elementAt(stackIndex);
     }
 
+    final isCurrent = currentHeroTag == displayAsset.heroTag;
+
     final viewportWidth = MediaQuery.widthOf(context);
     final viewportHeight = MediaQuery.heightOf(context);
     final imageHeight = _getImageHeight(viewportWidth, viewportHeight, displayAsset);
@@ -393,43 +381,29 @@ class _AssetPageState extends ConsumerState<AssetPage> {
 
     _snapOffset = detailsOffset - snapTarget;
 
-    if (_proxyScrollController.hasClients) {
-      _proxyScrollController.snapPosition.snapOffset = _snapOffset;
+    if (_scrollController.hasClients) {
+      _scrollController.snapPosition.snapOffset = _snapOffset;
     }
 
-    return ProviderScope(
-      overrides: [
-        currentAssetNotifier.overrideWith(() => ScopedAssetNotifier(asset)),
-        currentAssetExifProvider.overrideWith((ref) {
-          final a = ref.watch(currentAssetNotifier);
-          if (a == null) return Future.value(null);
-          return ref.watch(assetServiceProvider).getExif(a);
-        }),
-      ],
-      child: Stack(
-        children: [
-          Offstage(
-            child: SingleChildScrollView(
-              controller: _proxyScrollController,
-              physics: const SnapScrollPhysics(),
-              child: const SizedBox.shrink(),
-            ),
-          ),
-          SingleChildScrollView(
-            controller: _scrollController,
-            physics: const NeverScrollableScrollPhysics(),
+    return Stack(
+      children: [
+        SingleChildScrollView(
+          controller: _scrollController,
+          physics: const SnapScrollPhysics(),
+          child: ColoredBox(
+            color: _showingDetails ? Colors.black : Colors.transparent,
             child: Stack(
               children: [
                 SizedBox(
                   width: viewportWidth,
                   height: viewportHeight,
                   child: _buildPhotoView(
-                    displayAsset,
-                    asset,
-                    isCurrentPage: currentHeroTag == asset.heroTag,
-                    showingDetails: _showingDetails,
+                    asset: displayAsset,
+                    heroAttributes: isCurrent
+                        ? PhotoViewHeroAttributes(tag: '${asset.heroTag}_${widget.heroOffset}')
+                        : null,
+                    isCurrent: isCurrent,
                     isPlayingMotionVideo: isPlayingMotionVideo,
-                    backgroundDecoration: BoxDecoration(color: _showingDetails ? Colors.black : Colors.transparent),
                   ),
                 ),
                 IgnorePointer(
@@ -445,7 +419,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
                         child: AnimatedOpacity(
                           opacity: _showingDetails ? 1.0 : 0.0,
                           duration: Durations.short2,
-                          child: AssetDetails(minHeight: viewportHeight - snapTarget),
+                          child: AssetDetails(asset: displayAsset, minHeight: viewportHeight - snapTarget),
                         ),
                       ),
                     ],
@@ -454,8 +428,37 @@ class _AssetPageState extends ConsumerState<AssetPage> {
               ],
             ),
           ),
-        ],
-      ),
+        ),
+        if (stackChildren != null && stackChildren.isNotEmpty)
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: context.padding.bottom,
+            child: AssetStackRow(stack: stackChildren),
+          ),
+      ],
     );
   }
 }
+
+// A global key is used for video viewers to prevent them from being
+// unnecessarily recreated. They're quite expensive, and maintain internal
+// state. This can cause videos to restart multiple times during normal usage,
+// like a hero animation.
+//
+// A plain ValueKey is insufficient, as it does not allow widgets to reparent. A
+// GlobalObjectKey is fragile, as it checks if the given objects are identical,
+// rather than equal. Hero tags are created with string interpolation, which
+// prevents Dart from interning them. As such, hero tags are not identical, even
+// if they are equal.
+class _NativeVideoViewerKey extends GlobalKey {
+  final String value;
+
+  const _NativeVideoViewerKey(this.value) : super.constructor();
+
+  @override
+  bool operator ==(Object other) => other is _NativeVideoViewerKey && other.value == value;
+
+  @override
+  int get hashCode => value.hashCode;
+}

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

@@ -1,53 +1,49 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_stack.provider.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 
 class AssetStackRow extends ConsumerWidget {
-  const AssetStackRow({super.key});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final asset = ref.watch(assetViewerProvider.select((state) => state.currentAsset));
-    if (asset == null) {
-      return const SizedBox.shrink();
-    }
-
-    final stackChildren = ref.watch(stackChildrenNotifier(asset)).valueOrNull;
-    if (stackChildren == null || stackChildren.isEmpty) {
-      return const SizedBox.shrink();
-    }
-
-    final showingDetails = ref.watch(assetViewerProvider.select((s) => s.showingDetails));
-    if (showingDetails) {
-      return const SizedBox.shrink();
-    }
-    return _StackList(stack: stackChildren);
-  }
-}
-
-class _StackList extends ConsumerWidget {
   final List<RemoteAsset> stack;
 
-  const _StackList({required this.stack});
+  const AssetStackRow({super.key, required this.stack});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    return Center(
-      child: SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        child: Padding(
-          padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 20.0),
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            spacing: 5.0,
-            children: List.generate(stack.length, (i) {
-              final asset = stack[i];
-              return _StackItem(key: ValueKey(asset.heroTag), asset: asset, index: i);
-            }),
+    if (stack.isEmpty) {
+      return const SizedBox.shrink();
+    }
+
+    final hideAssetStack = ref.read(timelineServiceProvider).origin == TimelineOrigin.trash;
+    if (hideAssetStack) {
+      return const SizedBox.shrink();
+    }
+
+    final showingControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
+    double opacity = ref.watch(assetViewerProvider.select((s) => s.backgroundOpacity)) * (showingControls ? 1 : 0);
+
+    return IgnorePointer(
+      ignoring: opacity < 1.0,
+      child: AnimatedOpacity(
+        opacity: opacity,
+        duration: Durations.short2,
+        child: Center(
+          child: SingleChildScrollView(
+            scrollDirection: Axis.horizontal,
+            child: Padding(
+              padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 20.0),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                spacing: 5.0,
+                children: List.generate(stack.length, (i) {
+                  final asset = stack[i];
+                  return _StackItem(key: ValueKey(asset.heroTag), asset: asset, index: i);
+                }),
+              ),
+            ),
           ),
         ),
       ),
@@ -67,8 +63,9 @@ class _StackItem extends ConsumerStatefulWidget {
 
 class _StackItemState extends ConsumerState<_StackItem> {
   void _onTap() {
-    ref.read(currentAssetNotifier.notifier).setAsset(widget.asset);
-    ref.read(assetViewerProvider.notifier).setStackIndex(widget.index);
+    final notifier = ref.read(assetViewerProvider.notifier);
+    notifier.setAsset(widget.asset);
+    notifier.setStackIndex(widget.index);
   }
 
   @override

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

@@ -17,13 +17,10 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/download_statu
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_page.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_preloader.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_stack.provider.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/viewer_top_app_bar.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/viewer_bottom_app_bar.widget.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/cast.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/widgets/photo_view/photo_view.dart';
@@ -68,21 +65,15 @@ class AssetViewer extends ConsumerStatefulWidget {
 
   static void setAsset(WidgetRef ref, BaseAsset asset) {
     ref.read(assetViewerProvider.notifier).reset();
+
+    // Hide controls by default for videos
+    if (asset.isVideo) ref.read(assetViewerProvider.notifier).setControls(false);
+
     _setAsset(ref, asset);
   }
 
   static void _setAsset(WidgetRef ref, BaseAsset asset) {
-    // Always holds the current asset from the timeline
     ref.read(assetViewerProvider.notifier).setAsset(asset);
-    // The currentAssetNotifier actually holds the current asset that is displayed
-    // which could be stack children as well
-    ref.read(currentAssetNotifier.notifier).setAsset(asset);
-    if (asset.isVideo || asset.isMotionPhoto) {
-      ref.read(videoPlaybackValueProvider.notifier).reset();
-      ref.read(videoPlayerControlsProvider.notifier).pause();
-    }
-    // Hide controls by default for videos
-    if (asset.isVideo) ref.read(assetViewerProvider.notifier).setControls(false);
   }
 }
 
@@ -91,18 +82,20 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   late final _pageController = PageController(initialPage: widget.initialIndex);
   late final _preloader = AssetPreloader(timelineService: ref.read(timelineServiceProvider), mounted: () => mounted);
 
+  late int _currentPage = widget.initialIndex;
+  late int _totalAssets = ref.read(timelineServiceProvider).totalAssets;
+
   StreamSubscription? _reloadSubscription;
   KeepAliveLink? _stackChildrenKeepAlive;
 
-  bool _assetReloadRequested = false;
-
   void _onTapNavigate(int direction) {
     final page = _pageController.page?.toInt();
     if (page == null) return;
     final target = page + direction;
-    final maxPage = ref.read(timelineServiceProvider).totalAssets - 1;
+    final maxPage = _totalAssets - 1;
     if (target >= 0 && target <= maxPage) {
       _pageController.jumpToPage(target);
+      _onAssetChanged(target);
     }
   }
 
@@ -110,13 +103,16 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   void initState() {
     super.initState();
 
-    final asset = ref.read(currentAssetNotifier);
+    final asset = ref.read(assetViewerProvider).currentAsset;
     assert(asset != null, "Current asset should not be null when opening the AssetViewer");
     if (asset != null) _stackChildrenKeepAlive = ref.read(stackChildrenNotifier(asset).notifier).ref.keepAlive();
 
     _reloadSubscription = EventStream.shared.listen(_onEvent);
 
     WidgetsBinding.instance.addPostFrameCallback(_onAssetInit);
+
+    final assetViewer = ref.read(assetViewerProvider);
+    _setSystemUIMode(assetViewer.showingControls, assetViewer.showingDetails);
   }
 
   @override
@@ -131,14 +127,34 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     super.dispose();
   }
 
+  // The normal onPageChange callback listens to OnScrollUpdate events, and will
+  // round the current page and update whenever that value changes. In practise,
+  // this means that the page will change when swiped half way, and may flip
+  // whilst dragging.
+  //
+  // Changing the page at the end of a scroll should be more robust, and allow
+  // the page to be dragged more than half way whilst keeping the current video
+  // playing, and preventing the video on the next page from becoming ready
+  // unnecessarily.
+  bool _onScrollEnd(ScrollEndNotification notification) {
+    if (notification.depth != 0) return false;
+
+    final page = _pageController.page?.round();
+    if (page != null && page != _currentPage) {
+      _onAssetChanged(page);
+    }
+    return false;
+  }
+
   void _onAssetInit(Duration timeStamp) {
     _preloader.preload(widget.initialIndex, context.sizeData);
     _handleCasting();
   }
 
   void _onAssetChanged(int index) async {
-    final timelineService = ref.read(timelineServiceProvider);
-    final asset = await timelineService.getAssetAsync(index);
+    _currentPage = index;
+
+    final asset = await ref.read(timelineServiceProvider).getAssetAsync(index);
     if (asset == null) return;
 
     AssetViewer._setAsset(ref, asset);
@@ -150,7 +166,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
   void _handleCasting() {
     if (!ref.read(castProvider).isCasting) return;
-    final asset = ref.read(currentAssetNotifier);
+    final asset = ref.read(assetViewerProvider).currentAsset;
     if (asset == null) return;
 
     if (asset is RemoteAsset) {
@@ -177,11 +193,20 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       case TimelineReloadEvent():
         _onTimelineReloadEvent();
       case ViewerReloadAssetEvent():
-        _assetReloadRequested = true;
+        _onViewerReloadEvent();
       default:
     }
   }
 
+  void _onViewerReloadEvent() {
+    if (_totalAssets <= 1) return;
+
+    final index = _pageController.page?.round() ?? 0;
+    final target = index >= _totalAssets - 1 ? index - 1 : index + 1;
+    _pageController.animateToPage(target, duration: Durations.medium1, curve: Curves.easeInOut);
+    _onAssetChanged(target);
+  }
+
   void _onTimelineReloadEvent() {
     final timelineService = ref.read(timelineServiceProvider);
     final totalAssets = timelineService.totalAssets;
@@ -191,39 +216,29 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       return;
     }
 
-    var index = _pageController.page?.round() ?? 0;
-    final currentAsset = ref.read(currentAssetNotifier);
-    if (currentAsset != null) {
-      final newIndex = timelineService.getIndex(currentAsset.heroTag);
-      if (newIndex != null && newIndex != index) {
-        index = newIndex;
-        _pageController.jumpToPage(index);
-      }
-    }
+    final currentAsset = ref.read(assetViewerProvider).currentAsset;
+    final assetIndex = currentAsset != null ? timelineService.getIndex(currentAsset.heroTag) : null;
+    final index = (assetIndex ?? _currentPage).clamp(0, totalAssets - 1);
 
-    if (index >= totalAssets) {
-      index = totalAssets - 1;
+    if (index != _currentPage) {
       _pageController.jumpToPage(index);
+      _onAssetChanged(index);
+    } else if (currentAsset != null && assetIndex == null) {
+      _onAssetChanged(index);
     }
 
-    if (_assetReloadRequested) {
-      _assetReloadRequested = false;
-      _onAssetReloadEvent(index);
+    if (_totalAssets != totalAssets) {
+      setState(() {
+        _totalAssets = totalAssets;
+      });
     }
   }
 
-  void _onAssetReloadEvent(int index) async {
-    final timelineService = ref.read(timelineServiceProvider);
-
-    final newAsset = await timelineService.getAssetAsync(index);
-    if (newAsset == null) return;
-
-    final currentAsset = ref.read(currentAssetNotifier);
-
-    // Do not reload if the asset has not changed
-    if (newAsset.heroTag == currentAsset?.heroTag) return;
-
-    _onAssetChanged(index);
+  void _setSystemUIMode(bool controls, bool details) {
+    final mode = !controls || (CurrentPlatform.isIOS && details)
+        ? SystemUiMode.immersiveSticky
+        : SystemUiMode.edgeToEdge;
+    unawaited(SystemChrome.setEnabledSystemUIMode(mode));
   }
 
   @override
@@ -245,31 +260,29 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
     ref.listen(assetViewerProvider.select((value) => (value.showingControls, value.showingDetails)), (_, state) {
       final (controls, details) = state;
-      final mode = !controls || (CurrentPlatform.isIOS && details)
-          ? SystemUiMode.immersiveSticky
-          : SystemUiMode.edgeToEdge;
-      unawaited(SystemChrome.setEnabledSystemUIMode(mode));
+      _setSystemUIMode(controls, details);
     });
 
-    return PopScope(
-      onPopInvokedWithResult: (didPop, result) => ref.read(currentAssetNotifier.notifier).dispose(),
-      child: Scaffold(
-        backgroundColor: backgroundColor,
-        appBar: const ViewerTopAppBar(),
-        extendBody: true,
-        extendBodyBehindAppBar: true,
-        floatingActionButton: IgnorePointer(
-          ignoring: !showingControls,
-          child: AnimatedOpacity(
-            opacity: showingControls ? 1.0 : 0.0,
-            duration: Durations.short2,
-            child: const DownloadStatusFloatingButton(),
-          ),
+    return Scaffold(
+      backgroundColor: backgroundColor,
+      resizeToAvoidBottomInset: false,
+      appBar: const ViewerTopAppBar(),
+      extendBody: true,
+      extendBodyBehindAppBar: true,
+      floatingActionButton: IgnorePointer(
+        ignoring: !showingControls,
+        child: AnimatedOpacity(
+          opacity: showingControls ? 1.0 : 0.0,
+          duration: Durations.short2,
+          child: const DownloadStatusFloatingButton(),
         ),
-        bottomNavigationBar: const ViewerBottomAppBar(),
-        body: Stack(
-          children: [
-            PhotoViewGestureDetectorScope(
+      ),
+      bottomNavigationBar: const ViewerBottomAppBar(),
+      body: Stack(
+        children: [
+          NotificationListener<ScrollEndNotification>(
+            onNotification: _onScrollEnd,
+            child: PhotoViewGestureDetectorScope(
               axis: Axis.horizontal,
               child: PageView.builder(
                 controller: _pageController,
@@ -278,22 +291,21 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
                     : CurrentPlatform.isIOS
                     ? const FastScrollPhysics()
                     : const FastClampingScrollPhysics(),
-                itemCount: ref.read(timelineServiceProvider).totalAssets,
-                onPageChanged: (index) => _onAssetChanged(index),
+                itemCount: _totalAssets,
                 itemBuilder: (context, index) =>
                     AssetPage(index: index, heroOffset: _heroOffset, onTapNavigate: _onTapNavigate),
               ),
             ),
-            if (!CurrentPlatform.isIOS)
-              IgnorePointer(
-                child: AnimatedContainer(
-                  duration: Durations.short2,
-                  color: Colors.black.withValues(alpha: showingDetails ? 0.6 : 0.0),
-                  height: context.padding.top,
-                ),
+          ),
+          if (!CurrentPlatform.isIOS)
+            IgnorePointer(
+              child: AnimatedContainer(
+                duration: Durations.short2,
+                color: Colors.black.withValues(alpha: showingDetails ? 0.6 : 0.0),
+                height: context.padding.top,
               ),
-          ],
-        ),
+            ),
+        ],
       ),
     );
   }

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

@@ -1,128 +0,0 @@
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/providers/asset_viewer/video_player_controls_provider.dart';
-import 'package:riverpod_annotation/riverpod_annotation.dart';
-
-class AssetViewerState {
-  final double backgroundOpacity;
-  final bool showingDetails;
-  final bool showingControls;
-  final bool isZoomed;
-  final BaseAsset? currentAsset;
-  final int stackIndex;
-
-  const AssetViewerState({
-    this.backgroundOpacity = 1.0,
-    this.showingDetails = false,
-    this.showingControls = true,
-    this.isZoomed = false,
-    this.currentAsset,
-    this.stackIndex = 0,
-  });
-
-  AssetViewerState copyWith({
-    double? backgroundOpacity,
-    bool? showingDetails,
-    bool? showingControls,
-    bool? isZoomed,
-    BaseAsset? currentAsset,
-    int? stackIndex,
-  }) {
-    return AssetViewerState(
-      backgroundOpacity: backgroundOpacity ?? this.backgroundOpacity,
-      showingDetails: showingDetails ?? this.showingDetails,
-      showingControls: showingControls ?? this.showingControls,
-      isZoomed: isZoomed ?? this.isZoomed,
-      currentAsset: currentAsset ?? this.currentAsset,
-      stackIndex: stackIndex ?? this.stackIndex,
-    );
-  }
-
-  @override
-  String toString() {
-    return 'AssetViewerState(opacity: $backgroundOpacity, showingDetails: $showingDetails, controls: $showingControls, isZoomed: $isZoomed)';
-  }
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-    if (other.runtimeType != runtimeType) return false;
-    return other is AssetViewerState &&
-        other.backgroundOpacity == backgroundOpacity &&
-        other.showingDetails == showingDetails &&
-        other.showingControls == showingControls &&
-        other.isZoomed == isZoomed &&
-        other.currentAsset == currentAsset &&
-        other.stackIndex == stackIndex;
-  }
-
-  @override
-  int get hashCode =>
-      backgroundOpacity.hashCode ^
-      showingDetails.hashCode ^
-      showingControls.hashCode ^
-      isZoomed.hashCode ^
-      currentAsset.hashCode ^
-      stackIndex.hashCode;
-}
-
-class AssetViewerStateNotifier extends Notifier<AssetViewerState> {
-  @override
-  AssetViewerState build() {
-    return const AssetViewerState();
-  }
-
-  void reset() {
-    state = const AssetViewerState();
-  }
-
-  void setAsset(BaseAsset? asset) {
-    if (asset == state.currentAsset) {
-      return;
-    }
-    state = state.copyWith(currentAsset: asset, stackIndex: 0);
-  }
-
-  void setOpacity(double opacity) {
-    if (opacity == state.backgroundOpacity) {
-      return;
-    }
-    state = state.copyWith(backgroundOpacity: opacity, showingControls: opacity >= 1.0 ? true : state.showingControls);
-  }
-
-  void setShowingDetails(bool showing) {
-    if (showing == state.showingDetails) {
-      return;
-    }
-    state = state.copyWith(showingDetails: showing, showingControls: showing ? true : state.showingControls);
-    if (showing) {
-      ref.read(videoPlayerControlsProvider.notifier).pause();
-    }
-  }
-
-  void setControls(bool isShowing) {
-    if (isShowing == state.showingControls) {
-      return;
-    }
-    state = state.copyWith(showingControls: isShowing);
-  }
-
-  void toggleControls() {
-    state = state.copyWith(showingControls: !state.showingControls);
-  }
-
-  void setZoomed(bool isZoomed) {
-    if (isZoomed == state.isZoomed) {
-      return;
-    }
-    state = state.copyWith(isZoomed: isZoomed);
-  }
-
-  void setStackIndex(int index) {
-    if (index == state.stackIndex) {
-      return;
-    }
-    state = state.copyWith(stackIndex: index);
-  }
-}
-
-final assetViewerProvider = NotifierProvider<AssetViewerStateNotifier, AssetViewerState>(AssetViewerStateNotifier.new);

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

@@ -3,17 +3,18 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/add_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/edit_image_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/add_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
 import 'package:immich_mobile/providers/routes.provider.dart';
+import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/utils/semver.dart';
 import 'package:immich_mobile/widgets/asset_viewer/video_controls.dart';
 
 class ViewerBottomBar extends ConsumerWidget {
@@ -21,7 +22,7 @@ class ViewerBottomBar extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final asset = ref.watch(currentAssetNotifier);
+    final asset = ref.watch(assetViewerProvider.select((s) => s.currentAsset));
     if (asset == null) {
       return const SizedBox.shrink();
     }
@@ -31,6 +32,7 @@ class ViewerBottomBar extends ConsumerWidget {
     final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
     final showingDetails = ref.watch(assetViewerProvider.select((s) => s.showingDetails));
     final isInLockedView = ref.watch(inLockedViewProvider);
+    final serverInfo = ref.watch(serverInfoProvider);
 
     final originalTheme = context.themeData;
 
@@ -39,7 +41,9 @@ class ViewerBottomBar extends ConsumerWidget {
 
       if (!isInLockedView) ...[
         if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
-        if (asset.type == AssetType.image) const EditImageActionButton(),
+        // edit sync was added in 2.6.0
+        if (asset.isEditable && serverInfo.serverVersion >= const SemVer(major: 2, minor: 6, patch: 0))
+          const EditImageActionButton(),
         if (asset.hasRemote) AddActionButton(originalTheme: originalTheme),
 
         if (isOwner) ...[
@@ -62,15 +66,24 @@ class ViewerBottomBar extends ConsumerWidget {
                 ),
               ),
               child: Container(
-                color: Colors.black.withAlpha(125),
-                padding: EdgeInsets.only(bottom: context.padding.bottom, top: 16),
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.end,
-                  children: [
-                    if (asset.isVideo) const VideoControls(),
-                    if (!isReadonlyModeEnabled)
-                      Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: actions),
-                  ],
+                decoration: const BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.bottomCenter,
+                    end: Alignment.topCenter,
+                    colors: [Colors.black45, Colors.black12, Colors.transparent],
+                    stops: [0.0, 0.7, 1.0],
+                  ),
+                ),
+                child: SafeArea(
+                  top: false,
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      if (asset.isVideo) VideoControls(videoPlayerName: asset.heroTag),
+                      if (!isReadonlyModeEnabled)
+                        Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: actions),
+                    ],
+                  ),
                 ),
               ),
             ),

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

@@ -39,6 +39,16 @@ class _RatingBarState extends State<RatingBar> {
     _currentRating = widget.initialRating;
   }
 
+  @override
+  void didUpdateWidget(covariant RatingBar oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.initialRating != widget.initialRating && _currentRating != widget.initialRating) {
+      setState(() {
+        _currentRating = widget.initialRating;
+      });
+    }
+  }
+
   void _updateRating(Offset localPosition, bool isRTL, {bool isTap = false}) {
     final totalWidth = widget.itemCount * widget.itemSize + (widget.itemCount - 1) * widget.starPadding;
     double dx = localPosition.dx;

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

@@ -1,471 +1,235 @@
 import 'dart:async';
-import 'dart:io';
 
 import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/domain/services/setting.service.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/platform_extensions.dart';
 import 'package:immich_mobile/infrastructure/repositories/storage.repository.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/video_viewer_controls.widget.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/providers/app_settings.provider.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/asset_viewer/video_player_provider.dart';
 import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
 import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
-import 'package:immich_mobile/utils/debounce.dart';
-import 'package:immich_mobile/utils/hooks/interval_hook.dart';
-import 'package:immich_mobile/widgets/photo_view/photo_view.dart';
 import 'package:logging/logging.dart';
 import 'package:native_video_player/native_video_player.dart';
-import 'package:wakelock_plus/wakelock_plus.dart';
 
-bool _isCurrentAsset(BaseAsset asset, BaseAsset? currentAsset) {
-  if (asset is RemoteAsset) {
-    return switch (currentAsset) {
-      RemoteAsset remoteAsset => remoteAsset.id == asset.id,
-      LocalAsset localAsset => localAsset.remoteId == asset.id,
-      _ => false,
-    };
-  } else if (asset is LocalAsset) {
-    return switch (currentAsset) {
-      RemoteAsset remoteAsset => remoteAsset.localId == asset.id,
-      LocalAsset localAsset => localAsset.id == asset.id,
-      _ => false,
-    };
-  }
-  return false;
-}
-
-class NativeVideoViewer extends HookConsumerWidget {
-  static final log = Logger('NativeVideoViewer');
+class NativeVideoViewer extends ConsumerStatefulWidget {
   final BaseAsset asset;
+  final bool isCurrent;
   final bool showControls;
-  final int playbackDelayFactor;
   final Widget image;
-  final ValueNotifier<PhotoViewScaleState>? scaleStateNotifier;
-  final bool disableScaleGestures;
 
   const NativeVideoViewer({
     super.key,
     required this.asset,
     required this.image,
+    this.isCurrent = false,
     this.showControls = true,
-    this.playbackDelayFactor = 1,
-    this.scaleStateNotifier,
-    this.disableScaleGestures = false,
   });
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final controller = useState<NativeVideoPlayerController?>(null);
-    final lastVideoPosition = useRef(-1);
-    final isBuffering = useRef(false);
+  ConsumerState<NativeVideoViewer> createState() => _NativeVideoViewerState();
+}
 
-    // Used to track whether the video should play when the app
-    // is brought back to the foreground
-    final shouldPlayOnForeground = useRef(true);
+class _NativeVideoViewerState extends ConsumerState<NativeVideoViewer> with WidgetsBindingObserver {
+  static final _log = Logger('NativeVideoViewer');
 
-    // When a video is opened through the timeline, `isCurrent` will immediately be true.
-    // When swiping from video A to video B, `isCurrent` will initially be true for video A and false for video B.
-    // If the swipe is completed, `isCurrent` will be true for video B after a delay.
-    // If the swipe is canceled, `currentAsset` will not have changed and video A will continue to play.
-    final currentAsset = useState(ref.read(currentAssetNotifier));
-    final isCurrent = _isCurrentAsset(asset, currentAsset.value);
+  NativeVideoPlayerController? _controller;
+  late final Future<VideoSource?> _videoSource;
+  Timer? _loadTimer;
+  bool _isVideoReady = false;
+  bool _shouldPlayOnForeground = true;
 
-    // Used to show the placeholder during hero animations for remote videos to avoid a stutter
-    final isVisible = useState(Platform.isIOS && asset.hasLocal);
+  VideoPlayerNotifier get _notifier => ref.read(videoPlayerProvider(widget.asset.heroTag).notifier);
 
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addObserver(this);
+    _videoSource = _createSource();
+  }
+
+  @override
+  void didUpdateWidget(NativeVideoViewer oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    if (widget.isCurrent == oldWidget.isCurrent || _controller == null) return;
+
+    if (!widget.isCurrent) {
+      _loadTimer?.cancel();
+      _notifier.pause();
+      return;
+    }
+
+    // Prevent unnecessary loading when swiping between assets.
+    _loadTimer = Timer(const Duration(milliseconds: 200), _loadVideo);
+  }
+
+  @override
+  void dispose() {
+    WidgetsBinding.instance.removeObserver(this);
+    _loadTimer?.cancel();
+    _removeListeners();
+    super.dispose();
+  }
+
+  @override
+  void didChangeAppLifecycleState(AppLifecycleState state) async {
+    switch (state) {
+      case AppLifecycleState.resumed:
+        if (_shouldPlayOnForeground) await _notifier.play();
+      case AppLifecycleState.paused:
+        _shouldPlayOnForeground = await _controller?.isPlaying() ?? true;
+        if (_shouldPlayOnForeground) await _notifier.pause();
+      default:
+    }
+  }
+
+  Future<VideoSource?> _createSource() async {
+    if (!mounted) return null;
+
+    final videoAsset = await ref.read(assetServiceProvider).getAsset(widget.asset) ?? widget.asset;
+    if (!mounted) return null;
+
+    try {
+      if (videoAsset.hasLocal && videoAsset.livePhotoVideoId == null) {
+        final id = videoAsset is LocalAsset ? videoAsset.id : (videoAsset as RemoteAsset).localId!;
+        final file = await StorageRepository().getFileForAsset(id);
+        if (!mounted) return null;
+
+        if (file == null) {
+          throw Exception('No file found for the video');
+        }
+
+        // Pass a file:// URI so Android's Uri.parse doesn't
+        // interpret characters like '#' as fragment identifiers.
+        return VideoSource.init(
+          path: CurrentPlatform.isAndroid ? file.uri.toString() : file.path,
+          type: VideoSourceType.file,
+        );
+      }
+
+      final remoteId = (videoAsset as RemoteAsset).id;
+
+      final serverEndpoint = Store.get(StoreKey.serverEndpoint);
+      final isOriginalVideo = ref.read(settingsProvider).get<bool>(Setting.loadOriginalVideo);
+      final String postfixUrl = isOriginalVideo ? 'original' : 'video/playback';
+      final String videoUrl = videoAsset.livePhotoVideoId != null
+          ? '$serverEndpoint/assets/${videoAsset.livePhotoVideoId}/$postfixUrl'
+          : '$serverEndpoint/assets/$remoteId/$postfixUrl';
+
+      return VideoSource.init(path: videoUrl, type: VideoSourceType.network, headers: ApiService.getRequestHeaders());
+    } catch (error) {
+      _log.severe('Error creating video source for asset ${videoAsset.name}: $error');
+      return null;
+    }
+  }
+
+  void _onPlaybackReady() async {
+    if (!mounted || !widget.isCurrent) return;
+
+    _notifier.onNativePlaybackReady();
+
+    // onPlaybackReady may be called multiple times, usually when more data
+    // loads. If this is not the first time that the player has become ready, we
+    // should not autoplay.
+    if (_isVideoReady) return;
+
+    setState(() => _isVideoReady = true);
+
+    if (ref.read(assetViewerProvider).showingDetails) return;
+
+    final autoPlayVideo = AppSetting.get(Setting.autoPlayVideo);
+    if (autoPlayVideo || widget.asset.isMotionPhoto) await _notifier.play();
+  }
+
+  void _onPlaybackEnded() {
+    if (!mounted) return;
+
+    _notifier.onNativePlaybackEnded();
+
+    if (_controller?.playbackInfo?.status == PlaybackStatus.stopped) {
+      ref.read(isPlayingMotionVideoProvider.notifier).playing = false;
+    }
+  }
+
+  void _onPlaybackPositionChanged() {
+    if (!mounted) return;
+    _notifier.onNativePositionChanged();
+  }
+
+  void _onPlaybackStatusChanged() {
+    if (!mounted) return;
+    _notifier.onNativeStatusChanged();
+  }
+
+  void _removeListeners() {
+    _controller?.onPlaybackPositionChanged.removeListener(_onPlaybackPositionChanged);
+    _controller?.onPlaybackStatusChanged.removeListener(_onPlaybackStatusChanged);
+    _controller?.onPlaybackReady.removeListener(_onPlaybackReady);
+    _controller?.onPlaybackEnded.removeListener(_onPlaybackEnded);
+  }
+
+  void _loadVideo() async {
+    final nc = _controller;
+    if (nc == null || nc.videoSource != null || !mounted) return;
+
+    final source = await _videoSource;
+    if (source == null || !mounted) return;
+
+    await _notifier.load(source);
+    final loopVideo = ref.read(appSettingsServiceProvider).getSetting<bool>(AppSettingsEnum.loopVideo);
+    await _notifier.setLoop(!widget.asset.isMotionPhoto && loopVideo);
+    await _notifier.setVolume(1);
+  }
+
+  void _initController(NativeVideoPlayerController nc) {
+    if (_controller != null || !mounted) return;
+
+    _notifier.attachController(nc);
+
+    nc.onPlaybackPositionChanged.addListener(_onPlaybackPositionChanged);
+    nc.onPlaybackStatusChanged.addListener(_onPlaybackStatusChanged);
+    nc.onPlaybackReady.addListener(_onPlaybackReady);
+    nc.onPlaybackEnded.addListener(_onPlaybackEnded);
+
+    _controller = nc;
+
+    if (widget.isCurrent) _loadVideo();
+  }
+
+  @override
+  Widget build(BuildContext context) {
     final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
+    final status = ref.watch(videoPlayerProvider(widget.asset.heroTag).select((v) => v.status));
 
-    Future<VideoSource?> createSource() async {
-      if (!context.mounted) {
-        return null;
-      }
-
-      final videoAsset = await ref.read(assetServiceProvider).getAsset(asset) ?? asset;
-      if (!context.mounted) {
-        return null;
-      }
-
-      try {
-        if (videoAsset.hasLocal && videoAsset.livePhotoVideoId == null) {
-          final id = videoAsset is LocalAsset ? videoAsset.id : (videoAsset as RemoteAsset).localId!;
-          final file = await StorageRepository().getFileForAsset(id);
-          if (!context.mounted) {
-            return null;
-          }
-
-          if (file == null) {
-            throw Exception('No file found for the video');
-          }
-
-          // Pass a file:// URI so Android's Uri.parse doesn't
-          // interpret characters like '#' as fragment identifiers.
-          final source = await VideoSource.init(
-            path: CurrentPlatform.isAndroid ? file.uri.toString() : file.path,
-            type: VideoSourceType.file,
-          );
-          return source;
-        }
-
-        final remoteId = (videoAsset as RemoteAsset).id;
-
-        // Use a network URL for the video player controller
-        final serverEndpoint = Store.get(StoreKey.serverEndpoint);
-        final isOriginalVideo = ref.read(settingsProvider).get<bool>(Setting.loadOriginalVideo);
-        final String postfixUrl = isOriginalVideo ? 'original' : 'video/playback';
-        final String videoUrl = videoAsset.livePhotoVideoId != null
-            ? '$serverEndpoint/assets/${videoAsset.livePhotoVideoId}/$postfixUrl'
-            : '$serverEndpoint/assets/$remoteId/$postfixUrl';
-
-        final source = await VideoSource.init(
-          path: videoUrl,
-          type: VideoSourceType.network,
-          headers: ApiService.getRequestHeaders(),
-        );
-        return source;
-      } catch (error) {
-        log.severe('Error creating video source for asset ${videoAsset.name}: $error');
-        return null;
-      }
-    }
-
-    final videoSource = useMemoized<Future<VideoSource?>>(() => createSource());
-    final aspectRatio = useState<double?>(null);
-
-    useMemoized(() async {
-      if (!context.mounted || aspectRatio.value != null) {
-        return null;
-      }
-
-      try {
-        aspectRatio.value = await ref.read(assetServiceProvider).getAspectRatio(asset);
-      } catch (error) {
-        log.severe('Error getting aspect ratio for asset ${asset.name}: $error');
-      }
-    }, [asset.heroTag]);
-
-    void checkIfBuffering() {
-      if (!context.mounted) {
-        return;
-      }
-
-      final videoPlayback = ref.read(videoPlaybackValueProvider);
-      if ((isBuffering.value || videoPlayback.state == VideoPlaybackState.initializing) &&
-          videoPlayback.state != VideoPlaybackState.buffering) {
-        ref.read(videoPlaybackValueProvider.notifier).value = videoPlayback.copyWith(
-          state: VideoPlaybackState.buffering,
-        );
-      }
-    }
-
-    // Timer to mark videos as buffering if the position does not change
-    useInterval(const Duration(seconds: 5), checkIfBuffering);
-
-    // When the position changes, seek to the position
-    // Debounce the seek to avoid seeking too often
-    // But also don't delay the seek too much to maintain visual feedback
-    final seekDebouncer = useDebouncer(
-      interval: const Duration(milliseconds: 100),
-      maxWaitTime: const Duration(milliseconds: 200),
-    );
-    ref.listen(videoPlayerControlsProvider, (oldControls, newControls) {
-      final playerController = controller.value;
-      if (playerController == null) {
-        return;
-      }
-
-      final playbackInfo = playerController.playbackInfo;
-      if (playbackInfo == null) {
-        return;
-      }
-
-      final oldSeek = oldControls?.position.inMilliseconds;
-      final newSeek = newControls.position.inMilliseconds;
-      if (oldSeek != newSeek || newControls.restarted) {
-        seekDebouncer.run(() => playerController.seekTo(newSeek));
-      }
-
-      if (oldControls?.pause != newControls.pause || newControls.restarted) {
-        unawaited(_onPauseChange(context, playerController, seekDebouncer, newControls.pause));
-      }
-    });
-
-    void onPlaybackReady() async {
-      final videoController = controller.value;
-      if (videoController == null || !isCurrent || !context.mounted) {
-        return;
-      }
-
-      final videoPlayback = VideoPlaybackValue.fromNativeController(videoController);
-      ref.read(videoPlaybackValueProvider.notifier).value = videoPlayback;
-
-      if (ref.read(assetViewerProvider.select((s) => s.showingDetails))) {
-        return;
-      }
-
-      try {
-        final autoPlayVideo = AppSetting.get(Setting.autoPlayVideo);
-        if (autoPlayVideo) {
-          await videoController.play();
-        }
-        await videoController.setVolume(0.9);
-      } catch (error) {
-        log.severe('Error playing video: $error');
-      }
-    }
-
-    void onPlaybackStatusChanged() {
-      final videoController = controller.value;
-      if (videoController == null || !context.mounted) {
-        return;
-      }
-
-      final videoPlayback = VideoPlaybackValue.fromNativeController(videoController);
-      if (videoPlayback.state == VideoPlaybackState.playing) {
-        // Sync with the controls playing
-        WakelockPlus.enable();
-      } else {
-        // Sync with the controls pause
-        WakelockPlus.disable();
-      }
-
-      ref.read(videoPlaybackValueProvider.notifier).status = videoPlayback.state;
-    }
-
-    void onPlaybackPositionChanged() {
-      // When seeking, these events sometimes move the slider to an older position
-      if (seekDebouncer.isActive) {
-        return;
-      }
-
-      final videoController = controller.value;
-      if (videoController == null || !context.mounted) {
-        return;
-      }
-
-      final playbackInfo = videoController.playbackInfo;
-      if (playbackInfo == null) {
-        return;
-      }
-
-      ref.read(videoPlaybackValueProvider.notifier).position = Duration(milliseconds: 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 (videoController.playbackInfo?.status == PlaybackStatus.stopped) {
-        ref.read(isPlayingMotionVideoProvider.notifier).playing = false;
-      }
-    }
-
-    void removeListeners(NativeVideoPlayerController controller) {
-      controller.onPlaybackPositionChanged.removeListener(onPlaybackPositionChanged);
-      controller.onPlaybackStatusChanged.removeListener(onPlaybackStatusChanged);
-      controller.onPlaybackReady.removeListener(onPlaybackReady);
-      controller.onPlaybackEnded.removeListener(onPlaybackEnded);
-    }
-
-    void initController(NativeVideoPlayerController nc) async {
-      if (controller.value != null || !context.mounted) {
-        return;
-      }
-      ref.read(videoPlayerControlsProvider.notifier).reset();
-      ref.read(videoPlaybackValueProvider.notifier).reset();
-
-      final source = await videoSource;
-      if (source == null || !context.mounted) {
-        return;
-      }
-
-      nc.onPlaybackPositionChanged.addListener(onPlaybackPositionChanged);
-      nc.onPlaybackStatusChanged.addListener(onPlaybackStatusChanged);
-      nc.onPlaybackReady.addListener(onPlaybackReady);
-      nc.onPlaybackEnded.addListener(onPlaybackEnded);
-
-      unawaited(
-        nc.loadVideoSource(source).catchError((error) {
-          log.severe('Error loading video source: $error');
-        }),
-      );
-      final loopVideo = ref.read(appSettingsServiceProvider).getSetting<bool>(AppSettingsEnum.loopVideo);
-      unawaited(nc.setLoop(!asset.isMotionPhoto && loopVideo));
-
-      controller.value = nc;
-      Timer(const Duration(milliseconds: 200), checkIfBuffering);
-    }
-
-    Size? videoContextSize(double? videoAspectRatio, BuildContext? context) {
-      Size? videoContextSize;
-      if (videoAspectRatio == null || context == null) {
-        return null;
-      }
-      final contextAspectRatio = context.width / context.height;
-      if (videoAspectRatio > contextAspectRatio) {
-        videoContextSize = Size(context.width, context.width / aspectRatio.value!);
-      } else {
-        videoContextSize = Size(context.height * aspectRatio.value!, context.height);
-      }
-      return videoContextSize;
-    }
-
-    ref.listen(currentAssetNotifier, (_, value) {
-      final playerController = controller.value;
-      if (playerController != null && value != asset) {
-        removeListeners(playerController);
-      }
-
-      if (value != null) {
-        isVisible.value = _isCurrentAsset(value, asset);
-      }
-      final curAsset = currentAsset.value;
-      if (curAsset == asset) {
-        return;
-      }
-
-      final imageToVideo = curAsset != null && !curAsset.isVideo;
-
-      // No need to delay video playback when swiping from an image to a video
-      if (imageToVideo && Platform.isIOS) {
-        currentAsset.value = value;
-        onPlaybackReady();
-        return;
-      }
-
-      // Delay the video playback to avoid a stutter in the swipe animation
-      // Note, in some circumstances a longer delay is needed (eg: memories),
-      // the playbackDelayFactor can be used for this
-      // This delay seems like a hacky way to resolve underlying bugs in video
-      // playback, but other resolutions failed thus far
-      Timer(
-        Platform.isIOS
-            ? Duration(milliseconds: 300 * playbackDelayFactor)
-            : imageToVideo
-            ? Duration(milliseconds: 200 * playbackDelayFactor)
-            : Duration(milliseconds: 400 * playbackDelayFactor),
-        () {
-          if (!context.mounted) {
-            return;
-          }
-
-          currentAsset.value = value;
-          if (currentAsset.value == asset) {
-            onPlaybackReady();
-          }
-        },
-      );
-    });
-
-    useEffect(() {
-      // If opening a remote video from a hero animation, delay visibility to avoid a stutter
-      final timer = isVisible.value ? null : Timer(const Duration(milliseconds: 300), () => isVisible.value = true);
-
-      return () {
-        timer?.cancel();
-        final playerController = controller.value;
-        if (playerController == null) {
-          return;
-        }
-        removeListeners(playerController);
-        playerController.stop().catchError((error) {
-          log.fine('Error stopping video: $error');
-        });
-
-        WakelockPlus.disable();
-      };
-    }, const []);
-
-    useOnAppLifecycleStateChange((_, state) async {
-      if (state == AppLifecycleState.resumed && shouldPlayOnForeground.value) {
-        await controller.value?.play();
-      } else if (state == AppLifecycleState.paused) {
-        final videoPlaying = await controller.value?.isPlaying();
-        if (videoPlaying ?? true) {
-          shouldPlayOnForeground.value = true;
-          await controller.value?.pause();
-        } else {
-          shouldPlayOnForeground.value = false;
-        }
-      }
-    });
-
-    return SizedBox(
-      width: context.width,
-      height: context.height,
+    return IgnorePointer(
       child: Stack(
         children: [
-          // Hide thumbnail once video is visible to avoid it showing in background when zooming out on video.
-          if (!isVisible.value || controller.value == null) Center(key: ValueKey(asset.heroTag), child: image),
-          if (aspectRatio.value != null && !isCasting && isCurrent)
+          Center(child: widget.image),
+          if (!isCasting) ...[
             Visibility.maintain(
-              key: ValueKey(asset),
-              visible: isVisible.value,
-              child: PhotoView.customChild(
-                key: ValueKey(asset),
-                enableRotation: false,
-                disableScaleGestures: disableScaleGestures,
-                // Transparent to avoid a black flash when viewer becomes visible but video isn't loaded yet.
-                backgroundDecoration: const BoxDecoration(color: Colors.transparent),
-                scaleStateChangedCallback: (state) => scaleStateNotifier?.value = state,
-                childSize: videoContextSize(aspectRatio.value, context),
-                child: NativeVideoPlayerView(key: ValueKey(asset), onViewReady: initController),
+              visible: _isVideoReady,
+              child: NativeVideoPlayerView(onViewReady: _initController),
+            ),
+            Center(
+              child: AnimatedOpacity(
+                opacity: status == VideoPlaybackStatus.buffering ? 1.0 : 0.0,
+                duration: const Duration(milliseconds: 400),
+                child: const CircularProgressIndicator(),
               ),
             ),
-          if (showControls) const Center(child: VideoViewerControls()),
+          ],
         ],
       ),
     );
   }
-
-  Future<void> _onPauseChange(
-    BuildContext context,
-    NativeVideoPlayerController controller,
-    Debouncer seekDebouncer,
-    bool isPaused,
-  ) async {
-    if (!context.mounted) {
-      return;
-    }
-
-    // Make sure the last seek is complete before pausing or playing
-    // Otherwise, `onPlaybackPositionChanged` can receive outdated events
-    if (seekDebouncer.isActive) {
-      await seekDebouncer.drain();
-    }
-
-    try {
-      if (isPaused) {
-        await controller.pause();
-      } else {
-        await controller.play();
-      }
-    } catch (error) {
-      log.severe('Error pausing or playing video: $error');
-    }
-  }
 }

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

@@ -1,119 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/models/cast/cast_manager_state.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.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/cast.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
-import 'package:immich_mobile/utils/hooks/timer_hook.dart';
-import 'package:immich_mobile/widgets/asset_viewer/center_play_button.dart';
-import 'package:immich_mobile/widgets/common/delayed_loading_indicator.dart';
-
-class VideoViewerControls extends HookConsumerWidget {
-  final Duration hideTimerDuration;
-
-  const VideoViewerControls({super.key, this.hideTimerDuration = const Duration(seconds: 5)});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final assetIsVideo = ref.watch(currentAssetNotifier.select((asset) => asset != null && asset.isVideo));
-    bool showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
-    final showingDetails = ref.watch(assetViewerProvider.select((s) => s.showingDetails));
-    if (showingDetails) {
-      showControls = false;
-    }
-    final VideoPlaybackState state = ref.watch(videoPlaybackValueProvider.select((value) => value.state));
-
-    final cast = ref.watch(castProvider);
-
-    // A timer to hide the controls
-    final hideTimer = useTimer(hideTimerDuration, () {
-      if (!context.mounted) {
-        return;
-      }
-      final state = ref.read(videoPlaybackValueProvider).state;
-
-      // Do not hide on paused
-      if (state != VideoPlaybackState.paused && state != VideoPlaybackState.completed && assetIsVideo) {
-        ref.read(assetViewerProvider.notifier).setControls(false);
-      }
-    });
-    final showBuffering = state == VideoPlaybackState.buffering && !cast.isCasting;
-
-    /// Shows the controls and starts the timer to hide them
-    void showControlsAndStartHideTimer() {
-      hideTimer.reset();
-      ref.read(assetViewerProvider.notifier).setControls(true);
-    }
-
-    // When we change position, show or hide timer
-    ref.listen(videoPlayerControlsProvider.select((v) => v.position), (previous, next) {
-      showControlsAndStartHideTimer();
-    });
-
-    /// Toggles between playing and pausing depending on the state of the video
-    void togglePlay() {
-      showControlsAndStartHideTimer();
-
-      if (cast.isCasting) {
-        if (cast.castState == CastState.playing) {
-          ref.read(castProvider.notifier).pause();
-        } else if (cast.castState == CastState.paused) {
-          ref.read(castProvider.notifier).play();
-        } else if (cast.castState == CastState.idle) {
-          // resend the play command since its finished
-          final asset = ref.read(currentAssetNotifier);
-          if (asset == null) {
-            return;
-          }
-          // ref.read(castProvider.notifier).loadMedia(asset, true);
-        }
-        return;
-      }
-
-      if (state == VideoPlaybackState.playing) {
-        ref.read(videoPlayerControlsProvider.notifier).pause();
-      } else if (state == VideoPlaybackState.completed) {
-        ref.read(videoPlayerControlsProvider.notifier).restart();
-      } else {
-        ref.read(videoPlayerControlsProvider.notifier).play();
-      }
-    }
-
-    void toggleControlsVisibility() {
-      if (showBuffering) {
-        return;
-      }
-      if (showControls) {
-        ref.read(assetViewerProvider.notifier).setControls(false);
-      } else {
-        showControlsAndStartHideTimer();
-      }
-    }
-
-    return GestureDetector(
-      behavior: HitTestBehavior.translucent,
-      onTap: toggleControlsVisibility,
-      child: IgnorePointer(
-        ignoring: !showControls,
-        child: Stack(
-          children: [
-            if (showBuffering)
-              const Center(child: DelayedLoadingIndicator(fadeInDuration: Duration(milliseconds: 400)))
-            else
-              CenterPlayButton(
-                backgroundColor: Colors.black54,
-                iconColor: Colors.white,
-                isFinished: state == VideoPlaybackState.completed,
-                isPlaying:
-                    state == VideoPlaybackState.playing || (cast.isCasting && cast.castState == CastState.playing),
-                show: assetIsVideo && showControls,
-                onPressed: togglePlay,
-              ),
-          ],
-        ),
-      ),
-    );
-  }
-}

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

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_stack.widget.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/bottom_bar.widget.dart';
 
 class ViewerBottomAppBar extends ConsumerWidget {
@@ -9,24 +8,12 @@ class ViewerBottomAppBar extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    double opacity = ref.watch(assetViewerProvider.select((state) => state.backgroundOpacity));
-    final showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
-
-    if (!showControls) {
-      opacity = 0.0;
-    }
+    final showingControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
+    double opacity = ref.watch(assetViewerProvider.select((s) => s.backgroundOpacity)) * (showingControls ? 1 : 0);
 
     return IgnorePointer(
       ignoring: opacity < 1.0,
-      child: AnimatedOpacity(
-        opacity: opacity,
-        duration: Durations.short2,
-        child: const Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          children: [AssetStackRow(), ViewerBottomBar()],
-        ),
-      ),
+      child: AnimatedOpacity(opacity: opacity, duration: Durations.short2, child: const ViewerBottomBar()),
     );
   }
 }

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

@@ -5,7 +5,7 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/providers/cast.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/setting.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
@@ -21,7 +21,7 @@ class ViewerKebabMenu extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final asset = ref.watch(currentAssetNotifier);
+    final asset = ref.watch(assetViewerProvider.select((s) => s.currentAsset));
     if (asset == null) {
       return const SizedBox.shrink();
     }

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

@@ -4,25 +4,24 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/routing/router.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/presentation/widgets/asset_viewer/viewer_kebab_menu.widget.dart';
 import 'package:immich_mobile/providers/activity.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
 import 'package:immich_mobile/providers/routes.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
 
 class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
   const ViewerTopAppBar({super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final asset = ref.watch(currentAssetNotifier);
+    final asset = ref.watch(assetViewerProvider.select((s) => s.currentAsset));
     if (asset == null) {
       return const SizedBox.shrink();
     }
@@ -35,16 +34,13 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
     final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
 
     final showingDetails = ref.watch(assetViewerProvider.select((state) => state.showingDetails));
-    double opacity = ref.watch(assetViewerProvider.select((state) => state.backgroundOpacity));
-    final showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
 
     if (album != null && album.isActivityEnabled && album.isShared && asset is RemoteAsset) {
-      ref.watch(albumActivityProvider(album.id, asset.id));
+      ref.watch(albumActivityProvider((album.id, asset.id)));
     }
 
-    if (!showControls) {
-      opacity = 0.0;
-    }
+    final showingControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
+    double opacity = ref.watch(assetViewerProvider.select((s) => s.backgroundOpacity)) * (showingControls ? 1 : 0);
 
     final originalTheme = context.themeData;
 
@@ -79,17 +75,29 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
       child: AnimatedOpacity(
         opacity: opacity,
         duration: Durations.short2,
-        child: AppBar(
-          backgroundColor: showingDetails ? Colors.transparent : Colors.black.withValues(alpha: 0.5),
-          leading: const _AppBarBackButton(),
-          iconTheme: const IconThemeData(size: 22, color: Colors.white),
-          actionsIconTheme: const IconThemeData(size: 22, color: Colors.white),
-          shape: const Border(),
-          actions: showingDetails || isReadonlyModeEnabled
-              ? null
-              : isInLockedView
-              ? lockedViewActions
-              : actions,
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            gradient: showingDetails
+                ? null
+                : const LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [Colors.black45, Colors.black12, Colors.transparent],
+                    stops: [0.0, 0.7, 1.0],
+                  ),
+          ),
+          child: AppBar(
+            backgroundColor: Colors.transparent,
+            leading: const _AppBarBackButton(),
+            iconTheme: const IconThemeData(size: 22, color: Colors.white),
+            actionsIconTheme: const IconThemeData(size: 22, color: Colors.white),
+            shape: const Border(),
+            actions: showingDetails || isReadonlyModeEnabled
+                ? null
+                : isInLockedView
+                ? lockedViewActions
+                : actions,
+          ),
         ),
       ),
     );
@@ -105,17 +113,14 @@ class _AppBarBackButton extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final showingDetails = ref.watch(assetViewerProvider.select((state) => state.showingDetails));
-    final backgroundColor = showingDetails && !context.isDarkTheme ? Colors.white : Colors.black;
-    final foregroundColor = showingDetails && !context.isDarkTheme ? Colors.black : Colors.white;
-
     return Padding(
       padding: const EdgeInsets.only(left: 12.0),
       child: ElevatedButton(
         style: ElevatedButton.styleFrom(
-          backgroundColor: backgroundColor,
+          backgroundColor: showingDetails ? context.colorScheme.surface : Colors.transparent,
           shape: const CircleBorder(),
           iconSize: 22,
-          iconColor: foregroundColor,
+          iconColor: showingDetails ? context.colorScheme.onSurface : Colors.white,
           padding: EdgeInsets.zero,
           elevation: showingDetails ? 4 : 0,
         ),

mobile/lib/presentation/widgets/bottom_sheet/archive_bottom_sheet.widget.dart

@@ -36,7 +36,7 @@ class ArchiveBottomSheet extends ConsumerWidget {
           const ShareLinkActionButton(source: ActionSource.timeline),
           const UnArchiveActionButton(source: ActionSource.timeline),
           const FavoriteActionButton(source: ActionSource.timeline),
-          const DownloadActionButton(source: ActionSource.timeline),
+          if (multiselect.onlyRemote) const DownloadActionButton(source: ActionSource.timeline),
           isTrashEnable
               ? const TrashActionButton(source: ActionSource.timeline)
               : const DeletePermanentActionButton(source: ActionSource.timeline),

mobile/lib/presentation/widgets/bottom_sheet/favorite_bottom_sheet.widget.dart

@@ -75,7 +75,7 @@ class FavoriteBottomSheet extends ConsumerWidget {
           const ShareLinkActionButton(source: ActionSource.timeline),
           const UnFavoriteActionButton(source: ActionSource.timeline),
           const ArchiveActionButton(source: ActionSource.timeline),
-          const DownloadActionButton(source: ActionSource.timeline),
+          if (multiselect.onlyRemote) const DownloadActionButton(source: ActionSource.timeline),
           isTrashEnable
               ? const TrashActionButton(source: ActionSource.timeline)
               : const DeletePermanentActionButton(source: ActionSource.timeline),

mobile/lib/presentation/widgets/bottom_sheet/general_bottom_sheet.widget.dart

@@ -108,7 +108,7 @@ class _GeneralBottomSheetState extends ConsumerState<GeneralBottomSheet> {
         const ShareActionButton(source: ActionSource.timeline),
         if (multiselect.hasRemote) ...[
           const ShareLinkActionButton(source: ActionSource.timeline),
-          const DownloadActionButton(source: ActionSource.timeline),
+          if (multiselect.onlyRemote) const DownloadActionButton(source: ActionSource.timeline),
           isTrashEnable
               ? const TrashActionButton(source: ActionSource.timeline)
               : const DeletePermanentActionButton(source: ActionSource.timeline),
@@ -119,10 +119,11 @@ class _GeneralBottomSheetState extends ConsumerState<GeneralBottomSheet> {
           const MoveToLockFolderActionButton(source: ActionSource.timeline),
           if (multiselect.selectedAssets.length > 1) const StackActionButton(source: ActionSource.timeline),
           if (multiselect.hasStacked) const UnStackActionButton(source: ActionSource.timeline),
-          if (multiselect.hasLocal || multiselect.hasMerged) const DeleteActionButton(source: ActionSource.timeline),
+          if (multiselect.onlyLocal || multiselect.hasMerged) const DeleteActionButton(source: ActionSource.timeline),
         ],
-        if (multiselect.hasLocal || multiselect.hasMerged) const DeleteLocalActionButton(source: ActionSource.timeline),
-        if (multiselect.hasLocal) const UploadActionButton(source: ActionSource.timeline),
+        if (multiselect.onlyLocal || multiselect.hasMerged)
+          const DeleteLocalActionButton(source: ActionSource.timeline),
+        if (multiselect.onlyLocal) const UploadActionButton(source: ActionSource.timeline),
       ],
       slivers: multiselect.hasRemote
           ? [

mobile/lib/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart

@@ -2,17 +2,21 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/general_bottom_sheet.widget.dart';
 import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 
 class MapBottomSheet extends StatelessWidget {
-  const MapBottomSheet({super.key});
+  final Key? sheetKey;
+
+  const MapBottomSheet({super.key, this.sheetKey});
 
   @override
   Widget build(BuildContext context) {
     return BaseBottomSheet(
+      key: sheetKey,
       initialChildSize: 0.25,
       maxChildSize: 0.75,
       shouldCloseOnMinExtent: false,
@@ -49,7 +53,7 @@ class _ScopedMapTimeline extends StatelessWidget {
           return timelineService;
         }),
       ],
-      child: const Timeline(appBar: null, bottomSheet: null, withScrubber: false),
+      child: const Timeline(appBar: null, bottomSheet: GeneralBottomSheet(minChildSize: 0.23), withScrubber: false),
     );
   }
 }

mobile/lib/presentation/widgets/bottom_sheet/trash_bottom_sheet.widget.dart

@@ -10,20 +10,19 @@ class TrashBottomBar extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    return SafeArea(
-      child: Align(
-        alignment: Alignment.bottomCenter,
-        child: SizedBox(
-          height: 64,
-          child: Container(
-            color: context.themeData.canvasColor,
-            child: const Row(
-              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-              children: [
-                DeleteTrashActionButton(source: ActionSource.timeline),
-                RestoreTrashActionButton(source: ActionSource.timeline),
-              ],
-            ),
+    return Align(
+      alignment: Alignment.bottomCenter,
+      child: Container(
+        color: context.themeData.canvasColor,
+        padding: const EdgeInsets.symmetric(vertical: 8),
+        child: const SafeArea(
+          top: false,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+              DeleteTrashActionButton(source: ActionSource.timeline),
+              RestoreTrashActionButton(source: ActionSource.timeline),
+            ],
           ),
         ),
       ),

mobile/lib/presentation/widgets/images/animated_image_stream_completer.dart

@@ -0,0 +1,68 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:flutter/foundation.dart' show InformationCollector;
+import 'package:flutter/painting.dart';
+import 'package:immich_mobile/presentation/widgets/images/cache_aware_listener_tracker.mixin.dart';
+
+/// A [MultiFrameImageStreamCompleter] with support for listener tracking
+/// which makes resource cleanup possible when no longer needed.
+/// Codec is disposed through the MultiFrameImageStreamCompleter's internals onDispose method
+class AnimatedImageStreamCompleter extends MultiFrameImageStreamCompleter with CacheAwareListenerTrackerMixin {
+  AnimatedImageStreamCompleter._({
+    required super.codec,
+    required super.scale,
+    required bool hadInitialImage,
+    super.informationCollector,
+    void Function()? onLastListenerRemoved,
+  }) {
+    setupListenerTracking(hadInitialImage: hadInitialImage, onLastListenerRemoved: onLastListenerRemoved);
+  }
+
+  factory AnimatedImageStreamCompleter({
+    required Stream<Object> stream,
+    required double scale,
+    ImageInfo? initialImage,
+    InformationCollector? informationCollector,
+    void Function()? onLastListenerRemoved,
+  }) {
+    final codecCompleter = Completer<ui.Codec>();
+    final self = AnimatedImageStreamCompleter._(
+      codec: codecCompleter.future,
+      scale: scale,
+      hadInitialImage: initialImage != null,
+      informationCollector: informationCollector,
+      onLastListenerRemoved: onLastListenerRemoved,
+    );
+
+    if (initialImage != null) {
+      self.setImage(initialImage);
+    }
+
+    stream.listen(
+      (item) {
+        if (item is ImageInfo) {
+          self.setImage(item);
+        } else if (item is ui.Codec) {
+          if (!codecCompleter.isCompleted) {
+            codecCompleter.complete(item);
+          }
+        }
+      },
+      onError: (Object error, StackTrace stack) {
+        if (!codecCompleter.isCompleted) {
+          codecCompleter.completeError(error, stack);
+        }
+      },
+      onDone: () {
+        // also complete if we are done but no error occurred, and we didn't call complete yet
+        // could happen on cancellation
+        if (!codecCompleter.isCompleted) {
+          codecCompleter.completeError(StateError('Stream closed without providing a codec'));
+        }
+      },
+    );
+
+    return self;
+  }
+}

mobile/lib/presentation/widgets/images/cache_aware_listener_tracker.mixin.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/painting.dart';
+
+/// Tracks listeners on an [ImageStreamCompleter] to safely cancel in-flight
+/// network requests without interfering with [ImageCache] internals.
+///
+/// ### Problem
+/// Cancelling fetches when the listener count drops to 1 (cache only) or 0
+/// is unsafe due to three framework behaviours:
+///
+/// 1. **Memory-pressure eviction** — `ImageCache.clear()` removes the cache
+///    listener while UI widgets still need the image. A count-based check
+///    would cancel the active fetch, leaving the UI with no image.
+/// 2. **Synchronous detach during `putIfAbsent`** — When an `initialImage`
+///    is provided, the cache attaches, receives the frame, and detaches
+///    synchronously *before* the UI widget can attach. Count reaches 0 and
+///    would trigger a false cancel.
+/// 3. **Listener misidentification** — After the cache detaches (via 1 or 2),
+///    the next UI listener could be mistaken for the cache listener, causing
+///    incorrect cancellations when that widget is disposed.
+///
+/// ### Solution: First-Listener Heuristic
+/// The cache is always the first listener attached (via `putIfAbsent`). This
+/// mixin records that identity once and uses it for all subsequent decisions:
+///
+/// * **Identity locking** — The first listener is assumed to be the cache.
+///   Once identified, `_hasIdentifiedCacheListener` prevents reassignment.
+/// * **Targeted cancellation** — Cancel only when the identified cache
+///   listener is the sole remaining listener and no image has been delivered.
+/// * **Sync-removal bypass** — When `hadInitialImage` is set, the first
+///   synchronous removal of the cache listener is ignored so the fetch
+///   survives until the UI attaches.
+mixin CacheAwareListenerTrackerMixin on ImageStreamCompleter {
+  void Function()? _onLastListenerRemoved;
+  int _listenerCount = 0;
+  bool _hadInitialImage = false;
+  bool _hasIgnoredFirstSyncRemoval = false;
+  ImageStreamListener? _cacheListener;
+  bool _hasIdentifiedCacheListener = false;
+
+  /// Initializes the tracking state. Must be called in the subclass constructor.
+  void setupListenerTracking({required bool hadInitialImage, void Function()? onLastListenerRemoved}) {
+    _hadInitialImage = hadInitialImage;
+    _onLastListenerRemoved = onLastListenerRemoved;
+  }
+
+  @override
+  void addListener(ImageStreamListener listener) {
+    if (!_hasIdentifiedCacheListener) {
+      _hasIdentifiedCacheListener = true;
+      _cacheListener = listener;
+    }
+
+    _listenerCount++;
+    super.addListener(listener);
+  }
+
+  @override
+  void removeListener(ImageStreamListener listener) {
+    super.removeListener(listener);
+    _listenerCount--;
+
+    final bool isCacheListener = listener == _cacheListener;
+    if (isCacheListener) {
+      _cacheListener = null;
+    }
+
+    if (_hadInitialImage && !_hasIgnoredFirstSyncRemoval && isCacheListener) {
+      _hasIgnoredFirstSyncRemoval = true;
+      return;
+    }
+
+    final bool onlyCacheListenerLeft = _listenerCount == 1 && _cacheListener != null;
+
+    final bool completelyAbandoned = _listenerCount == 0;
+
+    if (onlyCacheListenerLeft || completelyAbandoned) {
+      final onLastListenerRemoved = _onLastListenerRemoved;
+      if (onLastListenerRemoved != null) {
+        _onLastListenerRemoved = null;
+        onLastListenerRemoved();
+      }
+    }
+  }
+}

mobile/lib/presentation/widgets/images/image_provider.dart

@@ -1,3 +1,5 @@
+import 'dart:ui' as ui;
+
 import 'package:async/async.dart';
 import 'package:flutter/widgets.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
@@ -17,6 +19,7 @@ mixin CancellableImageProviderMixin<T extends Object> on CancellableImageProvide
   static final _log = Logger('CancellableImageProviderMixin');
 
   bool isCancelled = false;
+  bool isFinished = false;
   ImageRequest? request;
   CancelableOperation<ImageInfo?>? cachedOperation;
 
@@ -48,24 +51,26 @@ mixin CancellableImageProviderMixin<T extends Object> on CancellableImageProvide
     return null;
   }
 
-  Stream<ImageInfo> loadRequest(ImageRequest request, ImageDecoderCallback decode, {bool evictOnError = true}) async* {
+  Stream<ImageInfo> loadRequest(ImageRequest request, ImageDecoderCallback decode, {required bool isFinal}) async* {
     if (isCancelled) {
       this.request = null;
-      PaintingBinding.instance.imageCache.evict(this);
       return;
     }
 
     try {
       final image = await request.load(decode);
-      if ((image == null && evictOnError) || isCancelled) {
-        PaintingBinding.instance.imageCache.evict(this);
-        return;
-      } else if (image == null) {
+      if (isCancelled || image == null) {
+        image?.dispose();
         return;
       }
+      isFinished = isFinal;
       yield image;
     } catch (e, stack) {
-      if (evictOnError) {
+      if (isCancelled) {
+        return;
+      }
+      if (isFinal) {
+        isFinished = true;
         PaintingBinding.instance.imageCache.evict(this);
         rethrow;
       }
@@ -75,6 +80,32 @@ mixin CancellableImageProviderMixin<T extends Object> on CancellableImageProvide
     }
   }
 
+  Future<ui.Codec?> loadCodecRequest(ImageRequest request, {required bool isFinal}) async {
+    if (isCancelled) {
+      this.request = null;
+      return null;
+    }
+
+    try {
+      final codec = await request.loadCodec();
+      if (isCancelled || codec == null) {
+        codec?.dispose();
+        return null;
+      }
+      isFinished = isFinal;
+      return codec;
+    } catch (e) {
+      if (isFinal) {
+        isFinished = true;
+        PaintingBinding.instance.imageCache.evict(this);
+        rethrow;
+      }
+      return null;
+    } finally {
+      this.request = null;
+    }
+  }
+
   Stream<ImageInfo> initialImageStream() async* {
     final cachedOperation = this.cachedOperation;
     if (cachedOperation == null) {
@@ -96,6 +127,8 @@ mixin CancellableImageProviderMixin<T extends Object> on CancellableImageProvide
   @override
   void cancel() {
     isCancelled = true;
+    final hasActiveWork = !isFinished;
+
     final request = this.request;
     if (request != null) {
       this.request = null;
@@ -107,15 +140,19 @@ mixin CancellableImageProviderMixin<T extends Object> on CancellableImageProvide
       cachedOperation = null;
       operation.cancel();
     }
+
+    if (hasActiveWork) {
+      PaintingBinding.instance.imageCache.evict(this);
+    }
   }
 }
 
-ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080, 1920)}) {
+ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080, 1920), bool edited = true}) {
   // Create new provider and cache it
   final ImageProvider provider;
   if (_shouldUseLocalAsset(asset)) {
     final id = asset is LocalAsset ? asset.id : (asset as RemoteAsset).localId!;
-    provider = LocalFullImageProvider(id: id, size: size, assetType: asset.type);
+    provider = LocalFullImageProvider(id: id, size: size, assetType: asset.type, isAnimated: asset.isAnimatedImage);
   } else {
     final String assetId;
     final String thumbhash;
@@ -128,13 +165,19 @@ ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080
     } else {
       throw ArgumentError("Unsupported asset type: ${asset.runtimeType}");
     }
-    provider = RemoteFullImageProvider(assetId: assetId, thumbhash: thumbhash, assetType: asset.type);
+    provider = RemoteFullImageProvider(
+      assetId: assetId,
+      thumbhash: thumbhash,
+      assetType: asset.type,
+      isAnimated: asset.isAnimatedImage,
+      edited: edited,
+    );
   }
 
   return provider;
 }
 
-ImageProvider? getThumbnailImageProvider(BaseAsset asset, {Size size = kThumbnailResolution}) {
+ImageProvider? getThumbnailImageProvider(BaseAsset asset, {Size size = kThumbnailResolution, bool edited = true}) {
   if (_shouldUseLocalAsset(asset)) {
     final id = asset is LocalAsset ? asset.id : (asset as RemoteAsset).localId!;
     return LocalThumbProvider(id: id, size: size, assetType: asset.type);
@@ -142,7 +185,7 @@ ImageProvider? getThumbnailImageProvider(BaseAsset asset, {Size size = kThumbnai
 
   final assetId = asset is RemoteAsset ? asset.id : (asset as LocalAsset).remoteId;
   final thumbhash = asset is RemoteAsset ? asset.thumbHash ?? "" : "";
-  return assetId != null ? RemoteImageProvider.thumbnail(assetId: assetId, thumbhash: thumbhash) : null;
+  return assetId != null ? RemoteImageProvider.thumbnail(assetId: assetId, thumbhash: thumbhash, edited: edited) : null;
 }
 
 bool _shouldUseLocalAsset(BaseAsset asset) =>

mobile/lib/presentation/widgets/images/local_image_provider.dart

@@ -1,11 +1,10 @@
-import 'dart:ui';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/infrastructure/loaders/image_request.dart';
+import 'package:immich_mobile/presentation/widgets/images/animated_image_stream_completer.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
@@ -37,7 +36,7 @@ class LocalThumbProvider extends CancellableImageProvider<LocalThumbProvider>
 
   Stream<ImageInfo> _codec(LocalThumbProvider key, ImageDecoderCallback decode) {
     final request = this.request = LocalImageRequest(localId: key.id, size: key.size, assetType: key.assetType);
-    return loadRequest(request, decode);
+    return loadRequest(request, decode, isFinal: true);
   }
 
   @override
@@ -58,8 +57,9 @@ class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProv
   final String id;
   final Size size;
   final AssetType assetType;
+  final bool isAnimated;
 
-  LocalFullImageProvider({required this.id, required this.assetType, required this.size});
+  LocalFullImageProvider({required this.id, required this.assetType, required this.size, required this.isAnimated});
 
   @override
   Future<LocalFullImageProvider> obtainKey(ImageConfiguration configuration) {
@@ -68,6 +68,21 @@ class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProv
 
   @override
   ImageStreamCompleter loadImage(LocalFullImageProvider key, ImageDecoderCallback decode) {
+    if (key.isAnimated) {
+      return AnimatedImageStreamCompleter(
+        stream: _animatedCodec(key, decode),
+        scale: 1.0,
+        initialImage: getInitialImage(LocalThumbProvider(id: key.id, assetType: key.assetType)),
+        informationCollector: () => <DiagnosticsNode>[
+          DiagnosticsProperty<ImageProvider>('Image provider', this),
+          DiagnosticsProperty<String>('Id', key.id),
+          DiagnosticsProperty<Size>('Size', key.size),
+          DiagnosticsProperty<bool>('isAnimated', key.isAnimated),
+        ],
+        onLastListenerRemoved: cancel,
+      );
+    }
+
     return OneFramePlaceholderImageStreamCompleter(
       _codec(key, decode),
       initialImage: getInitialImage(LocalThumbProvider(id: key.id, assetType: key.assetType)),
@@ -75,6 +90,7 @@ class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProv
         DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Id', key.id),
         DiagnosticsProperty<Size>('Size', key.size),
+        DiagnosticsProperty<bool>('isAnimated', key.isAnimated),
       ],
       onLastListenerRemoved: cancel,
     );
@@ -84,41 +100,69 @@ class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProv
     yield* initialImageStream();
 
     if (isCancelled) {
-      PaintingBinding.instance.imageCache.evict(this);
       return;
     }
 
+    final loadOriginal = Store.get(StoreKey.loadOriginal, false);
     final devicePixelRatio = PlatformDispatcher.instance.views.first.devicePixelRatio;
     var request = this.request = LocalImageRequest(
       localId: key.id,
       size: Size(size.width * devicePixelRatio, size.height * devicePixelRatio),
       assetType: key.assetType,
     );
-    yield* loadRequest(request, decode);
+    yield* loadRequest(request, decode, isFinal: !loadOriginal);
 
-    if (!Store.get(StoreKey.loadOriginal, false)) {
+    if (!loadOriginal) {
       return;
     }
 
     if (isCancelled) {
-      PaintingBinding.instance.imageCache.evict(this);
       return;
     }
 
     request = this.request = LocalImageRequest(localId: key.id, assetType: key.assetType, size: Size.zero);
 
-    yield* loadRequest(request, decode);
+    yield* loadRequest(request, decode, isFinal: true);
+  }
+
+  Stream<Object> _animatedCodec(LocalFullImageProvider key, ImageDecoderCallback decode) async* {
+    yield* initialImageStream();
+
+    if (isCancelled) {
+      return;
+    }
+
+    final devicePixelRatio = PlatformDispatcher.instance.views.first.devicePixelRatio;
+    final previewRequest = request = LocalImageRequest(
+      localId: key.id,
+      size: Size(size.width * devicePixelRatio, size.height * devicePixelRatio),
+      assetType: key.assetType,
+    );
+    yield* loadRequest(previewRequest, decode, isFinal: false);
+
+    if (isCancelled) {
+      return;
+    }
+
+    // always try original for animated, since previews don't support animation
+    final originalRequest = request = LocalImageRequest(localId: key.id, size: Size.zero, assetType: key.assetType);
+    final codec = await loadCodecRequest(originalRequest, isFinal: true);
+    if (codec == null) {
+      if (isCancelled) return;
+      throw StateError('Failed to load animated codec for local asset ${key.id}');
+    }
+    yield codec;
   }
 
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
     if (other is LocalFullImageProvider) {
-      return id == other.id && size == other.size;
+      return id == other.id && size == other.size && isAnimated == other.isAnimated;
     }
     return false;
   }
 
   @override
-  int get hashCode => id.hashCode ^ size.hashCode;
+  int get hashCode => id.hashCode ^ size.hashCode ^ isAnimated.hashCode;
 }

mobile/lib/presentation/widgets/images/one_frame_multi_image_stream_completer.dart

@@ -6,14 +6,10 @@ import 'dart:async';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/painting.dart';
+import 'package:immich_mobile/presentation/widgets/images/cache_aware_listener_tracker.mixin.dart';
 
 /// An ImageStreamCompleter with support for loading multiple images.
-class OneFramePlaceholderImageStreamCompleter extends ImageStreamCompleter {
-  void Function()? _onLastListenerRemoved;
-  int _listenerCount = 0;
-  // True once setImage() has been called at least once.
-  bool didProvideImage = false;
-
+class OneFramePlaceholderImageStreamCompleter extends ImageStreamCompleter with CacheAwareListenerTrackerMixin {
   /// The constructor to create an OneFramePlaceholderImageStreamCompleter. The [images]
   /// should be the primary images to display (typically asynchronously as they load).
   /// The [initialImage] is an optional image that will be emitted synchronously
@@ -24,14 +20,14 @@ class OneFramePlaceholderImageStreamCompleter extends ImageStreamCompleter {
     InformationCollector? informationCollector,
     void Function()? onLastListenerRemoved,
   }) {
+    setupListenerTracking(hadInitialImage: initialImage != null, onLastListenerRemoved: onLastListenerRemoved);
+
     if (initialImage != null) {
-      didProvideImage = true;
       setImage(initialImage);
     }
-    _onLastListenerRemoved = onLastListenerRemoved;
+
     images.listen(
       (image) {
-        didProvideImage = true;
         setImage(image);
       },
       onError: (Object error, StackTrace stack) {
@@ -45,26 +41,4 @@ class OneFramePlaceholderImageStreamCompleter extends ImageStreamCompleter {
       },
     );
   }
-
-  @override
-  void addListener(ImageStreamListener listener) {
-    super.addListener(listener);
-    _listenerCount = _listenerCount + 1;
-  }
-
-  @override
-  void removeListener(ImageStreamListener listener) {
-    super.removeListener(listener);
-    _listenerCount = _listenerCount - 1;
-
-    final bool onlyCacheListenerLeft = _listenerCount == 1 && !didProvideImage;
-    final bool noListenersAfterImage = _listenerCount == 0 && didProvideImage;
-
-    final onLastListenerRemoved = _onLastListenerRemoved;
-
-    if (onLastListenerRemoved != null && (noListenersAfterImage || onlyCacheListenerLeft)) {
-      _onLastListenerRemoved = null;
-      onLastListenerRemoved();
-    }
-  }
 }

mobile/lib/presentation/widgets/images/remote_image_provider.dart

@@ -4,20 +4,21 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/domain/services/setting.service.dart';
 import 'package:immich_mobile/infrastructure/loaders/image_request.dart';
+import 'package:immich_mobile/presentation/widgets/images/animated_image_stream_completer.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
-import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
 import 'package:openapi/api.dart';
 
 class RemoteImageProvider extends CancellableImageProvider<RemoteImageProvider>
     with CancellableImageProviderMixin<RemoteImageProvider> {
   final String url;
+  final bool edited;
 
-  RemoteImageProvider({required this.url});
+  RemoteImageProvider({required this.url, this.edited = true});
 
-  RemoteImageProvider.thumbnail({required String assetId, required String thumbhash})
-    : url = getThumbnailUrlForRemoteId(assetId, thumbhash: thumbhash);
+  RemoteImageProvider.thumbnail({required String assetId, required String thumbhash, this.edited = true})
+    : url = getThumbnailUrlForRemoteId(assetId, thumbhash: thumbhash, edited: edited);
 
   @override
   Future<RemoteImageProvider> obtainKey(ImageConfiguration configuration) {
@@ -37,21 +38,21 @@ class RemoteImageProvider extends CancellableImageProvider<RemoteImageProvider>
   }
 
   Stream<ImageInfo> _codec(RemoteImageProvider key, ImageDecoderCallback decode) {
-    final request = this.request = RemoteImageRequest(uri: key.url, headers: ApiService.getRequestHeaders());
-    return loadRequest(request, decode);
+    final request = this.request = RemoteImageRequest(uri: key.url);
+    return loadRequest(request, decode, isFinal: true);
   }
 
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
     if (other is RemoteImageProvider) {
-      return url == other.url;
+      return url == other.url && edited == other.edited;
     }
     return false;
   }
 
   @override
-  int get hashCode => url.hashCode;
+  int get hashCode => url.hashCode ^ edited.hashCode;
 }
 
 class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImageProvider>
@@ -59,8 +60,16 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
   final String assetId;
   final String thumbhash;
   final AssetType assetType;
+  final bool isAnimated;
+  final bool edited;
 
-  RemoteFullImageProvider({required this.assetId, required this.thumbhash, required this.assetType});
+  RemoteFullImageProvider({
+    required this.assetId,
+    required this.thumbhash,
+    required this.assetType,
+    required this.isAnimated,
+    this.edited = true,
+  });
 
   @override
   Future<RemoteFullImageProvider> obtainKey(ImageConfiguration configuration) {
@@ -69,12 +78,29 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
 
   @override
   ImageStreamCompleter loadImage(RemoteFullImageProvider key, ImageDecoderCallback decode) {
+    if (key.isAnimated) {
+      return AnimatedImageStreamCompleter(
+        stream: _animatedCodec(key, decode),
+        scale: 1.0,
+        initialImage: getInitialImage(RemoteImageProvider.thumbnail(assetId: key.assetId, thumbhash: key.thumbhash)),
+        informationCollector: () => <DiagnosticsNode>[
+          DiagnosticsProperty<ImageProvider>('Image provider', this),
+          DiagnosticsProperty<String>('Asset Id', key.assetId),
+          DiagnosticsProperty<bool>('isAnimated', key.isAnimated),
+        ],
+        onLastListenerRemoved: cancel,
+      );
+    }
+
     return OneFramePlaceholderImageStreamCompleter(
       _codec(key, decode),
-      initialImage: getInitialImage(RemoteImageProvider.thumbnail(assetId: key.assetId, thumbhash: key.thumbhash)),
+      initialImage: getInitialImage(
+        RemoteImageProvider.thumbnail(assetId: key.assetId, thumbhash: key.thumbhash, edited: key.edited),
+      ),
       informationCollector: () => <DiagnosticsNode>[
         DiagnosticsProperty<ImageProvider>('Image provider', this),
         DiagnosticsProperty<String>('Asset Id', key.assetId),
+        DiagnosticsProperty<bool>('isAnimated', key.isAnimated),
       ],
       onLastListenerRemoved: cancel,
     );
@@ -84,41 +110,82 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
     yield* initialImageStream();
 
     if (isCancelled) {
-      PaintingBinding.instance.imageCache.evict(this);
       return;
     }
 
-    final headers = ApiService.getRequestHeaders();
     final previewRequest = request = RemoteImageRequest(
-      uri: getThumbnailUrlForRemoteId(key.assetId, type: AssetMediaSize.preview, thumbhash: key.thumbhash),
-      headers: headers,
+      uri: getThumbnailUrlForRemoteId(
+        key.assetId,
+        type: AssetMediaSize.preview,
+        thumbhash: key.thumbhash,
+        edited: key.edited,
+      ),
     );
     final loadOriginal = assetType == AssetType.image && AppSetting.get(Setting.loadOriginal);
-    yield* loadRequest(previewRequest, decode, evictOnError: !loadOriginal);
+    yield* loadRequest(previewRequest, decode, isFinal: !loadOriginal);
 
     if (!loadOriginal) {
       return;
     }
 
     if (isCancelled) {
-      PaintingBinding.instance.imageCache.evict(this);
       return;
     }
 
-    final originalRequest = request = RemoteImageRequest(uri: getOriginalUrlForRemoteId(key.assetId), headers: headers);
-    yield* loadRequest(originalRequest, decode);
+    final originalRequest = request = RemoteImageRequest(
+      uri: getOriginalUrlForRemoteId(key.assetId, edited: key.edited),
+    );
+    yield* loadRequest(originalRequest, decode, isFinal: true);
+  }
+
+  Stream<Object> _animatedCodec(RemoteFullImageProvider key, ImageDecoderCallback decode) async* {
+    yield* initialImageStream();
+
+    if (isCancelled) {
+      return;
+    }
+
+    final previewRequest = request = RemoteImageRequest(
+      uri: getThumbnailUrlForRemoteId(
+        key.assetId,
+        type: AssetMediaSize.preview,
+        thumbhash: key.thumbhash,
+        edited: key.edited,
+      ),
+    );
+    yield* loadRequest(previewRequest, decode, isFinal: false);
+
+    if (isCancelled) {
+      return;
+    }
+
+    // always try original for animated, since previews don't support animation
+    final originalRequest = request = RemoteImageRequest(
+      uri: getOriginalUrlForRemoteId(key.assetId, edited: key.edited),
+    );
+    final codec = await loadCodecRequest(originalRequest, isFinal: true);
+    if (codec == null) {
+      if (isCancelled) {
+        return;
+      }
+      throw StateError('Failed to load animated codec for asset ${key.assetId}');
+    }
+    yield codec;
   }
 
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
     if (other is RemoteFullImageProvider) {
-      return assetId == other.assetId && thumbhash == other.thumbhash;
+      return assetId == other.assetId &&
+          thumbhash == other.thumbhash &&
+          isAnimated == other.isAnimated &&
+          edited == other.edited;
     }
 
     return false;
   }
 
   @override
-  int get hashCode => assetId.hashCode ^ thumbhash.hashCode;
+  int get hashCode => assetId.hashCode ^ thumbhash.hashCode ^ isAnimated.hashCode ^ edited.hashCode;
 }

mobile/lib/presentation/widgets/images/thumb_hash_provider.dart

@@ -22,7 +22,7 @@ class ThumbHashProvider extends CancellableImageProvider<ThumbHashProvider>
 
   Stream<ImageInfo> _loadCodec(ThumbHashProvider key, ImageDecoderCallback decode) {
     final request = this.request = ThumbhashImageRequest(thumbhash: key.thumbHash);
-    return loadRequest(request, decode);
+    return loadRequest(request, decode, isFinal: true);
   }
 
   @override

mobile/lib/presentation/widgets/images/thumbnail_tile.widget.dart

@@ -6,7 +6,7 @@ import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/duration_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
 import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.dart';
@@ -21,6 +21,7 @@ class ThumbnailTile extends ConsumerStatefulWidget {
     this.showStorageIndicator = false,
     this.lockSelection = false,
     this.heroOffset,
+    this.showStackIndicator = false,
     super.key,
   });
 
@@ -30,6 +31,7 @@ class ThumbnailTile extends ConsumerStatefulWidget {
   final bool showStorageIndicator;
   final bool lockSelection;
   final int? heroOffset;
+  final bool showStackIndicator;
 
   @override
   ConsumerState<ThumbnailTile> createState() => _ThumbnailTileState();
@@ -129,7 +131,7 @@ class _ThumbnailTileState extends ConsumerState<ThumbnailTile> {
                       }
 
                       animation.addStatusListener(animationStatusListener);
-                      return to.widget;
+                      return direction == HeroFlightDirection.push ? from.widget : to.widget;
                     },
                   ),
                 ),
@@ -139,7 +141,14 @@ class _ThumbnailTileState extends ConsumerState<ThumbnailTile> {
                     duration: Durations.short4,
                     child: Align(
                       alignment: Alignment.topRight,
-                      child: _AssetTypeIcons(asset: asset),
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        crossAxisAlignment: CrossAxisAlignment.end,
+                        children: [
+                          _AssetTypeIcons(asset: asset),
+                          if (widget.showStackIndicator) _StackIndicator(asset: asset),
+                        ],
+                      ),
                     ),
                   ),
                 if (storageIndicator && asset != null)
@@ -286,8 +295,8 @@ class _AssetTypeIcons extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final hasStack = asset is RemoteAsset && (asset as RemoteAsset).stackId != null;
-    final isLivePhoto = asset is RemoteAsset && asset.livePhotoVideoId != null;
+    final remoteAsset = asset is RemoteAsset ? asset as RemoteAsset : null;
+    final isLivePhoto = remoteAsset?.livePhotoVideoId != null;
 
     return Column(
       mainAxisSize: MainAxisSize.min,
@@ -295,21 +304,36 @@ class _AssetTypeIcons extends StatelessWidget {
       children: [
         if (asset.isVideo)
           Padding(padding: const EdgeInsets.only(right: 10.0, top: 6.0), child: _VideoIndicator(asset.duration)),
-        if (hasStack)
-          const Padding(
-            padding: EdgeInsets.only(right: 10.0, top: 6.0),
-            child: _TileOverlayIcon(Icons.burst_mode_rounded),
-          ),
         if (isLivePhoto)
           const Padding(
             padding: EdgeInsets.only(right: 10.0, top: 6.0),
             child: _TileOverlayIcon(Icons.motion_photos_on_rounded),
           ),
+        if (asset.isAnimatedImage)
+          const Padding(padding: EdgeInsets.only(right: 10.0, top: 6.0), child: _TileOverlayIcon(Icons.gif_rounded)),
       ],
     );
   }
 }
 
+class _StackIndicator extends StatelessWidget {
+  final BaseAsset asset;
+
+  const _StackIndicator({required this.asset});
+
+  @override
+  Widget build(BuildContext context) {
+    if (asset is! RemoteAsset || (asset as RemoteAsset).stackId == null) {
+      return const SizedBox.shrink();
+    }
+
+    return const Padding(
+      padding: EdgeInsets.only(right: 10.0, top: 6.0),
+      child: _TileOverlayIcon(Icons.burst_mode_rounded),
+    );
+  }
+}
+
 class _UploadProgressOverlay extends StatelessWidget {
   final double progress;
 

mobile/lib/presentation/widgets/map/map.widget.dart

@@ -11,6 +11,7 @@ import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/map_bottom_sheet.widget.dart';
 import 'package:immich_mobile/presentation/widgets/map/map.state.dart';
 import 'package:immich_mobile/presentation/widgets/map/map_utils.dart';
@@ -53,6 +54,7 @@ class _DriftMapState extends ConsumerState<DriftMap> {
   final _reloadMutex = AsyncMutex();
   final _debouncer = Debouncer(interval: const Duration(milliseconds: 500), maxWaitTime: const Duration(seconds: 2));
   final ValueNotifier<double> bottomSheetOffset = ValueNotifier(0.25);
+  final GlobalKey _bottomSheetKey = GlobalKey();
   StreamSubscription? _eventSubscription;
 
   @override
@@ -132,7 +134,7 @@ class _DriftMapState extends ConsumerState<DriftMap> {
     // If we continue to update bounds, the map-scoped timeline service gets recreated and the previous one disposed,
     // which can invalidate the TimelineService instance that was passed into AssetViewerRoute (causing "loading forever").
     final currentRoute = ref.read(currentRouteNameProvider);
-    if (currentRoute == AssetViewerRoute.name || currentRoute == GalleryViewerRoute.name) {
+    if (currentRoute == AssetViewerRoute.name) {
       return;
     }
 
@@ -184,7 +186,7 @@ class _DriftMapState extends ConsumerState<DriftMap> {
     return Stack(
       children: [
         _Map(initialLocation: widget.initialLocation, onMapCreated: onMapCreated, onMapReady: onMapReady),
-        _DynamicBottomSheet(bottomSheetOffset: bottomSheetOffset),
+        _DynamicBottomSheet(bottomSheetOffset: bottomSheetOffset, sheetKey: _bottomSheetKey),
         _DynamicMyLocationButton(onZoomToLocation: onZoomToLocation, bottomSheetOffset: bottomSheetOffset),
       ],
     );
@@ -224,8 +226,9 @@ class _Map extends StatelessWidget {
 
 class _DynamicBottomSheet extends StatefulWidget {
   final ValueNotifier<double> bottomSheetOffset;
+  final GlobalKey sheetKey;
 
-  const _DynamicBottomSheet({required this.bottomSheetOffset});
+  const _DynamicBottomSheet({required this.bottomSheetOffset, required this.sheetKey});
 
   @override
   State<_DynamicBottomSheet> createState() => _DynamicBottomSheetState();
@@ -236,10 +239,13 @@ class _DynamicBottomSheetState extends State<_DynamicBottomSheet> {
   Widget build(BuildContext context) {
     return NotificationListener<DraggableScrollableNotification>(
       onNotification: (notification) {
-        widget.bottomSheetOffset.value = notification.extent;
-        return true;
+        final sheet = notification.context.findAncestorWidgetOfExactType<BaseBottomSheet>();
+        if (sheet?.key == widget.sheetKey) {
+          widget.bottomSheetOffset.value = notification.extent;
+        }
+        return false;
       },
-      child: const MapBottomSheet(),
+      child: MapBottomSheet(sheetKey: widget.sheetKey),
     );
   }
 }

mobile/lib/presentation/widgets/memory/memory_bottom_info.widget.dart

@@ -40,8 +40,7 @@ class DriftMemoryBottomInfo extends StatelessWidget {
             child: MaterialButton(
               minWidth: 0,
               onPressed: () async {
-                await context.maybePop();
-                await context.navigateTo(const TabShellRoute(children: [MainTimelineRoute()]));
+                await context.router.navigate(const TabShellRoute(children: [MainTimelineRoute()]));
                 EventStream.shared.emit(ScrollToDateEvent(fileCreatedDate));
               },
               shape: const CircleBorder(),

mobile/lib/presentation/widgets/memory/memory_card.widget.dart

@@ -13,12 +13,14 @@ class DriftMemoryCard extends StatelessWidget {
   final RemoteAsset asset;
   final String title;
   final bool showTitle;
+  final bool isCurrent;
   final Function()? onVideoEnded;
 
   const DriftMemoryCard({
     required this.asset,
     required this.title,
     required this.showTitle,
+    this.isCurrent = false,
     this.onVideoEnded,
     super.key,
   });
@@ -37,33 +39,35 @@ class DriftMemoryCard extends StatelessWidget {
           SizedBox.expand(child: _BlurredBackdrop(asset: asset)),
           LayoutBuilder(
             builder: (context, constraints) {
+              final r = asset.width != null && asset.height != null
+                  ? asset.width! / asset.height!
+                  : constraints.maxWidth / constraints.maxHeight;
+
               // Determine the fit using the aspect ratio
               BoxFit fit = BoxFit.contain;
               if (asset.width != null && asset.height != null) {
-                final aspectRatio = asset.width! / asset.height!;
                 final phoneAspectRatio = constraints.maxWidth / constraints.maxHeight;
                 // Look for a 25% difference in either direction
-                if (phoneAspectRatio * .75 < aspectRatio && phoneAspectRatio * 1.25 > aspectRatio) {
+                if (phoneAspectRatio * .75 < r && phoneAspectRatio * 1.25 > r) {
                   // Cover to look nice if we have nearly the same aspect ratio
                   fit = BoxFit.cover;
                 }
               }
 
-              if (asset.isImage) {
-                return FullImage(asset, fit: fit, size: const Size(double.infinity, double.infinity));
-              } else {
-                return SizedBox(
-                  width: context.width,
-                  height: context.height,
+              if (asset.isImage) return FullImage(asset, fit: fit, size: const Size(double.infinity, double.infinity));
+
+              return Center(
+                child: AspectRatio(
+                  aspectRatio: r,
                   child: NativeVideoViewer(
                     key: ValueKey(asset.id),
                     asset: asset,
+                    isCurrent: isCurrent,
                     showControls: false,
-                    playbackDelayFactor: 2,
-                    image: FullImage(asset, size: Size(context.width, context.height), fit: BoxFit.contain),
+                    image: FullImage(asset, size: context.sizeData, fit: BoxFit.contain),
                   ),
-                );
-              }
+                ),
+              );
             },
           ),
           if (showTitle)

mobile/lib/presentation/widgets/timeline/constants.dart

@@ -5,6 +5,7 @@ const Size kTimelineFixedTileExtent = Size.square(256);
 const double kTimelineSpacing = 2.0;
 const int kTimelineColumnCount = 3;
 
+const double kScrubberThumbHeight = 48.0;
 const Duration kTimelineScrubberFadeInDuration = Duration(milliseconds: 300);
 const Duration kTimelineScrubberFadeOutDuration = Duration(milliseconds: 800);
 

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

@@ -244,6 +244,7 @@ class _AssetTileWidget extends ConsumerWidget {
     final lockSelection = _getLockSelectionStatus(ref);
     final showStorageIndicator = ref.watch(timelineArgsProvider.select((args) => args.showStorageIndicator));
     final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);
+    final showStackIndicator = ref.read(timelineServiceProvider).origin != TimelineOrigin.trash;
 
     return RepaintBoundary(
       child: GestureDetector(
@@ -253,6 +254,7 @@ class _AssetTileWidget extends ConsumerWidget {
           asset,
           lockSelection: lockSelection,
           showStorageIndicator: showStorageIndicator,
+          showStackIndicator: showStackIndicator,
           heroOffset: heroOffset,
         ),
       ),

mobile/lib/presentation/widgets/timeline/scrubber.widget.dart

@@ -530,12 +530,14 @@ class _CircularThumb extends StatelessWidget {
         elevation: 4.0,
         color: backgroundColor,
         borderRadius: const BorderRadius.only(
-          topLeft: Radius.circular(48.0),
-          bottomLeft: Radius.circular(48.0),
+          topLeft: Radius.circular(kScrubberThumbHeight),
+          bottomLeft: Radius.circular(kScrubberThumbHeight),
           topRight: Radius.circular(4.0),
           bottomRight: Radius.circular(4.0),
         ),
-        child: Container(constraints: BoxConstraints.tight(const Size(48.0 * 0.6, 48.0))),
+        child: Container(
+          constraints: BoxConstraints.tight(const Size(kScrubberThumbHeight * 0.6, kScrubberThumbHeight)),
+        ),
       ),
     );
   }

mobile/lib/presentation/widgets/timeline/timeline.widget.dart

@@ -17,6 +17,7 @@ import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/download_status_floating_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/general_bottom_sheet.widget.dart';
+import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/scrubber.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/segment.model.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.state.dart';
@@ -34,6 +35,7 @@ class Timeline extends StatelessWidget {
     super.key,
     this.topSliverWidget,
     this.topSliverWidgetHeight,
+    this.bottomSliverWidget,
     this.showStorageIndicator = false,
     this.withStack = false,
     this.appBar = const ImmichSliverAppBar(floating: true, pinned: false, snap: false),
@@ -41,13 +43,14 @@ class Timeline extends StatelessWidget {
     this.groupBy,
     this.withScrubber = true,
     this.snapToMonth = true,
-    this.initialScrollOffset,
     this.readOnly = false,
     this.persistentBottomBar = false,
+    this.loadingWidget,
   });
 
   final Widget? topSliverWidget;
   final double? topSliverWidgetHeight;
+  final Widget? bottomSliverWidget;
   final bool showStorageIndicator;
   final Widget? appBar;
   final Widget? bottomSheet;
@@ -55,9 +58,9 @@ class Timeline extends StatelessWidget {
   final GroupAssetsBy? groupBy;
   final bool withScrubber;
   final bool snapToMonth;
-  final double? initialScrollOffset;
   final bool readOnly;
   final bool persistentBottomBar;
+  final Widget? loadingWidget;
 
   @override
   Widget build(BuildContext context) {
@@ -82,13 +85,14 @@ class Timeline extends StatelessWidget {
           child: _SliverTimeline(
             topSliverWidget: topSliverWidget,
             topSliverWidgetHeight: topSliverWidgetHeight,
+            bottomSliverWidget: bottomSliverWidget,
             appBar: appBar,
             bottomSheet: bottomSheet,
             withScrubber: withScrubber,
             persistentBottomBar: persistentBottomBar,
             snapToMonth: snapToMonth,
-            initialScrollOffset: initialScrollOffset,
             maxWidth: constraints.maxWidth,
+            loadingWidget: loadingWidget,
           ),
         ),
       ),
@@ -111,24 +115,26 @@ class _SliverTimeline extends ConsumerStatefulWidget {
   const _SliverTimeline({
     this.topSliverWidget,
     this.topSliverWidgetHeight,
+    this.bottomSliverWidget,
     this.appBar,
     this.bottomSheet,
     this.withScrubber = true,
     this.persistentBottomBar = false,
     this.snapToMonth = true,
-    this.initialScrollOffset,
     this.maxWidth,
+    this.loadingWidget,
   });
 
   final Widget? topSliverWidget;
   final double? topSliverWidgetHeight;
+  final Widget? bottomSliverWidget;
   final Widget? appBar;
   final Widget? bottomSheet;
   final bool withScrubber;
   final bool persistentBottomBar;
   final bool snapToMonth;
-  final double? initialScrollOffset;
   final double? maxWidth;
+  final Widget? loadingWidget;
 
   @override
   ConsumerState createState() => _SliverTimelineState();
@@ -152,10 +158,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
   @override
   void initState() {
     super.initState();
-    _scrollController = ScrollController(
-      initialScrollOffset: widget.initialScrollOffset ?? 0.0,
-      onAttach: _restoreAssetPosition,
-    );
+    _scrollController = ScrollController(onAttach: _restoreAssetPosition);
     _eventSubscription = EventStream.shared.listen(_onEvent);
 
     final currentTilesPerRow = ref.read(settingsProvider).get(Setting.tilesPerRow);
@@ -373,6 +376,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
         }
       },
       child: asyncSegments.widgetWhen(
+        onLoading: widget.loadingWidget != null ? () => widget.loadingWidget! : null,
         onData: (segments) {
           final childCount = (segments.lastOrNull?.lastIndex ?? -1) + 1;
           final double appBarExpandedHeight = widget.appBar != null && widget.appBar is MesmerizingSliverAppBar
@@ -380,12 +384,9 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
               : 0;
           final topPadding = context.padding.top + (widget.appBar == null ? 0 : kToolbarHeight) + 10;
 
-          const scrubberBottomPadding = 100.0;
           const bottomSheetOpenModifier = 120.0;
-          final bottomPadding =
-              context.padding.bottom +
-              (widget.appBar == null ? 0 : scrubberBottomPadding) +
-              (isMultiSelectEnabled ? bottomSheetOpenModifier : 0);
+          final contentBottomPadding = context.padding.bottom + (isMultiSelectEnabled ? bottomSheetOpenModifier : 0);
+          final scrubberBottomPadding = contentBottomPadding + kScrubberThumbHeight;
 
           final grid = CustomScrollView(
             primary: true,
@@ -408,7 +409,8 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
                   addRepaintBoundaries: false,
                 ),
               ),
-              SliverPadding(padding: EdgeInsets.only(bottom: bottomPadding)),
+              if (widget.bottomSliverWidget != null) widget.bottomSliverWidget!,
+              SliverPadding(padding: EdgeInsets.only(bottom: contentBottomPadding)),
             ],
           );
 
@@ -419,7 +421,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
               layoutSegments: segments,
               timelineHeight: maxHeight,
               topPadding: topPadding,
-              bottomPadding: bottomPadding,
+              bottomPadding: scrubberBottomPadding,
               monthSegmentSnappingOffset: widget.topSliverWidgetHeight ?? 0 + appBarExpandedHeight,
               hasAppBar: widget.appBar != null,
               child: grid,
@@ -467,6 +469,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
                   ref.read(timelineStateProvider.notifier).setScrolling(true);
                 },
                 child: Stack(
+                  clipBehavior: Clip.none,
                   children: [
                     timeline,
                     if (isBottomWidgetVisible)