feat: Add description (#2237)

* Added dto, logic to insert description and web implementation

* create text field and update on remote database

* Update description and save changes

* styling

* fix web test

* fix server test

* preserve description on metadata extraction job run

* handle exif info is null situation

* pr feedback

* format openapi spec

* update createAssetDto

* refactor logic to service

* move files

* only owner can update description

* Render description correctly in shared album

* Render description correctly in shared link

* disable description edit for not owner of asset on mobile

* localization and clean up

* fix test

* Uses providers for description text (#2244)

* uses providers for description text

* comments

* fixes initial data setting

* fixes notifier

---------

Co-authored-by: martyfuhry <martyfuhry@gmail.com>

mobile/lib/modules/asset_viewer/providers/asset_description.provider.dart

@@ -0,0 +1,93 @@
+import 'dart:async';
+
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/asset_viewer/services/asset_description.service.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/models/exif_info.dart';
+import 'package:immich_mobile/shared/providers/db.provider.dart';
+import 'package:isar/isar.dart';
+
+class AssetDescriptionNotifier extends StateNotifier<String> {
+  final Isar _db;
+  final AssetDescriptionService _service;
+  final Asset _asset;
+
+  AssetDescriptionNotifier(
+    this._db,
+    this._service, 
+    this._asset,
+  ) : super('') {
+    _fetchLocalDescription();
+    _fetchRemoteDescription();
+  }
+
+  String get description => state;
+
+  /// Fetches the local database value for description
+  /// and writes it to [state]
+  void _fetchLocalDescription() async {
+    final localExifId = _asset.exifInfo?.id;
+
+    // Guard [localExifId] null
+    if (localExifId == null) {
+      return;
+    }
+
+    // Subscribe to local changes
+    final exifInfo = await _db
+        .exifInfos
+        .get(localExifId);
+
+    // Guard
+    if (exifInfo?.description == null) {
+      return;
+    }
+
+    state = exifInfo!.description!;
+  }
+
+  /// Fetches the remote value and sets the state
+  void _fetchRemoteDescription() async {
+    final remoteAssetId = _asset.remoteId;
+    final localExifId = _asset.exifInfo?.id;
+
+    // Guard [remoteAssetId] and [localExifId] null
+    if (remoteAssetId == null || localExifId == null) {
+      return;
+    }
+
+    // Reads the latest from the remote and writes it to DB in the service
+    final latest = await _service.readLatest(remoteAssetId, localExifId);
+
+    state = latest;
+  }
+
+  /// Sets the description to [description]
+  /// Uses the service to set the asset value
+  Future<void> setDescription(String description) async {
+    state = description;
+
+    final remoteAssetId = _asset.remoteId;
+    final localExifId = _asset.exifInfo?.id;
+
+    // Guard [remoteAssetId] and [localExifId] null
+    if (remoteAssetId == null || localExifId == null) {
+      return;
+    }
+
+    return _service
+        .setDescription(description, remoteAssetId, localExifId);
+  }
+}
+
+final assetDescriptionProvider = StateNotifierProvider
+    .autoDispose
+    .family<AssetDescriptionNotifier, String, Asset>(
+  (ref, asset) => AssetDescriptionNotifier(
+    ref.watch(dbProvider),
+    ref.watch(assetDescriptionServiceProvider),
+    asset,
+  ),
+);
+
+

mobile/lib/modules/asset_viewer/services/asset_description.service.dart

@@ -0,0 +1,62 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/models/exif_info.dart';
+import 'package:immich_mobile/shared/providers/api.provider.dart';
+import 'package:immich_mobile/shared/providers/db.provider.dart';
+import 'package:immich_mobile/shared/services/api.service.dart';
+import 'package:isar/isar.dart';
+import 'package:openapi/api.dart';
+
+class AssetDescriptionService {
+  AssetDescriptionService(this._db, this._api);
+
+  final Isar _db;
+  final ApiService _api;
+
+  setDescription(
+    String description,
+    String remoteAssetId,
+    int localExifId,
+  ) async {
+    final result = await _api.assetApi.updateAsset(
+      remoteAssetId,
+      UpdateAssetDto(description: description),
+    );
+
+    if (result?.exifInfo?.description != null) {
+      var exifInfo = await _db.exifInfos.get(localExifId);
+
+      if (exifInfo != null) {
+        exifInfo.description = result!.exifInfo!.description;
+        await _db.writeTxn(
+          () => _db.exifInfos.put(exifInfo),
+        );
+      }
+    }
+  }
+
+  Future<String> readLatest(String assetRemoteId, int localExifId) async {
+    final latestAssetFromServer =
+        await _api.assetApi.getAssetById(assetRemoteId);
+    final localExifInfo = await _db.exifInfos.get(localExifId);
+
+    if (latestAssetFromServer != null && localExifInfo != null) {
+      localExifInfo.description =
+          latestAssetFromServer.exifInfo?.description ?? '';
+
+      await _db.writeTxn(
+        () => _db.exifInfos.put(localExifInfo),
+      );
+
+      return localExifInfo.description!;
+    }
+
+    return "";
+  }
+}
+
+final assetDescriptionServiceProvider = Provider(
+  (ref) => AssetDescriptionService(
+    ref.watch(dbProvider),
+    ref.watch(apiServiceProvider),
+  ),
+);

mobile/lib/modules/asset_viewer/ui/description_input.dart

@@ -0,0 +1,103 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/asset_viewer/providers/asset_description.provider.dart';
+import 'package:immich_mobile/shared/models/asset.dart';
+import 'package:immich_mobile/shared/ui/immich_toast.dart';
+import 'package:logging/logging.dart';
+import 'package:immich_mobile/shared/models/store.dart' as store;
+
+class DescriptionInput extends HookConsumerWidget {
+  DescriptionInput({
+    super.key,
+    required this.asset,
+  });
+
+  final Asset asset;
+  final Logger _log = Logger('DescriptionInput');
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isDarkTheme = Theme.of(context).brightness == Brightness.dark;
+    final textColor = isDarkTheme ? Colors.white : Colors.black;
+    final controller = useTextEditingController();
+    final focusNode = useFocusNode();
+    final isFocus = useState(false);
+    final isTextEmpty = useState(controller.text.isEmpty);
+    final descriptionProvider = ref.watch(assetDescriptionProvider(asset).notifier);
+    final description = ref.watch(assetDescriptionProvider(asset));
+    final owner = store.Store.get(store.StoreKey.currentUser);
+    final hasError = useState(false);
+
+    controller.text = description;
+
+    submitDescription(String description) async {
+      hasError.value = false;
+      try {
+        await descriptionProvider.setDescription(
+          description,
+        );
+      } catch (error, stack) {
+        hasError.value = true;
+        _log.severe("Error updating description $error", error, stack);
+        ImmichToast.show(
+          context: context,
+          msg: "description_input_submit_error".tr(),
+          toastType: ToastType.error,
+        );
+      }
+    }
+
+    Widget? suffixIcon;
+    if (hasError.value) {
+      suffixIcon = const Icon(Icons.warning_outlined);
+    } else if (!isTextEmpty.value && isFocus.value) {
+      suffixIcon = IconButton(
+        onPressed: () {
+          controller.clear();
+          isTextEmpty.value = true;
+        },
+        icon: Icon(
+          Icons.cancel_rounded,
+          color: Colors.grey[500],
+        ),
+        splashRadius: 10,
+      );
+    }
+
+    return TextField(
+      enabled: owner.isarId == asset.ownerId,
+      focusNode: focusNode,
+      onTap: () => isFocus.value = true,
+      onChanged: (value) {
+        isTextEmpty.value = false;
+      },
+      onTapOutside: (a) async {
+        isFocus.value = false;
+        focusNode.unfocus();
+
+        if (description != controller.text) {
+          await submitDescription(controller.text);
+        }
+      },
+      autofocus: false,
+      maxLines: null,
+      keyboardType: TextInputType.multiline,
+      controller: controller,
+      style: const TextStyle(
+        fontSize: 14,
+      ),
+      decoration: InputDecoration(
+        hintText: 'description_input_hint_text'.tr(),
+        border: InputBorder.none,
+        hintStyle: TextStyle(
+          fontWeight: FontWeight.normal,
+          fontSize: 12,
+          color: textColor.withOpacity(0.5),
+        ),
+        suffixIcon: suffixIcon,
+      ),
+    );
+  }
+}

mobile/lib/modules/asset_viewer/ui/exif_bottom_sheet.dart

@@ -2,25 +2,25 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/description_input.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
-import 'package:immich_mobile/shared/models/exif_info.dart';
 import 'package:immich_mobile/shared/ui/drag_sheet.dart';
 import 'package:latlong2/latlong.dart';
 import 'package:immich_mobile/utils/bytes_units.dart';
 
 class ExifBottomSheet extends HookConsumerWidget {
-  final Asset assetDetail;
+  final Asset asset;
 
-  const ExifBottomSheet({Key? key, required this.assetDetail})
-      : super(key: key);
+  const ExifBottomSheet({Key? key, required this.asset}) : super(key: key);
 
   bool get showMap =>
-      assetDetail.exifInfo?.latitude != null &&
-      assetDetail.exifInfo?.longitude != null;
+      asset.exifInfo?.latitude != null && asset.exifInfo?.longitude != null;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final ExifInfo? exifInfo = assetDetail.exifInfo;
+    final exifInfo = asset.exifInfo;
+    var isDarkTheme = Theme.of(context).brightness == Brightness.dark;
+    var textColor = isDarkTheme ? Colors.white : Colors.black;
 
     buildMap() {
       return Padding(
@@ -76,19 +76,6 @@ class ExifBottomSheet extends HookConsumerWidget {
       );
     }
 
-    final textColor = Theme.of(context).primaryColor;
-
-    buildLocationText() {
-      return Text(
-        "${exifInfo?.city}, ${exifInfo?.state}",
-        style: TextStyle(
-          fontSize: 12,
-          fontWeight: FontWeight.bold,
-          color: textColor,
-        ),
-      );
-    }
-
     buildSizeText(Asset a) {
       String resolution = a.width != null && a.height != null
           ? "${a.height} x ${a.width}  "
@@ -128,13 +115,39 @@ class ExifBottomSheet extends HookConsumerWidget {
             children: [
               Text(
                 "exif_bottom_sheet_location",
-                style: TextStyle(fontSize: 11, color: textColor),
+                style: TextStyle(
+                  fontSize: 11,
+                  color: textColor,
+                  fontWeight: FontWeight.bold,
+                ),
               ).tr(),
               buildMap(),
-              if (exifInfo != null &&
-                  exifInfo.city != null &&
-                  exifInfo.state != null)
-                buildLocationText(),
+              RichText(
+                text: TextSpan(
+                  style: TextStyle(
+                    fontSize: 12,
+                    fontWeight: FontWeight.bold,
+                    color: textColor,
+                    fontFamily: 'WorkSans',
+                  ),
+                  children: [
+                    if (exifInfo != null && exifInfo.city != null)
+                      TextSpan(
+                        text: exifInfo.city,
+                      ),
+                    if (exifInfo != null &&
+                        exifInfo.city != null &&
+                        exifInfo.state != null)
+                      const TextSpan(
+                        text: ", ",
+                      ),
+                    if (exifInfo != null && exifInfo.state != null)
+                      TextSpan(
+                        text: "${exifInfo.state}",
+                      ),
+                  ],
+                ),
+              ),
               Text(
                 "${exifInfo!.latitude!.toStringAsFixed(4)}, ${exifInfo.longitude!.toStringAsFixed(4)}",
                 style: const TextStyle(fontSize: 12),
@@ -146,7 +159,7 @@ class ExifBottomSheet extends HookConsumerWidget {
     }
 
     buildDate() {
-      final fileCreatedAt = assetDetail.fileCreatedAt.toLocal();
+      final fileCreatedAt = asset.fileCreatedAt.toLocal();
       final date = DateFormat.yMMMEd().format(fileCreatedAt);
       final time = DateFormat.jm().format(fileCreatedAt);
 
@@ -167,27 +180,37 @@ class ExifBottomSheet extends HookConsumerWidget {
             padding: const EdgeInsets.only(bottom: 8.0),
             child: Text(
               "exif_bottom_sheet_details",
-              style: TextStyle(fontSize: 11, color: textColor),
+              style: TextStyle(
+                fontSize: 11,
+                color: textColor,
+                fontWeight: FontWeight.bold,
+              ),
             ).tr(),
           ),
           ListTile(
             contentPadding: const EdgeInsets.all(0),
             dense: true,
-            leading: const Icon(Icons.image),
+            leading: Icon(
+              Icons.image,
+              color: textColor.withAlpha(200),
+            ),
             title: Text(
-              assetDetail.fileName,
+              asset.fileName,
               style: TextStyle(
                 fontWeight: FontWeight.bold,
                 color: textColor,
               ),
             ),
-            subtitle: buildSizeText(assetDetail),
+            subtitle: buildSizeText(asset),
           ),
           if (exifInfo?.make != null)
             ListTile(
               contentPadding: const EdgeInsets.all(0),
               dense: true,
-              leading: const Icon(Icons.camera),
+              leading: Icon(
+                Icons.camera,
+                color: textColor.withAlpha(200),
+              ),
               title: Text(
                 "${exifInfo!.make} ${exifInfo.model}",
                 style: TextStyle(
@@ -203,80 +226,75 @@ class ExifBottomSheet extends HookConsumerWidget {
       );
     }
 
-    return SingleChildScrollView(
-      child: Card(
-        shape: const RoundedRectangleBorder(
-          borderRadius: BorderRadius.only(
-            topLeft: Radius.circular(15),
-            topRight: Radius.circular(15),
+    return GestureDetector(
+      onTap: () {
+        // FocusScope.of(context).unfocus();
+      },
+      child: SingleChildScrollView(
+        child: Card(
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.only(
+              topLeft: Radius.circular(15),
+              topRight: Radius.circular(15),
+            ),
           ),
-        ),
-        margin: const EdgeInsets.all(0),
-        child: Container(
-          margin: const EdgeInsets.symmetric(horizontal: 8.0),
-          child: LayoutBuilder(
-            builder: (context, constraints) {
-              if (constraints.maxWidth > 600) {
-                // Two column
-                return Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.stretch,
-                    children: [
-                      buildDragHeader(),
-                      buildDate(),
-                      const SizedBox(height: 32.0),
-                      Row(
-                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Flexible(
-                            flex: showMap ? 5 : 0,
-                            child: Padding(
-                              padding: const EdgeInsets.only(right: 8.0),
-                              child: buildLocation(),
+          margin: const EdgeInsets.all(0),
+          child: Container(
+            margin: const EdgeInsets.symmetric(horizontal: 16.0),
+            child: LayoutBuilder(
+              builder: (context, constraints) {
+                if (constraints.maxWidth > 600) {
+                  // Two column
+                  return Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 12.0),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.stretch,
+                      children: [
+                        buildDragHeader(),
+                        buildDate(),
+                        if (asset.isRemote) DescriptionInput(asset: asset),
+                        Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Flexible(
+                              flex: showMap ? 5 : 0,
+                              child: Padding(
+                                padding: const EdgeInsets.only(right: 8.0),
+                                child: buildLocation(),
+                              ),
                             ),
-                          ),
-                          Flexible(
-                            flex: 5,
-                            child: Padding(
-                              padding: const EdgeInsets.only(left: 8.0),
-                              child: buildDetail(),
+                            Flexible(
+                              flex: 5,
+                              child: Padding(
+                                padding: const EdgeInsets.only(left: 8.0),
+                                child: buildDetail(),
+                              ),
                             ),
-                          ),
-                        ],
-                      ),
-                      const SizedBox(height: 50),
-                    ],
-                  ),
-                );
-              }
-
-              // One column
-              return Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: [
-                  buildDragHeader(),
-                  buildDate(),
-                  const SizedBox(height: 16.0),
-                  if (showMap)
-                    Divider(
-                      thickness: 1,
-                      color: Colors.grey[600],
+                          ],
+                        ),
+                        const SizedBox(height: 50),
+                      ],
                     ),
-                  const SizedBox(height: 16.0),
-                  buildLocation(),
-                  const SizedBox(height: 16.0),
-                  Divider(
-                    thickness: 1,
-                    color: Colors.grey[600],
-                  ),
-                  const SizedBox(height: 16.0),
-                  buildDetail(),
-                  const SizedBox(height: 50),
-                ],
-              );
-            },
+                  );
+                }
+
+                // One column
+                return Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    buildDragHeader(),
+                    buildDate(),
+                    if (asset.isRemote) DescriptionInput(asset: asset),
+                    const SizedBox(height: 8.0),
+                    buildLocation(),
+                    SizedBox(height: showMap ? 16.0 : 0.0),
+                    buildDetail(),
+                    const SizedBox(height: 50),
+                  ],
+                );
+              },
+            ),
           ),
         ),
       ),

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

@@ -195,7 +195,12 @@ class GalleryViewerPage extends HookConsumerWidget {
               .getSetting<bool>(AppSettingsEnum.advancedTroubleshooting)) {
             return AdvancedBottomSheet(assetDetail: assetDetail!);
           }
-          return ExifBottomSheet(assetDetail: assetDetail!);
+          return Padding(
+            padding: EdgeInsets.only(
+              bottom: MediaQuery.of(context).viewInsets.bottom,
+            ),
+            child: ExifBottomSheet(asset: assetDetail!),
+          );
         },
       );
     }