When sending reaction, redact if already send

src/components/Chat.vue

@@ -55,7 +55,7 @@
             }
           " v-on:touchend="touchEnd" v-on:touchcancel="touchCancel" v-on:touchmove="touchMove">
             <component :is="componentForEvent(event)" :room="room" :originalEvent="event" :nextEvent="events[index + 1]"
-              :timelineSet="timelineSet" v-on:send-quick-reaction="sendQuickReaction"
+              :timelineSet="timelineSet" v-on:send-quick-reaction.stop="sendQuickReaction"
               v-on:context-menu="showContextMenuForEvent($event)" v-on:own-avatar-clicked="viewProfile"
               v-on:other-avatar-clicked="showAvatarMenuForEvent($event)" v-on:download="download(event)"
               v-on:poll-closed="pollWasClosed(event)" />
@@ -510,7 +510,7 @@ export default {
       return util.browserCanRecordAudio();
     },
     debugging() {
-      return (window.location.host || "").startsWith("localhost");
+      return false; //(window.location.host || "").startsWith("localhost");
     },
     invitationCount() {
       return this.$matrix.invites.length;
@@ -1202,6 +1202,24 @@ export default {
     },
 
     sendQuickReaction(e) {
+      let previousReaction = null;
+
+      // Figure out if we have already sent this emoji, in that case redact it again (toggle)
+      //
+      const reactions = this.timelineSet.relations.getChildEventsForEvent(e.event.getId(), 'm.annotation', 'm.reaction');
+      if (reactions && reactions._eventsCount > 0) {
+        const relations = reactions.getRelations();
+        for (const r of relations) {
+          const emoji = r.getRelation().key;
+          const sender = r.getSender();
+          if (emoji == e.reaction && sender == this.$matrix.currentUserId) {
+            previousReaction = r.isRedacted() ? null : r;
+          }
+        }
+      }
+      if (previousReaction) {
+        this.redact(previousReaction);
+      } else {
       util
         .sendQuickReaction(this.$matrix.matrixClient, this.roomId, e.reaction, e.event)
         .then(() => {
@@ -1210,6 +1228,7 @@ export default {
         .catch((err) => {
           console.log("Failed to send quick reaction:", err);
         });
+      }
     },
 
     sendSticker(stickerShortCode) {

src/components/messages/QuickReactions.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="quick-reaction-container" v-show="reactions">
-    <span :class="{'quick-reaction':true,'sent':value.includes($matrix.currentUserId)}" v-for="(value, name) in reactionMap" :key="name" @mousedown="onClickEmoji(name)">
+    <span :class="{'quick-reaction':true,'sent':value.includes($matrix.currentUserId)}" v-for="(value, name) in reactionMap" :key="name" @click.stop="onClickEmoji(name)">
       {{ name }} <span class="quick-reaction-count">{{ value.length }}</span>
     </span>
   </div>
@@ -48,6 +48,12 @@ export default {
     onAddRelation(ignoredevent) {
       this.processReactions();
     },
+    onRemoveRelation(ignoredevent) {
+      this.processReactions();
+    },
+    onRedactRelation(ignoredevent) {
+      this.processReactions();
+    },
     processReactions() {
         var reactionMap = {};
       if (this.reactions && this.reactions._eventsCount > 0) {
@@ -57,10 +63,13 @@ export default {
           const sender = r.getSender();
           if (reactionMap[emoji]) {
             const array = reactionMap[emoji];
+            if (r.isRedacted()) {
+              delete array[sender];
+            }
             if (!array.includes(sender)) {
               array.push(sender)
             }
-          } else {
+          } else if (!r.isRedacted()) {
             reactionMap[emoji] = [sender];
           }
         }
@@ -73,9 +82,13 @@ export default {
        handler(newValue, oldValue) {
          if (oldValue) {
            oldValue.off('Relations.add', this.onAddRelation);
+           oldValue.off('Relations.remove', this.onRemoveRelation);
+           oldValue.off('Relations.redaction', this.onRedactRelation);
          }
          if (newValue) {
           newValue.on('Relations.add', this.onAddRelation);
+          newValue.on('Relations.remove', this.onRemoveRelation);
+          newValue.on('Relations.redaction', this.onRedactRelation);
          }
          this.processReactions();
       },

src/main.js

@@ -36,10 +36,18 @@ Vue.use((Vue) => {
   Vue.prototype.$bubble = function $bubble(eventName, ...args) {
     // Emit the event on all parent components
     let component = this;
+    let arg = args.at(0);
+    let stop = false;
+    if (arg) {
+      // Add a "stopPropagation" function so that we can do v-on:<eventname>.stop="..."
+      arg.stopPropagation = () => {
+        stop = true;
+      }
+    }
     do {
-      component.$emit(eventName, ...args);
+      component.$emit(eventName, ... args);
       component = component.$parent;
-    } while (component);
+    } while (!stop && component);
   };
 });