mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-21 21:01:20 -08:00
remove indicatorGestureInit
This commit is contained in:
Harvey committed
1 parent
26fedfa3d1
commit
a891ccd7d1
7 files changed
+188
-283
No files matched your search
@@ -1,5 +1,4 @@
|
||||
import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEvent, isMobile } from '../utils';
|
||||
import { indicatorGestureInit } from '../events/gestureInit';
|
||||
|
||||
export function getPosFromEvent(art, event) {
|
||||
const { $progress } = art.template;
|
||||
@@ -114,6 +113,10 @@ export default function progress(options) {
|
||||
|
||||
setBar('loaded', art.loaded);
|
||||
|
||||
art.on('setBar', (type, percentage) => {
|
||||
setBar(type, percentage);
|
||||
});
|
||||
|
||||
art.on('video:progress', () => {
|
||||
setBar('loaded', art.loaded);
|
||||
});
|
||||
@@ -126,46 +129,46 @@ export default function progress(options) {
|
||||
setBar('played', 1);
|
||||
});
|
||||
|
||||
proxy($control, 'mousemove', (event) => {
|
||||
setStyle($tip, 'display', 'block');
|
||||
if (includeFromEvent(event, $highlight)) {
|
||||
showHighlight(event);
|
||||
} else {
|
||||
showTime(event);
|
||||
}
|
||||
});
|
||||
if (!isMobile) {
|
||||
proxy($control, 'click', (event) => {
|
||||
if (event.target !== $indicator) {
|
||||
const { second, percentage } = getPosFromEvent(art, event);
|
||||
setBar('played', percentage);
|
||||
art.seek = second;
|
||||
}
|
||||
});
|
||||
|
||||
proxy($control, 'mouseout', () => {
|
||||
setStyle($tip, 'display', 'none');
|
||||
});
|
||||
proxy($control, 'mousemove', (event) => {
|
||||
setStyle($tip, 'display', 'block');
|
||||
if (includeFromEvent(event, $highlight)) {
|
||||
showHighlight(event);
|
||||
} else {
|
||||
showTime(event);
|
||||
}
|
||||
});
|
||||
|
||||
proxy($control, 'click', (event) => {
|
||||
if (event.target !== $indicator) {
|
||||
const { second, percentage } = getPosFromEvent(art, event);
|
||||
setBar('played', percentage);
|
||||
art.seek = second;
|
||||
}
|
||||
});
|
||||
proxy($control, 'mouseout', () => {
|
||||
setStyle($tip, 'display', 'none');
|
||||
});
|
||||
|
||||
proxy($indicator, 'mousedown', () => {
|
||||
isDroging = true;
|
||||
});
|
||||
proxy($indicator, 'mousedown', () => {
|
||||
isDroging = true;
|
||||
});
|
||||
|
||||
proxy(document, 'mousemove', (event) => {
|
||||
if (isDroging) {
|
||||
const { second, percentage } = getPosFromEvent(art, event);
|
||||
setBar('played', percentage);
|
||||
art.seek = second;
|
||||
}
|
||||
});
|
||||
proxy(document, 'mousemove', (event) => {
|
||||
if (isDroging) {
|
||||
const { second, percentage } = getPosFromEvent(art, event);
|
||||
setBar('played', percentage);
|
||||
art.seek = second;
|
||||
}
|
||||
});
|
||||
|
||||
proxy(document, 'mouseup', () => {
|
||||
if (isDroging) {
|
||||
isDroging = false;
|
||||
}
|
||||
});
|
||||
|
||||
indicatorGestureInit(art, $indicator, setBar);
|
||||
proxy(document, 'mouseup', () => {
|
||||
if (isDroging) {
|
||||
isDroging = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,116 +1,60 @@
|
||||
import { clamp, secondToTime, isMobile } from '../utils';
|
||||
|
||||
export function indicatorGestureInit(art, $indicator, setBar) {
|
||||
if (isMobile && !art.option.isLive) {
|
||||
const {
|
||||
plugins,
|
||||
template: { $progress },
|
||||
events: { proxy },
|
||||
} = art;
|
||||
|
||||
let isDroging = false;
|
||||
|
||||
proxy($indicator, 'touchstart', (event) => {
|
||||
if (event.touches.length === 1) {
|
||||
isDroging = true;
|
||||
}
|
||||
});
|
||||
|
||||
proxy(document, 'touchmove', (event) => {
|
||||
if (event.touches.length === 1 && isDroging) {
|
||||
const autoOrientation = plugins.autoOrientation && plugins.autoOrientation.state;
|
||||
|
||||
const { left, top } = $progress.getBoundingClientRect();
|
||||
const { clientX, clientY } = event.touches[0];
|
||||
|
||||
const width = clamp(clientX - left, 0, $progress.clientWidth);
|
||||
const height = clamp(clientY - top, 0, $progress.clientWidth);
|
||||
const size = autoOrientation ? height : width;
|
||||
|
||||
const secondX = (width / $progress.clientWidth) * art.duration;
|
||||
const secondY = (height / $progress.clientWidth) * art.duration;
|
||||
|
||||
const second = autoOrientation ? secondY : secondX;
|
||||
const percentage = clamp(size / $progress.clientWidth, 0, 1);
|
||||
|
||||
setBar('played', percentage);
|
||||
art.seek = second;
|
||||
}
|
||||
});
|
||||
|
||||
proxy(document, 'touchend', () => {
|
||||
if (isDroging) {
|
||||
isDroging = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
import { clamp, secondToTime, isMobile, includeFromEvent } from '../utils';
|
||||
|
||||
export default function gestureInit(art, events) {
|
||||
if (isMobile && !art.option.isLive) {
|
||||
const {
|
||||
notice,
|
||||
plugins,
|
||||
constructor,
|
||||
template: { $video },
|
||||
template: { $video, $bottom, $controls },
|
||||
} = art;
|
||||
|
||||
let isDroging = false;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let currentTime = 0;
|
||||
let pressTimer = null;
|
||||
let startTime = 0;
|
||||
|
||||
events.proxy($video, 'touchstart', (event) => {
|
||||
const onTouchStart = (event) => {
|
||||
if (event.touches.length === 1) {
|
||||
isDroging = true;
|
||||
const { clientX, clientY } = event.touches[0];
|
||||
startX = clientX;
|
||||
startY = clientY;
|
||||
|
||||
clearTimeout(pressTimer);
|
||||
pressTimer = setTimeout(() => {
|
||||
art.playbackRate = constructor.MOBILE_AUTO_PLAYBACKRATE;
|
||||
}, constructor.MOBILE_AUTO_PLAYBACKRATE_TIME);
|
||||
startTime = art.currentTime;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
events.proxy($video, 'touchmove', (event) => {
|
||||
if (event.touches.length === 1 && isDroging) {
|
||||
const onTouchMove = (event) => {
|
||||
if (event.touches.length === 1 && isDroging && art.duration) {
|
||||
const autoOrientation = plugins.autoOrientation && plugins.autoOrientation.state;
|
||||
|
||||
const { clientX, clientY } = event.touches[0];
|
||||
const ratioX = clamp((clientX - startX) / art.width, -1, 1);
|
||||
const ratioY = clamp((clientY - startY) / art.height, -1, 1);
|
||||
|
||||
if (art.duration) {
|
||||
if (autoOrientation) {
|
||||
currentTime = clamp(art.currentTime + art.duration * ratioY, 0, art.duration);
|
||||
} else {
|
||||
currentTime = clamp(art.currentTime + art.duration * ratioX, 0, art.duration);
|
||||
}
|
||||
notice.show = `${secondToTime(currentTime)} / ${secondToTime(art.duration)}`;
|
||||
}
|
||||
const ratio = autoOrientation ? ratioY : ratioX;
|
||||
const currentTime = clamp(startTime + art.duration * ratio, 0, art.duration);
|
||||
art.seek = currentTime;
|
||||
art.emit('setBar', 'played', clamp(currentTime / art.duration, 0, 1));
|
||||
notice.show = `${secondToTime(currentTime)} / ${secondToTime(art.duration)}`;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
events.proxy(document, 'touchend', () => {
|
||||
const onTouchEnd = () => {
|
||||
if (isDroging) {
|
||||
if (currentTime) {
|
||||
art.seek = currentTime;
|
||||
}
|
||||
|
||||
if (art.playbackRate === 3) {
|
||||
art.playbackRate = 1;
|
||||
}
|
||||
|
||||
startX = 0;
|
||||
startY = 0;
|
||||
currentTime = 0;
|
||||
startTime = 0;
|
||||
isDroging = false;
|
||||
clearTimeout(pressTimer);
|
||||
pressTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
events.proxy($bottom, 'touchstart', (event) => {
|
||||
if (!includeFromEvent(event, $controls)) {
|
||||
onTouchStart(event);
|
||||
}
|
||||
});
|
||||
|
||||
events.proxy($bottom, 'touchmove', onTouchMove);
|
||||
events.proxy($video, 'touchstart', onTouchStart);
|
||||
events.proxy($video, 'touchmove', onTouchMove);
|
||||
events.proxy(document, 'touchend', onTouchEnd);
|
||||
}
|
||||
}
|
||||
@@ -18,6 +18,7 @@
|
||||
repeat-x bottom;
|
||||
|
||||
.art-progress {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
pointer-events: auto;
|
||||
@@ -301,12 +302,14 @@
|
||||
|
||||
&.art-mobile {
|
||||
.art-bottom {
|
||||
padding-top: 45px;
|
||||
}
|
||||
|
||||
.art-progress-indicator {
|
||||
transform: scale(1, 1) !important;
|
||||
visibility: visible !important;
|
||||
padding: 50px 5px 0;
|
||||
.art-controls {
|
||||
height: 40px;
|
||||
.art-progress-indicator {
|
||||
transform: scale(1, 1) !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -31,10 +31,4 @@
|
||||
bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-mobile.art-control-show {
|
||||
.art-subtitle {
|
||||
bottom: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user