From 9b0a6ae225dd093a8cbb297391fd043d33f797a5 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Thu, 17 Jul 2025 11:22:26 +0200 Subject: [PATCH] More send media optimization --- src/assets/css/sendattachments.scss | 12 ++-- src/components/Chat.vue | 16 ++--- .../file_mode/SendAttachmentsLayout.vue | 20 ++++--- src/models/attachment.ts | 2 +- src/models/attachmentManager.ts | 59 +++++++++---------- 5 files changed, 54 insertions(+), 55 deletions(-) diff --git a/src/assets/css/sendattachments.scss b/src/assets/css/sendattachments.scss index b2c5d5b..ada6e04 100644 --- a/src/assets/css/sendattachments.scss +++ b/src/assets/css/sendattachments.scss @@ -83,6 +83,7 @@ $hiliteColor: #4642f1; flex: 1 1 100%; background-color: $backgroundSection; display: flex; + position: relative; &.drop-target { background-color: $backgroundHilite; @@ -97,13 +98,14 @@ $hiliteColor: #4642f1; object-fit: cover; } - .filename { - width: 100%; - height: 100%; + .send-attachments__selecting__current-item__preparing { + position: absolute; + right: 8px; + bottom: 4px; display: flex; flex-direction: column; - align-items: center; - justify-content: center; + align-items: end; + justify-content: end; } } diff --git a/src/components/Chat.vue b/src/components/Chat.vue index 6708695..667a89c 100644 --- a/src/components/Chat.vue +++ b/src/components/Chat.vue @@ -1392,15 +1392,6 @@ export default { this.$refs.attachment.click(); }, - addAttachment(file) { - if (file) { - if (!this.uploadBatch) { - this.uploadBatch = this.$matrix.attachmentManager.createUpload(this.room); - } - this.uploadBatch?.addAttachment(this.$matrix.attachmentManager.createAttachment(file)); - } - }, - /** * Handle picked attachment */ @@ -1411,7 +1402,10 @@ export default { }, addAttachments(files) { - files.forEach(file => this.addAttachment(file)); + if (!this.uploadBatch) { + this.uploadBatch = this.$matrix.attachmentManager.createUpload(this.room); + } + this.uploadBatch?.addAttachments(files.map((f) => this.$matrix.attachmentManager.createAttachment(f))); }, showStickerPicker() { @@ -1862,7 +1856,7 @@ export default { onVoiceRecording(event) { const batch = this.$matrix.attachmentManager.createUpload(this.room); - batch.addAttachment(this.$matrix.attachmentManager.createAttachment(event.file)); + batch.addAttachments([this.$matrix.attachmentManager.createAttachment(event.file)]); var text = undefined; if (this.currentInput && this.currentInput.length > 0) { text = this.currentInput; diff --git a/src/components/file_mode/SendAttachmentsLayout.vue b/src/components/file_mode/SendAttachmentsLayout.vue index b5b9abc..1edb68c 100644 --- a/src/components/file_mode/SendAttachmentsLayout.vue +++ b/src/components/file_mode/SendAttachmentsLayout.vue @@ -22,14 +22,12 @@ @dragleave.prevent="dropTarget = false" @dragenter.prevent="dropTarget = true" > -
-
{{ currentAttachment.file.name }}
+ +
- {{ $t("message.preparing_to_upload") }} - +
-
@@ -94,6 +92,7 @@ elevation="0" color="black" @click.stop="showInformation" + :disabled="currentAttachment?.status !== 'loaded'" >
@@ -253,7 +252,7 @@ export default defineComponent({ }, data() { return { - currentItemIndex: 0, + currentItemIndex: -1, messageInput: "", mainStatuses: Object.freeze({ SELECTING: 0, @@ -276,6 +275,9 @@ export default defineComponent({ return !this.batch.canSend; }, currentAttachment(): Attachment | undefined { + if (this.currentItemIndex < 0 && this.batch.attachments.length > 0) { + this.currentItemIndex = this.batch.attachments.length - 1; + } if (this.currentItemIndex >= 0 && this.currentItemIndex < this.batch.attachments.length) { return this.batch.attachments[this.currentItemIndex]; } @@ -305,16 +307,18 @@ export default defineComponent({ this.dropTarget = false; let droppedFiles: FileList | undefined = e.dataTransfer?.files; if (!droppedFiles) return; + let files: File[] = []; for (let i = 0; i < droppedFiles.length; i++) { const file = droppedFiles.item(i); - this.batch.addAttachment(this.$matrix.attachmentManager.createAttachment(file)); + if (file) files.push(file); } + this.batch.addAttachments(files.map((f) => this.$matrix.attachmentManager.createAttachment(f))); }, close() { this.batch.cancel(); this.status = this.mainStatuses.SELECTING; this.messageInput = ""; - this.currentItemIndex = 0; + this.currentItemIndex = -1; this.$emit("close"); }, sendAll() { diff --git a/src/models/attachment.ts b/src/models/attachment.ts index 0b8765f..2c03f08 100644 --- a/src/models/attachment.ts +++ b/src/models/attachment.ts @@ -70,7 +70,7 @@ export type AttachmentBatch = { attachmentsSentCount: ComputedRef; attachmentsSending: ComputedRef; attachmentsSent: ComputedRef; - addAttachment: (attachment: Attachment) => void; + addAttachments: (attachments: Attachment[]) => void; removeAttachment: (attachment: Attachment) => void; isTooLarge: (attachment: Attachment) => boolean; canSend: ComputedRef; diff --git a/src/models/attachmentManager.ts b/src/models/attachmentManager.ts index 674612b..852fb11 100644 --- a/src/models/attachmentManager.ts +++ b/src/models/attachmentManager.ts @@ -57,7 +57,6 @@ export class AttachmentManager { private async prepareUpload(attachment: Attachment): Promise { const file = attachment.file; if (file.type.startsWith("image/")) { - attachment.proof = await proofmode.proofCheckFile(file); let url = URL.createObjectURL(file); attachment.src = url; if (attachment.src) { @@ -66,8 +65,6 @@ export class AttachmentManager { img.src = url; attachment.dimensions = await new Promise((response) => { img.onload = (event) => { - console.log("height: " + img.height); - console.log("width: " + img.width); response({ width: img.width, height: img.height }); }; img.onerror = (event) => { @@ -82,38 +79,38 @@ export class AttachmentManager { var aspect = w / h; var newWidth = parseInt((w > h ? 640 : 640 * aspect).toFixed()); var newHeight = parseInt((w > h ? 640 / aspect : 640).toFixed()); - imageResize(file, { + const img = await imageResize(file, { format: "webp", width: newWidth, height: newHeight, outputType: "blob", - }) - .then((img) => { - attachment.scaledFile = new File([img as BlobPart], file.name, { - type: "image/webp", - lastModified: Date.now(), - }); - attachment.scaledDimensions = { - width: newWidth, - height: newHeight, - }; - - // Default to scaled version if the image does not contain Content Credentials - // - attachment.useScaled = - attachment.scaledFile !== undefined && - (attachment.proof === undefined || - attachment.proof.integrity === undefined || - attachment.proof.integrity.c2pa === undefined); - }) - .catch((err) => { - console.error("Resize failed:", err); - }); + }); + attachment.scaledFile = new File([img as BlobPart], file.name, { + type: "image/webp", + lastModified: Date.now(), + }); + attachment.scaledDimensions = { + width: newWidth, + height: newHeight, + }; } } catch (error) { console.error("Failed to get image dimensions: " + error); } } + try { + attachment.proof = await proofmode.proofCheckFile(file); + + // Default to scaled version if the image does not contain Content Credentials + // + attachment.useScaled = + attachment.scaledFile !== undefined && + (attachment.proof === undefined || + attachment.proof.integrity === undefined || + attachment.proof.integrity.c2pa === undefined); + } catch (error) { + console.error("Failed to get content credentials: " + error); + } } else if (file.type.startsWith("video/")) { let url = URL.createObjectURL(file); const thumb: AttachmentThumbnail | undefined = await new Promise((resolve) => { @@ -421,9 +418,9 @@ export const createUploadBatch = ( attachments.value.sort((a, b) => (b.sendInfo?.statusDate ?? 0) - (a.sendInfo?.statusDate ?? 0)); }; - const addAttachment = (attachment: Attachment) => { + const addAttachments = (attachmentsToAdd: Attachment[]) => { if (sendingStatus.value == "initial") { - attachments.value.push(attachment); + attachments.value.push(...attachmentsToAdd); } }; @@ -439,7 +436,9 @@ export const createUploadBatch = ( }; const canSend = computed(() => { - return attachments.value.length > 0 && !attachments.value.some((a: Attachment) => isTooLarge(a)); + return ( + attachments.value.length > 0 && !attachments.value.some((a: Attachment) => isTooLarge(a) || a.status !== "loaded") + ); }); const cancel = () => { @@ -603,7 +602,7 @@ export const createUploadBatch = ( attachmentsSentCount, attachmentsSending, attachmentsSent, - addAttachment, + addAttachments, removeAttachment, isTooLarge, canSend,