From b7eaaea8e03f2740b29d06fa59228b5fa0f36458 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Thu, 4 Mar 2021 17:38:07 +0100
Subject: [PATCH] Don't crop GIF and PNG

Work on issue #57
---
 src/components/messages/MessageIncomingImage.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/messages/MessageIncomingImage.vue b/src/components/messages/MessageIncomingImage.vue
index fb7e56c..b0ebd7e 100644
--- a/src/components/messages/MessageIncomingImage.vue
+++ b/src/components/messages/MessageIncomingImage.vue
@@ -7,7 +7,7 @@
       }}</span>
     </v-avatar>
     <div class="bubble image-bubble">
-      <v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
+      <v-img :aspect-ratio="16 / 9" ref="image" :src="src" :cover="cover" :contain="contain" />
       <QuickReactions :event="event" :reactions="reactions" />
     </div>
     <div class="op-button" ref="opbutton">
@@ -33,6 +33,8 @@ export default {
   data() {
     return {
       src: null,
+      cover: true,
+      contain: false
     };
   },
   mounted() {
@@ -42,6 +44,16 @@ export default {
     util
       .getThumbnail(this.$matrix.matrixClient, this.event, width, height)
       .then((url) => {
+        const info = this.event.getContent().info;
+        // JPEGs use cover, PNG and GIF ect contain. This is because PNG and GIF are expected to
+        // be stickers and small emoji type things.
+        if (info && info.mimetype && info.mimetype.startsWith("image/jp")) {
+          this.cover = true;
+          this.contain = false;
+        } else {
+          this.cover = false;
+          this.contain = true;
+        }
         this.src = url;
       })
       .catch((err) => {