⚡ Improve attachments queue performance

lib/controllers/post_editor_controller.dart

@@ -115,10 +115,10 @@ class PostEditorController extends GetxController {
       builder: (context) => AttachmentEditorPopup(
         usage: 'i.attachment',
         initialAttachments: attachments,
-        onAdd: (value) {
+        onAdd: (int value) {
           attachments.add(value);
         },
-        onRemove: (value) {
+        onRemove: (int value) {
           attachments.remove(value);
         },
       ),

lib/providers/attachment_uploader.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:io';
 import 'dart:typed_data';
 
@@ -26,11 +27,40 @@ class AttachmentUploaderController extends GetxController {
   RxDouble progressOfUpload = 0.0.obs;
   RxList<AttachmentUploadTask> queueOfUpload = RxList.empty(growable: true);
 
+  Timer? _progressSyncTimer;
+  double _progressOfUpload = 0.0;
+
+  void _syncProgress() {
+    progressOfUpload.value = _progressOfUpload;
+    queueOfUpload.refresh();
+  }
+
+  void _startProgressSyncTimer() {
+    if (_progressSyncTimer != null) {
+      _progressSyncTimer!.cancel();
+    }
+    _progressSyncTimer = Timer.periodic(
+      const Duration(milliseconds: 500),
+      (_) => _syncProgress(),
+    );
+  }
+
+  void _stopProgressSyncTimer() {
+    if (_progressSyncTimer == null) return;
+    _progressSyncTimer!.cancel();
+    _progressSyncTimer = null;
+  }
+
   void enqueueTask(AttachmentUploadTask task) {
     if (isUploading.value) throw Exception('uploading blocked');
     queueOfUpload.add(task);
   }
 
+  void enqueueTaskBatch(Iterable<AttachmentUploadTask> tasks) {
+    if (isUploading.value) throw Exception('uploading blocked');
+    queueOfUpload.addAll(tasks);
+  }
+
   void dequeueTask(AttachmentUploadTask task) {
     if (isUploading.value) throw Exception('uploading blocked');
     queueOfUpload.remove(task);
@@ -40,8 +70,8 @@ class AttachmentUploaderController extends GetxController {
     isUploading.value = true;
     progressOfUpload.value = 0;
 
+    _startProgressSyncTimer();
     queueOfUpload[queueIndex].isUploading = true;
-    queueOfUpload.refresh();
 
     final task = queueOfUpload[queueIndex];
     final result = await _rawUploadAttachment(
@@ -51,13 +81,13 @@ class AttachmentUploaderController extends GetxController {
       null,
       onProgress: (value) {
         queueOfUpload[queueIndex].progress = value;
-        queueOfUpload.refresh();
+        _progressOfUpload = value;
-        progressOfUpload.value = value;
       },
     );
 
     queueOfUpload.removeAt(queueIndex);
-    queueOfUpload.refresh();
+    _stopProgressSyncTimer();
+    _syncProgress();
 
     isUploading.value = false;
 
@@ -70,9 +100,10 @@ class AttachmentUploaderController extends GetxController {
     isUploading.value = true;
     progressOfUpload.value = 0;
 
+    _startProgressSyncTimer();
+
     for (var idx = 0; idx < queueOfUpload.length; idx++) {
       queueOfUpload[idx].isUploading = true;
-      queueOfUpload.refresh();
 
       final task = queueOfUpload[idx];
       final result = await _rawUploadAttachment(
@@ -82,20 +113,20 @@ class AttachmentUploaderController extends GetxController {
         null,
         onProgress: (value) {
           queueOfUpload[idx].progress = value;
-          queueOfUpload.refresh();
+          _progressOfUpload = (idx + value) / queueOfUpload.length;
-          progressOfUpload.value = (idx + value) / queueOfUpload.length;
         },
       );
-      progressOfUpload.value = (idx + 1) / queueOfUpload.length;
+      _progressOfUpload = (idx + 1) / queueOfUpload.length;
       onData(result);
 
       queueOfUpload[idx].isUploading = false;
       queueOfUpload[idx].isCompleted = false;
-      queueOfUpload.refresh();
     }
 
     queueOfUpload.clear();
-    queueOfUpload.refresh();
+    _stopProgressSyncTimer();
+    _syncProgress();
+
     isUploading.value = false;
   }
 

lib/screens/posts/post_editor.dart

@@ -8,6 +8,7 @@ import 'package:solian/controllers/post_editor_controller.dart';
 import 'package:solian/exts.dart';
 import 'package:solian/models/post.dart';
 import 'package:solian/models/realm.dart';
+import 'package:solian/providers/attachment_uploader.dart';
 import 'package:solian/providers/auth.dart';
 import 'package:solian/router.dart';
 import 'package:solian/theme.dart';
@@ -56,6 +57,14 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
     if (auth.isAuthorized.isFalse) return;
     if (_editorController.isEmpty) return;
 
+    final AttachmentUploaderController uploader = Get.find();
+    if (uploader.queueOfUpload.any(
+      ((x) => x.usage == 'i.attachment' && x.isUploading),
+    )) {
+      context.showErrorDialog('attachmentUploadInProgress'.tr);
+      return;
+    }
+
     setState(() => _isBusy = true);
 
     final client = auth.configureClient('interactive');
@@ -92,15 +101,16 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
     }
   }
 
-  void cancelAction() {
+  void _cancelAction() {
     _editorController.localClear();
     AppRouter.instance.pop();
   }
 
   Post? get _editTo => _editorController.editTo.value;
+
   Post? get _replyTo => _editorController.replyTo.value;
+
   Post? get _repostTo => _editorController.repostTo.value;
-  Realm? get _realm => _editorController.realmZone.value;
 
   @override
   void initState() {
@@ -114,7 +124,7 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
   Widget build(BuildContext context) {
     final notifyBannerActions = [
       TextButton(
-        onPressed: cancelAction,
+        onPressed: _cancelAction,
         child: Text('cancel'.tr),
       )
     ];

lib/services.dart

@@ -1,7 +1,7 @@
 import 'package:get/get.dart';
 
 abstract class ServiceFinder {
-  static const bool devFlag = false;
+  static const bool devFlag = true;
 
   static const String dealerUrl =
       devFlag ? 'http://localhost:8442' : 'https://api.sn.solsynth.dev';

lib/translations/en_us.dart

@@ -160,6 +160,7 @@ const i18nEnglish = {
   'attachmentAutoUpload': 'Auto Upload',
   'attachmentUploadQueue': 'Upload Queue',
   'attachmentUploadQueueStart': 'Start All',
+  'attachmentUploadInProgress': 'There are attachments being uploaded. Please wait until all attachments have been uploaded before proceeding...',
   'attachmentAttached': 'Exists Files',
   'attachmentUploadBlocked': 'Upload blocked, there is currently a task in progress...',
   'attachmentAdd': 'Attach attachments',

lib/translations/zh_cn.dart

@@ -149,6 +149,7 @@ const i18nSimplifiedChinese = {
   'attachmentAutoUpload': '自动上传',
   'attachmentUploadQueue': '上传队列',
   'attachmentUploadQueueStart': '整队上传',
+  'attachmentUploadInProgress': '有附件正在上传，请等待所有附件上传完毕后再进行操作……',
   'attachmentAttached': '已附附件',
   'attachmentUploadBlocked': '上传受阻，当前已有任务进行中……',
   'attachmentAdd': '附加附件',

lib/widgets/attachments/attachment_editor.dart

@@ -56,12 +56,10 @@ class _AttachmentEditorPopupState extends State<AttachmentEditorPopup> {
     final medias = await _imagePicker.pickMultiImage();
     if (medias.isEmpty) return;
 
-    for (final media in medias) {
+    _enqueueTaskBatch(medias.map((x) {
-      final file = File(media.path);
+      final file = File(x.path);
-      _enqueueTask(
+      return AttachmentUploadTask(file: file, usage: widget.usage);
-        AttachmentUploadTask(file: file, usage: widget.usage),
+    }));
-      );
-    }
   }
 
   Future<void> _pickVideoToUpload() async {
@@ -88,11 +86,9 @@ class _AttachmentEditorPopupState extends State<AttachmentEditorPopup> {
 
     List<File> files = result.paths.map((path) => File(path!)).toList();
 
-    for (final file in files) {
+    _enqueueTaskBatch(files.map((x) {
-      _enqueueTask(
+      return AttachmentUploadTask(file: x, usage: widget.usage);
-        AttachmentUploadTask(file: file, usage: widget.usage),
+    }));
-      );
-    }
   }
 
   Future<void> _takeMediaToUpload(bool isVideo) async {
@@ -159,7 +155,11 @@ class _AttachmentEditorPopupState extends State<AttachmentEditorPopup> {
       _isFirstTimeBusy = false;
       return;
     } else {
-      _attachments = List.filled(widget.initialAttachments.length, null);
+      _attachments = List.filled(
+        widget.initialAttachments.length,
+        null,
+        growable: true,
+      );
     }
 
     setState(() => _isBusy = true);
@@ -239,20 +239,9 @@ class _AttachmentEditorPopupState extends State<AttachmentEditorPopup> {
                             fontFamily: 'monospace',
                           ),
                         ),
-                        FutureBuilder(
+                        Text(
-                          future: element.file.length(),
+                          'In queue #${index + 1}',
-                          builder: (context, snapshot) {
+                          style: const TextStyle(fontSize: 12),
-                            if (!snapshot.hasData) {
-                              return const Text(
-                                '- Bytes',
-                                style: TextStyle(fontSize: 12),
-                              );
-                            }
-                            return Text(
-                              _formatBytes(snapshot.data!),
-                              style: const TextStyle(fontSize: 12),
-                            );
-                          },
                         ),
                       ],
                     ),
@@ -410,6 +399,13 @@ class _AttachmentEditorPopupState extends State<AttachmentEditorPopup> {
     }
   }
 
+  void _enqueueTaskBatch(Iterable<AttachmentUploadTask> tasks) {
+    _uploadController.enqueueTaskBatch(tasks);
+    if (_isAutoUpload) {
+      _startUploading();
+    }
+  }
+
   void _startUploading() {
     _uploadController.performUploadQueue(onData: (r) {
       widget.onAdd(r.id);
@@ -433,11 +429,10 @@ class _AttachmentEditorPopupState extends State<AttachmentEditorPopup> {
       child: DropTarget(
         onDragDone: (detail) async {
           if (_uploadController.isUploading.value) return;
-          for (final file in detail.files) {
+          _enqueueTaskBatch(detail.files.map((x) {
-            _enqueueTask(
+            final file = File(x.path);
-              AttachmentUploadTask(file: File(file.path), usage: widget.usage),
+            return AttachmentUploadTask(file: file, usage: widget.usage);
-            );
+          }));
-          }
         },
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
@@ -455,11 +450,12 @@ class _AttachmentEditorPopupState extends State<AttachmentEditorPopup> {
                       const SizedBox(width: 10),
                       Obx(() {
                         if (_uploadController.isUploading.value) {
-                          return const SizedBox(
+                          return SizedBox(
                             width: 18,
                             height: 18,
                             child: CircularProgressIndicator(
                               strokeWidth: 2.5,
+                              value: _uploadController.progressOfUpload.value,
                             ),
                           );
                         }

lib/widgets/chat/chat_message_input.dart

@@ -5,9 +5,11 @@ import 'package:solian/exts.dart';
 import 'package:solian/models/account.dart';
 import 'package:solian/models/channel.dart';
 import 'package:solian/models/event.dart';
+import 'package:solian/providers/attachment_uploader.dart';
 import 'package:solian/providers/auth.dart';
 import 'package:solian/widgets/attachments/attachment_editor.dart';
 import 'package:solian/widgets/chat/chat_event.dart';
+import 'package:badges/badges.dart' as badges;
 import 'package:uuid/uuid.dart';
 
 class ChatMessageInput extends StatefulWidget {
@@ -80,6 +82,14 @@ class _ChatMessageInputState extends State<ChatMessageInput> {
     final prof = auth.userProfile.value!;
     if (auth.isAuthorized.isFalse) return;
 
+    final AttachmentUploaderController uploader = Get.find();
+    if (uploader.queueOfUpload.any(
+      ((x) => x.usage == 'm.attachment' && x.isUploading),
+    )) {
+      context.showErrorDialog('attachmentUploadInProgress'.tr);
+      return;
+    }
+
     Response resp;
 
     final mentionedUserNames = _findMentionedUsers(_textController.text);
@@ -259,7 +269,18 @@ class _ChatMessageInputState extends State<ChatMessageInput> {
                 ),
               ),
               IconButton(
-                icon: const Icon(Icons.attach_file),
+                icon: badges.Badge(
+                  badgeContent: Text(
+                    _attachments.length.toString(),
+                    style: const TextStyle(color: Colors.white),
+                  ),
+                  showBadge: _attachments.isNotEmpty,
+                  position: badges.BadgePosition.topEnd(
+                    top: -12,
+                    end: -8,
+                  ),
+                  child: const Icon(Icons.file_present_rounded),
+                ),
                 color: Colors.teal,
                 onPressed: () => _editAttachments(),
               ),