Mobile: Prevent like on touch swipe #953

Fugly hack that seems to work well for now.

frontend/src/component/photo/cards.vue

@@ -104,10 +104,10 @@
             <v-btn :ripple="false"
                    icon flat absolute
                    class="input-favorite"
-                   @touchstart.stop.prevent="photo.toggleLike()"
+                   @touchstart.stop.prevent="onTouchStart($event, index)"
-                   @touchend.stop.prevent
+                   @touchend.stop.prevent="toggleLike($event, index)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="photo.toggleLike()">
+                   @click.stop.prevent="toggleLike($event, index)">
               <v-icon color="white" class="select-on">favorite</v-icon>
               <v-icon color="white" class="select-off">favorite_border</v-icon>
             </v-btn>
@@ -221,6 +221,11 @@ export default {
         video: this.$gettext("Video"),
         name: this.$gettext("Name"),
       },
+      touchStart: {
+        index: -1,
+        scrollY: window.scrollY,
+        timeStamp: -1,
+      },
       mouseDown: {
         index: -1,
         scrollY: window.scrollY,
@@ -246,6 +251,37 @@ export default {
       const photo = this.photos[index];
       download(`/api/v1/dl/${photo.Hash}?t=${this.$config.downloadToken()}`, photo.FileName);
     },
+    onTouchStart(ev, index) {
+      this.touchStart.index = index;
+      this.touchStart.scrollY = window.scrollY;
+      this.touchStart.timeStamp = ev.timeStamp;
+    },
+    resetTouchStart() {
+      this.touchStart.index = -1;
+      this.touchStart.scrollY = window.scrollY;
+      this.touchStart.timeStamp = -1;
+    },
+    isClick(ev, index) {
+      if (this.touchStart.timeStamp < 0) return true;
+
+      return this.touchStart.index === index
+          && (ev.timeStamp - this.touchStart.timeStamp) < 200
+          && (this.touchStart.scrollY - window.scrollY) === 0;
+    },
+    toggleLike(ev, index) {
+      if (!this.isClick(ev, index)) {
+        this.resetTouchStart();
+        return;
+      }
+
+      const photo = this.photos[index];
+
+      if (!photo) {
+        return;
+      }
+
+      photo.toggleLike();
+    },
     onSelect(ev, index) {
       if (ev.shiftKey) {
         this.selectRange(index);
@@ -259,7 +295,7 @@ export default {
       this.mouseDown.timeStamp = ev.timeStamp;
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
+      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
       const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
 
       if (scrolled) {

frontend/src/component/photo/list.vue

@@ -181,7 +181,7 @@ export default {
       this.mouseDown.timeStamp = ev.timeStamp;
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
+      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
       const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
 
       if (scrolled) {

frontend/src/component/photo/mosaic.vue

@@ -103,10 +103,10 @@
             <v-btn :ripple="false"
                    icon flat small absolute
                    class="input-favorite"
-                   @touchstart.stop.prevent="photo.toggleLike()"
+                   @touchstart.stop.prevent="onTouchStart($event, index)"
-                   @touchend.stop.prevent
+                   @touchend.stop.prevent="toggleLike($event, index)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="photo.toggleLike()">
+                   @click.stop.prevent="toggleLike($event, index)">
               <v-icon color="white" class="select-on">favorite</v-icon>
               <v-icon color="white" class="select-off">favorite_border</v-icon>
             </v-btn>
@@ -131,6 +131,11 @@ export default {
   data() {
     return {
       hidePrivate: this.$config.settings().features.private,
+      touchStart: {
+        index: -1,
+        scrollY: window.scrollY,
+        timeStamp: -1,
+      },
       mouseDown: {
         index: -1,
         scrollY: window.scrollY,
@@ -150,6 +155,37 @@ export default {
       const player = this.livePlayer(photo);
       if (player) player.pause();
     },
+    onTouchStart(ev, index) {
+      this.touchStart.index = index;
+      this.touchStart.scrollY = window.scrollY;
+      this.touchStart.timeStamp = ev.timeStamp;
+    },
+    resetTouchStart() {
+      this.touchStart.index = -1;
+      this.touchStart.scrollY = window.scrollY;
+      this.touchStart.timeStamp = -1;
+    },
+    isClick(ev, index) {
+      if (this.touchStart.timeStamp < 0) return true;
+
+      return this.touchStart.index === index
+        && (ev.timeStamp - this.touchStart.timeStamp) < 200
+        && (this.touchStart.scrollY - window.scrollY) === 0;
+    },
+    toggleLike(ev, index) {
+      if (!this.isClick(ev, index)) {
+        this.resetTouchStart();
+        return;
+      }
+
+      const photo = this.photos[index];
+
+      if (!photo) {
+        return;
+      }
+
+      photo.toggleLike();
+    },
     onSelect(ev, index) {
       if (ev.shiftKey) {
         this.selectRange(index);
@@ -166,7 +202,7 @@ export default {
       this.$clipboard.toggle(photo);
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
+      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
       const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
 
       if (scrolled) {

frontend/src/pages/albums.vue

@@ -127,10 +127,10 @@
                 <v-btn :ripple="false"
                        icon flat absolute
                        class="input-favorite"
-                       @touchstart.stop.prevent="album.toggleLike()"
+                       @touchstart.stop.prevent="onTouchStart($event, index)"
-                       @touchend.stop.prevent
+                       @touchend.stop.prevent="toggleLike($event, index)"
                        @touchmove.stop.prevent
-                       @click.stop.prevent="album.toggleLike()">
+                       @click.stop.prevent="toggleLike($event, index)">
                   <v-icon color="#FFD600" class="select-on">star</v-icon>
                   <v-icon color="white" class="select-off">star_border</v-icon>
                 </v-btn>
@@ -244,6 +244,11 @@ export default {
       lastFilter: {},
       routeName: routeName,
       titleRule: v => v.length <= this.$config.get('clip') || this.$gettext("Title too long"),
+      touchStart: {
+        index: -1,
+        scrollY: window.scrollY,
+        timeStamp: -1,
+      },
       mouseDown: {
         index: -1,
         scrollY: window.scrollY,
@@ -324,6 +329,37 @@ export default {
     showUpload() {
       Event.publish("dialog.upload");
     },
+    onTouchStart(ev, index) {
+      this.touchStart.index = index;
+      this.touchStart.scrollY = window.scrollY;
+      this.touchStart.timeStamp = ev.timeStamp;
+    },
+    resetTouchStart() {
+      this.touchStart.index = -1;
+      this.touchStart.scrollY = window.scrollY;
+      this.touchStart.timeStamp = -1;
+    },
+    isClick(ev, index) {
+      if (this.touchStart.timeStamp < 0) return true;
+
+      return this.touchStart.index === index
+          && (ev.timeStamp - this.touchStart.timeStamp) < 200
+          && (this.touchStart.scrollY - window.scrollY) === 0;
+    },
+    toggleLike(ev, index) {
+      if (!this.isClick(ev, index)) {
+        this.resetTouchStart();
+        return;
+      }
+
+      const album = this.results[index];
+
+      if (!album) {
+        return;
+      }
+
+      album.toggleLike();
+    },
     selectRange(rangeEnd, models) {
       if (!models || !models[rangeEnd] || !(models[rangeEnd] instanceof RestModel)) {
         console.warn("selectRange() - invalid arguments:", rangeEnd, models);
@@ -362,7 +398,7 @@ export default {
       this.mouseDown.timeStamp = ev.timeStamp;
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
+      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
       const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
 
       if (scrolled) {

frontend/src/pages/labels.vue

@@ -94,10 +94,10 @@
                 <v-btn :ripple="false"
                        icon flat absolute
                        class="input-favorite"
-                       @touchstart.stop.prevent="label.toggleLike()"
+                       @touchstart.stop.prevent="onTouchStart($event, index)"
-                       @touchend.stop.prevent
+                       @touchend.stop.prevent="toggleLike($event, index)"
                        @touchmove.stop.prevent
-                       @click.stop.prevent="label.toggleLike()">
+                       @click.stop.prevent="toggleLike($event, index)">
                   <v-icon color="#FFD600" class="select-on">star</v-icon>
                   <v-icon color="white" class="select-off">star_border</v-icon>
                 </v-btn>
@@ -174,6 +174,11 @@ export default {
       lastFilter: {},
       routeName: routeName,
       titleRule: v => v.length <= this.$config.get('clip') || this.$gettext("Name too long"),
+      touchStart: {
+        index: -1,
+        scrollY: window.scrollY,
+        timeStamp: -1,
+      },
       mouseDown: {
         index: -1,
         scrollY: window.scrollY,
@@ -220,6 +225,37 @@ export default {
       this.offset = offset;
       window.localStorage.setItem("labels_offset", offset);
     },
+    onTouchStart(ev, index) {
+      this.touchStart.index = index;
+      this.touchStart.scrollY = window.scrollY;
+      this.touchStart.timeStamp = ev.timeStamp;
+    },
+    resetTouchStart() {
+      this.touchStart.index = -1;
+      this.touchStart.scrollY = window.scrollY;
+      this.touchStart.timeStamp = -1;
+    },
+    isClick(ev, index) {
+      if (this.touchStart.timeStamp < 0) return true;
+
+      return this.touchStart.index === index
+          && (ev.timeStamp - this.touchStart.timeStamp) < 200
+          && (this.touchStart.scrollY - window.scrollY) === 0;
+    },
+    toggleLike(ev, index) {
+      if (!this.isClick(ev, index)) {
+        this.resetTouchStart();
+        return;
+      }
+
+      const label = this.results[index];
+
+      if (!label) {
+        return;
+      }
+
+      label.toggleLike();
+    },
     selectRange(rangeEnd, models) {
       if (!models || !models[rangeEnd] || !(models[rangeEnd] instanceof RestModel)) {
         console.warn("selectRange() - invalid arguments:", rangeEnd, models);
@@ -258,7 +294,7 @@ export default {
       this.mouseDown.timeStamp = ev.timeStamp;
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
+      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
       const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
 
       if (scrolled) {

frontend/src/pages/library/files.vue

@@ -253,7 +253,7 @@ export default {
       this.mouseDown.timeStamp = ev.timeStamp;
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
+      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
       const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
 
       if (scrolled) {

frontend/src/share/albums.vue

@@ -256,7 +256,7 @@ export default {
       this.mouseDown.timeStamp = ev.timeStamp;
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
+      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
       const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
 
       if (scrolled) {

frontend/src/share/photo/cards.vue

@@ -208,7 +208,7 @@ export default {
       this.mouseDown.timeStamp = ev.timeStamp;
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
+      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
       const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
 
       if (scrolled) {

frontend/src/share/photo/list.vue

@@ -160,7 +160,7 @@ export default {
       this.mouseDown.timeStamp = ev.timeStamp;
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
+      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
       const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
 
       if (scrolled) {

frontend/src/share/photo/mosaic.vue

@@ -145,7 +145,7 @@ export default {
       this.$clipboard.toggle(photo);
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
+      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
       const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
 
       if (scrolled) {