Lots of fixes to "media threads"

src/components/messages/messageMixin.js

@@ -2,7 +2,7 @@ import QuickReactions from "./QuickReactions.vue";
 import * as linkify from 'linkifyjs';
 import linkifyHtml from 'linkify-html';
 import utils from "../../plugins/utils"
-import Vue from "vue";
+import util from "../../plugins/utils";
 
 linkify.options.defaults.className = "link";
 linkify.options.defaults.target = { url: "_blank" };
@@ -40,51 +40,22 @@ export default {
       type: Function,
       default: function () {
         return () => {};
-      }
+      },
     },
   },
   data() {
     return {
       event: {},
-      inReplyToEvent: null,
-      inReplyToSender: null,
-      utils
+      thread: null,
+      utils,
     };
   },
   mounted() {
-    const relatesTo = this.validEvent && this.event.getWireContent()["m.relates_to"];
-    if (relatesTo && relatesTo["m.in_reply_to"]) {
-      // Can we find the original message?
-      const originalEventId = relatesTo["m.in_reply_to"].event_id;
-      if (originalEventId && this.timelineSet) {
-        const originalEvent = this.timelineSet.findEventById(originalEventId);
-        if (originalEvent) {
-          this.inReplyToEvent = originalEvent;
-          this.inReplyToSender = this.eventSenderDisplayName(originalEvent);
-        }
-      }
-    }
   },
-  beforeUnmount() {
-    if (this.validEvent) {
-      this.event.off("Event.relationsCreated", this.onRelationsCreated);
-    }
+  beforeDestroy() {
+    this.thread = null;
   },
   watch: {
-    event: {
-      immediate: true,
-      handler(newValue, oldValue) {
-        if (oldValue && oldValue.getId) {
-          oldValue.off("Event.relationsCreated", this.onRelationsCreated);   
-        }
-        if (newValue && newValue.getId) {
-          newValue.on("Event.relationsCreated", this.onRelationsCreated);  
-          if (newValue.isThreadRoot) {
-            Vue.set(newValue, "isThread", true);
-          }
-        } 
-      }
-    },
     originalEvent: {
       immediate: true,
       handler(originalEvent, ignoredOldValue) {
@@ -96,7 +67,19 @@ export default {
           });
         }
       },
-    }
+    },
+    thread: {
+      handler(newValue, oldValue) {
+        if (oldValue) {
+          oldValue.off("Relations.add", this.onAddRelation);
+        }
+        if (newValue) {
+          newValue.on("Relations.add", this.onAddRelation);
+        }
+        this.processThread();
+      },
+      immediate: true,
+    },
   },
   computed: {
     /**
@@ -107,6 +90,16 @@ export default {
       return this.event && Object.keys(this.event).length !== 0;
     },
 
+    /**
+     * If this is a thread event, we return the root here, so all reactions will land on the root event.
+     */
+    eventForReactions() {
+      if (this.event.parentThread) {
+        return this.event.parentThread;
+      }
+      return this.event;
+    },
+
     incoming() {
       return this.event && this.event.getSender() != this.$matrix.currentUserId;
     },
@@ -123,11 +116,34 @@ export default {
       return true;
     },
 
+    inReplyToSender() {
+      const originalEvent = this.validEvent && this.event.replyEvent;
+      if (originalEvent) {
+        const sender = this.eventSenderDisplayName(originalEvent);
+        if (originalEvent.isThreadRoot || originalEvent.isMxThread) {
+          return sender || this.$t("message.someone");
+        } else {
+          return this.$t("message.user_said", { user: sender || this.$t("message.someone") });
+        }
+      }
+      return null;
+    },
+
+    inReplyToEvent() {
+      return this.validEvent && this.event.replyEvent;
+    },
+
     inReplyToText() {
       const relatesTo = this.event.getWireContent()["m.relates_to"];
       if (relatesTo && relatesTo["m.in_reply_to"]) {
+        if (this.inReplyToEvent && (this.inReplyToEvent.isThreadRoot || this.inReplyToEvent.isMxThread)) {
+          const children = this.timelineSet.relations
+            .getAllChildEventsForEvent(this.inReplyToEvent.getId())
+            .filter((e) => util.downloadableTypes().includes(e.getContent().msgtype));
+          return this.$t("message.sent_media", { count: children.length });
+        }
         const content = this.event.getContent();
-        if ('body' in content) {
+        if ("body" in content) {
           const lines = content.body.split("\n").reverse() || [];
           while (lines.length && !lines[0].startsWith("> ")) lines.shift();
           // Reply fallback has a blank line after it, so remove it to prevent leading newline
@@ -137,12 +153,10 @@ export default {
             return text;
           }
         }
-
         if (this.inReplyToEvent) {
           var c = this.inReplyToEvent.getContent();
           return c.body;
         }
-
         // We don't have the original text (at the moment at least)
         return this.$t("fallbacks.original_text");
       }
@@ -153,7 +167,7 @@ export default {
       const relatesTo = this.event.getWireContent()["m.relates_to"];
       if (relatesTo && relatesTo["m.in_reply_to"]) {
         const content = this.event.getContent();
-        if ('body' in content) {
+        if ("body" in content) {
           // Remove the new text and strip "> " from the old original text
           const lines = content.body.split("\n");
           while (lines.length && lines[0].startsWith("> ")) lines.shift();
@@ -190,10 +204,9 @@ export default {
     },
   },
   methods: {
-    onRelationsCreated(relationType, ignoredEventType) {
-      if (relationType === "m.thread") {
-        Vue.set(this.event, "isThread", true);
-      }
+    onAddRelation() {
+      console.error("onAddRelation");
+      this.processThread();
     },
     ownAvatarClicked() {
       this.$emit("own-avatar-clicked", { event: this.event });
@@ -308,5 +321,10 @@ export default {
     linkify(text) {
       return linkifyHtml(text);
     },
+
+    /**
+     * Override this to handle updates to (the) message thread.
+     */
+    processThread() {},
   },
 };