From f1c12663c8951d7b34faf47066a2136929aba5e2 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sat, 8 Jun 2024 13:42:57 +0300
Subject: [PATCH] Heart reaction: dynamic postion

---
 src/components/Chat.vue                 | 28 ++++++++++++++++++-------
 src/components/messages/messageMixin.js |  6 ++++--
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index e479291..5009cd2 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -86,7 +86,7 @@
                   showMoreMessageOperations({event: event, anchor: $event.anchor})
                   "
                 v-on:layout-change="onLayoutChange"
-                v-on:addQuickHeartReaction="addQuickHeartReaction(event)"
+                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> -->
@@ -333,7 +333,9 @@
 
     <!-- PURGE ROOM POPUP -->
     <PurgeRoomDialog :show="showPurgeConfirmation" :room="room" @close="showPurgeConfirmation = false" />
-    <div :class="['heart-wrapper', { 'is-active': heartAnimation }]">
+
+    <!-- Heart animation -->
+    <div :class="['heart-wrapper', { 'is-active': heartAnimation }]" :style="hearAnimationPosition">
       <div :class="['heart', { 'is-active': heartAnimation }]" />
     </div>
   </div>
@@ -506,7 +508,11 @@ export default {
       retentionTimer: null,
       showProfileDialog: false,
       showPurgeConfirmation: false,
-      heartAnimation: false
+      heartAnimation: false,
+      heartPosition: {
+        top: 0,
+        left: 0
+      }
     };
   },
 
@@ -781,6 +787,12 @@ export default {
           .filter((e) => util.downloadableTypes().includes(e.getContent().msgtype)).length});
       }
       return "";
+    },
+    hearAnimationPosition() {
+      return {
+        '--top': this.heartPosition.top,
+        '--left': this.heartPosition.left
+      };
     }
   },
 
@@ -1586,8 +1598,9 @@ export default {
       this.sendQuickReaction({ reaction: e.emoji, event: e.event });
     },
 
-    addQuickHeartReaction(event) {
-      this.sendQuickReaction({ reaction: this.heartEmoji, event }, true);
+    addQuickHeartReaction(e) {
+      this.heartPosition = e.position
+      this.sendQuickReaction({ reaction: this.heartEmoji, event: e.event }, true);
     },
 
     setReplyToImage(event) {
@@ -1944,9 +1957,6 @@ export default {
 @import "@/assets/css/chat.scss";
 .heart-wrapper {
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   z-index: -1;
 
   .heart {
@@ -1969,6 +1979,8 @@ export default {
   }
   &.is-active {
     z-index: 1000;
+    top: var(--top);
+    left: var(--left);
   }
 }
 </style>
diff --git a/src/components/messages/messageMixin.js b/src/components/messages/messageMixin.js
index 516fd4e..ad64d8d 100644
--- a/src/components/messages/messageMixin.js
+++ b/src/components/messages/messageMixin.js
@@ -333,8 +333,10 @@ export default {
 
       this.mcCustom.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
 
-      this.mcCustom.on("doubletap", () => {
-        this.$emit("addQuickHeartReaction");
+      this.mcCustom.on("doubletap", (evt) => {
+        var { top, left } = evt.target.getBoundingClientRect();
+        var position = { top: `${top}px`, left: `${left}px`};
+        this.$emit("addQuickHeartReaction", { position });
       });
 
       this.mc.on("press", () => {