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,