Migrate media thread views to composition API

src/components/file_mode/GalleryItemsView.vue

@@ -18,7 +18,7 @@
     <div class="file-drop-thumbnail-container">
       <div :class="{ 'file-drop-thumbnail': true, 'clickable': true, 'current': id == currentItemIndex }"
         @click="currentItemIndex = id" v-for="(currentImageInput, id) in items" :key="id">
-        <v-img v-if="currentImageInput && currentImageInput.src" :src="currentImageInput.src" />
+        <v-img v-if="currentImageInput" :src="currentImageInput.thumbnail ? currentImageInput.thumbnail : currentImageInput.src" />
       </div>
     </div>
 

src/components/file_mode/ThumbnailView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="thumbnailRef">
+  <div ref="thumbnailRef" style="width: 100%;height: 100%;">
     <v-responsive
       v-if="item.event.getContent().msgtype == 'm.video' && item.src"
       :class="{ 'thumbnail-item': true, preview: previewOnly }"
@@ -8,13 +8,14 @@
         {{ $t("fallbacks.video_file") }}
       </video>
     </v-responsive>
-    <v-img
-      v-else-if="item.event.getContent().msgtype == 'm.image' && item.src"
+    <ImageWithProgress
+      v-else-if="item.event.getContent().msgtype == 'm.image'"
       :aspect-ratio="previewOnly ? 16 / 9 : undefined"
       :class="{ 'thumbnail-item': true, preview: previewOnly }"
-      :src="item.src"
+      :src="item.src ? item.src : item.thumbnail"
       :contain="!previewOnly"
       :cover="previewOnly"
+      :loadingProgress="previewOnly ? item.thumbnailProgress : item.srcProgress"
     />
     <div v-else :class="{ 'thumbnail-item': true, preview: previewOnly, 'file-item': true }">
       <v-icon :class="fileTypeIconClass">{{ fileTypeIcon }}</v-icon>
@@ -23,13 +24,16 @@
     </div>
   </div>
 </template>
+
 <script lang="ts">
 import util from "../../plugins/utils";
 import { defineComponent } from "vue";
 import type { PropType } from 'vue'
 import { EventAttachment } from "../../models/eventAttachment";
+import ImageWithProgress from "../ImageWithProgress";
 
 export default defineComponent({
+  components: { ImageWithProgress },
   props: {
     /**
      * Item is an object of { event: MXEvent, src: URL }
@@ -95,6 +99,9 @@ export default defineComponent({
     if (this.$refs.thumbnailRef) {
       this.initThumbnailHammerJs(this.$refs.thumbnailRef);
     }
+    if (!this.previewOnly && this.item) {
+      this.item.loadSrc();
+    }
   },
 });
 </script>