添加移动端用户手势

This commit is contained in:
Harvey committed 2020-05-15 13:06:10 +08:00
1 parent 4cbefa172d
commit bb50f5ab39
5 files changed
+80 -3

No files matched your search

@@ -0,0 +1,40 @@
import { clamp, secondToTime } from '../utils';
export default function gestureInit(art, events) {
if (art.isMobile && !art.option.isLive) {
const {
player,
notice,
template: { $video },
} = art;
let isDroging = false;
let startX = 0;
let currentTime = 0;
events.proxy($video, 'touchstart', (event) => {
if (event.touches.length === 1) {
isDroging = true;
startX = event.touches[0].clientX;
}
});
events.proxy(document, 'touchmove', (event) => {
if (event.touches.length === 1 && isDroging) {
const widthDiff = event.touches[0].clientX - startX;
const proportion = clamp(widthDiff / $video.clientWidth, -1, 1);
currentTime = clamp(player.currentTime + 60 * proportion, 0, player.duration);
notice.show = `${secondToTime(currentTime)} / ${secondToTime(player.duration)}`;
}
});
events.proxy(document, 'touchend', () => {
if (isDroging && currentTime) {
player.seek = currentTime;
}
isDroging = false;
startX = 0;
currentTime = 0;
});
}
}
+2
View File
@@ -2,6 +2,7 @@ import clickInit from './clickInit';
import hoverInit from './hoverInit';
import mousemoveInit from './mousemoveInit';
import resizeInit from './resizeInit';
import gestureInit from './gestureInit';
export default class Events {
constructor(art) {
@@ -16,6 +17,7 @@ export default class Events {
hoverInit(art, this);
mousemoveInit(art, this);
resizeInit(art, this);
gestureInit(art, this);
});
}
}
+1 -1
View File
@@ -2,6 +2,6 @@ import { def } from '../utils';
export default function durationMix(art, player) {
def(player, 'duration', {
get: () => art.template.$video.duration || 0,
get: () => art.template.$video.duration || Infinity,
});
}