ArtPlayer/packages/artplayer/src/events/gestureInit.js

import { setCurrentTime } from '../control/progress'
import { clamp, isMobile, secondToTime } from '../utils'

function GetSlideAngle(dx, dy) {
  return (Math.atan2(dy, dx) * 180) / Math.PI
}

function GetSlideDirection(startX, startY, endX, endY) {
  const dy = startY - endY
  const dx = endX - startX
  let result = 0

  if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
    return result
  }

  const angle = GetSlideAngle(dx, dy)
  if (angle >= -45 && angle < 45) {
    result = 4
  }
  else if (angle >= 45 && angle < 135) {
    result = 1
  }
  else if (angle >= -135 && angle < -45) {
    result = 2
  }
  else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
    result = 3
  }

  return result
}

export default function gestureInit(art, events) {
  if (isMobile && !art.option.isLive) {
    const { $video, $progress } = art.template

    let touchTarget = null
    let isDragging = false
    let startX = 0
    let startY = 0
    let startTime = 0

    const onTouchStart = (event) => {
      if (event.touches.length === 1 && !art.isLock) {
        if (touchTarget === $progress) {
          setCurrentTime(art, event)
        }

        isDragging = true
        const { pageX, pageY } = event.touches[0]
        startX = pageX
        startY = pageY
        startTime = art.currentTime
      }
    }

    const onTouchMove = (event) => {
      if (event.touches.length === 1 && isDragging && art.duration) {
        const { pageX, pageY } = event.touches[0]
        const direction = GetSlideDirection(startX, startY, pageX, pageY)
        const isHorizontal = [3, 4].includes(direction)
        const isVertical = [1, 2].includes(direction)
        const isLegal = (isHorizontal && !art.isRotate) || (isVertical && art.isRotate)
        if (isLegal) {
          const ratioX = clamp((pageX - startX) / art.width, -1, 1)
          const ratioY = clamp((pageY - startY) / art.height, -1, 1)
          const ratio = art.isRotate ? ratioY : ratioX
          const TOUCH_MOVE_RATIO = touchTarget === $video ? art.constructor.TOUCH_MOVE_RATIO : 1
          const currentTime = clamp(startTime + art.duration * ratio * TOUCH_MOVE_RATIO, 0, art.duration)
          art.seek = currentTime
          art.emit('setBar', 'played', clamp(currentTime / art.duration, 0, 1), event)
          art.notice.show = `${secondToTime(currentTime)} / ${secondToTime(art.duration)}`
        }
      }
    }

    const onTouchEnd = () => {
      if (isDragging) {
        startX = 0
        startY = 0
        startTime = 0
        isDragging = false
        touchTarget = null
      }
    }

    if (art.option.gesture) {
      events.proxy($video, 'touchstart', (event) => {
        touchTarget = $video
        onTouchStart(event)
      })
      events.proxy($video, 'touchmove', onTouchMove)
    }

    events.proxy($progress, 'touchstart', (event) => {
      touchTarget = $progress
      onTouchStart(event)
    })

    events.proxy($progress, 'touchmove', onTouchMove)
    art.on('document:touchend', onTouchEnd)
  }
}