butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Update ThumbnailView.vue

Browse source
This commit is contained in:
N-Pex 2025-06-09 09:44:49 +02:00
parent 842c87dc96
commit 77eebafb79
1 changed files with 103 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/file_mode/ThumbnailView.vue
View file

@ -1,38 +1,50 @@
<template>
<div ref="thumbnailRef">
<v-responsive v-if="item.event.getContent().msgtype == 'm.video' && item.src" :class="{'thumbnail-item': true, 'preview': previewOnly}">
<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') }}
{{ $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-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 {
export default defineComponent({
props: {
/**
* Item is an object of { event: MXEvent, src: URL }
*/
item: {
type: Object,
type: Object as PropType<EventAttachment>,
default: function () {
return {}
}
return {};
},
},
previewOnly: {
type: Boolean,
default: function() {
default: function () {
return false;
}
},
},
},
computed: {
@ -52,7 +64,7 @@ export default {
} else if (util.isFileTypeZip(this.item.event)) {
return "$vuetify.icons.ic_zip";
}
return "description"
return "description";
},
fileTypeIconClass() {
if (util.isFileTypeZip(this.item.event)) {
@ -65,29 +77,28 @@ export default {
},
fileSize() {
return util.getFileSizeFormatted(this.item.event);
}
},
},
methods: {
// listen for custom hammerJs singletab click to differentiate it from double click(heart animation).
initThumbnailHammerJs(element) {
const hammerInstance = util.singleOrDoubleTabRecognizer(element)
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) {
if (this.$refs.thumbnailRef) {
this.initThumbnailHammerJs(this.$refs.thumbnailRef);
}
},
}
});
</script>
<style lang="scss">
@use "@/assets/css/chat.scss" as *;