Fix redacted media thread showing "message removed" for every media item.

src/components/Chat.vue

@@ -1635,10 +1635,10 @@ export default {
         // 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());
+          return this.$matrix.matrixClient.redactEvent(c.getRoomId(), c.getId(), undefined, { reason: "redactedMedia"});
         });
       }
-      promises.push(this.$matrix.matrixClient.redactEvent(event.getRoomId(), event.getId()));
+      promises.push(this.$matrix.matrixClient.redactEvent(event.getRoomId(), event.getId(), undefined, { reason: "redactedThread"}));
       Promise.allSettled(promises)
         .then(() => {
           console.log("Message redacted");

src/components/chatMixin.js

@@ -125,13 +125,6 @@ export default {
     },
 
     componentForEvent(event, isForExport = false) {
-      if (!event.isRelation() && !event.isRedaction() && event.isRedacted()) {
-        const redaction = event.getRedactionEvent();
-        if (redaction && redaction.content && redaction.content.reason === "cancel") {
-          return null; // Show nothing, it was canceled!
-        }
-      }
-
       switch (event.getType()) {
         case "m.room.member":
           if (event.getContent().membership == "join") {
@@ -161,11 +154,14 @@ 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()) {
+              if (event.isRedacted()) {
+                // Redacted thread, show as text (and hide all media)!
+                if (event.getUnsigned().redacted_because.content.reason == "redactedThread") {
                   return MessageIncomingText;
                 }
+                return null;
+              }
+              if (event.isMxThread) {
                 // Incoming thread, e.g. a file drop!
                 return isForExport ? MessageIncomingThreadExport : MessageIncomingThread;
               }
@@ -205,13 +201,14 @@ export default {
             }
             return MessageIncomingText;
           } else {
-            if (event.isMxThread) {
-                              
-              // If redacted, use a text message (will show "This message was deleted")
-              if (event.isRedacted()) {
+            if (event.isRedacted()) {
+              // Redacted thread, show as text (and hide all media)!
+              if (event.getUnsigned().redacted_because.content.reason == "redactedThread") {
                 return MessageOutgoingText;
               }
-
+              return null;
+            }
+            if (event.isMxThread) {
               // Outgoing thread
               return isForExport ? MessageOutgoingThreadExport : MessageOutgoingThread;
             }

src/components/messages/MessageIncomingText.vue

@@ -12,7 +12,7 @@
       <div class="message">
         <i v-if="event.isRedacted()" class="deleted-text">
           <v-icon :color="this.senderIsAdminOrModerator(this.event)?'white':''" size="small">block</v-icon>
-          {{ $t('message.incoming_message_deleted_text')}}
+          {{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}}
         </i>
         <span v-html="linkify($sanitize(messageText))" v-else/>
         <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">

src/components/messages/MessageIncomingThread.vue

@@ -19,7 +19,7 @@
         </v-container>
         <i v-if="event.isRedacted()" class="deleted-text">
           <v-icon :color="this.senderIsAdminOrModerator(this.event) ? 'white' : ''" size="small">block</v-icon>
-          {{ $t('message.incoming_message_deleted_text') }}
+          {{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}}
         </i>
         <span v-html="linkify($sanitize(messageText))" v-else />
         <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">

src/components/messages/MessageOutgoingText.vue

@@ -12,7 +12,7 @@
       <div class="message">
         <i v-if="event.isRedacted()" class="deleted-text">
            <v-icon size="small">block</v-icon>
-          {{ $t('message.outgoing_message_deleted_text')}}
+          {{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}}
         </i>
         <span v-html="linkify($sanitize(messageText))" v-else/>
         <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">

src/components/messages/MessageOutgoingThread.vue

@@ -20,7 +20,7 @@
         </v-container>
         <i v-if="event.isRedacted()" class="deleted-text">
           <v-icon size="small">block</v-icon>
-          {{ $t('message.outgoing_message_deleted_text') }}
+          {{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}}
         </i>
         <span v-html="linkify($sanitize(messageText))" v-else />
         <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">

src/components/messages/messageMixin.js

@@ -279,6 +279,15 @@ export default {
       return false;
     },
 
+    redactedBySomeoneElse(event) {
+      if (!event.isRedacted()) return false;
+      const redactionEvent = event.getUnsigned().redacted_because;
+      if (redactionEvent) {
+        return redactionEvent.sender !== this.$matrix.currentUserId;
+      }
+      return false;
+    },
+
     formatTimeAgo(time) {
       const date = new Date();
       date.setTime(time);