diff --git a/frontend/src/common/input.js b/frontend/src/common/input.js
new file mode 100644
index 000000000..d1a2417a3
--- /dev/null
+++ b/frontend/src/common/input.js
@@ -0,0 +1,103 @@
+/*
+
+Copyright (c) 2018 - 2021 Michael Mayer <hello@photoprism.org>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+    PhotoPrism® is a registered trademark of Michael Mayer.  You may use it as required
+    to describe our software, run your own server, for educational purposes, but not for
+    offering commercial goods, products, or services without prior written permission.
+    In other words, please ask.
+
+Feel free to send an e-mail to hello@photoprism.org if you have questions,
+want to support our work, or just want to say hello.
+
+Additional information can be found in our Developer Guide:
+https://docs.photoprism.org/developer-guide/
+
+*/
+
+export const InputInvalid = 0;
+export const ClickShort = 1;
+export const ClickLong = 2;
+
+export class Input {
+  constructor() {
+    this.reset();
+  }
+
+  reset() {
+    this.index = -1;
+    this.scrollY = window.scrollY;
+    this.touches = [];
+    this.timeStamp = -1;
+  }
+
+  touchStart(ev, index) {
+    this.index = index;
+    this.scrollY = window.scrollY;
+    if (ev.touches) {
+      this.touches = ev.touches;
+    }
+    this.timeStamp = ev.timeStamp;
+  }
+
+  mouseDown(ev, index) {
+    this.index = index;
+    this.scrollY = window.scrollY;
+    this.touches = [];
+    this.timeStamp = ev.timeStamp;
+  }
+
+  clickType(ev, index) {
+    if (this.timeStamp < 0) {
+      return InputInvalid;
+    }
+
+    if (ev.changedTouches && ev.changedTouches.length === 1) {
+      if (this.touches.length !== 1) {
+        return InputInvalid;
+      }
+
+      if (
+        this.touches[0].screenX !== ev.changedTouches[0].screenX ||
+        this.touches[0].screenY !== ev.changedTouches[0].screenY
+      ) {
+        return InputInvalid;
+      }
+    }
+
+    if (this.index !== index || this.scrollY - window.scrollY !== 0) {
+      return InputInvalid;
+    }
+
+    const clickDuration = ev.timeStamp - this.timeStamp;
+
+    if (clickDuration > 0 && clickDuration < 200) {
+      return ClickShort;
+    } else if (clickDuration > 400) {
+      return ClickLong;
+    }
+
+    return InputInvalid;
+  }
+
+  eval(ev, index) {
+    const result = this.clickType(ev, index);
+    this.reset();
+    return result;
+  }
+}
+
+export default Input;
diff --git a/frontend/src/component/photo/cards.vue b/frontend/src/component/photo/cards.vue
index 6b7d06cb8..224722efc 100644
--- a/frontend/src/component/photo/cards.vue
+++ b/frontend/src/component/photo/cards.vue
@@ -40,9 +40,9 @@
                  :transition="false"
                  aspect-ratio="1"
                  class="accent lighten-2 clickable"
-                 @touchstart="onMouseDown($event, index)"
-                 @touchend.stop.prevent="onClick($event, index)"
-                 @mousedown="onMouseDown($event, index)"
+                 @touchstart="input.touchStart($event, index)"
+                 @touchend.prevent="onClick($event, index)"
+                 @mousedown="input.mouseDown($event, index)"
                  @click.stop.prevent="onClick($event, index)"
                  @mouseover="playLive(photo)"
                  @mouseleave="pauseLive(photo)"
@@ -56,10 +56,10 @@
 
             <v-btn :ripple="false" :depressed="false" class="input-open"
                    icon flat absolute
-                   @touchstart.stop.prevent="openPhoto(index, true)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, true)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, true)">
+                   @click.stop.prevent="onOpen($event, index, true)">
               <v-icon color="white" class="default-hidden action-raw" :title="$gettext('RAW')">photo_camera</v-icon>
               <v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
               <v-icon color="white" class="default-hidden action-play" :title="$gettext('Video')">play_arrow</v-icon>
@@ -68,19 +68,19 @@
 
             <v-btn :ripple="false" :depressed="false" class="input-view"
                    icon flat absolute :title="$gettext('View')"
-                   @touchstart.stop.prevent="openPhoto(index, false)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, false)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, false)">
+                   @click.stop.prevent="onOpen($event, index, false)">
               <v-icon color="white" class="action-fullscreen">zoom_in</v-icon>
             </v-btn>
 
             <v-btn :ripple="false" :depressed="false" color="white" class="input-play"
                    outline fab large absolute :title="$gettext('Play')"
-                   @touchstart.stop.prevent="openPhoto(index, true)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, true)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, true)">
+                   @click.stop.prevent="onOpen($event, index, true)">
               <v-icon color="white" class="action-play">play_arrow</v-icon>
             </v-btn>
 
@@ -93,8 +93,8 @@
             <v-btn :ripple="false"
                    icon flat absolute
                    class="input-select"
-                   @touchstart.stop.prevent="onSelect($event, index)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onSelect($event, index)"
                    @touchmove.stop.prevent
                    @click.stop.prevent="onSelect($event, index)">
               <v-icon color="white" class="select-on">check_circle</v-icon>
@@ -104,7 +104,7 @@
             <v-btn :ripple="false"
                    icon flat absolute
                    class="input-favorite"
-                   @touchstart.stop.prevent="onTouchStart($event, index)"
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
                    @touchend.stop.prevent="toggleLike($event, index)"
                    @touchmove.stop.prevent
                    @click.stop.prevent="toggleLike($event, index)">
@@ -192,7 +192,8 @@
 </template>
 <script>
 import download from "common/download";
-import Notify from "../../common/notify";
+import Notify from "common/notify";
+import {Input, InputInvalid, ClickShort, ClickLong} from "common/input";
 
 export default {
   name: 'PPhotoCards',
@@ -221,16 +222,7 @@ export default {
         video: this.$gettext("Video"),
         name: this.$gettext("Name"),
       },
-      touchStart: {
-        index: -1,
-        scrollY: window.scrollY,
-        timeStamp: -1,
-      },
-      mouseDown: {
-        index: -1,
-        scrollY: window.scrollY,
-        timeStamp: -1,
-      },
+      input: new Input(),
     };
   },
   methods: {
@@ -257,26 +249,10 @@ 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();
+      const inputType = this.input.eval(ev, index);
+
+      if (inputType !== ClickShort) {
         return;
       }
 
@@ -289,22 +265,32 @@ export default {
       photo.toggleLike();
     },
     onSelect(ev, index) {
+      const inputType = this.input.eval(ev, index);
+
+      if (inputType !== ClickShort) {
+        return;
+      }
+
       if (ev.shiftKey) {
         this.selectRange(index);
       } else {
         this.$clipboard.toggle(this.photos[index]);
       }
     },
-    onMouseDown(ev, index) {
-      this.mouseDown.index = index;
-      this.mouseDown.scrollY = window.scrollY;
-      this.mouseDown.timeStamp = ev.timeStamp;
+    onOpen(ev, index, showMerged) {
+      const inputType = this.input.eval(ev, index);
+
+      if (inputType !== ClickShort) {
+        return;
+      }
+
+      this.openPhoto(index, showMerged);
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
-      const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
+      const inputType = this.input.eval(ev, index);
+      const longClick = inputType === ClickLong;
 
-      if (scrolled) {
+      if (inputType === InputInvalid) {
         return;
       }
 
diff --git a/frontend/src/component/photo/mosaic.vue b/frontend/src/component/photo/mosaic.vue
index 20233fe5c..3e860aa57 100644
--- a/frontend/src/component/photo/mosaic.vue
+++ b/frontend/src/component/photo/mosaic.vue
@@ -39,9 +39,9 @@
                  :transition="false"
                  aspect-ratio="1"
                  class="accent lighten-2 clickable"
-                 @touchstart="onMouseDown($event, index)"
-                 @touchend.stop.prevent="onClick($event, index)"
-                 @mousedown="onMouseDown($event, index)"
+                 @touchstart="input.touchStart($event, index)"
+                 @touchend.prevent="onClick($event, index)"
+                 @mousedown="input.mouseDown($event, index)"
                  @click.stop.prevent="onClick($event, index)"
                  @mouseover="playLive(photo)"
                  @mouseleave="pauseLive(photo)"
@@ -55,10 +55,10 @@
 
             <v-btn :ripple="false" :depressed="false" class="input-open"
                    icon flat small absolute
-                   @touchstart.stop.prevent="openPhoto(index, true)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, true)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, true)">
+                   @click.stop.prevent="onOpen($event, index, true)">
               <v-icon color="white" class="default-hidden action-raw" :title="$gettext('RAW')">photo_camera</v-icon>
               <v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
               <v-icon color="white" class="default-hidden action-play" :title="$gettext('Video')">play_arrow</v-icon>
@@ -67,19 +67,19 @@
 
             <v-btn :ripple="false" :depressed="false" class="input-view"
                    icon flat small absolute :title="$gettext('View')"
-                   @touchstart.stop.prevent="openPhoto(index, false)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, false)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, false)">
+                   @click.stop.prevent="onOpen($event, index, false)">
               <v-icon color="white" class="action-fullscreen">zoom_in</v-icon>
             </v-btn>
 
             <v-btn :ripple="false" :depressed="false" color="white" class="input-play"
                    icon flat small absolute :title="$gettext('Play')"
-                   @touchstart.stop.prevent="openPhoto(index, true)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, true)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, true)">
+                   @click.stop.prevent="onOpen($event, index, true)">
               <v-icon color="white" class="action-play">play_arrow</v-icon>
             </v-btn>
 
@@ -92,8 +92,8 @@
             <v-btn :ripple="false"
                    icon flat small absolute
                    class="input-select"
-                   @touchstart.stop.prevent="onSelect($event, index)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onSelect($event, index)"
                    @touchmove.stop.prevent
                    @click.stop.prevent="onSelect($event, index)">
               <v-icon color="white" class="select-on">check_circle</v-icon>
@@ -103,7 +103,7 @@
             <v-btn :ripple="false"
                    icon flat small absolute
                    class="input-favorite"
-                   @touchstart.stop.prevent="onTouchStart($event, index)"
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
                    @touchend.stop.prevent="toggleLike($event, index)"
                    @touchmove.stop.prevent
                    @click.stop.prevent="toggleLike($event, index)">
@@ -117,6 +117,8 @@
   </v-container>
 </template>
 <script>
+import {Input, InputInvalid, ClickShort, ClickLong} from "common/input";
+
 export default {
   name: 'PPhotoMosaic',
   props: {
@@ -131,16 +133,7 @@ export default {
   data() {
     return {
       hidePrivate: this.$config.settings().features.private,
-      touchStart: {
-        index: -1,
-        scrollY: window.scrollY,
-        timeStamp: -1,
-      },
-      mouseDown: {
-        index: -1,
-        scrollY: window.scrollY,
-        timeStamp: -1,
-      },
+      input: new Input(),
     };
   },
   methods: {
@@ -161,26 +154,10 @@ export default {
         // Ignore.
       }
     },
-    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();
+      const inputType = this.input.eval(ev, index);
+
+      if (inputType !== ClickShort) {
         return;
       }
 
@@ -193,25 +170,35 @@ export default {
       photo.toggleLike();
     },
     onSelect(ev, index) {
+      const inputType = this.input.eval(ev, index);
+
+      if (inputType !== ClickShort) {
+        return;
+      }
+
       if (ev.shiftKey) {
         this.selectRange(index);
       } else {
         this.toggle(this.photos[index]);
       }
     },
-    onMouseDown(ev, index) {
-      this.mouseDown.index = index;
-      this.mouseDown.scrollY = window.scrollY;
-      this.mouseDown.timeStamp = ev.timeStamp;
-    },
     toggle(photo) {
       this.$clipboard.toggle(photo);
     },
-    onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
-      const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
+    onOpen(ev, index, showMerged) {
+      const inputType = this.input.eval(ev, index);
 
-      if (scrolled) {
+      if (inputType !== ClickShort) {
+        return;
+      }
+
+      this.openPhoto(index, showMerged);
+    },
+    onClick(ev, index) {
+      const inputType = this.input.eval(ev, index);
+      const longClick = inputType === ClickLong;
+
+      if (inputType === InputInvalid) {
         return;
       }
 
diff --git a/frontend/src/share/photo/cards.vue b/frontend/src/share/photo/cards.vue
index d3d8f3181..036acd451 100644
--- a/frontend/src/share/photo/cards.vue
+++ b/frontend/src/share/photo/cards.vue
@@ -36,9 +36,9 @@
                  :transition="false"
                  aspect-ratio="1"
                  class="accent lighten-2 clickable"
-                 @touchstart="onMouseDown($event, index)"
-                 @touchend.stop.prevent="onClick($event, index)"
-                 @mousedown="onMouseDown($event, index)"
+                 @touchstart="input.touchStart($event, index)"
+                 @touchend.prevent="onClick($event, index)"
+                 @mousedown="input.mouseDown($event, index)"
                  @click.stop.prevent="onClick($event, index)"
                  @mouseover="playLive(photo)"
                  @mouseleave="pauseLive(photo)"
@@ -52,10 +52,10 @@
 
             <v-btn :ripple="false" :depressed="false" class="input-open"
                    icon flat absolute
-                   @touchstart.stop.prevent="openPhoto(index, true)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, true)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, true)">
+                   @click.stop.prevent="onOpen($event, index, true)">
               <v-icon color="white" class="default-hidden action-raw" :title="$gettext('RAW')">photo_camera</v-icon>
               <v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
               <v-icon color="white" class="default-hidden action-play" :title="$gettext('Video')">play_arrow</v-icon>
@@ -64,27 +64,27 @@
 
             <v-btn :ripple="false" :depressed="false" class="input-view"
                    icon flat absolute :title="$gettext('View')"
-                   @touchstart.stop.prevent="openPhoto(index, false)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, false)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, false)">
+                   @click.stop.prevent="onOpen($event, index, true)">
               <v-icon color="white" class="action-fullscreen">zoom_in</v-icon>
             </v-btn>
 
             <v-btn :ripple="false" :depressed="false" color="white" class="input-play"
                    outline fab large absolute :title="$gettext('Play')"
-                   @touchstart.stop.prevent="openPhoto(index, true)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, true)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, true)">
+                   @click.stop.prevent="onOpen($event, index, true)">
               <v-icon color="white" class="action-play">play_arrow</v-icon>
             </v-btn>
 
             <v-btn :ripple="false"
                    icon flat absolute
                    class="input-select"
-                   @touchstart.stop.prevent="onSelect($event, index)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onSelect($event, index)"
                    @touchmove.stop.prevent
                    @click.stop.prevent="onSelect($event, index)">
               <v-icon color="white" class="select-on">check_circle</v-icon>
@@ -141,7 +141,8 @@
 </template>
 <script>
 import download from "common/download";
-import Notify from "../../common/notify";
+import Notify from "common/notify";
+import {Input, InputInvalid, ClickShort, ClickLong} from "common/input";
 
 export default {
   name: 'PPhotoCards',
@@ -170,11 +171,7 @@ export default {
         video: this.$gettext("Video"),
         name: this.$gettext("Name"),
       },
-      mouseDown: {
-        index: -1,
-        scrollY: window.scrollY,
-        timeStamp: -1,
-      },
+      input: new Input(),
     };
   },
   methods: {
@@ -202,22 +199,32 @@ export default {
       download(`/api/v1/dl/${photo.Hash}?t=${this.$config.downloadToken()}`, photo.FileName);
     },
     onSelect(ev, index) {
+      const inputType = this.input.eval(ev, index);
+
+      if (inputType !== ClickShort) {
+        return;
+      }
+
       if (ev.shiftKey) {
         this.selectRange(index);
       } else {
         this.$clipboard.toggle(this.photos[index]);
       }
     },
-    onMouseDown(ev, index) {
-      this.mouseDown.index = index;
-      this.mouseDown.scrollY = window.scrollY;
-      this.mouseDown.timeStamp = ev.timeStamp;
+    onOpen(ev, index, showMerged) {
+      const inputType = this.input.eval(ev, index);
+
+      if (inputType !== ClickShort) {
+        return;
+      }
+
+      this.openPhoto(index, showMerged);
     },
     onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
-      const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
+      const inputType = this.input.eval(ev, index);
+      const longClick = inputType === ClickLong;
 
-      if (scrolled) {
+      if (inputType === InputInvalid) {
         return;
       }
 
diff --git a/frontend/src/share/photo/mosaic.vue b/frontend/src/share/photo/mosaic.vue
index af16b5d6c..c620ff7be 100644
--- a/frontend/src/share/photo/mosaic.vue
+++ b/frontend/src/share/photo/mosaic.vue
@@ -35,9 +35,9 @@
                  :transition="false"
                  aspect-ratio="1"
                  class="accent lighten-2 clickable"
-                 @touchstart="onMouseDown($event, index)"
-                 @touchend.stop.prevent="onClick($event, index)"
-                 @mousedown="onMouseDown($event, index)"
+                 @touchstart="input.touchStart($event, index)"
+                 @touchend.prevent="onClick($event, index)"
+                 @mousedown="input.mouseDown($event, index)"
                  @click.stop.prevent="onClick($event, index)"
                  @mouseover="playLive(photo)"
                  @mouseleave="pauseLive(photo)"
@@ -51,10 +51,10 @@
 
             <v-btn :ripple="false" :depressed="false" class="input-open"
                    icon flat small absolute
-                   @touchstart.stop.prevent="openPhoto(index, true)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, true)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, true)">
+                   @click.stop.prevent="onOpen($event, index, true)">
               <v-icon color="white" class="default-hidden action-raw" :title="$gettext('RAW')">photo_camera</v-icon>
               <v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
               <v-icon color="white" class="default-hidden action-play" :title="$gettext('Video')">play_arrow</v-icon>
@@ -63,27 +63,27 @@
 
             <v-btn :ripple="false" :depressed="false" class="input-view"
                    icon flat small absolute :title="$gettext('View')"
-                   @touchstart.stop.prevent="openPhoto(index, false)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, false)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, false)">
+                   @click.stop.prevent="onOpen($event, index, false)">
               <v-icon color="white" class="action-fullscreen">zoom_in</v-icon>
             </v-btn>
 
             <v-btn :ripple="false" :depressed="false" color="white" class="input-play"
                    icon flat small absolute :title="$gettext('Play')"
-                   @touchstart.stop.prevent="openPhoto(index, true)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onOpen($event, index, true)"
                    @touchmove.stop.prevent
-                   @click.stop.prevent="openPhoto(index, true)">
+                   @click.stop.prevent="onOpen($event, index, true)">
               <v-icon color="white" class="action-play">play_arrow</v-icon>
             </v-btn>
 
             <v-btn :ripple="false"
                    icon flat small absolute
                    class="input-select"
-                   @touchstart.stop.prevent="onSelect($event, index)"
-                   @touchend.stop.prevent
+                   @touchstart.stop.prevent="input.touchStart($event, index)"
+                   @touchend.stop.prevent="onSelect($event, index)"
                    @touchmove.stop.prevent
                    @click.stop.prevent="onSelect($event, index)">
               <v-icon color="white" class="select-on">check_circle</v-icon>
@@ -96,6 +96,8 @@
   </v-container>
 </template>
 <script>
+import {Input, InputInvalid, ClickShort, ClickLong} from "common/input";
+
 export default {
   name: 'PPhotoMosaic',
   props: {
@@ -110,11 +112,7 @@ export default {
   data() {
     return {
       hidePrivate: this.$config.settings().features.private,
-      mouseDown: {
-        index: -1,
-        scrollY: window.scrollY,
-        timeStamp: -1,
-      },
+      input: new Input(),
     };
   },
   methods: {
@@ -136,25 +134,35 @@ export default {
       }
     },
     onSelect(ev, index) {
+      const inputType = this.input.eval(ev, index);
+
+      if (inputType !== ClickShort) {
+        return;
+      }
+
       if (ev.shiftKey) {
         this.selectRange(index);
       } else {
         this.toggle(this.photos[index]);
       }
     },
-    onMouseDown(ev, index) {
-      this.mouseDown.index = index;
-      this.mouseDown.scrollY = window.scrollY;
-      this.mouseDown.timeStamp = ev.timeStamp;
-    },
     toggle(photo) {
       this.$clipboard.toggle(photo);
     },
-    onClick(ev, index) {
-      const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
-      const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
+    onOpen(ev, index, showMerged) {
+      const inputType = this.input.eval(ev, index);
 
-      if (scrolled) {
+      if (inputType !== ClickShort) {
+        return;
+      }
+
+      this.openPhoto(index, showMerged);
+    },
+    onClick(ev, index) {
+      const inputType = this.input.eval(ev, index);
+      const longClick = inputType === ClickLong;
+
+      if (inputType === InputInvalid) {
         return;
       }