Server : Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.4.20 System : Linux st2.domain.com 3.10.0-1127.10.1.el7.x86_64 #1 SMP Wed Jun 3 14:28:03 UTC 2020 x86_64 User : apache ( 48) PHP Version : 7.4.20 Disable Function : NONE Directory : /var/www/html/video/layout/js/node_modules/artplayer/src/events/ |
import { clamp, secondToTime, isMobile } from '../utils';
import { setCurrentTime } from '../control/progress';
function GetSlideAngle(dx, dy) {
return (Math.atan2(dy, dx) * 180) / Math.PI;
}
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
var result = 0;
if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var 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 isDroging = 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);
}
isDroging = true;
const { pageX, pageY } = event.touches[0];
startX = pageX;
startY = pageY;
startTime = art.currentTime;
}
};
const onTouchMove = (event) => {
if (event.touches.length === 1 && isDroging && 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));
art.notice.show = `${secondToTime(currentTime)} / ${secondToTime(art.duration)}`;
}
}
};
const onTouchEnd = () => {
if (isDroging) {
startX = 0;
startY = 0;
startTime = 0;
isDroging = false;
touchTarget = null;
}
};
events.proxy($progress, 'touchstart', (event) => {
touchTarget = $progress;
onTouchStart(event);
});
events.proxy($video, 'touchstart', (event) => {
touchTarget = $video;
onTouchStart(event);
});
events.proxy($video, 'touchmove', onTouchMove);
events.proxy($progress, 'touchmove', onTouchMove);
events.proxy(document, 'touchend', onTouchEnd);
}
}