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

Resolve "when uploading multiple media files, send and display it as a thread"

Browse source
This commit is contained in:
N Pex 2023-08-09 15:24:50 +00:00
parent a5ff54842c
commit 5ac61eac7c
7 changed files with 369 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/components/Chat.vue
View file

@ -211,8 +211,11 @@
<v-card-title v-if="imageFiles.length > 1"> {{ $t('message.images') }} </v-card-title>
<v-card-text :class="{'ma-0 pa-2' : true, 'd-flex flex-wrap justify-center': imageFiles.length > 1}">
<div :class="{'col-4': imageFiles.length > 1}" v-for="(currentImageInput, id) in imageFiles" :key="id">
<v-img v-if="currentImageInput && currentImageInput.image" :aspect-ratio="1" :src="currentImageInput.image"
contain class="current-image-input-path" />
<div style="position: relative">
<v-img v-if="currentImageInput && currentImageInput.image" :aspect-ratio="1" :src="currentImageInput.image"
contain class="current-image-input-path" />
<v-progress-linear :style="{ position: 'absolute', left: '0', right: '0', bottom: '0', opacity: currentImageInput.sendInfo ? '1' : '0' }" :value="currentImageInput.sendInfo ? currentImageInput.sendInfo.progress : 0"></v-progress-linear>
</div>
<div>
<span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled">
{{ currentImageInput.scaledDimensions.width }} x {{ currentImageInput.scaledDimensions.height }}</span>
@ -228,7 +231,7 @@
</span>
<v-switch v-if="currentImageInput && currentImageInput.scaled" :label="$t('message.scale_image')"
v-model="currentImageInput.useScaled" />
v-model="currentImageInput.useScaled" :disabled="currentImageInput.sendInfo" />
</div>
</div>
</v-card-text>
@ -240,6 +243,7 @@
<div v-if="!currentImageInputPath.type.includes('image/')">
<span> {{ $t('message.file') }}: {{ currentImageInputPath.name }}</span>
<span> ({{ formatBytes(currentImageInputPath.size) }})</span>
<v-progress-linear :style="{ opacity: currentImageInputPath.sendInfo ? '1' : '0' }" :value="currentImageInputPath.sendInfo ? currentImageInputPath.sendInfo.progress : 0"></v-progress-linear>
</div>
</div>
</v-card-text>
@ -249,13 +253,12 @@
<v-spacer>
<div v-if="currentSendError">{{ currentSendError }}</div>
<div v-if="currentSendErrorExceededFile" class="red--text">{{ currentSendErrorExceededFile }}</div>
<div v-else>{{ currentSendProgress }}</div>
</v-spacer>
<v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel">
<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"
v-if="currentSendShowSendButton" :disabled="currentSendOperation != null">{{ $t("menu.send") }}</v-btn>
<v-btn id="btn-attachment-send" color="primary" text @click="sendAttachment(undefined)"
v-if="currentSendShowSendButton" :disabled="sendingStatus != sendStatuses.INITIAL">{{ $t("menu.send") }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
@ -354,6 +357,7 @@ import BottomSheet from "./BottomSheet.vue";
import ImageResize from "image-resize";
import CreatePollDialog from "./CreatePollDialog.vue";
import chatMixin from "./chatMixin";
import sendAttachmentsMixin from "./sendAttachmentsMixin";
import AudioLayout from "./AudioLayout.vue";
import FileDropLayout from "./file_mode/FileDropLayout";
import { requestNotificationAndServiceWorker, windowNotificationPermission, notificationCount } from "../plugins/notificationAndServiceWorker.js"
@ -394,7 +398,7 @@ ScrollPosition.prototype.prepareFor = function (direction) {
export default {
name: "Chat",
mixins: [chatMixin, logoMixin, roomTypeMixin],
mixins: [chatMixin, logoMixin, roomTypeMixin, sendAttachmentsMixin],
components: {
ChatHeader,
MessageOperations,
@ -425,8 +429,6 @@ export default {
scrollPosition: null,
currentFileInputs: null,
currentSendOperation: null,
currentSendProgress: null,
currentSendShowSendButton: true,
currentSendError: null,
currentSendErrorExceededFile: null,
@ -1204,46 +1206,14 @@ export default {
this.$refs.stickerPickerSheet.open();
},
onUploadProgress(p) {
if (p.total) {
this.currentSendProgress = this.$t("message.upload_progress_with_total", {
count: p.loaded || 0,
total: p.total,
});
} else {
this.currentSendProgress = this.$t("message.upload_progress", {
count: p.loaded || 0,
});
}
},
sendAttachment(withText) {
this.$refs.attachment.value = null;
if (this.isCurrentFileInputsAnArray) {
let inputFiles = this.currentFileInputs.map(entry => {
// other than file type image
if(entry instanceof File) {
return entry;
} else {
if (entry.scaled && entry.useScaled) {
// Send scaled version of image instead!
return entry.scaled;
} else {
// Send actual file image when not scaled!
return entry.actualFile;
}
}
})
const promises = inputFiles.map(inputFile => util.sendImage(this.$matrix.matrixClient, this.roomId, inputFile, this.onUploadProgress));
this.currentSendOperation = promises;
Promise.all(promises).then(() => {
this.currentSendOperation = null;
const text = withText || "";
const promise = this.sendAttachments(text, this.currentFileInputs);
promise.then(() => {
this.currentFileInputs = null;
this.currentSendProgress = null;
if (withText) {
this.sendMessage(withText);
}
this.sendingStatus = this.sendStatuses.INITIAL;
})
.catch((err) => {
if (err.name === "AbortError" || err === "Abort") {
@ -1253,22 +1223,17 @@ export default {
this.currentSendError = err.LocaleString();
this.currentSendErrorExceededFile = err.LocaleString();
}
this.currentSendOperation = null;
this.currentSendProgress = null;
});
}
},
cancelSendAttachment() {
this.$refs.attachment.value = null;
if (this.currentSendOperation) {
this.currentSendOperation.forEach(o => o.abort());
}
this.currentSendOperation = null;
this.cancelSendAttachments();
this.currentFileInputs = null;
this.currentSendProgress = null;
this.currentSendError = null;
this.currentSendErrorExceededFile = null;
this.sendingStatus = this.sendStatuses.INITIAL;
},
addAttachment(file) {