Mobile: top level heart reaction on double tab

src/components/Chat.vue

@@ -82,6 +82,7 @@
                 showMoreMessageOperations({event: event, anchor: $event.anchor})
                 "
               v-on:layout-change="onLayoutChange"
+              v-on:addQuickHeartReaction="addQuickHeartReaction(event)"
               />
             <!-- <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> -->
@@ -327,6 +328,9 @@
 
     <!-- PURGE ROOM POPUP -->
     <PurgeRoomDialog :show="showPurgeConfirmation" :room="room" @close="showPurgeConfirmation = false" />
+    <div :class="['heart-wrapper', { 'is-active': heartAnimation }]">
+      <div :class="['heart', { 'is-active': heartAnimation }]" />
+    </div>
   </div>
 </template>
 
@@ -493,6 +497,7 @@ export default {
       retentionTimer: null,
       showProfileDialog: false,
       showPurgeConfirmation: false,
+      heartAnimation: false
     };
   },
 
@@ -533,6 +538,9 @@ export default {
   },
 
   computed: {
+    heartEmoji() {
+      return this.$refs.emojiPicker.mapEmojis["Symbols"].find(({ aliases }) => aliases.includes('heart')).data;
+    },
     compActiveMember() {
       const currentUserId= this.selectedEvent?.sender.userId || this.$matrix.currentUserId
       return this.joinedAndInvitedMembers.find(({userId}) => userId === currentUserId)
@@ -1569,6 +1577,10 @@ export default {
       this.sendQuickReaction({ reaction: e.emoji, event: e.event });
     },
 
+    addQuickHeartReaction(event) {
+      this.sendQuickReaction({ reaction: this.heartEmoji, event }, true);
+    },
+
     setReplyToImage(event) {
       util
         .getThumbnail(this.$matrix.matrixClient, event, this.$config)
@@ -1652,7 +1664,15 @@ export default {
         });
     },
 
-    sendQuickReaction(e) {
+    showHeartAnimation() {
+      const self = this;
+      this.heartAnimation = true;
+      setTimeout(() => {
+        self.heartAnimation = false;
+      }, 1000)
+    },
+
+    sendQuickReaction(e, heartAnimationFlag = false) {
       let previousReaction = null;
 
       // Figure out if we have already sent this emoji, in that case redact it again (toggle)
@@ -1679,6 +1699,10 @@ export default {
         .catch((err) => {
           console.log("Failed to send quick reaction:", err);
         });
+
+        if(heartAnimationFlag) {
+          this.showHeartAnimation();
+        }
       }
     },
 
@@ -1909,4 +1933,33 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
+.heart-wrapper {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+
+  .heart {
+    width: 100px;
+    height: 100px;
+    background: url("../assets/heart.png") no-repeat;
+    background-position: 0 0;
+    cursor: pointer;
+    transition: background-position 1s steps(28);
+    transition-duration: 0s;
+    visibility: hidden;
+
+
+    &.is-active {
+      transition-duration: 1s;
+      background-position: -2800px 0;
+      visibility: visible;
+      z-index: 10000;
+    }
+  }
+  &.is-active {
+    z-index: 1000;
+  }
+}
 </style>