Merge branch 'soru/image-pack-creator' into 'main'

chore: cleanup image pack editor to attach metadata and prepare to make it more general

See merge request famedly/fluffychat!466

lib/pages/settings_emotes.dart

@@ -2,16 +2,15 @@ import 'package:adaptive_dialog/adaptive_dialog.dart';
 
 import 'package:matrix/matrix.dart';
 import 'package:file_picker_cross/file_picker_cross.dart';
-import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:vrouter/vrouter.dart';
 
 import 'package:future_loading_dialog/future_loading_dialog.dart';
-import 'package:image_picker/image_picker.dart';
 import 'views/settings_emotes_view.dart';
 import '../widgets/matrix.dart';
+import '../utils/resize_image.dart';
 
 class EmotesSettings extends StatefulWidget {
   EmotesSettings({Key key}) : super(key: key);
@@ -20,24 +19,18 @@ class EmotesSettings extends StatefulWidget {
   EmotesSettingsController createState() => EmotesSettingsController();
 }
 
-class EmoteEntry {
-  String emote;
-  String mxc;
-  EmoteEntry({this.emote, this.mxc});
-}
-
 class EmotesSettingsController extends State<EmotesSettings> {
   String get roomId => VRouter.of(context).pathParameters['roomid'];
   Room get room =>
       roomId != null ? Matrix.of(context).client.getRoomById(roomId) : null;
   String get stateKey => VRouter.of(context).pathParameters['state_key'];
 
-  List<EmoteEntry> emotes;
   bool showSave = false;
-  TextEditingController newEmoteController = TextEditingController();
+  TextEditingController newImageCodeController = TextEditingController();
-  TextEditingController newMxcController = TextEditingController();
+  ValueNotifier<ImagePackImageContent> newImageController =
+      ValueNotifier<ImagePackImageContent>(null);
 
-  ImagePackContent _getPack(BuildContext context) {
+  ImagePackContent _getPack() {
     final client = Matrix.of(context).client;
     final event = (room != null
             ? room.getState('im.ponies.room_emotes', stateKey ?? '')
@@ -50,33 +43,20 @@ class EmotesSettingsController extends State<EmotesSettings> {
     return BasicEvent.fromJson(event.toJson()).parsedImagePackContent;
   }
 
+  ImagePackContent _pack;
+  ImagePackContent get pack {
+    if (_pack != null) {
+      return _pack;
+    }
+    _pack = _getPack();
+    return _pack;
+  }
+
   Future<void> _save(BuildContext context) async {
     if (readonly) {
       return;
     }
     final client = Matrix.of(context).client;
-    final pack = _getPack(context);
-    // add / update changed emotes
-    final allowedShortcodes = <String>{};
-    for (final emote in emotes) {
-      allowedShortcodes.add(emote.emote);
-      if (pack.images.containsKey(emote.emote)) {
-        pack.images[emote.emote].url = Uri.parse(emote.mxc);
-      } else {
-        pack.images[emote.emote] =
-            ImagePackImageContent.fromJson(<String, dynamic>{
-          'url': emote.mxc,
-        });
-      }
-    }
-    // remove emotes no more needed
-    // we make the iterator .toList() here so that we don't get into trouble modifying the very
-    // thing we are iterating over
-    for (final shortcode in pack.images.keys.toList()) {
-      if (!allowedShortcodes.contains(shortcode)) {
-        pack.images.remove(shortcode);
-      }
-    }
     if (room != null) {
       await showFutureLoadingDialog(
         context: context,
@@ -121,19 +101,19 @@ class EmotesSettingsController extends State<EmotesSettings> {
     setState(() => null);
   }
 
-  void removeEmoteAction(EmoteEntry emote) => setState(() {
+  void removeImageAction(String oldImageCode) => setState(() {
-        emotes.removeWhere((e) => e.emote == emote.emote);
+        pack.images.remove(oldImageCode);
         showSave = true;
       });
 
-  void submitEmoteAction(
+  void submitImageAction(
-    String emoteCode,
+    String oldImageCode,
-    EmoteEntry emote,
+    String imageCode,
+    ImagePackImageContent image,
     TextEditingController controller,
   ) {
-    if (emotes.indexWhere((e) => e.emote == emoteCode && e.mxc != emote.mxc) !=
+    if (pack.images.keys.any((k) => k == imageCode && k != oldImageCode)) {
-        -1) {
+      controller.text = oldImageCode;
-      controller.text = emote.emote;
       showOkAlertDialog(
         useRootNavigator: false,
         context: context,
@@ -142,8 +122,8 @@ class EmotesSettingsController extends State<EmotesSettings> {
       );
       return;
     }
-    if (!RegExp(r'^[-\w]+$').hasMatch(emoteCode)) {
+    if (!RegExp(r'^[-\w]+$').hasMatch(imageCode)) {
-      controller.text = emote.emote;
+      controller.text = oldImageCode;
       showOkAlertDialog(
         useRootNavigator: false,
         context: context,
@@ -153,7 +133,8 @@ class EmotesSettingsController extends State<EmotesSettings> {
       return;
     }
     setState(() {
-      emote.emote = emoteCode;
+      pack.images[imageCode] = image;
+      pack.images.remove(oldImageCode);
       showSave = true;
     });
   }
@@ -177,11 +158,10 @@ class EmotesSettingsController extends State<EmotesSettings> {
     });
   }
 
-  void addEmoteAction() async {
+  void addImageAction() async {
-    if (newEmoteController.text == null ||
+    if (newImageCodeController.text == null ||
-        newEmoteController.text.isEmpty ||
+        newImageCodeController.text.isEmpty ||
-        newMxcController.text == null ||
+        newImageController.value == null) {
-        newMxcController.text.isEmpty) {
       await showOkAlertDialog(
         useRootNavigator: false,
         context: context,
@@ -190,9 +170,8 @@ class EmotesSettingsController extends State<EmotesSettings> {
       );
       return;
     }
-    final emoteCode = '${newEmoteController.text}';
+    final imageCode = newImageCodeController.text;
-    final mxc = newMxcController.text;
+    if (pack.images.containsKey(imageCode)) {
-    if (emotes.indexWhere((e) => e.emote == emoteCode && e.mxc != mxc) != -1) {
       await showOkAlertDialog(
         useRootNavigator: false,
         context: context,
@@ -201,7 +180,7 @@ class EmotesSettingsController extends State<EmotesSettings> {
       );
       return;
     }
-    if (!RegExp(r'^[-\w]+$').hasMatch(emoteCode)) {
+    if (!RegExp(r'^[-\w]+$').hasMatch(imageCode)) {
       await showOkAlertDialog(
         useRootNavigator: false,
         context: context,
@@ -210,41 +189,28 @@ class EmotesSettingsController extends State<EmotesSettings> {
       );
       return;
     }
-    emotes.add(EmoteEntry(emote: emoteCode, mxc: mxc));
+    pack.images[imageCode] = newImageController.value;
     await _save(context);
     setState(() {
-      newEmoteController.text = '';
+      newImageCodeController.text = '';
-      newMxcController.text = '';
+      newImageController.value = null;
       showSave = false;
     });
   }
 
-  void emoteImagePickerAction(TextEditingController controller) async {
+  void imagePickerAction(
-    if (kIsWeb) {
+      ValueNotifier<ImagePackImageContent> controller) async {
-      ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(content: Text(L10n.of(context).notSupportedInWeb)));
-      return;
-    }
-    MatrixFile file;
-    if (PlatformInfos.isMobile) {
-      final result = await ImagePicker().getImage(
-          source: ImageSource.gallery,
-          imageQuality: 50,
-          maxWidth: 1600,
-          maxHeight: 1600);
-      if (result == null) return;
-      file = MatrixFile(
-        bytes: await result.readAsBytes(),
-        name: result.path,
-      );
-    } else {
     final result =
         await FilePickerCross.importFromStorage(type: FileTypeCross.image);
     if (result == null) return;
-      file = MatrixFile(
+    var file = MatrixImageFile(
       bytes: result.toUint8List(),
       name: result.fileName,
     );
+    try {
+      file = await resizeImage(file, max: 1600);
+    } catch (_) {
+      // do nothing
     }
     final uploadResp = await showFutureLoadingDialog(
       context: context,
@@ -253,21 +219,30 @@ class EmotesSettingsController extends State<EmotesSettings> {
     );
     if (uploadResp.error == null) {
       setState(() {
-        controller.text = uploadResp.result;
+        final info = <String, dynamic>{
+          ...file.info,
+        };
+        // normalize width / height to 256, required for stickers
+        if (info['w'] is int && info['h'] is int) {
+          final ratio = info['w'] / info['h'];
+          if (info['w'] > info['h']) {
+            info['w'] = 256;
+            info['h'] = (256.0 / ratio).round();
+          } else {
+            info['h'] = 256;
+            info['w'] = (ratio * 256.0).round();
+          }
+        }
+        controller.value = ImagePackImageContent.fromJson(<String, dynamic>{
+          'url': uploadResp.result,
+          'info': info,
+        });
       });
     }
   }
 
   @override
   Widget build(BuildContext context) {
-    if (emotes == null) {
-      emotes = <EmoteEntry>[];
-      final pack = _getPack(context);
-      for (final entry in pack.images.entries) {
-        emotes
-            .add(EmoteEntry(emote: entry.key, mxc: entry.value.url.toString()));
-      }
-    }
     return EmotesSettingsView(this);
   }
 }

lib/pages/views/settings_emotes_view.dart

@@ -17,6 +17,7 @@ class EmotesSettingsView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final client = Matrix.of(context).client;
+    final imageKeys = controller.pack.images.keys.toList();
     return Scaffold(
       appBar: AppBar(
         leading: BackButton(),
@@ -29,10 +30,7 @@ class EmotesSettingsView extends StatelessWidget {
             )
           : null,
       body: MaxWidthBody(
-        child: StreamBuilder(
+        child: Column(
-            stream: controller.room?.onUpdate?.stream,
-            builder: (context, snapshot) {
-              return Column(
           children: <Widget>[
             if (!controller.readonly)
               Container(
@@ -49,7 +47,7 @@ class EmotesSettingsView extends StatelessWidget {
                       color: Theme.of(context).secondaryHeaderColor,
                     ),
                     child: TextField(
-                            controller: controller.newEmoteController,
+                      controller: controller.newImageCodeController,
                       autocorrect: false,
                       minLines: 1,
                       maxLines: 1,
@@ -69,12 +67,12 @@ class EmotesSettingsView extends StatelessWidget {
                       ),
                     ),
                   ),
-                        title: _EmoteImagePicker(
+                  title: _ImagePicker(
-                          controller: controller.newMxcController,
+                    controller: controller.newImageController,
-                          onPressed: controller.emoteImagePickerAction,
+                    onPressed: controller.imagePickerAction,
                   ),
                   trailing: InkWell(
-                          onTap: controller.addEmoteAction,
+                    onTap: controller.addImageAction,
                     child: Icon(
                       Icons.add_outlined,
                       color: Colors.green,
@@ -98,7 +96,7 @@ class EmotesSettingsView extends StatelessWidget {
                 color: Theme.of(context).primaryColor,
               ),
             Expanded(
-                    child: controller.emotes.isEmpty
+              child: imageKeys.isEmpty
                   ? Center(
                       child: Padding(
                         padding: EdgeInsets.all(16),
@@ -111,17 +109,17 @@ class EmotesSettingsView extends StatelessWidget {
                   : ListView.separated(
                       separatorBuilder: (BuildContext context, int i) =>
                           Container(),
-                            itemCount: controller.emotes.length + 1,
+                      itemCount: imageKeys.length + 1,
                       itemBuilder: (BuildContext context, int i) {
-                              if (i >= controller.emotes.length) {
+                        if (i >= imageKeys.length) {
                           return Container(height: 70);
                         }
-                              final emote = controller.emotes[i];
+                        final imageCode = imageKeys[i];
-                              final textEditingController =
+                        final image = controller.pack.images[imageCode];
-                                  TextEditingController();
+                        final textEditingController = TextEditingController();
-                              textEditingController.text = emote.emote;
+                        textEditingController.text = imageCode;
-                              final useShortCuts = (PlatformInfos.isWeb ||
+                        final useShortCuts =
-                                  PlatformInfos.isDesktop);
+                            (PlatformInfos.isWeb || PlatformInfos.isDesktop);
                         return ListTile(
                           leading: Container(
                             width: 180.0,
@@ -130,15 +128,13 @@ class EmotesSettingsView extends StatelessWidget {
                             decoration: BoxDecoration(
                               borderRadius:
                                   BorderRadius.all(Radius.circular(10)),
-                                    color:
+                              color: Theme.of(context).secondaryHeaderColor,
-                                        Theme.of(context).secondaryHeaderColor,
                             ),
                             child: Shortcuts(
                               shortcuts: !useShortCuts
                                   ? {}
                                   : {
-                                            LogicalKeySet(
+                                      LogicalKeySet(LogicalKeyboardKey.enter):
-                                                    LogicalKeyboardKey.enter):
                                           SubmitLineIntent(),
                                     },
                               child: Actions(
@@ -147,9 +143,10 @@ class EmotesSettingsView extends StatelessWidget {
                                     : {
                                         SubmitLineIntent:
                                             CallbackAction(onInvoke: (i) {
-                                                controller.submitEmoteAction(
+                                          controller.submitImageAction(
+                                            imageCode,
                                             textEditingController.text,
-                                                  emote,
+                                            image,
                                             textEditingController,
                                           );
                                           return null;
@@ -162,8 +159,7 @@ class EmotesSettingsView extends StatelessWidget {
                                   minLines: 1,
                                   maxLines: 1,
                                   decoration: InputDecoration(
-                                          hintText:
+                                    hintText: L10n.of(context).emoteShortcode,
-                                              L10n.of(context).emoteShortcode,
                                     prefixText: ': ',
                                     suffixText: ':',
                                     prefixStyle: TextStyle(
@@ -181,21 +177,22 @@ class EmotesSettingsView extends StatelessWidget {
                                     border: InputBorder.none,
                                   ),
                                   onSubmitted: (s) =>
-                                            controller.submitEmoteAction(
+                                      controller.submitImageAction(
+                                    imageCode,
                                     s,
-                                          emote,
+                                    image,
                                     textEditingController,
                                   ),
                                 ),
                               ),
                             ),
                           ),
-                                title: _EmoteImage(emote.mxc),
+                          title: _EmoteImage(image.url),
                           trailing: controller.readonly
                               ? null
                               : InkWell(
                                   onTap: () =>
-                                            controller.removeEmoteAction(emote),
+                                      controller.removeImageAction(imageCode),
                                   child: Icon(
                                     Icons.delete_forever_outlined,
                                     color: Colors.red,
@@ -207,22 +204,21 @@ class EmotesSettingsView extends StatelessWidget {
                     ),
             ),
           ],
-              );
+        ),
-            }),
       ),
     );
   }
 }
 
 class _EmoteImage extends StatelessWidget {
-  final String mxc;
+  final Uri mxc;
   _EmoteImage(this.mxc);
 
   @override
   Widget build(BuildContext context) {
     final size = 38.0;
     final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
-    final url = Uri.parse(mxc)?.getThumbnail(
+    final url = mxc?.getThumbnail(
       Matrix.of(context).client,
       width: size * devicePixelRatio,
       height: size * devicePixelRatio,
@@ -237,27 +233,27 @@ class _EmoteImage extends StatelessWidget {
   }
 }
 
-class _EmoteImagePicker extends StatefulWidget {
+class _ImagePicker extends StatefulWidget {
-  final TextEditingController controller;
+  final ValueNotifier<ImagePackImageContent> controller;
 
-  final void Function(TextEditingController) onPressed;
+  final void Function(ValueNotifier<ImagePackImageContent>) onPressed;
 
-  _EmoteImagePicker({@required this.controller, @required this.onPressed});
+  _ImagePicker({@required this.controller, @required this.onPressed});
 
   @override
-  _EmoteImagePickerState createState() => _EmoteImagePickerState();
+  _ImagePickerState createState() => _ImagePickerState();
 }
 
-class _EmoteImagePickerState extends State<_EmoteImagePicker> {
+class _ImagePickerState extends State<_ImagePicker> {
   @override
   Widget build(BuildContext context) {
-    if (widget.controller.text == null || widget.controller.text.isEmpty) {
+    if (widget.controller.value == null) {
       return ElevatedButton(
         onPressed: () => widget.onPressed(widget.controller),
         child: Text(L10n.of(context).pickImage),
       );
     } else {
-      return _EmoteImage(widget.controller.text);
+      return _EmoteImage(widget.controller.value.url);
     }
   }
 }

lib/utils/resize_image.dart

@@ -12,7 +12,16 @@ Future<MatrixImageFile> resizeImage(MatrixImageFile file,
   // freeze up the UI a bit
 
   // we can't do width / height fetching in a separate isolate, as that may use the UI stuff
+
+  // somehow doing native.init twice fixes it for linux desktop?
+  // TODO: once native imaging is on sound null safety the errors are consistent and
+  // then we can properly handle this instead
+  // https://gitlab.com/famedly/company/frontend/libraries/native_imaging/-/issues/5
+  try {
     await native.init();
+  } catch (_) {
+    await native.init();
+  }
 
   _IsolateArgs args;
   try {
@@ -47,9 +56,14 @@ Future<MatrixImageFile> resizeImage(MatrixImageFile file,
     mimeType: 'image/jpeg',
     width: res.width,
     height: res.height,
+    blurhash: res.blurhash,
   );
   // only return the thumbnail if the size actually decreased
-  return thumbnail.size >= file.size ? file : thumbnail;
+  return thumbnail.size >= file.size ||
+          thumbnail.width >= file.width ||
+          thumbnail.height >= file.height
+      ? file
+      : thumbnail;
 }
 
 class _IsolateArgs {
@@ -70,7 +84,12 @@ class _IsolateResponse {
 }
 
 Future<_IsolateResponse> _isolateFunction(_IsolateArgs args) async {
+  // Hack for desktop, see above why
+  try {
     await native.init();
+  } catch (_) {
+    await native.init();
+  }
   var nativeImg = native.Image();
 
   try {