Heart reaction: dynamic postion

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>

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", () => {