Add support for PDF file captions

src/assets/css/channel.scss

@@ -69,6 +69,8 @@
       margin-top: 24px;
       .message {
         color: black !important;
+        display: flex;
+        flex-direction: column;
       }
     }
     .bubble {
@@ -172,6 +174,7 @@
   .swipeable-thumbnails-view {
     margin-left: -15px;
     margin-right: -15px;
+    order: 2;
     .thumbnail-item.file-item {
       margin: 15px;
       width: auto;

src/components/Chat.vue

@@ -292,6 +292,8 @@
               </v-card-text>
             </template>
             <v-divider></v-divider>
+            <v-textarea v-if="showAttachmentCaptionInput" v-model="attachmentCaption" ref="attachmentCaption" color="black" background-color="transparent"
+                solo full-width auto-grow rows="1" no-resize hide-details :placeholder="$t('file_mode.add_a_message')"></v-textarea>
             <v-card-actions>
               <v-spacer>
                 <div v-if="currentSendError">{{ currentSendError }}</div>
@@ -299,7 +301,7 @@
               <v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel" :disabled="sendingStatus != sendStatuses.SENDING && sendingStatus != sendStatuses.INITIAL">
                 {{ $t("menu.cancel") }}
               </v-btn>
-              <v-btn id="btn-attachment-send" color="primary" text @click="sendAttachment(undefined)"
+              <v-btn id="btn-attachment-send" color="primary" text @click="sendAttachment(attachmentCaption)"
                 v-if="currentSendShowSendButton" :disabled="currentSendShowSendButton && sendingStatus != sendStatuses.INITIAL">{{ $t("menu.send") }}</v-btn>
             </v-card-actions>
            </template>
@@ -465,6 +467,7 @@ export default {
       currentSendShowSendButton: true,
       currentSendError: null,
       currentSendErrorExceededFile: null,
+      attachmentCaption: undefined,
       showEmojiPicker: false,
       selectedEvent: null,
       editedEvent: null,
@@ -593,6 +596,12 @@ export default {
     isCurrentFileInputsAnArray() {
       return Array.isArray(this.currentFileInputs)
     },
+    showAttachmentCaptionInput() {
+      // IFF we are sending one PDF, add option to set caption.
+      const imageFiles = this.imageFiles || [];
+      const otherFiles = this.nonImageFiles || [];
+      return imageFiles.length == 0 && otherFiles.length == 1 && (otherFiles[0].type === "application/pdf" || (otherFiles[0].name || "").endsWith(".pdf"));
+    },
     currentFileInputsDialog: {
       get() {
         return this.isCurrentFileInputsAnArray
@@ -1547,6 +1556,7 @@ export default {
         const promise = this.sendAttachments(text, this.currentFileInputs);
         promise.then(() => {
           this.currentFileInputs = null;
+          this.attachmentCaption = undefined;
           this.sendingStatus = this.sendStatuses.INITIAL;
         })
         .catch((err) => {
@@ -1565,6 +1575,7 @@ export default {
       this.$refs.attachment.value = null;
       this.cancelSendAttachments();
       this.currentFileInputs = null;
+      this.attachmentCaption = undefined;
       this.currentSendError = null;
       this.currentSendErrorExceededFile = null;
       this.sendingStatus = this.sendStatuses.INITIAL;

src/components/messages/MessageIncomingThread.vue

@@ -1,5 +1,5 @@
 <template>
-  <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted()">
+  <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted() || room.displayType == ROOM_TYPE_CHANNEL">
     <div class="bubble">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">{{ inReplyToSender }}</div>
@@ -10,7 +10,7 @@
       </div>
 
       <div class="message">
-        <SwipeableThumbnailsView :items="items" v-if="!event.isRedacted() && room.displayType == ROOM_TYPE_CHANNEL" />
+        <SwipeableThumbnailsView :items="items" v-if="!event.isRedacted() && room.displayType == ROOM_TYPE_CHANNEL" v-on="$listeners" />
         <v-container v-else-if="!event.isRedacted()" fluid class="imageCollection">
           <v-row wrap>
             <v-col v-for="({ size, item }) in layoutedItems()" :key="item.event.getId()" :cols="size">
@@ -22,7 +22,7 @@
           <v-icon :color="this.senderIsAdminOrModerator(this.event) ? 'white' : ''" size="small">block</v-icon>
           {{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}}
         </i>
-        <span v-html="linkify($sanitize(messageText))" v-else />
+        <span v-html="linkify($sanitize(messageText))" v-else-if="messageText" />
         <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">
           {{ $t('message.edited') }}
         </span>

src/components/messages/MessageOutgoingThread.vue

@@ -1,5 +1,5 @@
 <template>
-  <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted()">
+  <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted() || room.displayType == ROOM_TYPE_CHANNEL">
     <div class="bubble">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">{{ inReplyToSender }}</div>
@@ -11,7 +11,7 @@
 
 
       <div class="message">
-        <SwipeableThumbnailsView :items="items" v-if="!event.isRedacted() && room.displayType == ROOM_TYPE_CHANNEL" />
+        <SwipeableThumbnailsView :items="items" v-if="!event.isRedacted() && room.displayType == ROOM_TYPE_CHANNEL" v-on="$listeners" />
         <v-container v-else-if="!event.isRedacted()" fluid class="imageCollection">
           <v-row wrap>
             <v-col v-for="({ size, item }) in layoutedItems()" :key="item.event.getId()" :cols="size">
@@ -23,7 +23,7 @@
           <v-icon size="small">block</v-icon>
           {{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}}
         </i>
-        <span v-html="linkify($sanitize(messageText))" v-else />
+        <span v-html="linkify($sanitize(messageText))" v-else-if="messageText" />
         <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">
           {{ $t('message.edited') }}
         </span>

src/components/messages/channel/SwipeableThumbnailsView.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="swipeable-thumbnails-view">
-      <v-responsive :aspect-ratio="16 / 9" class="ma-0 pa-0">
+      <v-responsive :aspect-ratio="aspectRatio" class="ma-0 pa-0">
-        <v-carousel height="100%" hide-delimiters show-arrows-on-hover v-model="currentIndex">
+        <v-carousel height="100%" hide-delimiters :show-arrows="items.length > 1" :show-arrows-on-hover="items.length > 1" v-model="currentIndex">
           <v-carousel-item v-for="(item,index) in items" :key="item.event.getId()">
-            <ThumbnailView :item="items[index]" :previewOnly="true" />
+            <ThumbnailView :item="items[index]" :previewOnly="true" v-on:itemclick="itemClicked" />
           </v-carousel-item>          
         </v-carousel>
     </v-responsive>
-    <div class="indicator-container">
+    <div class="indicator-container" v-show="items.length > 1">
       <div v-for="(item,index) in items" :key="index" :class="{'indicator': true, 'current': index == currentIndex}" />
     </div>
   </div>
@@ -16,6 +16,7 @@
 <script>
 import messageMixin from "../../messages/messageMixin";
 import ThumbnailView from '../../file_mode/ThumbnailView.vue';
+import util from "../../../plugins/utils";
 
 export default {
   mixins: [messageMixin],
@@ -33,6 +34,21 @@ export default {
       currentIndex: 0,
     };
   },
+  computed: {
+    aspectRatio() {
+      return this.items.some((item) =>['m.video','m.image'].includes(item.event.getContent().msgtype)) ? 16/9 : undefined;
+    }
+  },
+  methods: {
+    itemClicked() {
+      if (this.items.length > 0 && this.currentIndex < this.items.length) {
+        const item = this.items[this.currentIndex];
+        if (util.isFileTypePDF(item.event)) {
+          this.$emit("download", {event: item.event});
+        }
+      }
+    }
+  }
 };
 </script>
 

src/plugins/utils.js

@@ -914,6 +914,7 @@ class Util {
     }
 
     download(matrixClient, event) {
+        console.log("DOWNLOAD");
         this
         .getAttachment(matrixClient, event)
         .then((url) => {
@@ -924,6 +925,7 @@ class Util {
             // PDFs are shown inline, not downloaded
             link.download = event.getContent().body || this.$t("fallbacks.download_name");
           }
+          console.log("LINK", link);
           document.body.appendChild(link);
           link.click();
           setTimeout(function () {