Support for retry when sending media

src/components/file_mode/SendAttachmentsLayout.vue

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

src/components/file_mode/ThumbnailView.vue

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

src/components/messages/composition/MessageThreadSending.vue

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