Mobile: top level heart reaction on double tab

src/components/messages/MessageIncoming.vue

@@ -14,7 +14,9 @@
       }}</span>
     </v-avatar>
     <!-- SLOT FOR CONTENT -->
-    <slot></slot>
+    <span ref="messageInOutRef">
+      <slot></slot>
+    </span>
     <div class="op-button" ref="opbutton" v-if="!event.isRedacted()">
       <v-btn id="btn-more" icon @click.stop="showContextMenu($refs.opbutton)">
         <v-icon>more_vert</v-icon>
@@ -28,10 +30,16 @@
 <script>
 import SeenBy from "./SeenBy.vue";
 import messageMixin from "./messageMixin";
+import util from "../../plugins/utils";
 
 export default {
     mixins: [messageMixin],
-    components: { SeenBy }
+    components: { SeenBy },
+    mounted() {
+      if(util.isMobileOrTabletBrowser() && this.$refs.messageInOutRef) {
+        this.initMsgHammerJs(this.$refs.messageInOutRef);
+      }
+    }
 };
 </script>
 

src/components/messages/MessageIncomingImage.vue

@@ -1,13 +1,12 @@
 <template>
   <message-incoming 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).
+    initMessageInImageHammerJs(element) {
+      const hammerInstance = util.singleOrDoubleTabRecognizer(element);
+
+      hammerInstance.on("singletap doubletap", (ev) => {
+        if(ev.type === 'singletap') {
+          this.dialog = true;
+        }
+      });
+    }
+  },
   mounted() {
     //console.log("Mounted with event:", JSON.stringify(this.event.getContent()));
     const width = this.$refs.image.$el.clientWidth;
@@ -52,6 +63,9 @@ export default {
           this.contain = true;
         }
         this.src = url;
+        if(this.$refs.imageRef) {
+          this.initMessageInImageHammerJs(this.$refs.imageRef);
+        }
       })
       .catch((err) => {
         console.log("Failed to fetch thumbnail: ", err);

src/components/messages/MessageOutgoing.vue

@@ -14,7 +14,9 @@
       </v-btn>
     </div>
     <!-- SLOT FOR CONTENT -->
-    <slot></slot>
+    <span ref="messageInOutRef">
+      <slot></slot>
+    </span>
     <v-avatar
       class="avatar"
       size="32"
@@ -32,10 +34,16 @@
 <script>
 import SeenBy from "./SeenBy.vue";
 import messageMixin from "./messageMixin";
+import util from "../../plugins/utils";
 
 export default {
   mixins: [messageMixin],
-  components: { SeenBy }
+  components: { SeenBy },
+  mounted() {
+    if(util.isMobileOrTabletBrowser() && this.$refs.messageInOutRef) {
+      this.initMsgHammerJs(this.$refs.messageInOutRef);
+    }
+  }
 };
 </script>
 <style lang="scss">

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);

src/components/messages/MessageOutgoingThread.vue

@@ -14,7 +14,7 @@
         <v-container fluid class="imageCollection">
           <v-row wrap>
             <v-col v-for="({ size, item }) in layoutedItems()" :key="item.event.getId()" :cols="size">
-              <ThumbnailView :item="item" :previewOnly="true" v-on:itemclick="onItemClick($event)" /> 
+              <ThumbnailView :item="item" :previewOnly="true" v-on:itemclick="onItemClick($event)" />
             </v-col>
           </v-row>
         </v-container>
@@ -30,7 +30,7 @@
     </div>
     <GalleryItemsView :originalEvent="originalEvent" :items="items" :initialItem="showItem" v-if="!!showItem" v-on:close="showItem = null" />
   </message-outgoing>
-  <component v-else-if="items.length == 1" :is="componentFn(items[0].event)" 
+  <component v-else-if="items.length == 1" :is="componentFn(items[0].event)"
     :originalEvent="items[0].event"
     v-bind="{...$props, ...$attrs}" v-on="$listeners"
   />
@@ -147,7 +147,7 @@ export default {
   .col {
     padding: 2px;
   }
-  
+
   .file-item {
     display: flex;
     align-items: center;

src/components/messages/messageMixin.js

@@ -3,6 +3,7 @@ import * as linkify from 'linkifyjs';
 import linkifyHtml from 'linkify-html';
 import utils from "../../plugins/utils"
 import util from "../../plugins/utils";
+import Hammer from "hammerjs";
 
 linkify.options.defaults.className = "link";
 linkify.options.defaults.target = { url: "_blank" };
@@ -48,10 +49,10 @@ export default {
       event: {},
       thread: null,
       utils,
+      mc: null,
+      mcCustom: null
     };
   },
-  mounted() {
-  },
   beforeDestroy() {
     this.thread = null;
   },
@@ -326,5 +327,20 @@ export default {
      * Override this to handle updates to (the) message thread.
      */
     processThread() {},
+    initMsgHammerJs(element) {
+      this.mc = new Hammer(element);
+      this.mcCustom = new Hammer.Manager(element);
+
+      this.mcCustom.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
+
+      this.mcCustom.on("doubletap", () => {
+        this.$emit("addQuickHeartReaction");
+      });
+
+      this.mc.on("press", () => {
+        this.showContextMenu(this.$refs.opbutton);
+      });
+
+    }
   },
 };