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

More send media optimization

Browse source
This commit is contained in:
N-Pex 2025-07-17 11:22:26 +02:00
parent 7b4b35762a
commit 9b0a6ae225
5 changed files with 54 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/assets/css/sendattachments.scss
View file

@ -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;
}
}

16
src/components/Chat.vue
View file

@ -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;

20
src/components/file_mode/SendAttachmentsLayout.vue
View file

@ -22,14 +22,12 @@
@dragleave.prevent="dropTarget = false"
@dragenter.prevent="dropTarget = true"
>
<div v-if="currentAttachment && currentAttachment.status === 'loading'" class="filename">
<div>{{ currentAttachment.file.name }}</div>
<ThumbnailView :file="currentAttachment" />
<div v-if="currentAttachment && currentAttachment.status === 'loading'" class="send-attachments__selecting__current-item__preparing">
<div style="font-size: 0.7em; opacity: 0.7">
{{ $t("message.preparing_to_upload") }}
<v-progress-linear indeterminate class="mb-0"></v-progress-linear>
<v-progress-circular indeterminate class="mb-0"></v-progress-circular>
</div>
</div>
<ThumbnailView v-else :file="currentAttachment" />
</div>
<div class="file-drop-thumbnail-container">
<v-tooltip location="top" v-for="(attachment, index) in batch.attachments" :key="index">
@ -94,6 +92,7 @@
elevation="0"
color="black"
@click.stop="showInformation"
:disabled="currentAttachment?.status !== 'loaded'"
></v-btn>
</div>
</template>
@ -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() {

2
src/models/attachment.ts
View file

@ -70,7 +70,7 @@ export type AttachmentBatch = {
attachmentsSentCount: ComputedRef<number>;
attachmentsSending: ComputedRef<Attachment[]>;
attachmentsSent: ComputedRef<Attachment[]>;
addAttachment: (attachment: Attachment) => void;
addAttachments: (attachments: Attachment[]) => void;
removeAttachment: (attachment: Attachment) => void;
isTooLarge: (attachment: Attachment) => boolean;
canSend: ComputedRef<boolean>;

59
src/models/attachmentManager.ts
View file

@ -57,7 +57,6 @@ export class AttachmentManager {
private async prepareUpload(attachment: Attachment): Promise<Attachment> {
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,