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

Add support for PDF file captions

Browse source
This commit is contained in:
N-Pex 2024-10-17 11:33:46 +02:00
parent 5e1223fc01
commit 6f05d14877
6 changed files with 43 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/messages/MessageIncomingThread.vue
View file

@ -1,5 +1,5 @@
<template>
<message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted()">
<message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted() || room.displayType == ROOM_TYPE_CHANNEL">
<div class="bubble">
<div class="original-message" v-if="inReplyToText">
<div class="original-message-sender">{{ inReplyToSender }}</div>
@ -10,7 +10,7 @@
</div>
<div class="message">
<SwipeableThumbnailsView :items="items" v-if="!event.isRedacted() && room.displayType == ROOM_TYPE_CHANNEL" />
<SwipeableThumbnailsView :items="items" v-if="!event.isRedacted() && room.displayType == ROOM_TYPE_CHANNEL" v-on="$listeners" />
<v-container v-else-if="!event.isRedacted()" fluid class="imageCollection">
<v-row wrap>
<v-col v-for="({ size, item }) in layoutedItems()" :key="item.event.getId()" :cols="size">
@ -22,7 +22,7 @@
<v-icon :color="this.senderIsAdminOrModerator(this.event) ? 'white' : ''" size="small">block</v-icon>
{{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}}
</i>
<span v-html="linkify($sanitize(messageText))" v-else />
<span v-html="linkify($sanitize(messageText))" v-else-if="messageText" />
<span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">
{{ $t('message.edited') }}
</span>

6
src/components/messages/MessageOutgoingThread.vue
View file

@ -1,5 +1,5 @@
<template>
<message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted()">
<message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted() || room.displayType == ROOM_TYPE_CHANNEL">
<div class="bubble">
<div class="original-message" v-if="inReplyToText">
<div class="original-message-sender">{{ inReplyToSender }}</div>
@ -11,7 +11,7 @@
<div class="message">
<SwipeableThumbnailsView :items="items" v-if="!event.isRedacted() && room.displayType == ROOM_TYPE_CHANNEL" />
<SwipeableThumbnailsView :items="items" v-if="!event.isRedacted() && room.displayType == ROOM_TYPE_CHANNEL" v-on="$listeners" />
<v-container v-else-if="!event.isRedacted()" fluid class="imageCollection">
<v-row wrap>
<v-col v-for="({ size, item }) in layoutedItems()" :key="item.event.getId()" :cols="size">
@ -23,7 +23,7 @@
<v-icon size="small">block</v-icon>
{{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}}
</i>
<span v-html="linkify($sanitize(messageText))" v-else />
<span v-html="linkify($sanitize(messageText))" v-else-if="messageText" />
<span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">
{{ $t('message.edited') }}
</span>

24
src/components/messages/channel/SwipeableThumbnailsView.vue
View file

@ -1,13 +1,13 @@
<template>
<div class="swipeable-thumbnails-view">
<v-responsive :aspect-ratio="16 / 9" class="ma-0 pa-0">
<v-carousel height="100%" hide-delimiters show-arrows-on-hover v-model="currentIndex">
<v-responsive :aspect-ratio="aspectRatio" class="ma-0 pa-0">
<v-carousel height="100%" hide-delimiters :show-arrows="items.length > 1" :show-arrows-on-hover="items.length > 1" v-model="currentIndex">
<v-carousel-item v-for="(item,index) in items" :key="item.event.getId()">
<ThumbnailView :item="items[index]" :previewOnly="true" />
<ThumbnailView :item="items[index]" :previewOnly="true" v-on:itemclick="itemClicked" />
</v-carousel-item>
</v-carousel>
</v-responsive>
<div class="indicator-container">
<div class="indicator-container" v-show="items.length > 1">
<div v-for="(item,index) in items" :key="index" :class="{'indicator': true, 'current': index == currentIndex}" />
</div>
</div>
@ -16,6 +16,7 @@
<script>
import messageMixin from "../../messages/messageMixin";
import ThumbnailView from '../../file_mode/ThumbnailView.vue';
import util from "../../../plugins/utils";
export default {
mixins: [messageMixin],
@ -33,6 +34,21 @@ export default {
currentIndex: 0,
};
},
computed: {
aspectRatio() {
return this.items.some((item) =>['m.video','m.image'].includes(item.event.getContent().msgtype)) ? 16/9 : undefined;
}
},
methods: {
itemClicked() {
if (this.items.length > 0 && this.currentIndex < this.items.length) {
const item = this.items[this.currentIndex];
if (util.isFileTypePDF(item.event)) {
this.$emit("download", {event: item.event});
}
}
}
}
};
</script>