fix: properly scale emote-only messages with custom emotes

Signed-off-by: The one with the braid <[email protected]>
krille-chan · Nov 30, 2023 · 50e77a6 · 50e77a6
1 parent bac4dd2
commit 50e77a6
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 10 deletions.
diff --git a/lib/pages/chat/events/html_message.dart b/lib/pages/chat/events/html_message.dart
@@ -1,4 +1,4 @@
-import 'package:flutter/material.dart';
+import 'package:flutter/material.dart' hide Element;
 
 import 'package:collection/collection.dart';
 import 'package:flutter_highlighter/flutter_highlighter.dart';
@@ -18,12 +18,14 @@ class HtmlMessage extends StatelessWidget {
   final String html;
   final Room room;
   final Color textColor;
+  final bool isEmojiOnly;
 
   const HtmlMessage({
     super.key,
     required this.html,
     required this.room,
     this.textColor = Colors.black,
+    this.isEmojiOnly = false,
   });
 
   @override
@@ -44,7 +46,9 @@ class HtmlMessage extends StatelessWidget {
       '',
     );
 
-    final fontSize = AppConfig.messageFontSize * AppConfig.fontSizeFactor;
+    double fontSize = AppConfig.messageFontSize * AppConfig.fontSizeFactor;
+
+    if (isEmojiOnly) fontSize *= 3;
 
     final linkifiedRenderHtml = linkify(
       renderHtml,
@@ -138,7 +142,7 @@ class HtmlMessage extends StatelessWidget {
           ),
           const TableHtmlExtension(),
           SpoilerExtension(textColor: textColor),
-          const ImageExtension(),
+          ImageExtension(isEmojiOnly: isEmojiOnly),
           FontColorExtension(),
         ],
         onLinkTap: (url, _, element) => UrlLauncher(
@@ -254,8 +258,12 @@ class FontColorExtension extends HtmlExtension {
 
 class ImageExtension extends HtmlExtension {
   final double defaultDimension;
+  final bool isEmojiOnly;
 
-  const ImageExtension({this.defaultDimension = 64});
+  const ImageExtension({
+    this.defaultDimension = 64,
+    this.isEmojiOnly = false,
+  });
 
   @override
   Set<String> get supportedTags => {'img'};
@@ -267,9 +275,23 @@ class ImageExtension extends HtmlExtension {
       return TextSpan(text: context.attributes['alt']);
     }
 
-    final width = double.tryParse(context.attributes['width'] ?? '');
-    final height = double.tryParse(context.attributes['height'] ?? '');
-
+    double? width, height;
+
+    // in case it's an emoji only message or a custom emoji image,
+    // force the default font size
+    if (isEmojiOnly) {
+      width = height =
+          AppConfig.messageFontSize * AppConfig.fontSizeFactor * 3 * 1.2;
+    } else if (context.attributes.containsKey('data-mx-emoticon') ||
+        context.attributes.containsKey('data-mx-emoji')) {
+      // in case the image is a custom emote, get the surrounding font size
+      width = height = (tryGetParentFontSize(context) ??
+              FontSize(AppConfig.messageFontSize * AppConfig.fontSizeFactor))
+          .emValue;
+    } else {
+      width = double.tryParse(context.attributes['width'] ?? '');
+      height = double.tryParse(context.attributes['height'] ?? '');
+    }
     return WidgetSpan(
       child: SizedBox(
         width: width ?? height ?? defaultDimension,
@@ -330,6 +352,7 @@ class MatrixMathExtension extends HtmlExtension {
   final TextStyle? style;
 
   MatrixMathExtension({this.style});
+
   @override
   Set<String> get supportedTags => {'div'};
 
@@ -363,6 +386,7 @@ class CodeExtension extends HtmlExtension {
   final double fontSize;
 
   CodeExtension({required this.fontSize});
+
   @override
   Set<String> get supportedTags => {'code'};
 
@@ -400,6 +424,7 @@ class RoomPillExtension extends HtmlExtension {
   final BuildContext context;
 
   RoomPillExtension(this.context, this.room);
+
   @override
   Set<String> get supportedTags => {'a'};
 
@@ -511,3 +536,15 @@ class MatrixPill extends StatelessWidget {
     );
   }
 }
+
+FontSize? tryGetParentFontSize(ExtensionContext context) {
+  var currentElement = context.element;
+  while (currentElement?.parent != null) {
+    currentElement = currentElement?.parent;
+    final size = context.parser.style[(currentElement!.localName!)]?.fontSize;
+    if (size != null) {
+      return size;
+    }
+  }
+  return null;
+}
diff --git a/lib/pages/chat/events/message_content.dart b/lib/pages/chat/events/message_content.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 
+import 'package:emojis/emoji.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:matrix/matrix.dart';
@@ -104,6 +105,13 @@ class MessageContent extends StatelessWidget {
   Widget build(BuildContext context) {
     final fontSize = AppConfig.messageFontSize * AppConfig.fontSizeFactor;
     final buttonTextColor = textColor;
+
+    final bigEmotes = (event.onlyEmotes ||
+            emojiRegex.allMatches(event.text).map((e) => e[0]).join() ==
+                event.text) &&
+        event.numberEmotes > 0 &&
+        event.numberEmotes <= 10;
+
     switch (event.type) {
       case EventTypes.Message:
       case EventTypes.Encrypted:
@@ -158,6 +166,7 @@ class MessageContent extends StatelessWidget {
                 html: html,
                 textColor: textColor,
                 room: event.room,
+                isEmojiOnly: bigEmotes,
               );
             }
             // else we fall through to the normal message rendering
@@ -233,9 +242,6 @@ class MessageContent extends StatelessWidget {
                 },
               );
             }
-            final bigEmotes = event.onlyEmotes &&
-                event.numberEmotes > 0 &&
-                event.numberEmotes <= 10;
             return FutureBuilder<String>(
               future: event.calcLocalizedBody(
                 MatrixLocals(L10n.of(context)!),