From 2104793ecd59a7877996d7cac606bcd3a5579486 Mon Sep 17 00:00:00 2001
From: krille-chan <krille-chan@posteo.de>
Date: Sun, 17 Mar 2024 19:42:34 +0100
Subject: [PATCH] design: Display images in correct ratio in timeline

---
 lib/pages/chat/events/image_bubble.dart    | 10 +++++-----
 lib/pages/chat/events/message_content.dart | 17 ++++++++++++++---
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/lib/pages/chat/events/image_bubble.dart b/lib/pages/chat/events/image_bubble.dart
index 5dc4f2872..39a94763c 100644
--- a/lib/pages/chat/events/image_bubble.dart
+++ b/lib/pages/chat/events/image_bubble.dart
@@ -15,8 +15,8 @@ class ImageBubble extends StatelessWidget {
   final Color? backgroundColor;
   final bool thumbnailOnly;
   final bool animated;
-  final double width;
-  final double height;
+  final double? width;
+  final double? height;
   final void Function()? onTap;
   final BorderRadius? borderRadius;
 
@@ -25,7 +25,7 @@ class ImageBubble extends StatelessWidget {
     this.tapToView = true,
     this.maxSize = true,
     this.backgroundColor,
-    this.fit = BoxFit.cover,
+    this.fit = BoxFit.contain,
     this.thumbnailOnly = true,
     this.width = 400,
     this.height = 300,
@@ -98,8 +98,8 @@ class ImageBubble extends StatelessWidget {
           child: ConstrainedBox(
             constraints: maxSize
                 ? BoxConstraints(
-                    maxWidth: width,
-                    maxHeight: height,
+                    maxWidth: width ?? double.infinity,
+                    maxHeight: height ?? double.infinity,
                   )
                 : const BoxConstraints.expand(),
             child: MxcImage(
diff --git a/lib/pages/chat/events/message_content.dart b/lib/pages/chat/events/message_content.dart
index c3742efcb..8425ee35b 100644
--- a/lib/pages/chat/events/message_content.dart
+++ b/lib/pages/chat/events/message_content.dart
@@ -106,11 +106,22 @@ class MessageContent extends StatelessWidget {
       case EventTypes.Sticker:
         switch (event.messageType) {
           case MessageTypes.Image:
+            const width = 200;
+            const ratio = 2.0;
+            final w = event.content
+                    .tryGetMap<String, Object?>('info')
+                    ?.tryGet<int>('w') ??
+                width;
+            final h = event.content
+                    .tryGetMap<String, Object?>('info')
+                    ?.tryGet<int>('h') ??
+                width;
+            final overRatio = h > w * ratio;
             return ImageBubble(
               event,
-              width: 400,
-              height: 300,
-              fit: BoxFit.cover,
+              height: overRatio ? width * ratio : null,
+              width: width.toDouble(),
+              fit: overRatio ? BoxFit.cover : BoxFit.contain,
               borderRadius: borderRadius,
             );
           case MessageTypes.Sticker: