Merge branch 'soru/sticker-text' into 'main'

feat: Tapping on stickers shows the sticker body

See merge request famedly/fluffychat!456

lib/widgets/event_content/image_bubble.dart

@@ -24,6 +24,7 @@ class ImageBubble extends StatefulWidget {
   final double width;
   final double height;
   final void Function() onLoaded;
+  final void Function() onTap;
 
   const ImageBubble(
     this.event, {
@@ -36,6 +37,7 @@ class ImageBubble extends StatefulWidget {
     this.onLoaded,
     this.width = 400,
     this.height = 300,
+    this.onTap,
     Key key,
   }) : super(key: key);
 
@@ -386,6 +388,10 @@ class _ImageBubbleState extends State<ImageBubble> {
   }
 
   void onTap(BuildContext context) {
+    if (widget.onTap != null) {
+      widget.onTap();
+      return;
+    }
     if (!widget.tapToView) return;
     showDialog(
       context: Matrix.of(context).navigatorContext,

lib/widgets/event_content/message_content.dart

@@ -6,6 +6,7 @@ import 'package:fluffychat/widgets/event_content/image_bubble.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions.dart/event_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions.dart/matrix_locals.dart';
 import 'package:fluffychat/pages/key_verification_dialog.dart';
+import 'package:adaptive_dialog/adaptive_dialog.dart';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -76,32 +77,40 @@ class MessageContent extends StatelessWidget {
       case EventTypes.Sticker:
         switch (event.messageType) {
           case MessageTypes.Image:
+            if (event.showThumbnail) {
+              return ImageBubble(
+                event,
+                width: 400,
+                height: 300,
+                fit: BoxFit.cover,
+              );
+            }
+            return MessageDownloadContent(event, textColor);
           case MessageTypes.Sticker:
             if (event.showThumbnail) {
-              // normal images should have a ratio of 4:3
+              // stickers should default to a ratio of 1:1
-              var ratio = 4.0 / 3.0;
+              var ratio = 1.0;
-              if (event.messageType == MessageTypes.Sticker) {
+              // if a width and a height is specified for stickers, use those!
-                // stickers should default to a ratio of 1:1
+              if (event.infoMap['w'] is int && event.infoMap['h'] is int) {
-                ratio = 1.0;
+                ratio = event.infoMap['w'] / event.infoMap['h'];
-                // if a width and a height is specified for stickers, use those!
+                // make sure the ratio is within 0.9 - 2.0
-                if (event.infoMap['w'] is int && event.infoMap['h'] is int) {
+                if (ratio > 2.0) {
-                  ratio = event.infoMap['w'] / event.infoMap['h'];
+                  ratio = 2.0;
-                  // make sure the ratio is within 0.9 - 2.0
+                }
-                  if (ratio > 2.0) {
+                if (ratio < 0.9) {
-                    ratio = 2.0;
+                  ratio = 0.9;
-                  }
-                  if (ratio < 0.9) {
-                    ratio = 0.9;
-                  }
                 }
               }
               return ImageBubble(
                 event,
                 width: 400,
                 height: 400 / ratio,
-                fit: event.messageType == MessageTypes.Sticker && ratio <= 1.0
+                fit: ratio <= 1.0 ? BoxFit.contain : BoxFit.cover,
-                    ? BoxFit.contain
+                onTap: () => showOkAlertDialog(
-                    : BoxFit.cover,
+                  context: context,
+                  message: event.body,
+                  okLabel: L10n.of(context).ok,
+                ),
               );
             }
             return MessageDownloadContent(event, textColor);