Fix gallery view/preview

src/components/messages/MessageOutgoingThread.vue

@@ -1,5 +1,5 @@
 <template>
-  <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
+  <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1">
     <div class="bubble">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">
@@ -12,14 +12,10 @@
         <v-container fluid class="imageCollection">
           <v-row wrap>
             <v-col v-for="({ size, item }) in layoutedItems()" :key="item.event.getId()" :cols="size">
-              <v-img :aspect-ratio="16 / 9" :src="item.src" cover @click.stop="dialogSrc = item.src; dialog = true" />
+              <ThumbnailView :item="item" :previewOnly="true" v-on:itemclick="onItemClick($event)" /> 
             </v-col>
           </v-row>
         </v-container>
-        <div style="text-align: end">
-          <v-btn class="download-all-button" @click.stop="downloadAll">{{ $t("message.download_all") }}&nbsp;<v-icon
-              color="white">arrow_downward</v-icon></v-btn>
-        </div>
         <i v-if="event.isRedacted()" class="deleted-text">
           <v-icon size="small">block</v-icon>
           {{ $t('message.outgoing_message_deleted_text') }}
@@ -30,23 +26,29 @@
         </span>
       </div>
     </div>
+    <GalleryItemsView :originalEvent="originalEvent" :items="items" :initialItem="showItem" v-if="!!showItem" v-on:close="showItem = null" />
   </message-outgoing>
+  <component v-else-if="items.length == 1" :is="componentFn(items[0].event)" 
+    :originalEvent="items[0].event"
+    v-bind="{...$props, ...$attrs}" v-on="$listeners"
+  />
 </template>
 
 <script>
 import MessageOutgoing from "./MessageOutgoing.vue";
 import messageMixin from "./messageMixin";
 import util from "../../plugins/utils";
+import GalleryItemsView from '../file_mode/GalleryItemsView.vue';
+import ThumbnailView from '../file_mode/ThumbnailView.vue';
 
 export default {
   extends: MessageOutgoing,
-  components: { MessageOutgoing },
+  components: { MessageOutgoing, GalleryItemsView, ThumbnailView },
   mixins: [messageMixin],
   data() {
     return {
       items: [],
-      dialog: false,
-      dialogSrc: null,
+      showItem: null,
       thread: null,
     }
   },
@@ -75,6 +77,9 @@ export default {
     onAddRelation() {
       this.processThread();
     },
+    onItemClick(event) {
+      this.showItem = event.item;
+    },
     processThread() {
       this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId()).map(e => {
         let ret = {
@@ -123,9 +128,6 @@ export default {
       }
       return rows
     },
-    downloadAll() {
-      this.items.forEach(item => util.download(this.$matrix.matrixClient, item.event));
-    }
   }
 };
 </script>
@@ -151,5 +153,14 @@ export default {
   .col {
     padding: 2px;
   }
+  
+  .file-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.6rem;
+    flex-direction: column;
+    padding: 20px;
+  }
 }
 </style>