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> <template>
<div ref="thumbnailRef"> <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"> <video :src="item.src" :controls="!previewOnly" class="w-100 h-100">
{{ $t('fallbacks.video_file') }} {{ $t("fallbacks.video_file") }}
</video> </video>
</v-responsive> </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" /> <v-img
<div v-else :class="{'thumbnail-item': true, 'preview': previewOnly, 'file-item': true}" > 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> <v-icon :class="fileTypeIconClass">{{ fileTypeIcon }}</v-icon>
<div class="file-name">{{ $sanitize(fileName) }}</div> <div class="file-name">{{ $sanitize(fileName) }}</div>
<div class="file-size">{{ fileSize }}</div> <div class="file-size">{{ fileSize }}</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script lang="ts">
import util from "../../plugins/utils"; 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: { props: {
/** /**
* Item is an object of { event: MXEvent, src: URL } * Item is an object of { event: MXEvent, src: URL }
*/ */
item: { item: {
type: Object, type: Object as PropType<EventAttachment>,
default: function () { default: function () {
return {} return {};
} },
}, },
previewOnly: { previewOnly: {
type: Boolean, type: Boolean,
default: function() { default: function () {
return false; return false;
} },
}, },
}, },
computed: { computed: {
@ -52,7 +64,7 @@ export default {
} else if (util.isFileTypeZip(this.item.event)) { } else if (util.isFileTypeZip(this.item.event)) {
return "$vuetify.icons.ic_zip"; return "$vuetify.icons.ic_zip";
} }
return "description" return "description";
}, },
fileTypeIconClass() { fileTypeIconClass() {
if (util.isFileTypeZip(this.item.event)) { if (util.isFileTypeZip(this.item.event)) {
@ -65,29 +77,28 @@ export default {
}, },
fileSize() { fileSize() {
return util.getFileSizeFormatted(this.item.event); return util.getFileSizeFormatted(this.item.event);
} },
}, },
methods: { methods: {
// listen for custom hammerJs singletab click to differentiate it from double click(heart animation). // listen for custom hammerJs singletab click to differentiate it from double click(heart animation).
initThumbnailHammerJs(element) { initThumbnailHammerJs(element: any) {
const hammerInstance = util.singleOrDoubleTabRecognizer(element) const hammerInstance = util.singleOrDoubleTabRecognizer(element);
hammerInstance.on("singletap doubletap", (ev) => { hammerInstance.on("singletap doubletap", (ev: any) => {
if(ev.type === 'singletap') { if (ev.type === "singletap") {
this.$emit('itemclick', { item: this.item }) this.$emit("itemclick", { item: this.item });
} }
}); });
} },
}, },
mounted() { mounted() {
if(this.$refs.thumbnailRef) { if (this.$refs.thumbnailRef) {
this.initThumbnailHammerJs(this.$refs.thumbnailRef); this.initThumbnailHammerJs(this.$refs.thumbnailRef);
} }
}, },
} });
</script> </script>
<style lang="scss"> <style lang="scss">
@use "@/assets/css/chat.scss" as *; @use "@/assets/css/chat.scss" as *;