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

Mobile: top level heart reaction on double tab

Browse source
This commit is contained in:
10G Meow 2024-05-18 22:13:07 +03:00
parent ac184de2b2
commit 62cf15f2de
16 changed files with 199 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,16 +1,16 @@
<template>
<v-responsive v-if="item.event.getContent().msgtype == 'm.video' && item.src" :class="{'thumbnail-item': true, 'preview': previewOnly}"
@click.stop="$emit('itemclick', {item: item})">
<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"
@click.stop="$emit('itemclick', {item: item})" />
<div v-else :class="{'thumbnail-item': true, 'preview': previewOnly, 'file-item': true}" @click.stop="$emit('itemclick', {item: item})">
<v-icon>{{ fileTypeIcon }}</v-icon>
<b>{{ $sanitize(fileName) }}</b>
<div>{{ fileSize }}</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>{{ fileTypeIcon }}</v-icon>
<b>{{ $sanitize(fileName) }}</b>
<div>{{ fileSize }}</div>
</div>
</div>
</template>
<script>
@ -20,7 +20,7 @@ import util from "../../plugins/utils";
export default {
props: {
/**
* Item is an object of { event: MXEvent, src: URL }
* Item is an object of { event: MXEvent, src: URL }
*/
item: {
type: Object,
@ -54,7 +54,24 @@ 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)
hammerInstance.on("singletap doubletap", (ev) => {
if(ev.type === 'singletap') {
this.$emit('itemclick', { item: this.item })
}
});
}
},
mounted() {
if(this.$refs.thumbnailRef) {
this.initThumbnailHammerJs(this.$refs.thumbnailRef);
}
},
}
</script>