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

Support for retry when sending media

Browse source
This commit is contained in:
N-Pex 2025-08-21 16:07:13 +02:00
parent 881270f149
commit ce6398685f
7 changed files with 69 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/assets/icons/ic_arrow_narrow.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 10V2M6 2L3 5M6 2L9 5" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</template>

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

@ -21,7 +21,8 @@
"close": "close",
"notify": "Notify",
"different_browser_title": "Try different browser",
"different_browser_content": "Some features may break. Copy and open link in a different browser."
"different_browser_content": "Some features may break. Copy and open link in a different browser.",
"retry": "Retry"
},
"menu": {
"start_private_chat": "Direct Message with this user",

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

@ -22,7 +22,7 @@
@dragleave.prevent="dropTarget = false"
@dragenter.prevent="dropTarget = true"
>
<ThumbnailView :file="currentAttachment" />
<ThumbnailView :item="currentAttachment" />
<div v-if="currentAttachment && currentAttachment.status === 'loading'" class="send-attachments__selecting__current-item__preparing">
<div style="font-size: 0.7em; opacity: 0.7">
<v-progress-circular indeterminate class="mb-0"></v-progress-circular>

58
src/components/file_mode/ThumbnailView.vue
View file

@ -29,48 +29,58 @@ import { EventAttachment } from "../../models/eventAttachment";
import { useThumbnail } from "../messages/composition/useThumbnail";
import { Attachment } from "../../models/attachment";
import ImageWithProgress from "../ImageWithProgress.vue";
function isEventAttachment(source: EventAttachment | Attachment | undefined): source is EventAttachment {
return (source as EventAttachment).event !== undefined;
}
function isAttachment(source: EventAttachment | Attachment | undefined): source is Attachment {
return (source as Attachment).file !== undefined;
}
const $$sanitize: any = inject("globalSanitize");
const thumbnailRef = useTemplateRef("thumbnailRef");
interface ThumbnailProps {
item?: EventAttachment;
file?: Attachment;
item?: EventAttachment | Attachment;
previewOnly?: boolean;
}
type ThumbnailEmits = {
(event: "itemclick", value: { item: EventAttachment }): void;
(event: "itemclick", value: { item: EventAttachment | Attachment }): void;
};
const props = defineProps<ThumbnailProps>();
const { item, file, previewOnly = false } = props;
const { item, previewOnly = false } = props;
const emits = defineEmits<ThumbnailEmits>();
let { isVideo, isImage, fileTypeIcon, fileTypeIconClass, fileName, fileSize } = useThumbnail(file?.file ?? item?.event);
let { isVideo, isImage, fileTypeIcon, fileTypeIconClass, fileName, fileSize } = useThumbnail(isEventAttachment(props.item) ? props.item.event : isAttachment(props.item) ? props.item.file : undefined);
const fileURL: Ref<string | undefined> = ref(undefined);
const source: Ref<string | undefined> = ref(undefined);
const poster: Ref<string | undefined> = ref(undefined);
const updateSource = () => {
if (props.item) {
if (isVideo.value || props.item.src) {
source.value = props.item.src;
if (isEventAttachment(props.item)) {
const eventAttachment = props.item;
if (isVideo.value || eventAttachment.src) {
source.value = eventAttachment.src;
} else if (previewOnly) {
props.item.loadThumbnail().then((url) => {
eventAttachment.loadThumbnail().then((url) => {
source.value = url.data;
})
} else if (isImage.value) {
props.item.loadSrc().then((url) => {
eventAttachment.loadSrc().then((url) => {
source.value = url.data;
})
}
} else if (props.file) {
} else if (isAttachment(props.item)) {
const attachment = props.item;
if (fileURL.value) {
URL.revokeObjectURL(fileURL.value);
}
fileURL.value = URL.createObjectURL(props.file.file);
fileURL.value = URL.createObjectURL(attachment.file);
source.value = fileURL.value;
} else {
source.value = undefined;
@ -78,11 +88,12 @@ const updateSource = () => {
};
const updatePoster = () => {
if (props.item && isVideo.value) {
if (props.item.thumbnail) {
poster.value = props.item.thumbnail;
if (isEventAttachment(props.item) && isVideo.value) {
const eventAttachment = props.item;
if (eventAttachment.thumbnail) {
poster.value = eventAttachment.thumbnail;
} else {
props.item
eventAttachment
.loadThumbnail()
.then((url) => {
poster.value = url.data;
@ -99,7 +110,7 @@ updatePoster();
watch(props, (props: ThumbnailProps) => {
const updates = useThumbnail(props.file?.file ?? props.item?.event);
const updates = useThumbnail(isEventAttachment(props.item) ? props.item.event : isAttachment(props.item) ? props.item.file : undefined);
isVideo.value = updates.isVideo.value;
isImage.value = updates.isImage.value;
fileTypeIcon = updates.fileTypeIcon;
@ -111,23 +122,24 @@ watch(props, (props: ThumbnailProps) => {
});
const loadingProgress = computed(() => {
if (item) {
return previewOnly ? item.thumbnailProgress : item.srcProgress;
if (isEventAttachment(item)) {
const eventAttachment = item;
return previewOnly ? eventAttachment.thumbnailProgress : eventAttachment.srcProgress;
}
return -1;
});
onMounted(() => {
if (thumbnailRef.value && (item as EventAttachment)) {
if (thumbnailRef.value && item) {
const hammerInstance = singleOrDoubleTapRecognizer(thumbnailRef.value);
hammerInstance.on("singletap doubletap", (ev: any) => {
if (ev.type === "singletap") {
emits("itemclick", { item: item as EventAttachment });
emits("itemclick", { item: item });
}
});
}
if (!previewOnly && item && (item as EventAttachment)) {
(item as EventAttachment).loadSrc();
if (!previewOnly && item && isEventAttachment(item)) {
item.loadSrc();
}
});

14
src/components/messages/composition/MessageThreadSending.vue
View file

@ -1,5 +1,5 @@
<template>
<MessageOutgoing :is="rootComponent" ref="root" v-bind="{ ...$props, ...$attrs }">
<MessageOutgoing v-bind="{ ...$props, ...$attrs }">
<div class="bubble">
<div class="original-message" v-if="inReplyToText">
<div class="original-message-sender">{{ inReplyToSender }}</div>
@ -20,11 +20,15 @@
<v-icon size="8">close</v-icon> </v-progress-circular
>{{ uploadBatch?.progressPercent }}%
</div>
<div class="message-upload-progress clickable" @click.stop="retryUpload" v-else-if="unref(uploadBatch?.sendingStatus) === 'failed'">
<v-icon size="12">$vuetify.icons.ic_arrow_narrow</v-icon>
<div>{{ t("global.retry") }}</div>
</div>
<SwipeableThumbnailsView :items="items" v-if="room.displayType == ROOM_TYPE_CHANNEL" v-bind="$attrs" />
<v-container v-else fluid class="imageCollection">
<v-row wrap>
<v-col v-for="{ size, item } in layoutedItems" :key="item.file.name + item.file.size" :cols="size">
<ThumbnailView :file="item" v-on:itemclick="onItemClick($event)" />
<ThumbnailView :item="item" v-on:itemclick="onItemClick($event)" />
</v-col>
</v-row>
</v-container>
@ -83,6 +87,12 @@ const cancelUpload = () => {
}
}
const retryUpload = () => {
if (uploadBatch.value) {
uploadBatch.value.send(uploadBatch.value.sendingRootMessage.value ?? "");
}
}
const onItemClick = (event: any) => {
showItem.value = event.item;
};

3
src/models/attachment.ts
View file

@ -39,7 +39,6 @@ export type AttachmentSendInfo = {
randomRotation: number; // For UI effects
randomTranslationX: number; // For UI effects
randomTranslationY: number; // For UI effects
proofHintFlags?: ProofHintFlags;
};
export type AttachmentThumbnail = {
@ -59,6 +58,7 @@ export type Attachment = {
useScaled: boolean;
src?: string;
proof?: Proof;
proofHintFlags?: ProofHintFlags;
thumbnail?: AttachmentThumbnail;
sendInfo: AttachmentSendInfo;
};
@ -66,6 +66,7 @@ export type Attachment = {
export type AttachmentBatch = {
sendingStatus: Ref<AttachmentSendStatus>;
sendingRootEventId: Ref<string | undefined>;
sendingRootMessage: Ref<string | undefined>;
progressPercent: Ref<number>;
attachments: Attachment[];
attachmentsSentCount: ComputedRef<number>;

18
src/models/attachmentManager.ts
View file

@ -119,6 +119,7 @@ export class AttachmentManager {
}
try {
attachment.proof = await proofmode.proofCheckFile(file);
attachment.proofHintFlags = extractProofHintFlags(attachment.proof);
// Default to scaled version if the image does not contain Content Credentials
//
@ -420,6 +421,7 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
const sendingStatus: Ref<AttachmentSendStatus> = ref("initial");
const sendingRootEventId: Ref<string | undefined> = ref(undefined);
const sendingRootMessage: Ref<string | undefined> = ref(undefined);
const sendingPromise: Ref<Promise<any> | undefined> = ref(undefined);
const attachments: Ref<Attachment[]> = ref([]);
@ -528,6 +530,8 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
const send = async (message: string): Promise<any> => {
if (!matrixClient || !room) return Promise.reject("Not configured");
sendingStatus.value = "sending";
progressPercent.value = 0;
sendingRootMessage.value = message;
attachments.value.forEach((attachment) => {
let sendInfo: AttachmentSendInfo = {
@ -539,7 +543,6 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
randomTranslationX: 0,
randomTranslationY: 0,
promise: undefined,
proofHintFlags: extractProofHintFlags(attachment.proof),
};
attachment.sendInfo = shallowReactive(sendInfo);
attachment.proof = undefined;
@ -555,6 +558,7 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
event.uploadBatch = {
sendingStatus,
sendingRootEventId,
sendingRootMessage,
progressPercent,
attachments: unref(attachments),
attachmentsSentCount,
@ -572,8 +576,7 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
};
room.on(RoomEvent.LocalEchoUpdated, onLocalEchoUpdated);
const promise = utils
.sendTextMessage(matrixClient, room.roomId, message, undefined, undefined, txnId)
const promise = (sendingRootEventId.value ? Promise.resolve(sendingRootEventId.value) : utils.sendTextMessage(matrixClient, room.roomId, message, undefined, undefined, txnId))
.then((eventId: string) => {
sendingRootEventId.value = eventId;
@ -582,7 +585,7 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
if (index < attachments.value.length) {
const attachment = attachments.value[index];
const item = attachment;
if (item.sendInfo.status !== "initial") {
if (item.sendInfo.status !== "initial" && item.sendInfo.status !== "failed") {
return getItemPromise(++index);
}
item.sendInfo.status = "sending";
@ -637,12 +640,13 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
item.sendInfo.status = "sent";
item.sendInfo.statusDate = Date.now();
})
.catch((ignorederr: any) => {
.catch((error: any) => {
if (item.sendInfo.promise?.aborted) {
item.sendInfo.status = "canceled";
} else {
console.error("ERROR", ignorederr);
console.error("ERROR", error);
item.sendInfo.status = "failed";
return Promise.reject(error)
}
return Promise.resolve();
});
@ -659,6 +663,7 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
})
.catch((err: any) => {
console.error("Upload error", err);
sendingStatus.value = "failed";
})
.finally(() => {
room.off(RoomEvent.LocalEchoUpdated, onLocalEchoUpdated);
@ -670,6 +675,7 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
return {
sendingStatus,
sendingRootEventId,
sendingRootMessage,
progressPercent,
attachments: unref(attachments),
attachmentsSentCount,