Decrypt all events before use

src/components/Chat.vue

@@ -757,7 +757,17 @@ export default {
       let lastDisplayedEvent = undefined;
       events = events.flatMap((e) => {
         let result = [];
-        e.component = this.componentForEvent(e, false);
+        if (e.isEncrypted()) {
+          if (e.getClearContent()) {
+            e.component = this.componentForEvent(e, false);
+          } else {
+            this.$matrix.matrixClient.decryptEventIfNeeded(e).then(() => {
+              e.component = this.componentForEvent(e, false);
+            });
+          }
+        } else {
+          e.component = this.componentForEvent(e, false);
+        }
         if (e.getId() == this.readMarker && showReadMarker) {
           const readMarkerEvent = ROOM_READ_MARKER_EVENT_PLACEHOLDER;
           readMarkerEvent["component"] = this.componentForEvent(readMarkerEvent, false);

src/components/messages/MessageIncomingImage.vue

@@ -71,7 +71,7 @@ export default {
         console.log("Failed to fetch thumbnail: ", err);
       });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.src) {
       const objectUrl = this.src;
       this.src = null;

src/components/messages/MessageIncomingThread.vue

@@ -31,8 +31,8 @@
     <GalleryItemsView :originalEvent="originalEvent" :items="items" :initialItem="showItem" v-if="!!showItem" v-on:close="showItem = null" />
   </message-incoming>
   <component v-else-if="items.length == 1" :is="componentFn(items[0].event)" 
-    :originalEvent="items[0].event"
     v-bind="{...$props, ...$attrs}"
+    :originalEvent="items[0].event"
   />
 </template>
 
@@ -43,6 +43,7 @@ import util, { ROOM_TYPE_CHANNEL, ROOM_TYPE_FILE_MODE } from "../../plugins/util
 import GalleryItemsView from '../file_mode/GalleryItemsView.vue';
 import ThumbnailView from '../file_mode/ThumbnailView.vue';
 import SwipeableThumbnailsView from "./channel/SwipeableThumbnailsView.vue";
+import { reactive } from "vue";
 
 export default {
   extends: MessageIncoming,
@@ -61,7 +62,7 @@ export default {
       this.event.on("Event.relationsCreated", this.onRelationsCreated);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.event.off("Event.relationsCreated", this.onRelationsCreated);
   },
   computed: {
@@ -82,19 +83,18 @@ export default {
         this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId())
           .filter(e => !e.isRedacted() && util.downloadableTypes().includes(e.getContent().msgtype))
           .map(e => {
-            let ret = {
+            let ret = reactive({
               event: e,
               src: null,
-            };
+            });
-            ret.promise =
+            ret.promise = this.$matrix.matrixClient.decryptEventIfNeeded(e)
-              util
+              .then(() => util.getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, e, this.$config, 100, 100))
-                .getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, e, this.$config, 100, 100)
+              .then((url) => {
-                .then((url) => {
+                ret.src = url;
-                  ret.src = url;
+              })
-                })
+              .catch((err) => {
-                .catch((err) => {
+                console.log("Failed to fetch thumbnail: ", err);
-                  console.log("Failed to fetch thumbnail: ", err);
+              });
-                });
             return ret;
           });
       }, this.$el);

src/components/messages/MessageOutgoingImage.vue

@@ -70,7 +70,7 @@ export default {
         console.log("Failed to fetch thumbnail: ", err);
       });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.src) {
       const objectUrl = this.src;
       this.src = null;

src/components/messages/MessageOutgoingThread.vue

@@ -32,8 +32,8 @@
     <GalleryItemsView :originalEvent="originalEvent" :items="items" :initialItem="showItem" v-if="!!showItem" v-on:close="showItem = null" />
   </message-outgoing>
   <component v-else-if="items.length == 1" :is="componentFn(items[0].event)"
-    :originalEvent="items[0].event"
     v-bind="{...$props, ...$attrs}"
+    :originalEvent="items[0].event"
   />
 </template>
 
@@ -44,6 +44,7 @@ import util, { ROOM_TYPE_CHANNEL } from "../../plugins/utils";
 import GalleryItemsView from '../file_mode/GalleryItemsView.vue';
 import ThumbnailView from '../file_mode/ThumbnailView.vue';
 import SwipeableThumbnailsView from "./channel/SwipeableThumbnailsView.vue";
+import { reactive } from "vue";
 
 export default {
   extends: MessageOutgoing,
@@ -62,7 +63,7 @@ export default {
       this.event.on("Event.relationsCreated", this.onRelationsCreated);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.event.off("Event.relationsCreated", this.onRelationsCreated);
   },
   computed: {
@@ -83,19 +84,18 @@ export default {
         this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId())
           .filter(e => !e.isRedacted() && util.downloadableTypes().includes(e.getContent().msgtype))
           .map(e => {
-            let ret = {
+            let ret = reactive({
               event: e,
               src: null,
-            };
+            });
-            ret.promise =
+            ret.promise = this.$matrix.matrixClient.decryptEventIfNeeded(e)
-              util
+              .then(() => util.getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, e, this.$config, 100, 100))
-                .getThumbnail(this.$matrix.matrixClient, this.$matrix.useAuthedMedia, e, this.$config, 100, 100)
+              .then((url) => {
-                .then((url) => {
+                ret.src = url;
-                  ret.src = url;
+              })
-                })
+              .catch((err) => {
-                .catch((err) => {
+                console.log("Failed to fetch thumbnail: ", err);
-                  console.log("Failed to fetch thumbnail: ", err);
+              });
-                });
             return ret;
           });
       }, this.$el);

src/components/messages/export/MessageIncomingImageExport.vue

@@ -32,7 +32,7 @@ export default {
       this.contain = true;
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.src) {
       const objectUrl = this.src;
       this.src = null;

src/components/messages/export/MessageIncomingThreadExport.vue

@@ -25,7 +25,7 @@ export default {
       this.event.on("Event.relationsCreated", this.onRelationsCreated);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.event.off("Event.relationsCreated", this.onRelationsCreated);
   },
   methods: {

src/components/messages/export/MessageOutgoingImageExport.vue

@@ -32,7 +32,7 @@ export default {
       this.contain = true;
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.src) {
       const objectUrl = this.src;
       this.src = null;

src/components/messages/export/MessageOutgoingThreadExport.vue

@@ -25,7 +25,7 @@ export default {
       this.event.on("Event.relationsCreated", this.onRelationsCreated);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.event.off("Event.relationsCreated", this.onRelationsCreated);
   },
   methods: {

src/components/messages/messageMixin.js

@@ -52,7 +52,7 @@ export default {
       mcCustom: null
     };
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.thread = null;
   },
   watch: {