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

1. review changes 2. improve different file type handling 3. File upload dialogue improvements which now shows all file type

Browse source
This commit is contained in:
10G Meow 2023-05-28 20:37:52 +03:00
parent 1282d6528c
commit 2b41e91908
2 changed files with 60 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/assets/translations/en.json
View file

@ -90,7 +90,11 @@
"incoming_message_deleted_text": "This message was deleted.",
"not_allowed_to_send": "Only admins and moderators are allowed to send to the room",
"reaction_count_more": "{reactionCount} more",
"seen_by": "Seen by no members | Seen by 1 member | Seen by {count} members"
"seen_by": "Seen by no members | Seen by 1 member | Seen by {count} members",
"file": "File",
"files": "Files",
"images": "Images",
"send_attachements_dialog_title": "Do you want to send following attachments ?"
},
"room": {
"invitations": "You have no invitations | You have 1 invitation | You have {count} invitations",

113
src/components/Chat.vue
View file

@ -190,10 +190,13 @@
<input ref="attachment" type="file" name="attachment" @change="handlePickedAttachment($event)"
accept="image/*, audio/*, video/*, .pdf" class="d-none" multiple/>
<div v-if="isCurrentImageInputsPathDialog">
<v-dialog v-model="isCurrentImageInputsPathDialog" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '50%' : '85%'" persistent scrollable>
<div v-if="currentFileInputsDialog">
<v-dialog v-model="currentFileInputsDialog" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '50%' : '85%'" persistent scrollable>
<v-card class="ma-0 pa-0">
<template v-if="Array.isArray(currentImageInputs)">
<v-card-title>{{ $t('message.send_attachements_dialog_title') }}</v-card-title>
<v-divider></v-divider>
<template v-if="Array.isArray(currentImageInputs) && currentImageInputs.length">
<v-card-title v-if="currentImageInputs.length > 1"> {{ $t('message.images') }} </v-card-title>
<v-card-text :class="{'ma-0 pa-2' : true, 'd-flex flex-wrap justify-center': currentImageInputs.length > 1}">
<div :class="{'col-4': currentImageInputs.length > 1}" v-for="(currentImageInput, id) in currentImageInputs" :key="id">
<v-img v-if="currentImageInput && currentImageInput.image" :aspect-ratio="1" :src="currentImageInput.image"
@ -211,24 +214,26 @@
</div>
</v-card-text>
</template>
<template v-else>
<template v-if="Array.isArray(currentFileInputs) && currentFileInputs.length">
<v-card-title v-if="nonImageFiles.length > 1">{{ $t('message.files') }}</v-card-title>
<v-card-text>
<div v-for="(currentImageInputPath, id) in currentImageInputsPath" :key="id">
<span>file: {{ currentImageInputPath.name }}</span>
<span> ({{ formatBytes(currentImageInputPath.size) }})</span>
<div v-for="(currentImageInputPath, id) in currentFileInputs" :key="id">
<div v-if="!currentImageInputPath.type.includes('image/')">
<span> {{ $t('message.file') }}: {{ currentImageInputPath.name }}</span>
<span> ({{ formatBytes(currentImageInputPath.size) }})</span>
</div>
</div>
</v-card-text>
</template>
<v-card-text>
<div v-if="currentSendError">{{ currentSendError }}</div>
<div v-else>{{ currentSendProgress }}</div>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel">{{
$t("menu.cancel")
}}</v-btn>
<v-spacer>
<div v-if="currentSendError">{{ currentSendError }}</div>
<div v-else>{{ currentSendProgress }}</div>
</v-spacer>
<v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel">
{{ $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-card-actions>
@ -355,7 +360,7 @@ export default {
scrollPosition: null,
currentImageInputs: null,
currentImageInputsPath: null,
currentFileInputs: null,
currentSendOperation: null,
currentSendProgress: null,
currentSendShowSendButton: true,
@ -439,15 +444,18 @@ export default {
},
computed: {
isCurrentImageInputsPath() {
return Array.isArray(this.currentImageInputsPath)
nonImageFiles() {
return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => !file.type.includes("image/"))
},
isCurrentImageInputsPathDialog: {
isCurrentFileInputsAnArray() {
return Array.isArray(this.currentFileInputs)
},
currentFileInputsDialog: {
get() {
return this.isCurrentImageInputsPath
return this.isCurrentFileInputsAnArray
},
set() {
this.currentImageInputsPath = null
this.currentFileInputs = null
}
},
chatContainer() {
@ -1003,15 +1011,12 @@ export default {
if (file) {
var reader = new FileReader();
reader.onload = (e) => {
const file = event.target.files[0];
if (file.type.startsWith("image/")) {
const currentImageInput = this.optimizeImage(e, event, file)
this.currentImageInputs = Array.isArray(this.currentImageInputs) ? [...this.currentImageInputs, currentImageInput] : [currentImageInput]
}
this.currentImageInputsPath = Array.isArray(this.currentImageInputsPath) ? [...this.currentImageInputsPath, file] : [file];
console.log(this.currentImageInput);
this.$matrix.matrixClient.getMediaConfig().then((config) => {
this.currentImageInputPath = file;
this.currentFileInputs = Array.isArray(this.currentFileInputs) ? [...this.currentFileInputs, file] : [file];
if (config["m.upload.size"] && file.size > config["m.upload.size"]) {
this.currentSendError = this.$t("message.upload_file_too_large");
this.currentSendShowSendButton = false;
@ -1046,43 +1051,35 @@ export default {
});
}
},
sendImage(withText, inputFile) {
this.currentSendProgress = null;
this.currentSendOperation = util.sendImage(
this.$matrix.matrixClient,
this.roomId,
inputFile,
this.onUploadProgress
);
this.currentSendOperation
.then(() => {
this.currentSendOperation = null;
this.currentImageInputs = null;
this.currentImageInputsPath = null;
this.currentSendProgress = null;
if (withText) {
this.sendMessage(withText);
}
})
.catch((err) => {
if (err.name === "AbortError" || err === "Abort") {
this.currentSendError = null;
} else {
this.currentSendError = err.LocaleString();
}
this.currentSendOperation = null;
this.currentSendProgress = null;
});
},
sendAttachment(withText) {
this.$refs.attachment.value = null;
if (this.isCurrentImageInputsPath) {
let inputFiles = this.currentImageInputsPath;
if (this.isCurrentFileInputsAnArray) {
let inputFiles = this.currentFileInputs;
if (Array.isArray(this.currentImageInputs) && this.currentImageInputs.scaled && this.currentImageInputs.useScaled) {
// Send scaled version of image instead!
inputFiles = this.currentImageInputs.map(({scaled}) => scaled)
}
inputFiles.forEach((inputFile) => this.sendImage(withText, inputFile))
const promises = inputFiles.map(inputFile => util.sendImage(this.$matrix.matrixClient, this.roomId, inputFile, this.onUploadProgress));
Promise.all(promises).then(() => {
this.currentSendOperation = null;
this.currentImageInputs = null;
this.currentFileInputs = null;
this.currentSendProgress = null;
if (withText) {
this.sendMessage(withText);
}
})
.catch((err) => {
if (err.name === "AbortError" || err === "Abort") {
this.currentSendError = null;
} else {
this.currentSendError = err.LocaleString();
}
this.currentSendOperation = null;
this.currentSendProgress = null;
});
}
},
@ -1093,7 +1090,7 @@ export default {
}
this.currentSendOperation = null;
this.currentImageInputs = null;
this.currentImageInputsPath = null;
this.currentFileInputs = null;
this.currentSendProgress = null;
this.currentSendError = null;
},
@ -1473,7 +1470,7 @@ export default {
onVoiceRecording(event) {
this.currentSendShowSendButton = false;
this.currentImageInputsPath = Array.isArray(this.currentImageInputsPath) ? [...this.currentImageInputsPath, event.file] : [event.file];
this.currentFileInputs = Array.isArray(this.currentFileInputs) ? [...this.currentFileInputs, event.file] : [event.file];
var text = undefined;
if (this.currentInput && this.currentInput.length > 0) {
text = this.currentInput;