Add AttachmentBatch for future removal of sendAttachmentsMixin
This commit is contained in:
N-Pex
parent
1d30d0633d
commit
fd82fd8840
5 changed files with 377 additions and 231 deletions
|
|
@ -228,90 +228,13 @@
|
|||
<input ref="attachment" type="file" name="attachment" @change="handlePickedAttachment($event)"
|
||||
accept="image/*,audio/*,video/*,.mp3,.mp4,.wav,.m4a,.pdf,application/pdf,.apk,application/vnd.android.package-archive,.ipa,.zip,application/zip,application/x-zip-compressed,multipart/x-zip" class="d-none" multiple/>
|
||||
|
||||
<!-- <div v-if="currentFileInputsDialog && !useFileModeNonAdmin">
|
||||
<v-dialog v-model="currentFileInputsDialog" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '50%' : '85%'" persistent scrollable>
|
||||
<v-card class="ma-0 pa-0">
|
||||
<v-card-text v-if="!currentFileInputs.length">
|
||||
{{ this.$t("message.preparing_to_upload")}}
|
||||
<v-progress-linear
|
||||
indeterminate
|
||||
class="mb-0"
|
||||
></v-progress-linear>
|
||||
</v-card-text>
|
||||
<template v-else>
|
||||
<v-card-title>
|
||||
<div v-if="currentSendErrorExceededFile" class="text-red">{{ currentSendErrorExceededFile }}</div>
|
||||
<span v-else> {{ $t('message.send_attachements_dialog_title') }} </span>
|
||||
</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<template v-if="imageFiles && imageFiles.length">
|
||||
<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">
|
||||
<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>
|
||||
<C2PABadge :file="currentImageInput.actualFile" />
|
||||
</div>
|
||||
<div>
|
||||
<span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled">
|
||||
{{ currentImageInput.scaledDimensions.width }} x {{ currentImageInput.scaledDimensions.height }}</span>
|
||||
<span v-else-if="currentImageInput && currentImageInput.dimensions">
|
||||
{{ currentImageInput.dimensions.width }} x {{ currentImageInput.dimensions.height }}
|
||||
</span>
|
||||
|
||||
<span v-if="currentImageInput && currentImageInput.scaled && currentImageInput.useScaled">
|
||||
({{ formatBytes(currentImageInput.scaledSize) }})
|
||||
</span>
|
||||
<span v-else>
|
||||
({{ formatBytes(currentImageInput.actualSize) }})
|
||||
</span>
|
||||
|
||||
<v-switch v-if="currentImageInput && currentImageInput.scaled" :label="$t('message.scale_image')"
|
||||
v-model="currentImageInput.useScaled" :disabled="currentImageInput && currentImageInput.sendInfo !== undefined" />
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</template>
|
||||
<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 currentFileInputs" :key="id">
|
||||
<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>
|
||||
</template>
|
||||
<v-divider></v-divider>
|
||||
<v-textarea v-if="showAttachmentCaptionInput" v-model="attachmentCaption" ref="attachmentCaption" color="black" background-color="transparent"
|
||||
variant="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>
|
||||
</v-spacer>
|
||||
<v-btn color="primary" variant="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" variant="text" @click="sendAttachment(attachmentCaption)"
|
||||
v-if="currentSendShowSendButton" :disabled="currentSendShowSendButton && sendingStatus != sendStatuses.INITIAL">{{ $t("menu.send") }}</v-btn>
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div> -->
|
||||
|
||||
<SendAttachmentsLayout
|
||||
v-if="currentFileInputs && currentFileInputs.length > 0 && !useFileModeNonAdmin"
|
||||
v-if="uploadBatch && uploadBatch.attachments.length > 0 && !useFileModeNonAdmin"
|
||||
:room="room"
|
||||
v-on:pick-file="showAttachmentPicker(false)"
|
||||
v-on:add-files="(files) => addAttachments(files)"
|
||||
v-on:remove-file="(index) => removeAttachment(index)"
|
||||
:attachments="currentFileInputs"
|
||||
v-on:close="resetAttachments"
|
||||
:batch="uploadBatch"
|
||||
v-on:close="() => { uploadBatch = undefined }"
|
||||
/>
|
||||
|
||||
<MessageOperationsBottomSheet ref="messageOperationsSheet">
|
||||
|
|
@ -490,10 +413,7 @@ export default {
|
|||
|
||||
scrollPosition: null,
|
||||
currentFileInputs: [],
|
||||
currentSendShowSendButton: true,
|
||||
currentSendError: null,
|
||||
currentSendErrorExceededFile: null,
|
||||
attachmentCaption: undefined,
|
||||
uploadBatch: undefined,
|
||||
showEmojiPicker: false,
|
||||
selectedEvent: null,
|
||||
editedEvent: null,
|
||||
|
|
@ -615,29 +535,6 @@ export default {
|
|||
const currentUserId= this.selectedEvent?.sender.userId || this.$matrix.currentUserId
|
||||
return this.joinedAndInvitedMembers.find(({userId}) => userId === currentUserId)
|
||||
},
|
||||
nonImageFiles() {
|
||||
return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => !file?.type.includes("image/"))
|
||||
},
|
||||
imageFiles() {
|
||||
return this.isCurrentFileInputsAnArray && this.currentFileInputs.filter(file => file?.type.includes("image/"))
|
||||
},
|
||||
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
|
||||
},
|
||||
set() {
|
||||
this.currentFileInputs = [];
|
||||
}
|
||||
},
|
||||
chatContainer() {
|
||||
const container = this.$refs.chatContainer;
|
||||
if (this.useVoiceMode) {
|
||||
|
|
@ -1493,32 +1390,15 @@ export default {
|
|||
this.$refs.attachment.click();
|
||||
},
|
||||
|
||||
async addAttachment(file) {
|
||||
addAttachment(file) {
|
||||
if (file) {
|
||||
this.currentFileInputs = [... this.currentFileInputs, this.$matrix.attachmentManager.createAttachment(file)];
|
||||
// let optimizedFileObj;
|
||||
// if (file.type.startsWith("image/")) {
|
||||
// const f = await proofmode.proofCheckFile(file);
|
||||
|
||||
// var reader = new FileReader();
|
||||
// optimizedFileObj = await new Promise(resolve => {
|
||||
// reader.onload = evt => {
|
||||
// resolve(this.optimizeImage(evt, file));
|
||||
// }
|
||||
// reader.readAsDataURL(f);
|
||||
// })
|
||||
// } else {
|
||||
// optimizedFileObj = file;
|
||||
// }
|
||||
// console.error("OPTIMIZED", optimizedFileObj);
|
||||
// this.currentFileInputs = Array.isArray(this.currentFileInputs) ? [...this.currentFileInputs, optimizedFileObj] : [optimizedFileObj];
|
||||
if (!this.uploadBatch) {
|
||||
this.uploadBatch = this.$matrix.attachmentManager.createUpload(this.room);
|
||||
}
|
||||
this.uploadBatch?.addAttachment(this.$matrix.attachmentManager.createAttachment(file));
|
||||
}
|
||||
},
|
||||
|
||||
removeAttachment(index) {
|
||||
this.currentFileInputs = this.currentFileInputs.toSpliced(index, 1);
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle picked attachment
|
||||
*/
|
||||
|
|
@ -1527,24 +1407,7 @@ export default {
|
|||
},
|
||||
|
||||
addAttachments(files) {
|
||||
// TODO - refactor
|
||||
this.$matrix.matrixClient.getMediaConfig(this.$matrix.useAuthedMedia).then((config) => {
|
||||
const configUploadSize = config["m.upload.size"];
|
||||
const configFormattedUploadSize = this.formatBytes(configUploadSize);
|
||||
|
||||
files.every(file => {
|
||||
if (configUploadSize && file.size > configUploadSize) {
|
||||
this.currentSendError = this.$t("message.upload_file_too_large");
|
||||
this.currentSendErrorExceededFile = this.$t("message.upload_exceeded_file_limit", { configFormattedUploadSize });
|
||||
this.currentSendShowSendButton = false;
|
||||
return false;
|
||||
} else {
|
||||
this.currentSendShowSendButton = true;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
files.forEach(file => this.addAttachment(file));
|
||||
});
|
||||
files.forEach(file => this.addAttachment(file));
|
||||
},
|
||||
|
||||
showStickerPicker() {
|
||||
|
|
@ -1559,7 +1422,6 @@ export default {
|
|||
promise.then(() => {
|
||||
this.sendingAttachments = [];
|
||||
this.currentFileInputs = [];
|
||||
this.attachmentCaption = undefined;
|
||||
this.sendingStatus = "initial"
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -1580,7 +1442,6 @@ export default {
|
|||
this.cancelSendAttachments();
|
||||
}
|
||||
this.currentFileInputs = [];
|
||||
this.attachmentCaption = undefined;
|
||||
this.currentSendError = null;
|
||||
this.currentSendErrorExceededFile = null;
|
||||
this.sendingStatus = "initial";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue