Fix gallery view/preview

src/components/messages/MessageIncomingThread.vue

@@ -1,5 +1,5 @@
 <template>
-  <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
+  <message-incoming 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">
@@ -14,14 +14,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 :color="this.senderIsAdminOrModerator(this.event) ? 'white' : ''" size="small">block</v-icon>
           {{ $t('message.incoming_message_deleted_text') }}
@@ -32,26 +28,29 @@
         </span>
       </div>
     </div>
-    <v-dialog v-model="dialog" :width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'">
-      <v-img style="background:white" :src="dialogSrc" />
-    </v-dialog>
+    <GalleryItemsView :originalEvent="originalEvent" :items="items" :initialItem="showItem" v-if="!!showItem" v-on:close="showItem = null" />
   </message-incoming>
+  <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 MessageIncoming from "./MessageIncoming.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: MessageIncoming,
-  components: { MessageIncoming },
+  components: { MessageIncoming, GalleryItemsView, ThumbnailView },
   mixins: [messageMixin],
   data() {
     return {
       items: [],
-      dialog: false,
-      dialogSrc: null,
+      showItem: null,
       thread: null,
     }
   },
@@ -80,6 +79,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 = {