From 50ae081ea80c27347c5c3a880cf7f845f9a92c65 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Tue, 12 Jan 2021 09:25:39 +0100
Subject: [PATCH] Download option for attachments

Issue #11
---
 src/components/Chat.vue                       | 16 ++++++++++++++++
 src/components/messages/MessageOperations.vue | 11 +++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 9511c34..b28a78e 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -16,6 +16,7 @@
               v-on:addreaction="addReaction"
               v-on:addreply="addReply(selectedEvent)"
               v-on:edit="edit(selectedEvent)"
+              v-on:download="download(selectedEvent)"
               :event="selectedEvent"
               :incoming="selectedEvent.getSender() != $matrix.currentUserId"
             />
@@ -730,6 +731,21 @@ export default {
       this.$refs.messageInput.focus();
     },
 
+    download(event) {
+      util
+        .getAttachment(this.$matrix.matrixClient, event)
+        .then((url) => {
+          const link = document.createElement("a");
+          link.href = url;
+          link.download = event.getContent().body || "Download";
+          link.click();
+          URL.revokeObjectURL(url);
+        })
+        .catch((err) => {
+          console.log("Failed to fetch attachment: ", err);
+        });
+    },
+
     cancelEditReply() {
       this.currentInput = "";
       this.editedEvent = null;
diff --git a/src/components/messages/MessageOperations.vue b/src/components/messages/MessageOperations.vue
index 2daa893..d16477d 100644
--- a/src/components/messages/MessageOperations.vue
+++ b/src/components/messages/MessageOperations.vue
@@ -9,6 +9,9 @@
     <v-btn v-if="isEditable" icon @click.stop="edit" class="ma-0 pa-0">
       <v-icon>edit</v-icon>
     </v-btn>
+    <v-btn v-if="isDownloadable" icon @click.stop="download" class="ma-0 pa-0">
+      <v-icon>get_app</v-icon>
+    </v-btn>
   </div>
 </template>
 
@@ -36,6 +39,10 @@ export default {
   computed: {
     isEditable() {
       return !this.incoming && this.event.getContent().msgtype == "m.text";
+    },
+    isDownloadable() {
+      const msgtype = this.event.getContent().msgtype;
+      return ['m.video','m.audio','m.image','m.file'].includes(msgtype);
     }
   },
 
@@ -51,6 +58,10 @@ export default {
     edit() {
       this.$emit("close");
       this.$emit("edit", {event:this.event});
+    },
+    download() {
+      this.$emit("close");
+      this.$emit("download", {event:this.event});
     }
   }
 };