Make media modal be aware of multi-touch actions

Originally the media viewer would think every touch is a swipe (one-finger
touch event), so we would encounter the case where a two-finger scale event
would incorrectly change the current media. This is now fixed.

2 files changed, 12 insertions, 14 deletions

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index b8bce730..f3d381ee 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -53,28 +53,25 @@ const MediaModal = {
     }
   },
   created () {
-    this.mediaSwipeGestureRight = GestureService.swipeGesture(
-      GestureService.DIRECTION_RIGHT,
-      this.goPrev,
-      50
-    )
-    this.mediaSwipeGestureLeft = GestureService.swipeGesture(
-      GestureService.DIRECTION_LEFT,
-      this.goNext,
-      50
-    )
+    this.mediaGesture = new GestureService.SwipeAndScaleGesture({
+      direction: GestureService.DIRECTION_LEFT,
+      callbackPositive: this.goNext,
+      callbackNegative: this.goPrev,
+      threshold: 50
+    })
   },
   methods: {
     getType (media) {
       return fileTypeService.fileType(media.mimetype)
     },
     mediaTouchStart (e) {
-      GestureService.beginSwipe(e, this.mediaSwipeGestureRight)
-      GestureService.beginSwipe(e, this.mediaSwipeGestureLeft)
+      this.mediaGesture.start(e)
     },
     mediaTouchMove (e) {
-      GestureService.updateSwipe(e, this.mediaSwipeGestureRight)
-      GestureService.updateSwipe(e, this.mediaSwipeGestureLeft)
+      this.mediaGesture.move(e)
+    },
+    mediaTouchEnd (e) {
+      this.mediaGesture.end(e)
     },
     hide () {
       this.$store.dispatch('closeMediaViewer')
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 8680267b..b5a65d50 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -13,6 +13,7 @@
       :title="currentMedia.description"
       @touchstart.stop="mediaTouchStart"
       @touchmove.stop="mediaTouchMove"
+      @touchend.stop="mediaTouchEnd"
       @click="hide"
       @load="onImageLoaded"
     >