Merge branch 'develop' into ISSUE-1456/SendingMessageIndicatorFix

packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart

@@ -2,6 +2,7 @@ import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/src/message_widget/reactions/reaction_bubble.dart';
+import 'package:stream_chat_flutter/src/message_widget/reactions/reactions_align.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// {@template streamMessageReactionsModal}
@@ -39,35 +40,13 @@ class StreamMessageReactionsModal extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final size = MediaQuery.of(context).size;
     final user = StreamChat.of(context).currentUser;
     final _userPermissions = StreamChannel.of(context).channel.ownCapabilities;
+    final orientation = MediaQuery.of(context).orientation;
 
     final hasReactionPermission =
         _userPermissions.contains(PermissionType.sendReaction);
-
-    final roughMaxSize = size.width * 2 / 3;
-    var messageTextLength = message.text!.length;
-    if (message.quotedMessage != null) {
-      var quotedMessageLength = message.quotedMessage!.text!.length + 40;
-      if (message.quotedMessage!.attachments.isNotEmpty) {
-        quotedMessageLength += 40;
-      }
-      if (quotedMessageLength > messageTextLength) {
-        messageTextLength = quotedMessageLength;
-      }
-    }
-    final roughSentenceSize = messageTextLength *
-        (messageTheme.messageTextStyle?.fontSize ?? 1) *
-        1.2;
-    final divFactor = message.attachments.isNotEmpty
-        ? 1
-        : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
-
-    final numberOfReactions =
-        StreamChatConfiguration.of(context).reactionIcons.length;
-    final shiftFactor =
-        numberOfReactions < 5 ? (5 - numberOfReactions) * 0.1 : 0.0;
+    final fontSize = messageTheme.messageTextStyle?.fontSize;
 
     final child = Center(
       child: SingleChildScrollView(
@@ -79,22 +58,26 @@ class StreamMessageReactionsModal extends StatelessWidget {
             children: <Widget>[
               if ((showReactions ?? hasReactionPermission) &&
                   (message.status == MessageSendingStatus.sent))
-                Align(
-                  alignment: Alignment(
-                    user!.id == message.user!.id
-                        ? (divFactor >= 1.0
-                            ? -0.2 - shiftFactor
-                            : (1.2 - divFactor))
-                        : (divFactor >= 1.0
-                            ? shiftFactor + 0.2
-                            : -(1.2 - divFactor)),
-                    0,
-                  ),
-                  child: StreamReactionPicker(
-                    message: message,
-                  ),
+                LayoutBuilder(
+                  builder: (context, constraints) {
+                    return Align(
+                      alignment: Alignment(
+                        calculateReactionsHorizontalAlignment(
+                          user,
+                          message,
+                          constraints,
+                          fontSize,
+                          orientation,
+                        ),
+                        0,
+                      ),
+                      child: StreamReactionPicker(
+                        message: message,
+                      ),
+                    );
+                  },
                 ),
-              const SizedBox(height: 8),
+              const SizedBox(height: 10),
               IgnorePointer(
                 child: messageWidget,
               ),

packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+
+/// This method calculates the align that the modal of reactions should have.
+/// This is an approximation based on the size of the message and the
+/// available space in the screen.
+double calculateReactionsHorizontalAlignment(
+  User? user,
+  Message message,
+  BoxConstraints constraints,
+  double? fontSize,
+  Orientation orientation,
+) {
+  final maxWidth = constraints.maxWidth;
+
+  final roughSentenceSize = message.roughMessageSize(fontSize);
+  final hasAttachments = message.attachments.isNotEmpty;
+  final isReply = message.quotedMessageId != null;
+  final isAttachment = hasAttachments && !isReply;
+
+  // divFactor is the percentage of the available space that the message takes.
+  // When the divFactor is bigger than 0.5 that means that the messages is
+  // bigger than 50% of the available space and the modal should have an offset
+  // in the direction that the message grows. When the divFactor is smaller
+  // than 0.5 then the offset should be to he side opposite of the message
+  // growth.
+  // In resume, when divFactor > 0.5 then result > 0, when divFactor < 0.5
+  // then result < 0.
+  var divFactor = 0.5;
+
+  // When in portrait, attachments normally take 75% of the screen, when in
+  // landscape, attachments normally take 50% of the screen.
+  if (isAttachment) {
+    if (orientation == Orientation.portrait) {
+      divFactor = 0.75;
+    } else {
+      divFactor = 0.5;
+    }
+  } else {
+    divFactor = roughSentenceSize == 0 ? 0.5 : (roughSentenceSize / maxWidth);
+  }
+
+  final signal = user?.id == message.user?.id ? 1 : -1;
+  final result = signal * (1 - divFactor * 2.0);
+
+  return _capResult(result);
+}
+
+// Ensure reactions don't get pushed past the edge of the screen.
+//
+// This happens if divFactor is really big. When this happens, we can simply
+// move the model all the way to the end of screen.
+double _capResult(double result) {
+  if (result > 1.0) {
+    return 1;
+  } else if (result < -1.0) {
+    return -1;
+  } else {
+    return result;
+  }
+}