feat: mobile editing (#25397)

* feat: mobile editing

fix: openapi patch

this sucks :pepehands:

chore: migrate some changes from the filtering PR

chore: color tweak

fix: hide edit button on server versions

chore: translation

* chore: code review changes

chore: code review

* sealed class

* const constant

* enum

* concurrent queries

* chore: major cleanup to use riverpod provider

* fix: aspect ratio selection

* chore: typesafe websocket event parsing

* fix: wrong disable state for save button

* chore: remove isCancelled shim

* chore: cleanup postframe callback usage

* chore: clean import

---------

Co-authored-by: mertalev <101130780+mertalev@users.noreply.github.com>

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/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 {
@@ -14,13 +21,33 @@ class EditImageActionButton extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     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/asset_viewer/bottom_bar.widget.dart

@@ -3,16 +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/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 {
@@ -30,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;
 
@@ -38,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) ...[

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

@@ -147,7 +147,7 @@ mixin CancellableImageProviderMixin<T extends Object> on CancellableImageProvide
   }
 }
 
-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)) {
@@ -170,13 +170,14 @@ ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080
       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);
@@ -184,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/remote_image_provider.dart

@@ -13,11 +13,12 @@ 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) {
@@ -45,13 +46,13 @@ class RemoteImageProvider extends CancellableImageProvider<RemoteImageProvider>
   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>
@@ -60,12 +61,14 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
   final String thumbhash;
   final AssetType assetType;
   final bool isAnimated;
+  final bool edited;
 
   RemoteFullImageProvider({
     required this.assetId,
     required this.thumbhash,
     required this.assetType,
     required this.isAnimated,
+    this.edited = true,
   });
 
   @override
@@ -91,7 +94,9 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
 
     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),
@@ -109,7 +114,12 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
     }
 
     final previewRequest = request = RemoteImageRequest(
-      uri: getThumbnailUrlForRemoteId(key.assetId, type: AssetMediaSize.preview, thumbhash: key.thumbhash),
+      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, isFinal: !loadOriginal);
@@ -122,7 +132,9 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
       return;
     }
 
-    final originalRequest = request = RemoteImageRequest(uri: getOriginalUrlForRemoteId(key.assetId));
+    final originalRequest = request = RemoteImageRequest(
+      uri: getOriginalUrlForRemoteId(key.assetId, edited: key.edited),
+    );
     yield* loadRequest(originalRequest, decode, isFinal: true);
   }
 
@@ -134,7 +146,12 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
     }
 
     final previewRequest = request = RemoteImageRequest(
-      uri: getThumbnailUrlForRemoteId(key.assetId, type: AssetMediaSize.preview, thumbhash: key.thumbhash),
+      uri: getThumbnailUrlForRemoteId(
+        key.assetId,
+        type: AssetMediaSize.preview,
+        thumbhash: key.thumbhash,
+        edited: key.edited,
+      ),
     );
     yield* loadRequest(previewRequest, decode, isFinal: false);
 
@@ -143,7 +160,9 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
     }
 
     // always try original for animated, since previews don't support animation
-    final originalRequest = request = RemoteImageRequest(uri: getOriginalUrlForRemoteId(key.assetId));
+    final originalRequest = request = RemoteImageRequest(
+      uri: getOriginalUrlForRemoteId(key.assetId, edited: key.edited),
+    );
     final codec = await loadCodecRequest(originalRequest, isFinal: true);
     if (codec == null) {
       if (isCancelled) {
@@ -158,12 +177,15 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
     if (other is RemoteFullImageProvider) {
-      return assetId == other.assetId && thumbhash == other.thumbhash && isAnimated == other.isAnimated;
+      return assetId == other.assetId &&
+          thumbhash == other.thumbhash &&
+          isAnimated == other.isAnimated &&
+          edited == other.edited;
     }
 
     return false;
   }
 
   @override
-  int get hashCode => assetId.hashCode ^ thumbhash.hashCode ^ isAnimated.hashCode;
+  int get hashCode => assetId.hashCode ^ thumbhash.hashCode ^ isAnimated.hashCode ^ edited.hashCode;
 }