Fix mobile touchstart

This commit is contained in:
Harvey committed 2022-09-28 10:51:26 +08:00
1 parent 4d1a695f33
commit 783b973fb2
4 files changed
+32 -25

No files matched your search

+1 -2
View File
@@ -130,8 +130,7 @@ export default function progress(options) {
proxy($control, 'click', (event) => {
if (event.target !== $indicator) {
if (art.isRotate) {
const { clientHeight } = document.documentElement;
const percentage = event.pageY / clientHeight;
const percentage = event.pageY / art.height;
const second = percentage * art.duration;
setBar('played', percentage);
art.seek = second;
+15 -13
View File
@@ -1,9 +1,10 @@
import { clamp, secondToTime, isMobile, includeFromEvent } from '../utils';
import { clamp, secondToTime, isMobile } from '../utils';
export default function gestureInit(art, events) {
if (isMobile && !art.option.isLive) {
const { $video, $bottom, $controls } = art.template;
const { $video, $progress } = art.template;
let touchTarget = null;
let isDroging = false;
let startX = 0;
let startY = 0;
@@ -25,11 +26,8 @@ export default function gestureInit(art, events) {
const ratioX = clamp((clientX - startX) / art.width, -1, 1);
const ratioY = clamp((clientY - startY) / art.height, -1, 1);
const ratio = art.isRotate ? ratioY : ratioX;
const currentTime = clamp(
startTime + art.duration * ratio * art.constructor.TOUCH_MOVE_RATIO,
0,
art.duration,
);
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)}`;
@@ -42,18 +40,22 @@ export default function gestureInit(art, events) {
startY = 0;
startTime = 0;
isDroging = false;
touchTarget = null;
}
};
events.proxy($bottom, 'touchstart', (event) => {
if (!includeFromEvent(event, $controls)) {
onTouchStart(event);
}
events.proxy($progress, 'touchstart', (event) => {
touchTarget = $progress;
onTouchStart(event);
});
events.proxy($video, 'touchstart', (event) => {
touchTarget = $video;
onTouchStart(event);
});
events.proxy($bottom, 'touchmove', onTouchMove);
events.proxy($video, 'touchstart', onTouchStart);
events.proxy($video, 'touchmove', onTouchMove);
events.proxy($progress, 'touchmove', onTouchMove);
events.proxy(document, 'touchend', onTouchEnd);
}
}