butter/keanu-weblite
3
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

3
src/assets/css/channel.scss
View file

@ -69,6 +69,8 @@
margin-top: 24px;
.message {
color: black !important;
display: flex;
flex-direction: column;
}
}
.bubble {
@ -172,6 +174,7 @@
.swipeable-thumbnails-view {
margin-left: -15px;
margin-right: -15px;
order: 2;
.thumbnail-item.file-item {
margin: 15px;
width: auto;

13
src/components/Chat.vue
View file

@ -292,6 +292,8 @@
</v-card-text>
</template>
<v-divider></v-divider>
<v-textarea v-if="showAttachmentCaptionInput" v-model="attachmentCaption" ref="attachmentCaption" color="black" background-color="transparent"
solo full-width auto-grow rows="1" no-resize hide-details :placeholder="$t('file_mode.add_a_message')"></v-textarea>
<v-card-actions>
<v-spacer>
<div v-if="currentSendError">{{ currentSendError }}</div>
@ -299,7 +301,7 @@
<v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel" :disabled="sendingStatus != sendStatuses.SENDING && sendingStatus != sendStatuses.INITIAL">
{{ $t("menu.cancel") }}
</v-btn>
<v-btn id="btn-attachment-send" color="primary" text @click="sendAttachment(undefined)"
<v-btn id="btn-attachment-send" color="primary" text @click="sendAttachment(attachmentCaption)"
v-if="currentSendShowSendButton" :disabled="currentSendShowSendButton && sendingStatus != sendStatuses.INITIAL">{{ $t("menu.send") }}</v-btn>
</v-card-actions>
</template>
@ -465,6 +467,7 @@ export default {
currentSendShowSendButton: true,
currentSendError: null,
currentSendErrorExceededFile: null,
attachmentCaption: undefined,
showEmojiPicker: false,
selectedEvent: null,
editedEvent: null,
@ -593,6 +596,12 @@ export default {
isCurrentFileInputsAnArray() {
return Array.isArray(this.currentFileInputs)
},
showAttachmentCaptionInput() {
// IFF we are sending one PDF, add option to set caption.
const imageFiles = this.imageFiles || [];
const otherFiles = this.nonImageFiles || [];
return imageFiles.length == 0 && otherFiles.length == 1 && (otherFiles[0].type === "application/pdf" || (otherFiles[0].name || "").endsWith(".pdf"));
},
currentFileInputsDialog: {
get() {
return this.isCurrentFileInputsAnArray
@ -1547,6 +1556,7 @@ export default {
const promise = this.sendAttachments(text, this.currentFileInputs);
promise.then(() => {
this.currentFileInputs = null;
this.attachmentCaption = undefined;
this.sendingStatus = this.sendStatuses.INITIAL;
})
.catch((err) => {
@ -1565,6 +1575,7 @@ export default {
this.$refs.attachment.value = null;
this.cancelSendAttachments();
this.currentFileInputs = null;
this.attachmentCaption = undefined;
this.currentSendError = null;
this.currentSendErrorExceededFile = null;
this.sendingStatus = this.sendStatuses.INITIAL;

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>

2
src/plugins/utils.js
View file

@ -914,6 +914,7 @@ class Util {
}
download(matrixClient, event) {
console.log("DOWNLOAD");
this
.getAttachment(matrixClient, event)
.then((url) => {
@ -924,6 +925,7 @@ class Util {
// PDFs are shown inline, not downloaded
link.download = event.getContent().body || this.$t("fallbacks.download_name");
}
console.log("LINK", link);
document.body.appendChild(link);
link.click();
setTimeout(function () {