Work on image uploading

Issue #82

src/components/messages/ContactInvited.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- Contact invited to the chat -->
   <div class="messageJoin">
-    {{ stateEventDisplayName(event) }} was invited to the chat...
+    {{ event.getContent().displayname || stateEventDisplayName(event) }} was invited to the chat...
   </div>
 </template>
 

src/components/messages/MessageIncomingImage.vue

@@ -34,7 +34,7 @@ export default {
     return {
       src: null,
       cover: true,
-      contain: false
+      contain: false,
     };
   },
   mounted() {

src/components/messages/MessageOutgoingImage.vue

@@ -6,7 +6,7 @@
       >
     </div>
     <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>
     <v-avatar class="avatar" size="32" color="#ededed" @click.stop="ownAvatarClicked">
@@ -32,6 +32,8 @@ export default {
   data() {
     return {
       src: null,
+      cover: true,
+      contain: false,
     };
   },
   mounted() {
@@ -40,6 +42,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) => {