Merge remote-tracking branch 'origin/develop' into expert-settings-and-serverside

* origin/develop: (83 commits)
  Make media modal buttons larger
  Add English translation for hide tooltip
  Add hide button to media modal
  Lint
  Prevent hiding media viewer if swiped over SwipeClick
  Fix webkit image blurs
  Fix video in media modal not displaying properly
  Add changelog for https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1403
  Remove image box-shadow in media modal
  Clean up debug code for image pinch zoom
  Bump @kazvmoe-infra/pinch-zoom-element to 1.2.0 on npm
  Bump pinch-zoom-element version
  Clean up
  Check whether we swiped only for mouse pointer
  Scale swipe threshold with viewport width
  Update pinch-zoom-element
  Allow pinch-zoom to fill the whole screen
  Use native click for hiding overlay
  Reset position on swipe end even if we cannot navigate
  Make lint happy
  ...

1 files changed, 135 insertions, 2 deletions

diff --git a/src/services/gesture_service/gesture_service.js b/src/services/gesture_service/gesture_service.js
index 88a328f3..265a7f25 100644
--- a/src/services/gesture_service/gesture_service.js
+++ b/src/services/gesture_service/gesture_service.js
@@ -4,9 +4,15 @@ const DIRECTION_RIGHT = [1, 0]
 const DIRECTION_UP = [0, -1]
 const DIRECTION_DOWN = [0, 1]
 
+const BUTTON_LEFT = 0
+
 const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
 
-const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY])
+const touchCoord = touch => [touch.screenX, touch.screenY]
+
+const touchEventCoord = e => touchCoord(e.touches[0])
+
+const pointerEventCoord = e => [e.clientX, e.clientY]
 
 const vectorLength = v => Math.sqrt(v[0] * v[0] + v[1] * v[1])
 
@@ -61,6 +67,132 @@ const updateSwipe = (event, gesture) => {
   gesture._swiping = false
 }
 
+class SwipeAndClickGesture {
+  // swipePreviewCallback(offsets: Array[Number])
+  //   offsets: the offset vector which the underlying component should move, from the starting position
+  // swipeEndCallback(sign: 0|-1|1)
+  //   sign: if the swipe does not meet the threshold, 0
+  //         if the swipe meets the threshold in the positive direction, 1
+  //         if the swipe meets the threshold in the negative direction, -1
+  constructor ({
+    direction,
+    // swipeStartCallback
+    swipePreviewCallback,
+    swipeEndCallback,
+    swipeCancelCallback,
+    swipelessClickCallback,
+    threshold = 30,
+    perpendicularTolerance = 1.0,
+    disableClickThreshold = 1
+  }) {
+    const nop = () => {}
+    this.direction = direction
+    this.swipePreviewCallback = swipePreviewCallback || nop
+    this.swipeEndCallback = swipeEndCallback || nop
+    this.swipeCancelCallback = swipeCancelCallback || nop
+    this.swipelessClickCallback = swipelessClickCallback || nop
+    this.threshold = typeof threshold === 'function' ? threshold : () => threshold
+    this.disableClickThreshold = typeof disableClickThreshold === 'function' ? disableClickThreshold : () => disableClickThreshold
+    this.perpendicularTolerance = perpendicularTolerance
+    this._reset()
+  }
+
+  _reset () {
+    this._startPos = [0, 0]
+    this._pointerId = -1
+    this._swiping = false
+    this._swiped = false
+    this._preventNextClick = false
+  }
+
+  start (event) {
+    // Only handle left click
+    if (event.button !== BUTTON_LEFT) {
+      return
+    }
+
+    this._startPos = pointerEventCoord(event)
+    this._pointerId = event.pointerId
+    this._swiping = true
+    this._swiped = false
+  }
+
+  move (event) {
+    if (this._swiping && this._pointerId === event.pointerId) {
+      this._swiped = true
+
+      const coord = pointerEventCoord(event)
+      const delta = deltaCoord(this._startPos, coord)
+
+      this.swipePreviewCallback(delta)
+    }
+  }
+
+  cancel (event) {
+    if (!this._swiping || this._pointerId !== event.pointerId) {
+      return
+    }
+
+    this.swipeCancelCallback()
+  }
+
+  end (event) {
+    if (!this._swiping) {
+      return
+    }
+
+    if (this._pointerId !== event.pointerId) {
+      return
+    }
+
+    this._swiping = false
+
+    // movement too small
+    const coord = pointerEventCoord(event)
+    const delta = deltaCoord(this._startPos, coord)
+
+    const sign = (() => {
+      if (vectorLength(delta) < this.threshold()) {
+        return 0
+      }
+      // movement is opposite from direction
+      const isPositive = dotProduct(delta, this.direction) > 0
+
+      // movement perpendicular to direction is too much
+      const towardsDir = project(delta, this.direction)
+      const perpendicularDir = perpendicular(this.direction)
+      const towardsPerpendicular = project(delta, perpendicularDir)
+      if (
+        vectorLength(towardsDir) * this.perpendicularTolerance <
+          vectorLength(towardsPerpendicular)
+      ) {
+        return 0
+      }
+
+      return isPositive ? 1 : -1
+    })()
+
+    if (this._swiped) {
+      this.swipeEndCallback(sign)
+    }
+    this._reset()
+    // Only a mouse will fire click event when
+    // the end point is far from the starting point
+    // so for other kinds of pointers do not check
+    // whether we have swiped
+    if (vectorLength(delta) >= this.disableClickThreshold() && event.pointerType === 'mouse') {
+      this._preventNextClick = true
+    }
+  }
+
+  click (event) {
+    if (!this._preventNextClick) {
+      this.swipelessClickCallback()
+    }
+    this._reset()
+  }
+}
+
 const GestureService = {
   DIRECTION_LEFT,
   DIRECTION_RIGHT,
@@ -68,7 +200,8 @@ const GestureService = {
   DIRECTION_DOWN,
   swipeGesture,
   beginSwipe,
-  updateSwipe
+  updateSwipe,
+  SwipeAndClickGesture
 }
 
 export default GestureService