From ac4af0a53d7eb450e34a27f861f78d297bf35586 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Wed, 14 May 2025 10:47:21 +0200
Subject: [PATCH] Fix export

---
 src/components/AuthedImage.vue                |  4 +--
 src/components/Chat.vue                       |  3 --
 src/components/RoomExport.vue                 | 32 +++++++------------
 src/components/chatMixin.js                   |  5 +++
 .../export/MessageIncomingImageExport.vue     |  7 +++-
 .../export/MessageIncomingThreadExport.vue    |  4 +--
 .../export/MessageOutgoingImageExport.vue     |  7 +++-
 .../export/MessageOutgoingThreadExport.vue    |  3 +-
 vite.config.mjs                               |  8 ++++-
 9 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/src/components/AuthedImage.vue b/src/components/AuthedImage.vue
index f8f5049..02686dd 100644
--- a/src/components/AuthedImage.vue
+++ b/src/components/AuthedImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <img v-if="imageSrc" :src="imageSrc" style="width:100%;height:100%" />
+  <img :src="imageSrc" style="width:100%;height:100%" />
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
     src: {
       type: String,
       default: function () {
-        return null;
+        return undefined;
       },
     },
   },
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 94b383d..809232d 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -692,9 +692,6 @@ export default {
     canRecordAudio() {
       return util.browserCanRecordAudio();
     },
-    debugging() {
-      return false; //(window.location.host || "").startsWith("localhost");
-    },
     canCreatePoll() {
       // We say that if you can redact events, you are allowed to create polls.
       const me = this.room && this.room.getMember(this.$matrix.currentUserId);
diff --git a/src/components/RoomExport.vue b/src/components/RoomExport.vue
index 614d6da..be0e401 100644
--- a/src/components/RoomExport.vue
+++ b/src/components/RoomExport.vue
@@ -307,7 +307,7 @@ export default {
             for (const comp of childComponents) {
 
               // Avatars need downloading?
-              if (comp.$el) {
+              if (comp.$el && comp.$el.nodeType == 1) {
                 const avatars = comp.$el.getElementsByClassName("v-avatar");
                 if (avatars && avatars.length > 0) {
                   const member = this.room.getMember(comp.event.getSender());
@@ -353,7 +353,7 @@ export default {
                 }
               }
 
-              let componentClass = comp.$vnode.tag.split("-").reverse()[0];
+              let componentClass = comp.$options ? comp.$options.__file.split("/").reverse()[0].split(".")[0] : "invalid_component";
               switch (componentClass) {
                 case "MessageIncomingImageExport":
                 case "MessageOutgoingImageExport":
@@ -386,21 +386,15 @@ export default {
                             let fileName = comp.event.getId() + extension;
                             imageFolder.file(fileName, blob); // TODO calc bytes
 
-                            let blobUrl = URL.createObjectURL(blob);
-                            comp.src = blobUrl;
-
-                            this.$nextTick(() => {
-                              // Update source
-                              let elements = comp.$el.getElementsByClassName("v-image__image");
-                              let element = elements && elements[0];
-                              if (element) {
-                                element.style.backgroundImage = 'url("./images/' + fileName + '")';
-                                element.classList.remove("v-image__image--preload");
-                              }
-                              URL.revokeObjectURL(blobUrl); // Give the blob back
-                              this.processedEvents += 1;
-                              resolve(true);
-                            });
+                            // Update source
+                            const images = comp.$el.getElementsByTagName("img");
+                            for (let imageIndex = 0; imageIndex < images.length; imageIndex++) {
+                              const img = images[imageIndex];
+                              img.removeAttribute("src");
+                              img.setAttribute("data-exported-src", './images/' + fileName);
+                            }
+                            this.processedEvents += 1;
+                            resolve(true);
                           }
                         });
                       })
@@ -419,10 +413,9 @@ export default {
                           currentMediaSize += blob.size;
                           return new Promise((resolve, ignoredReject) => {
                             //let mime = blob.type;
-                            var extension = ".mp3";
+                            var extension = ".webm";
                             let fileName = comp.event.getId() + extension;
                             audioFolder.file(fileName, blob); // TODO calc bytes
-                            //this.$nextTick(() => {
                             let elements = comp.$el.getElementsByTagName("audio");
                             let element = elements && elements[0];
                             if (element) {
@@ -430,7 +423,6 @@ export default {
                             }
                             this.processedEvents += 1;
                             resolve(true);
-                            //});
                           });
                         }
                       })
diff --git a/src/components/chatMixin.js b/src/components/chatMixin.js
index fe79354..45aa163 100644
--- a/src/components/chatMixin.js
+++ b/src/components/chatMixin.js
@@ -107,6 +107,11 @@ export default {
     CreatePollDialog,
     ReadMarker
   },
+  computed: {
+    debugging() {
+      return false; //(window.location.host || "").startsWith("localhost");
+    },
+  },
   methods: {
     showDayMarkerBeforeEvent(event) {
       const idx = this.events.indexOf(event);
diff --git a/src/components/messages/export/MessageIncomingImageExport.vue b/src/components/messages/export/MessageIncomingImageExport.vue
index 95b53ae..527e22d 100644
--- a/src/components/messages/export/MessageIncomingImageExport.vue
+++ b/src/components/messages/export/MessageIncomingImageExport.vue
@@ -1,7 +1,7 @@
 <template>
   <message-incoming v-bind="{ ...$props, ...$attrs }">
     <div class="bubble image-bubble">
-      <v-img :aspect-ratio="16 / 9" ref="image" :src="src" :cover="cover" :contain="contain" />
+      <img :src="src" :style="imageStyle" />
     </div>
   </message-incoming>
 </template>
@@ -39,6 +39,11 @@ export default {
       URL.revokeObjectURL(objectUrl);
     }
   },
+  computed: {
+    imageStyle() {
+      return "width:100%;aspect-ratio:16/9;object-fit:" + (this.cover ? "cover" : "contain");
+    }
+  }
 };
 </script>
 
diff --git a/src/components/messages/export/MessageIncomingThreadExport.vue b/src/components/messages/export/MessageIncomingThreadExport.vue
index c2bda70..70c15c2 100644
--- a/src/components/messages/export/MessageIncomingThreadExport.vue
+++ b/src/components/messages/export/MessageIncomingThreadExport.vue
@@ -1,7 +1,7 @@
 <template>
   <message-incoming class="messageIn-thread" v-bind="{ ...$props, ...$attrs }">
-    <component v-for="item in items" :is="componentFn(item.event)" :originalEvent="item.event" :key="item.event.getId()"
-      v-bind="{ ...$props, ...$attrs }" ref="exportedEvent" />
+    <component v-for="item in items" :is="componentFn(item.event)" v-bind="{ ...$props, ...$attrs }" :originalEvent="item.event" :key="item.event.getId()"
+      ref="exportedEvent" />
   </message-incoming>
 </template>
 
diff --git a/src/components/messages/export/MessageOutgoingImageExport.vue b/src/components/messages/export/MessageOutgoingImageExport.vue
index 42dd988..34d39f9 100644
--- a/src/components/messages/export/MessageOutgoingImageExport.vue
+++ b/src/components/messages/export/MessageOutgoingImageExport.vue
@@ -1,7 +1,7 @@
 <template>
   <message-outgoing v-bind="{ ...$props, ...$attrs }">
     <div class="bubble image-bubble">
-      <v-img :aspect-ratio="16 / 9" ref="image" :src="src" :cover="cover" :contain="contain" />
+      <img :src="src" :style="imageStyle" />
     </div>
   </message-outgoing>
 </template>
@@ -39,6 +39,11 @@ export default {
       URL.revokeObjectURL(objectUrl);
     }
   },
+  computed: {
+    imageStyle() {
+      return "width:100%;aspect-ratio:16/9;object-fit:" + (this.cover ? "cover" : "contain");
+    }
+  }
 };
 </script>
 
diff --git a/src/components/messages/export/MessageOutgoingThreadExport.vue b/src/components/messages/export/MessageOutgoingThreadExport.vue
index 2a1f64f..4feee8d 100644
--- a/src/components/messages/export/MessageOutgoingThreadExport.vue
+++ b/src/components/messages/export/MessageOutgoingThreadExport.vue
@@ -1,7 +1,6 @@
 <template>
   <message-outgoing class="messageOut-thread" v-bind="{ ...$props, ...$attrs }">
-    <component v-for="item in items" :is="componentFn(item.event)" :originalEvent="item.event" :key="item.event.getId()"
-      v-bind="{ ...$props, ...$attrs }" ref="exportedEvent" />
+    <component v-for="item in items" :is="componentFn(item.event)" v-bind="{ ...$props, ...$attrs }" :originalEvent="item.event" :key="item.event.getId()" ref="exportedEvent" />
   </message-outgoing>
 </template>
 
diff --git a/vite.config.mjs b/vite.config.mjs
index 35924e9..800b292 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -30,7 +30,13 @@ export default defineConfig(({mode}) => ({
     // commonjs({
     //   exclude: ["*vuex-persist*", "*deepmerge*"]
     // }),
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          comments: false
+        }
+      }
+    }),
     vueJsx(),
     vitePluginVuetify(),
     // Components({