From 77eebafb7911ceebc08338e4c3fd47604c5ff6ba Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Mon, 9 Jun 2025 09:44:49 +0200
Subject: [PATCH] Update ThumbnailView.vue

---
 src/components/file_mode/ThumbnailView.vue | 195 +++++++++++----------
 1 file changed, 103 insertions(+), 92 deletions(-)

diff --git a/src/components/file_mode/ThumbnailView.vue b/src/components/file_mode/ThumbnailView.vue
index d8fd0fd..0ca4add 100644
--- a/src/components/file_mode/ThumbnailView.vue
+++ b/src/components/file_mode/ThumbnailView.vue
@@ -1,113 +1,124 @@
 <template>
-    <div ref="thumbnailRef">
-        <v-responsive v-if="item.event.getContent().msgtype == 'm.video' && item.src" :class="{'thumbnail-item': true, 'preview': previewOnly}">
-            <video :src="item.src"  :controls="!previewOnly" class="w-100 h-100">
-                {{ $t('fallbacks.video_file') }}
-            </video>
-        </v-responsive>
-        <v-img v-else-if="item.event.getContent().msgtype == 'm.image' && item.src" :aspect-ratio="previewOnly ? (16 / 9) : undefined" :class="{'thumbnail-item': true, 'preview': previewOnly}" :src="item.src" :contain="!previewOnly" :cover="previewOnly" />
-        <div v-else :class="{'thumbnail-item': true, 'preview': previewOnly, 'file-item': true}" >
-            <v-icon :class="fileTypeIconClass">{{ fileTypeIcon }}</v-icon>
-            <div class="file-name">{{ $sanitize(fileName) }}</div>
-            <div class="file-size">{{ fileSize }}</div>
-        </div>
+  <div ref="thumbnailRef">
+    <v-responsive
+      v-if="item.event.getContent().msgtype == 'm.video' && item.src"
+      :class="{ 'thumbnail-item': true, preview: previewOnly }"
+    >
+      <video :src="item.src" :controls="!previewOnly" class="w-100 h-100">
+        {{ $t("fallbacks.video_file") }}
+      </video>
+    </v-responsive>
+    <v-img
+      v-else-if="item.event.getContent().msgtype == 'm.image' && item.src"
+      :aspect-ratio="previewOnly ? 16 / 9 : undefined"
+      :class="{ 'thumbnail-item': true, preview: previewOnly }"
+      :src="item.src"
+      :contain="!previewOnly"
+      :cover="previewOnly"
+    />
+    <div v-else :class="{ 'thumbnail-item': true, preview: previewOnly, 'file-item': true }">
+      <v-icon :class="fileTypeIconClass">{{ fileTypeIcon }}</v-icon>
+      <div class="file-name">{{ $sanitize(fileName) }}</div>
+      <div class="file-size">{{ fileSize }}</div>
     </div>
+  </div>
 </template>
-<script>
-
+<script lang="ts">
 import util from "../../plugins/utils";
+import { defineComponent } from "vue";
+import type { PropType } from 'vue'
+import { EventAttachment } from "../../models/eventAttachment";
 
-export default {
-    props: {
-        /**
-         * Item is an object of { event: MXEvent, src: URL }
-         */
-        item: {
-            type: Object,
-            default: function () {
-                return {}
-            }
-        },
-        previewOnly: {
-            type: Boolean,
-            default: function() {
-                return false;
-            }
-        },
+export default defineComponent({
+  props: {
+    /**
+     * Item is an object of { event: MXEvent, src: URL }
+     */
+    item: {
+      type: Object as PropType<EventAttachment>,
+      default: function () {
+        return {};
+      },
     },
-    computed: {
-        fileTypeIcon() {
-            if (util.isFileTypeAPK(this.item.event)) {
-                if (this.item.event.isChannelMessage) {
-                    return "$vuetify.icons.ic_channel_apk";
-                }
-                return "$vuetify.icons.ic_apk";
-            } else if (util.isFileTypeIPA(this.item.event)) {
-                return "$vuetify.icons.ic_ipa";
-            } else if (util.isFileTypePDF(this.item.event)) {
-                if (this.item.event.isChannelMessage) {
-                    return "$vuetify.icons.ic_channel_pdf";
-                }
-                return "$vuetify.icons.ic_pdf";
-            } else if (util.isFileTypeZip(this.item.event)) {
-                return "$vuetify.icons.ic_zip";
-            }
-            return "description"
-        },
-        fileTypeIconClass() {
-            if (util.isFileTypeZip(this.item.event)) {
-                return "zip";
-            } 
-            return undefined;
-        },
-        fileName() {
-            return util.getFileName(this.item.event);
-        },
-        fileSize() {
-            return util.getFileSizeFormatted(this.item.event);
+    previewOnly: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+  },
+  computed: {
+    fileTypeIcon() {
+      if (util.isFileTypeAPK(this.item.event)) {
+        if (this.item.event.isChannelMessage) {
+          return "$vuetify.icons.ic_channel_apk";
         }
+        return "$vuetify.icons.ic_apk";
+      } else if (util.isFileTypeIPA(this.item.event)) {
+        return "$vuetify.icons.ic_ipa";
+      } else if (util.isFileTypePDF(this.item.event)) {
+        if (this.item.event.isChannelMessage) {
+          return "$vuetify.icons.ic_channel_pdf";
+        }
+        return "$vuetify.icons.ic_pdf";
+      } else if (util.isFileTypeZip(this.item.event)) {
+        return "$vuetify.icons.ic_zip";
+      }
+      return "description";
     },
-    methods: {
-        // listen for custom hammerJs singletab click to differentiate it from double click(heart animation).
-        initThumbnailHammerJs(element) {
-            const hammerInstance = util.singleOrDoubleTabRecognizer(element)
+    fileTypeIconClass() {
+      if (util.isFileTypeZip(this.item.event)) {
+        return "zip";
+      }
+      return undefined;
+    },
+    fileName() {
+      return util.getFileName(this.item.event);
+    },
+    fileSize() {
+      return util.getFileSizeFormatted(this.item.event);
+    },
+  },
+  methods: {
+    // listen for custom hammerJs singletab click to differentiate it from double click(heart animation).
+    initThumbnailHammerJs(element: any) {
+      const hammerInstance = util.singleOrDoubleTabRecognizer(element);
 
-            hammerInstance.on("singletap doubletap", (ev) => {
-                if(ev.type === 'singletap') {
-                   this.$emit('itemclick', { item: this.item })
-                }
-            });
+      hammerInstance.on("singletap doubletap", (ev: any) => {
+        if (ev.type === "singletap") {
+          this.$emit("itemclick", { item: this.item });
         }
+      });
     },
-    mounted() {
-        if(this.$refs.thumbnailRef) {
-            this.initThumbnailHammerJs(this.$refs.thumbnailRef);
-        }
-    },
-}
+  },
+  mounted() {
+    if (this.$refs.thumbnailRef) {
+      this.initThumbnailHammerJs(this.$refs.thumbnailRef);
+    }
+  },
+});
 </script>
 
-
 <style lang="scss">
 @use "@/assets/css/chat.scss" as *;
 
 .thumbnail-item {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
+  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;
-    }
+  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>
\ No newline at end of file
+</style>