xiaoxue_admin
/
APlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better performance

This commit is contained in:
DIYgod 2018-06-15 01:19:01 +08:00
parent e60f5db916
commit 94df895394
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
3 changed files with 8 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc
View File

@ -49,7 +49,8 @@
"no-useless-computed-key": 1,
"no-useless-rename": 1,
"rest-spread-spacing": 1,
"no-trailing-spaces": 1
"no-trailing-spaces": 1,
"quotes": [1, "single"]
},
"globals": {
"require": false,

14
src/js/controller.js
View File

@ -26,7 +26,7 @@ class Controller {
initPlayBar () {
const thumbMove = (e) => {
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.barWrap)) / this.player.template.barWrap.clientWidth;
let percentage = ((e.clientX || e.changedTouches[0].clientX) - this.player.template.barWrap.getBoundingClientRect().left) / this.player.template.barWrap.clientWidth;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.bar.set('played', percentage, 'width');
@ -37,11 +37,11 @@ class Controller {
const thumbUp = (e) => {
document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
document.removeEventListener(utils.nameMap.dragMove, thumbMove);
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.barWrap)) / this.player.template.barWrap.clientWidth;
let percentage = ((e.clientX || e.changedTouches[0].clientX) - this.player.template.barWrap.getBoundingClientRect().left) / this.player.template.barWrap.clientWidth;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.bar.set('played', percentage, 'width');
this.player.seek(this.player.bar.get('played', 'width') * this.player.duration);
this.player.seek(percentage * this.player.duration);
this.player.disableTimeupdate = false;
};
@ -55,9 +55,7 @@ class Controller {
initVolumeButton () {
this.player.template.volumeButton.addEventListener('click', () => {
if (this.player.audio.muted) {
this.player.audio.muted = false;
this.player.switchVolumeIcon();
this.player.bar.set('volume', this.player.volume(), 'height');
this.player.volume(this.player.audio.volume, true);
}
else {
this.player.audio.muted = true;
@ -67,7 +65,7 @@ class Controller {
});
const thumbMove = (e) => {
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - utils.getElementViewTop(this.player.template.volumeBar, this.player.options.fixed)) / this.player.template.volumeBar.clientHeight;
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - this.player.template.volumeBar.getBoundingClientRect().top) / this.player.template.volumeBar.clientHeight;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.volume(percentage);
@ -77,7 +75,7 @@ class Controller {
this.player.template.volumeBarWrap.classList.remove('aplayer-volume-bar-wrap-active');
document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
document.removeEventListener(utils.nameMap.dragMove, thumbMove);
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - utils.getElementViewTop(this.player.template.volumeBar, this.player.options.fixed)) / this.player.template.volumeBar.clientHeight;
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - this.player.template.volumeBar.getBoundingClientRect().top) / this.player.template.volumeBar.clientHeight;
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.volume(percentage);

35
src/js/utils.js
View File

@ -16,41 +16,6 @@ const utils = {
return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
},
/**
* control play progress
*/
// get element's view position
getElementViewLeft: (element) => {
let actualLeft = element.offsetLeft;
let current = element.offsetParent;
const elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
while (current !== null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
}
else {
while (current !== null && current !== element) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
}
return actualLeft - elementScrollLeft;
},
getElementViewTop: (element, noScrollTop) => {
let actualTop = element.offsetTop;
let current = element.offsetParent;
let elementScrollTop = 0;
while (current !== null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop;
return noScrollTop ? actualTop : actualTop - elementScrollTop;
},
isMobile: isMobile,
storage: {