Merge pull request #46 from 3nln/feat/preview-url-msg

feat: link preview with matrix api

Author: sud0pacman

lib/pages/chat/events/html_message.dart

@@ -6,7 +6,9 @@ import 'package:fluffychat/widgets/future_loading_dialog.dart';
 import 'package:fluffychat/widgets/mxc_image.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
+import 'package:linkify/linkify.dart' as linkify_lib;
 import 'package:highlight/highlight.dart' show highlight;
 import 'package:html/dom.dart' as dom;
 import 'package:html/parser.dart' as parser;
@@ -137,9 +139,8 @@ class HtmlMessage extends StatelessWidget {
       // Single linebreak nodes between Elements are ignored:
       if (text == '\n') text = '';
 
-      return LinkifySpan(
+      return _OriginTextLinkifySpan(
         text: text,
-        options: const LinkifyOptions(humanize: false),
         linkStyle: linkStyle,
         onOpen: onOpen,
       );
@@ -493,3 +494,41 @@ extension on String {
 extension on dom.Element {
   dom.Element get rootElement => parent?.rootElement ?? this;
 }
+
+class _OriginTextLinkifySpan extends TextSpan {
+  _OriginTextLinkifySpan({
+    required String text,
+    TextStyle? linkStyle,
+    void Function(LinkableElement)? onOpen,
+  }) : super(
+          children: _build(text, linkStyle, onOpen),
+        );
+
+  static List<InlineSpan> _build(
+    String text,
+    TextStyle? linkStyle,
+    void Function(LinkableElement)? onOpen,
+  ) {
+    final elements = linkify_lib.linkify(
+      text,
+      options: const LinkifyOptions(
+        humanize: false,
+        looseUrl: true,
+        defaultToHttps: true,
+      ),
+    );
+    return [
+      for (final element in elements)
+        if (element is LinkableElement)
+          TextSpan(
+            text: element.originText,
+            style: linkStyle,
+            recognizer: onOpen != null
+                ? (TapGestureRecognizer()..onTap = () => onOpen(element))
+                : null,
+          )
+        else
+          TextSpan(text: element.text),
+    ];
+  }
+}

lib/pages/chat/events/message_content.dart

@@ -20,13 +20,15 @@ import '../../../config/app_config.dart';
 import '../../../utils/event_checkbox_extension.dart';
 import '../../../utils/platform_infos.dart';
 import '../../../utils/url_launcher.dart';
+import '../../../utils/url_preview_service.dart';
 import 'audio_player.dart';
 import 'call_notify_event.dart';
 import 'cute_events.dart';
 import 'html_message.dart';
 import 'image_bubble.dart';
 import 'map_bubble.dart';
 import 'message_download_content.dart';
+import 'url_preview.dart';
 
 class MessageContent extends StatelessWidget {
   final Event event;
@@ -285,51 +287,66 @@ class MessageContent extends StatelessWidget {
             final bigEmotes =
                 !event.isRichMessage && bigEmojis.contains(event.body);
 
+            final urls = UrlPreviewService.extractUrls(event.body);
+
             return Padding(
               padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-              child: Stack(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
                 children: [
-                  HtmlMessage(
-                    html: html,
-                    textColor: textColor,
-                    room: event.room,
-                    fontSize: AppSettings.fontSizeFactor.value * AppConfig.messageFontSize * (bigEmotes ? 5 : 1),
-                    limitHeight: !selected,
-                    linkStyle: TextStyle(
-                      color: linkColor,
-                      fontSize: AppSettings.fontSizeFactor.value * AppConfig.messageFontSize,
-                      decoration: TextDecoration.underline,
-                      decorationColor: linkColor,
-                    ),
-                    onOpen: (url) => UrlLauncher(context, url.url).launchUrl(),
-                    eventId: event.eventId,
-                    checkboxCheckedEvents: event.aggregatedEvents(
-                      timeline,
-                      EventCheckboxRoomExtension.relationshipType,
-                    ),
-                    trailingWidget: SizedBox(
-                      width: isReplied
-                          ? double.infinity
-                          : messageStatus == null
-                          ? 46
-                          : 60,
-                      height: 14,
-                    ),
-                  ),
+                  Stack(
+                    children: [
+                      HtmlMessage(
+                        html: html,
+                        textColor: textColor,
+                        room: event.room,
+                        fontSize: AppSettings.fontSizeFactor.value * AppConfig.messageFontSize * (bigEmotes ? 5 : 1),
+                        limitHeight: !selected,
+                        linkStyle: TextStyle(
+                          color: linkColor,
+                          fontSize: AppSettings.fontSizeFactor.value * AppConfig.messageFontSize,
+                          decoration: TextDecoration.underline,
+                          decorationColor: linkColor,
+                        ),
+                        onOpen: (url) => UrlLauncher(context, url.url).launchUrl(),
+                        eventId: event.eventId,
+                        checkboxCheckedEvents: event.aggregatedEvents(
+                          timeline,
+                          EventCheckboxRoomExtension.relationshipType,
+                        ),
+                        trailingWidget: SizedBox(
+                          width: isReplied
+                              ? double.infinity
+                              : messageStatus == null
+                              ? 46
+                              : 60,
+                          height: 14,
+                        ),
+                      ),
 
-                  // Time - always in the lower right corner
-                  Positioned(
-                    right: 0,
-                    bottom: 0,
-                    child: Row(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        Text(formattedTime, style: TextStyle(color: textColor, fontSize: 12)),
-                        if (messageStatus != null) const SizedBox(width: 3),
-                        if (messageStatus != null) MessageStatusWidget(status: messageStatus, iconColor: textColor),
-                      ],
-                    ),
+                      // Time - always in the lower right corner
+                      Positioned(
+                        right: 0,
+                        bottom: 0,
+                        child: Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            Text(formattedTime, style: TextStyle(color: textColor, fontSize: 12)),
+                            if (messageStatus != null) const SizedBox(width: 3),
+                            if (messageStatus != null) MessageStatusWidget(status: messageStatus, iconColor: textColor),
+                          ],
+                        ),
+                      ),
+                    ],
                   ),
+                  if (urls.isNotEmpty)
+                    UrlPreviewWidget(
+                      key: ValueKey('preview_${event.eventId}_${urls.first}'),
+                      url: urls.first,
+                      textColor: textColor,
+                      linkColor: linkColor,
+                    ),
                 ],
               ),
             );