Merge branch '604-convene-and-instances-cannot-delete-media-files-in-a-public-room' into 'dev'

Handle thread redactions

See merge request keanuapp/keanuapp-weblite!302

src/components/Chat.vue

@@ -89,7 +89,7 @@
                 v-on:addQuickHeartReaction="addQuickHeartReaction({event, position: $event.position})"
                 />
               <!-- <div v-if="debugging" style="user-select:text">EventID: {{ event.getId() }}</div> -->
-              <!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}</div> -->
+              <!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}<br /><br /></div> -->
               <div v-if="event.getId() == readMarker && index < filteredEvents.length - 1" class="read-marker"><div class="line"></div><div class="text">{{ $t('message.unread_messages') }}</div><div class="line"></div></div>
             </div>
           </MessageErrorHandler>
@@ -898,13 +898,10 @@ export default {
 
   methods: {
     /**
-     * Set initialLoadDone to 'true'. First process all events, setting threadParent and replyEvent if needed.
+     * Set initialLoadDone to 'true'. This will process all events, setting threadParent and replyEvent if needed (see watcher for "initialLoadDone")
      */
     setInitialLoadDone() {
-      this.events.filter(event => (event.threadRootId && !event.parentThread)).forEach(event => this.setParentThread(event));
-      this.events.filter(event => (event.replyEventId && !event.replyEvent)).forEach(event => this.setReplyToEvent(event));
       this.initialLoadDone = true;
-      console.log("Loading finished!");
     },
 
     /**
@@ -1633,8 +1630,16 @@ export default {
     },
 
     redact(event) {
-      this.$matrix.matrixClient
+      let promises = [];
-        .redactEvent(event.getRoomId(), event.getId())
+      if ((event.isThreadRoot || event.isMxThread) && this.timelineSet) {
+        // If this is a thread message, make sure to redact all children as well.
+        const children = this.timelineSet.relations.getAllChildEventsForEvent(event.getId()).filter(e => util.downloadableTypes().includes(e.getContent().msgtype));
+        promises = children.map((c) => {
+          return this.$matrix.matrixClient.redactEvent(c.getRoomId(), c.getId());
+        });
+      }
+      promises.push(this.$matrix.matrixClient.redactEvent(event.getRoomId(), event.getId()));
+      Promise.allSettled(promises)
         .then(() => {
           console.log("Message redacted");
         })

src/components/chatMixin.js

@@ -162,6 +162,10 @@ export default {
         case "m.room.message":
           if (event.getSender() != this.$matrix.currentUserId) {
               if (event.isMxThread) {
+                // If redacted, use a text message (will show "This message was deleted")
+                if (event.isRedacted()) {
+                  return MessageIncomingText;
+                }
                 // Incoming thread, e.g. a file drop!
                 return isForExport ? MessageIncomingThreadExport : MessageIncomingThread;
               }
@@ -202,6 +206,12 @@ export default {
             return MessageIncomingText;
           } else {
             if (event.isMxThread) {
+                              
+              // If redacted, use a text message (will show "This message was deleted")
+              if (event.isRedacted()) {
+                return MessageOutgoingText;
+              }
+
               // Outgoing thread
               return isForExport ? MessageOutgoingThreadExport : MessageOutgoingThread;
             }

src/components/messages/MessageIncomingThread.vue

@@ -1,5 +1,5 @@
 <template>
-  <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1">
+  <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted()">
     <div class="bubble">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">{{ inReplyToSender }}</div>
@@ -10,7 +10,7 @@
       </div>
 
       <div class="message">
-        <v-container fluid class="imageCollection">
+        <v-container v-if="!event.isRedacted()" fluid class="imageCollection">
           <v-row wrap>
             <v-col v-for="({ size, item }) in layoutedItems()" :key="item.event.getId()" :cols="size">
               <ThumbnailView :item="item" :previewOnly="true" v-on:itemclick="onItemClick($event)" /> 
@@ -72,7 +72,7 @@ export default {
     processThread() {
       this.$emit('layout-change', () => {
         this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId())
-          .filter(e => util.downloadableTypes().includes(e.getContent().msgtype))
+          .filter(e => !e.isRedacted() && util.downloadableTypes().includes(e.getContent().msgtype))
           .map(e => {
             let ret = {
               event: e,

src/components/messages/MessageOutgoingThread.vue

@@ -1,5 +1,5 @@
 <template>
-  <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1">
+  <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted()">
     <div class="bubble">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">{{ inReplyToSender }}</div>
@@ -11,7 +11,7 @@
 
 
       <div class="message">
-        <v-container fluid class="imageCollection">
+        <v-container v-if="!event.isRedacted()" fluid class="imageCollection">
           <v-row wrap>
             <v-col v-for="({ size, item }) in layoutedItems()" :key="item.event.getId()" :cols="size">
               <ThumbnailView :item="item" :previewOnly="true" v-on:itemclick="onItemClick($event)" />
@@ -73,7 +73,7 @@ export default {
     processThread() {
       this.$emit('layout-change', () => {
         this.items = this.timelineSet.relations.getAllChildEventsForEvent(this.event.getId())
-          .filter(e => util.downloadableTypes().includes(e.getContent().msgtype))
+          .filter(e => !e.isRedacted() && util.downloadableTypes().includes(e.getContent().msgtype))
           .map(e => {
             let ret = {
               event: e,