file types and exports

src/components/messages/MessageIncomingFile.vue

@@ -10,12 +10,7 @@
       </div>
 
       <div class="message">
-        <span>{{ $t('message.file_prefix') }}</span>
-        <span
-         class="cursor-pointer"
-          @click.stop="$emit('download')"
-          v-html="linkify($sanitize(messageText))"
-        />
+        <ThumbnailView class="clickable" v-on:itemclick="$emit('download')" :item="{ event: event, src: null }" />
         <span class="edit-marker" v-if="event.replacingEventId()"
           >{{ $t('message.edited') }}</span
         >
@@ -25,11 +20,12 @@
 </template>
 
 <script>
+import ThumbnailView from '../file_mode/ThumbnailView.vue';
 import MessageIncoming from "./MessageIncoming.vue";
 
 export default {
   extends: MessageIncoming,
-  components: { MessageIncoming }
+  components: { MessageIncoming, ThumbnailView }
 };
 </script>
 

src/components/messages/MessageIncomingVideo.vue

@@ -10,6 +10,15 @@
             {{ $t('message.download_progress',{percentage: downloadProgress}) }}
           </div>
         </div>
+        <div v-else-if="userInitiatedDownloadsOnly && !src" class="download-overlay">
+          <div class="text-center download-text">
+            {{ fileName }}
+          </div>
+          <div class="text-center download-size">
+            {{ fileSize }}
+          </div>
+          <v-icon size="32" color="white" class="clickable" @click="loadAttachmentSource(event, true)">download</v-icon>
+        </div>
       </v-responsive>
     </div>
   </message-incoming>

src/components/messages/MessageOutgoingFile.vue

@@ -11,12 +11,7 @@
 
 
       <div class="message">
-        <span>{{ $t('message.file_prefix') }}</span>
-        <span
-          class="cursor-pointer"
-          @click.stop="$emit('download')"
-          v-html="linkify($sanitize(messageText))"
-        />
+        <ThumbnailView class="clickable" v-on:itemclick="$emit('download')" :item="{ event: event, src: null }" />
         <span class="edit-marker" v-if="event.replacingEventId()"
           >{{ $t('message.edited') }}</span
         >
@@ -26,11 +21,12 @@
 </template>
 
 <script>
+import ThumbnailView from '../file_mode/ThumbnailView.vue';
 import MessageOutgoing from "./MessageOutgoing.vue";
 
 export default {
   extends: MessageOutgoing,
-  components: { MessageOutgoing },
+  components: { MessageOutgoing, ThumbnailView },
 };
 </script>
 <style lang="scss">

src/components/messages/MessageOutgoingVideo.vue

@@ -5,6 +5,20 @@
         <video :src="src" controls class="w-100 h-100">
           {{$t('fallbacks.video_file')}}
         </video>
+        <div v-if="downloadProgress" class="download-overlay">
+          <div class="text-center download-text">
+            {{ $t('message.download_progress',{percentage: downloadProgress}) }}
+          </div>
+        </div>
+        <div v-else-if="userInitiatedDownloadsOnly && !src" class="download-overlay">
+          <div class="text-center download-text">
+            {{ fileName }}
+          </div>
+          <div class="text-center download-size">
+            {{ fileSize }}
+          </div>
+          <v-icon size="32" color="white" class="clickable" @click="loadAttachmentSource(event, true)">download</v-icon>
+        </div>
       </v-responsive>
     </div>
   </message-outgoing>

src/components/messages/attachmentMixin.js

@@ -4,7 +4,8 @@ export default {
   data() {
     return {
       src: null,
-      downloadProgress: null
+      downloadProgress: null,
+      userInitiatedDownloadsOnly: false,
     }
   },
   watch: {
@@ -21,14 +22,27 @@ export default {
   beforeDestroy() {
     this.loadAttachmentSource(null); // Release
   },
+  computed: {
+    fileName() {
+      return util.getFileName(this.event);
+    },
+    fileSize() {
+      return util.getFileSizeFormatted(this.event);
+    }
+  },
   methods: {
-    loadAttachmentSource(event) {
+    loadAttachmentSource(event, userInitiated = false) {
       if (this.src) {
         const objectUrl = this.src;
         this.src = null;
         URL.revokeObjectURL(objectUrl);
       }
       if (event) {
+        const fileSize = util.getFileSize(event);
+        if (!userInitiated && (fileSize == 0 || fileSize > 1000000)) {
+          this.userInitiatedDownloadsOnly = true;
+          return;
+        }
         util
         .getAttachment(this.$matrix.matrixClient, event, (progress) => {
           this.downloadProgress = progress;

src/components/messages/export/MessageIncomingAudioExport.vue

@@ -1,17 +1,17 @@
 <template>
   <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
-    <audio controls :src="src">{{ $t("fallbacks.audio_file") }}</audio>
+    <audio controls>{{ $t("fallbacks.audio_file") }}</audio>
   </message-incoming>
 </template>
 
 <script>
-import attachmentMixin from "../attachmentMixin";
+import exportedAttachmentMixin from "./exportedAttachmentMixin";
 import MessageIncoming from "../MessageIncoming.vue";
 
 export default {
   name: "MessageIncomingAudioExport",
   extends: MessageIncoming,
-  mixins: [attachmentMixin],
+  mixins: [exportedAttachmentMixin],
   components: { MessageIncoming },
 };
 </script>

src/components/messages/export/MessageIncomingFileExport.vue

@@ -0,0 +1,51 @@
+<template>
+  <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
+    <a style="text-decoration: none;color: currentColor" class="bubble" target="_blank" :href="href" >
+      <div :class="{ 'thumbnail-item': true, 'preview': true, 'file-item': true }">
+        <b>{{ $sanitize(fileName) }}</b>
+        <div>{{ fileSize }}</div>
+      </div>
+    </a>
+  </message-incoming>
+</template>
+
+<script>
+import exportedAttachmentMixin from "./exportedAttachmentMixin";
+import MessageIncoming from "../MessageIncoming.vue";
+
+export default {
+  name: "MessageIncomingFileExport",
+  extends: MessageIncoming,
+  mixins: [exportedAttachmentMixin],
+  components: { MessageIncoming },
+  data() {
+    return {
+      href: ""
+    } 
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+
+.thumbnail-item {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.file-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.6rem;
+    flex-direction: column;
+    padding: 20px;
+    .v-icon {
+        margin-bottom: 10px;
+        color: currentColor;
+    }
+}
+</style>

src/components/messages/export/MessageIncomingVideoExport.vue

@@ -2,7 +2,7 @@
   <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
     <div class="bubble image-bubble">
       <v-responsive :aspect-ratio="16 / 9" :src="src">
-        <video :src="src" controls class="w-100 h-100">
+        <video controls class="w-100 h-100">
           {{ $t("fallbacks.video_file") }}
         </video>
       </v-responsive>
@@ -11,14 +11,14 @@
 </template>
 
 <script>
-import attachmentMixin from "../attachmentMixin";
+import exportedAttachmentMixin from "./exportedAttachmentMixin";
 import MessageIncoming from "../MessageIncoming.vue";
 
 export default {
   name: "MessageIncomingVideoExport",
   extends: MessageIncoming,
   components: { MessageIncoming },
-  mixins: [attachmentMixin],
+  mixins: [exportedAttachmentMixin],
 };
 </script>
 

src/components/messages/export/MessageOutgoingAudioExport.vue

@@ -1,18 +1,18 @@
 <template>
   <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
-    <audio controls :src="src">{{ $t("fallbacks.audio_file") }}</audio>
+    <audio controls>{{ $t("fallbacks.audio_file") }}</audio>
   </message-outgoing>
 </template>
 
 <script>
-import attachmentMixin from "../attachmentMixin";
+import exportedAttachmentMixin from "./exportedAttachmentMixin";
 import MessageOutgoing from "../MessageOutgoing.vue";
 
 export default {
   name: "MessageOutgoingAudioExport",
   extends: MessageOutgoing,
   components: { MessageOutgoing },
-  mixins: [attachmentMixin],
+  mixins: [exportedAttachmentMixin],
 };
 </script>
 

src/components/messages/export/MessageOutgoingFileExport.vue

@@ -0,0 +1,51 @@
+<template>
+  <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
+    <a style="text-decoration: none;color: currentColor" class="bubble" target="_blank" :href="href" >
+      <div :class="{ 'thumbnail-item': true, 'preview': true, 'file-item': true }">
+        <b>{{ $sanitize(fileName) }}</b>
+        <div>{{ fileSize }}</div>
+      </div>
+    </a>
+  </message-outgoing>
+</template>
+
+<script>
+import exportedAttachmentMixin from "./exportedAttachmentMixin";
+import MessageOutgoing from "../MessageOutgoing.vue";
+
+export default {
+  name: "MessageOutgoingFileExport",
+  extends: MessageOutgoing,
+  mixins: [exportedAttachmentMixin],
+  components: { MessageOutgoing },
+  data() {
+    return {
+      href: ""
+    } 
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+
+.thumbnail-item {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.file-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.6rem;
+    flex-direction: column;
+    padding: 20px;
+    .v-icon {
+        margin-bottom: 10px;
+        color: currentColor;
+    }
+}
+</style>

src/components/messages/export/MessageOutgoingVideoExport.vue

@@ -2,7 +2,7 @@
   <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
     <div class="bubble image-bubble">
       <v-responsive :aspect-ratio="16 / 9" class="ma-0 pa-0">
-        <video :src="src" controls class="w-100 h-100">
+        <video controls class="w-100 h-100">
           {{ $t("fallbacks.video_file") }}
         </video>
       </v-responsive>
@@ -11,14 +11,14 @@
 </template>
 
 <script>
-import attachmentMixin from "../attachmentMixin";
+import exportedAttachmentMixin from "./exportedAttachmentMixin";
 import MessageOutgoing from "../MessageOutgoing.vue";
 
 export default {
   name: "MessageOutgoingVideoExport",
   extends: MessageOutgoing,
   components: { MessageOutgoing },
-  mixins: [attachmentMixin],
+  mixins: [exportedAttachmentMixin],
 };
 </script>
 

src/components/messages/export/exportedAttachmentMixin.js

@@ -0,0 +1,17 @@
+import util from "../../../plugins/utils";
+
+export default {
+  data() {
+    return {
+      src: null,
+    }
+  },
+  computed: {
+    fileName() {
+      return util.getFileName(this.event);
+    },
+    fileSize() {
+      return util.getFileSizeFormatted(this.event);
+    }
+  },
+}