WIP improve export

src/components/RoomExport.vue

@@ -27,12 +27,12 @@
           <div v-if="!event.isRelation() && !event.isRedacted() && !event.isRedaction()" :ref="event.getId()">
             <div class="message-wrapper">
               <component
-                :is="componentForEvent(event, true)"
+                :is="componentForEventForExport(event, true)"
                 :room="room"
                 :originalEvent="event"
                 :nextEvent="events[index + 1]"
                 :timelineSet="timelineSet"
-                :componentFn="componentForEvent"
+                :componentFn="componentForEventForExport"
                 ref="exportedEvent"
                 v-on:layout-change="onLayoutChange"
               />
@@ -153,6 +153,7 @@ export default {
     return {
       timelineSet: null,
       events: [],
+      exportComponents: [],
       fetchedEvents: 0,
       totalEvents: 0,
       processedEvents: 0,
@@ -179,6 +180,22 @@ export default {
     },
   },
   methods: {
+    componentForEventForExport(event, forExport) {
+      const comp = this.componentForEvent(event, forExport);
+      const self = this;
+      if (comp) {
+        if (!comp.mixins) {
+          comp.mixins = [];
+        }
+        comp.mixins.push({
+          created: function() {
+            console.error("Created", this.name);
+            self.exportComponents.push(this);
+          }
+        });
+      }
+      return comp;
+    },
     cancelExport() {
       this.cancelled = true;
     },
@@ -230,6 +247,8 @@ export default {
       var currentMediaSize = 0;
       var maxMediaSize = 1024 * 1024 * 1024; // 1GB
 
+      this.exportComponents = [];
+
       this.getEvents()
         .then((events) => {
           var decryptionPromises = [];
@@ -282,6 +301,8 @@ export default {
           });
         })
         .then(() => {
+          this.totalEvents = this.exportComponents.length;
+
           // UI updated, start processing events
           zip = new JSZip();
           var avatarFolder = zip.folder("avatars");
@@ -291,22 +312,8 @@ export default {
           var filesFolder = zip.folder("files");
 
           var downloadPromises = [];
-          let components = this.$refs.exportedEvent;
-          for (const parentComp of components) {
-            let childComponents = [parentComp];
 
-            // Some components, i.e. the media threads, have subcomponents
-            // that we want to export. So pickup subcomponents here as well.
-            if (parentComp.$refs && parentComp.$refs.exportedEvent) {
-              if (Array.isArray(parentComp.$refs.exportedEvent)) {
-                for (const child of parentComp.$refs.exportedEvent) {
-                  childComponents.push(child);
-                }
-              } else {
-                childComponents.push(parentComp.$refs.exportedEvent);
-              }
-            }
-            for (const comp of childComponents.filter((c) => c.event != undefined)) {
+          for (const comp of this.exportComponents.filter((c) => c.event != undefined)) {
             // Avatars need downloading?
             if (comp.$el && comp.$el.nodeType == 1) {
               const avatars = comp.$el.getElementsByClassName("v-avatar");
@@ -369,13 +376,15 @@ export default {
               }
             }
 
-              let componentClass = comp.$options
-                ? comp.$options.__file.split("/").reverse()[0].split(".")[0]
-                : "invalid_component";
             let attachment =
               comp.event && comp.event.getId
                 ? this.$matrix.attachmentManager.getEventAttachment(comp.event)
                 : undefined;
+            let componentClass = comp.$options
+              ? comp.$options.__file.split("/").reverse()[0].split(".")[0]
+              : "invalid_component";
+            console.error("Processi", componentClass, comp.event, comp.originalEvent, attachment);
+
 
             if (attachment && (attachment.srcSize = 0 || currentMediaSize + attachment.srcSize <= maxMediaSize)) {
               downloadPromises.push(
@@ -472,7 +481,6 @@ export default {
               this.processedEvents += 1;
             }
           }
-          }
           return Promise.all(downloadPromises);
         })
         .then(() => {

src/components/messages/composition/MessageThreadExport.vue

@@ -32,9 +32,6 @@ import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk";
 const { t } = useI18n();
 const $matrix: any = inject("globalMatrix");
 
-type RootType = InstanceType<typeof MessageOutgoing | typeof MessageIncoming>;
-const rootRef = useTemplateRef<RootType>("root");
-
 const emits = defineEmits<
   MessageEmits & { (event: "layout-change", value: { element: Element | undefined; action: () => void }): void }
 >();
@@ -44,8 +41,7 @@ const props = defineProps<MessageProps>();
 
 const processThread = () => {
   if (!event.value?.isRedacted()) {
-    const el = rootRef.value?.$el;
-    emits("layout-change", { element: el, action: _processThread });
+    _processThread();
   }
 };
 

src/models/attachmentManager.ts

@@ -149,9 +149,10 @@ export class AttachmentManager {
     attachment.loadSrc = (options?: EventAttachmentLoadSrcOptions) => {
       if (attachment.src && !options?.asBlob) {
         return Promise.resolve({data: attachment.src, type: "src"});
-      } else if (attachment.srcPromise) {
+      } else if (attachment.srcPromise && !options?.asBlob) {
         return attachment.srcPromise;
       }
+      Implement loadBlob somewhere here!
       attachment.srcPromise = this._loadEventAttachmentOrThumbnail(event, false, !!options?.asBlob, (percent) => {
         attachment.srcProgress = percent;
       }).then((res) => {