Mobile: top level heart reaction on double tab

src/components/messages/MessageOutgoingImage.vue

@@ -1,13 +1,12 @@
 <template>
   <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
-    <div class="bubble image-bubble">
+    <div class="bubble image-bubble" ref="imageRef">
       <v-img
         :aspect-ratio="16 / 9"
         ref="image"
         :src="src"
         :cover="cover"
         :contain="contain"
-        @click.stop="dialog = true"
       />
     </div>
     <v-dialog
@@ -34,6 +33,18 @@ export default {
       dialog: false
     };
   },
+  methods: {
+    // listen for custom hammerJs singletab click to differentiate it from double click(heart animation).
+    initMessageOutImageHammerJs(element) {
+      const hammerInstance = util.singleOrDoubleTabRecognizer(element);
+
+      hammerInstance.on("singletap doubletap", (ev) => {
+        if(ev.type === 'singletap') {
+          this.dialog = true;
+        }
+      });
+    }
+  },
   mounted() {
     const width = this.$refs.image.$el.clientWidth;
     const height = (width * 9) / 16;
@@ -51,6 +62,9 @@ export default {
           this.contain = true;
         }
         this.src = url;
+        if(this.$refs.imageRef) {
+          this.initMessageOutImageHammerJs(this.$refs.imageRef);
+        }
       })
       .catch((err) => {
         console.log("Failed to fetch thumbnail: ", err);