feat: add animated emoji support

- implement animated emoji support in both HTML and Linkify message type
- fix some missing font glyphs
- trim message input

Signed-off-by: The one with the braid <[email protected]>

assets/l10n/intl_en.arb

@@ -2484,6 +2484,8 @@
             "oldDisplayName": {}
         }
     },
+    "autoplayAnimations": "Automatically play animations",
+    "defaultEmojiTone": "Default emoji tone",
     "newSpaceDescription": "Spaces allows you to consolidate your chats and build private or public communities.",
     "encryptThisChat": "Encrypt this chat",
     "endToEndEncryption": "End to end encryption",

lib/config/app_config.dart

@@ -43,7 +43,7 @@ abstract class AppConfig {
   static bool hideUnknownEvents = true;
   static bool hideUnimportantStateEvents = true;
   static bool separateChatTypes = false;
-  static bool autoplayImages = true;
+  static bool autoplayImages = false;
   static bool sendTypingNotifications = true;
   static bool sendOnEnter = false;
   static bool experimentalVoip = false;
@@ -60,7 +60,7 @@ abstract class AppConfig {
   static const String pushNotificationsGatewayUrl =
       'https://push.fluffychat.im/_matrix/push/v1/notify';
   static const String pushNotificationsPusherFormat = 'event_id_only';
-  static const String emojiFontName = 'Noto Emoji';
+  static const String emojiFontName = 'Noto Color Emoji';
   static const String emojiFontUrl =
       'https://github.com/googlefonts/noto-emoji/';
   static const double borderRadius = 16.0;

lib/config/themes.dart

@@ -20,7 +20,7 @@ abstract class FluffyThemes {
 
   static const fallbackTextStyle = TextStyle(
     fontFamily: 'Roboto',
-    fontFamilyFallback: ['NotoEmoji'],
+    fontFamilyFallback: [AppConfig.emojiFontName],
   );
 
   static var fallbackTextTheme = const TextTheme(

lib/pages/bootstrap/bootstrap_dialog.dart

@@ -131,7 +131,7 @@ class BootstrapDialogState extends State<BootstrapDialog> {
                   minLines: 2,
                   maxLines: 4,
                   readOnly: true,
-                  style: const TextStyle(fontFamily: 'RobotoMono'),
+                  style: const TextStyle(fontFamily: 'Roboto Mono'),
                   controller: TextEditingController(text: key),
                   decoration: const InputDecoration(
                     contentPadding: EdgeInsets.all(16),
@@ -256,7 +256,7 @@ class BootstrapDialogState extends State<BootstrapDialog> {
                           ? null
                           : [AutofillHints.password],
                       controller: _recoveryKeyTextEditingController,
-                      style: const TextStyle(fontFamily: 'RobotoMono'),
+                      style: const TextStyle(fontFamily: 'Roboto Mono'),
                       decoration: InputDecoration(
                         contentPadding: const EdgeInsets.all(16),
                         hintStyle: TextStyle(

lib/pages/chat/chat.dart

@@ -187,8 +187,6 @@ class ChatController extends State<ChatPageWithRoom> {
 
   final int _loadHistoryCount = 100;
 
-  String inputText = '';
-
   String pendingText = '';
 
   bool showEmojiPicker = false;
@@ -295,7 +293,6 @@ class ChatController extends State<ChatPageWithRoom> {
     final draft = prefs.getString('draft_$roomId');
     if (draft != null && draft.isNotEmpty) {
       sendController.text = draft;
-      setState(() => inputText = draft);
     }
   }
 
@@ -472,18 +469,18 @@ class ChatController extends State<ChatPageWithRoom> {
 
     // ignore: unawaited_futures
     room.sendTextEvent(
-      sendController.text,
+      sendController.text.trim(),
       inReplyTo: replyEvent,
       editEventId: editEvent?.eventId,
       parseCommands: parseCommands,
     );
+    // TextEditingValue required due to potential selection present
     sendController.value = TextEditingValue(
       text: pendingText,
       selection: const TextSelection.collapsed(offset: 0),
     );
 
     setState(() {
-      inputText = pendingText;
       replyEvent = null;
       editEvent = null;
       pendingText = '';
@@ -1051,7 +1048,7 @@ class ChatController extends State<ChatPageWithRoom> {
     setState(() {
       pendingText = sendController.text;
       editEvent = selectedEvents.first;
-      inputText = sendController.text =
+      sendController.text =
           editEvent!.getDisplayEvent(timeline!).calcLocalizedBodyFallback(
                 MatrixLocals(L10n.of(context)!),
                 withSenderNamePrefix: false,
@@ -1206,10 +1203,9 @@ class ChatController extends State<ChatPageWithRoom> {
         if ((prefix.isNotEmpty) &&
             text.toLowerCase() == '${prefix.toLowerCase()} ') {
           setSendingClient(client);
-          setState(() {
-            inputText = '';
-            sendController.text = '';
-          });
+
+          sendController.text = '';
+
           return;
         }
       }
@@ -1233,7 +1229,6 @@ class ChatController extends State<ChatPageWithRoom> {
         );
       }
     }
-    setState(() => inputText = text);
   }
 
   bool get isArchived =>
@@ -1302,7 +1297,7 @@ class ChatController extends State<ChatPageWithRoom> {
 
   void cancelReplyEventAction() => setState(() {
         if (editEvent != null) {
-          inputText = sendController.text = pendingText;
+          sendController.text = pendingText;
           pendingText = '';
         }
         replyEvent = null;

lib/pages/chat/chat_input_row.dart

@@ -105,7 +105,7 @@ class ChatInputRow extends StatelessWidget {
                   duration: FluffyThemes.animationDuration,
                   curve: FluffyThemes.animationCurve,
                   height: 56,
-                  width: controller.inputText.isEmpty ? 56 : 0,
+                  width: controller.sendController.text.isEmpty ? 56 : 0,
                   alignment: Alignment.center,
                   clipBehavior: Clip.hardEdge,
                   decoration: const BoxDecoration(),
@@ -268,7 +268,7 @@ class ChatInputRow extends StatelessWidget {
                 ),
               ),
               if (PlatformInfos.platformCanRecord &&
-                  controller.inputText.isEmpty)
+                  controller.sendController.text.isEmpty)
                 Container(
                   height: 56,
                   alignment: Alignment.center,
@@ -278,7 +278,8 @@ class ChatInputRow extends StatelessWidget {
                     onPressed: controller.voiceMessageAction,
                   ),
                 ),
-              if (!PlatformInfos.isMobile || controller.inputText.isNotEmpty)
+              if (!PlatformInfos.isMobile ||
+                  controller.sendController.text.isNotEmpty)
                 Container(
                   height: 56,
                   alignment: Alignment.center,

lib/pages/chat/events/cute_events.dart

@@ -1,34 +1,43 @@
 import 'dart:math';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:matrix/matrix.dart';
 
-import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/pages/settings_chat/settings_chat.dart';
+import 'package:fluffychat/widgets/animated_emoji_plain_text.dart';
+import 'package:fluffychat/widgets/matrix.dart';
 
 class CuteContent extends StatefulWidget {
   final Event event;
+  final Color color;
 
-  const CuteContent(this.event, {super.key});
+  const CuteContent(
+    this.event, {
+    super.key,
+    required this.color,
+  });
 
   @override
   State<CuteContent> createState() => _CuteContentState();
 }
 
 class _CuteContentState extends State<CuteContent> {
   static bool _isOverlayShown = false;
-
-  @override
-  void initState() {
-    if (AppConfig.autoplayImages && !_isOverlayShown) {
-      addOverlay();
-    }
-    super.initState();
-  }
+  bool initialized = false;
 
   @override
   Widget build(BuildContext context) {
+    if (initialized == false) {
+      initialized = true;
+
+      if (Matrix.of(context).client.autoplayAnimatedContent ??
+          !kIsWeb && !_isOverlayShown) {
+        addOverlay();
+      }
+    }
     return FutureBuilder<User?>(
       future: widget.event.fetchSenderUser(),
       builder: (context, snapshot) {
@@ -40,9 +49,10 @@ class _CuteContentState extends State<CuteContent> {
             mainAxisSize: MainAxisSize.min,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              Text(
+              TextLinkifyEmojify(
                 widget.event.text,
-                style: const TextStyle(fontSize: 150),
+                fontSize: 150,
+                textColor: widget.color,
               ),
               if (label != null) Text(label),
             ],
@@ -183,11 +193,14 @@ class _CuteOverlayContent extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox.square(
-      dimension: size,
-      child: Text(
-        emoji,
-        style: const TextStyle(fontSize: 48),
+    return SizedOverflowBox(
+      size: const Size.square(size),
+      child: ClipRect(
+        clipBehavior: Clip.hardEdge,
+        child: Text(
+          emoji,
+          style: const TextStyle(fontSize: 56),
+        ),
       ),
     );
   }