Work on image uploading

Issue #82

src/components/Chat.vue

@@ -868,7 +868,7 @@ export default {
 
     sendAttachment() {
       if (this.currentImageInputPath) {
-        this.currentSendProgress = 0;
+        this.currentSendProgress = null;
         this.currentSendOperation = util.sendImage(
           this.$matrix.matrixClient,
           this.roomId,
@@ -879,12 +879,12 @@ export default {
           .then(() => {
             this.currentSendOperation = null;
             this.currentImageInput = null;
-            this.currentSendProgress = 0;
+            this.currentSendProgress = null;
           })
           .catch((err) => {
             this.currentSendError = err.toLocaleString();
             this.currentSendOperation = null;
-            this.currentSendProgress = 0;
+            this.currentSendProgress = null;
           });
       }
     },
@@ -895,7 +895,7 @@ export default {
       }
       this.currentSendOperation = null;
       this.currentImageInput = null;
-      this.currentSendProgress = 0;
+      this.currentSendProgress = null;
       this.currentSendError = null;
     },
 

src/components/Join.vue

@@ -215,7 +215,7 @@ export default {
     },
 
     userAvatarLetter() {
-      if (!this.currentUser) {
+      if (!this.currentUser || !this.currentUser.userId) {
         return null;
       }
       return (this.userDisplayName || this.currentUser.userId.substring(1)).substring(0, 1).toUpperCase();

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) => {

src/plugins/utils.js

@@ -276,7 +276,7 @@ class Util {
 
                 const jwk = {
                     kty: 'oct',
-                    key_opts: ['encrypt', 'decrypt'],
+                    key_ops: ['encrypt', 'decrypt'],
                     alg: 'A256CTR',
                     k: base64Url.encode(key),
                     ext: true