Skip to content

Commit 94df895

Browse files
DIYgodDIYgod
committed
better performance
1 parent e60f5db commit 94df895

3 files changed

Lines changed: 8 additions & 44 deletions

File tree

‎.eslintrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@
4949
"no-useless-computed-key": 1,
5050
"no-useless-rename": 1,
5151
"rest-spread-spacing": 1,
52-
"no-trailing-spaces": 1
52+
"no-trailing-spaces": 1,
53+
"quotes": [1, "single"]
5354
},
5455
"globals": {
5556
"require": false,

‎src/js/controller.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ class Controller {
2626

2727
initPlayBar () {
2828
const thumbMove = (e) => {
29-
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.barWrap)) / this.player.template.barWrap.clientWidth;
29+
let percentage = ((e.clientX || e.changedTouches[0].clientX) - this.player.template.barWrap.getBoundingClientRect().left) / this.player.template.barWrap.clientWidth;
3030
percentage = Math.max(percentage, 0);
3131
percentage = Math.min(percentage, 1);
3232
this.player.bar.set('played', percentage, 'width');
@@ -37,11 +37,11 @@ class Controller {
3737
const thumbUp = (e) => {
3838
document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
3939
document.removeEventListener(utils.nameMap.dragMove, thumbMove);
40-
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.barWrap)) / this.player.template.barWrap.clientWidth;
40+
let percentage = ((e.clientX || e.changedTouches[0].clientX) - this.player.template.barWrap.getBoundingClientRect().left) / this.player.template.barWrap.clientWidth;
4141
percentage = Math.max(percentage, 0);
4242
percentage = Math.min(percentage, 1);
4343
this.player.bar.set('played', percentage, 'width');
44-
this.player.seek(this.player.bar.get('played', 'width') * this.player.duration);
44+
this.player.seek(percentage * this.player.duration);
4545
this.player.disableTimeupdate = false;
4646
};
4747

@@ -55,9 +55,7 @@ class Controller {
5555
initVolumeButton () {
5656
this.player.template.volumeButton.addEventListener('click', () => {
5757
if (this.player.audio.muted) {
58-
this.player.audio.muted = false;
59-
this.player.switchVolumeIcon();
60-
this.player.bar.set('volume', this.player.volume(), 'height');
58+
this.player.volume(this.player.audio.volume, true);
6159
}
6260
else {
6361
this.player.audio.muted = true;
@@ -67,7 +65,7 @@ class Controller {
6765
});
6866

6967
const thumbMove = (e) => {
70-
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - utils.getElementViewTop(this.player.template.volumeBar, this.player.options.fixed)) / this.player.template.volumeBar.clientHeight;
68+
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - this.player.template.volumeBar.getBoundingClientRect().top) / this.player.template.volumeBar.clientHeight;
7169
percentage = Math.max(percentage, 0);
7270
percentage = Math.min(percentage, 1);
7371
this.player.volume(percentage);
@@ -77,7 +75,7 @@ class Controller {
7775
this.player.template.volumeBarWrap.classList.remove('aplayer-volume-bar-wrap-active');
7876
document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
7977
document.removeEventListener(utils.nameMap.dragMove, thumbMove);
80-
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - utils.getElementViewTop(this.player.template.volumeBar, this.player.options.fixed)) / this.player.template.volumeBar.clientHeight;
78+
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - this.player.template.volumeBar.getBoundingClientRect().top) / this.player.template.volumeBar.clientHeight;
8179
percentage = Math.max(percentage, 0);
8280
percentage = Math.min(percentage, 1);
8381
this.player.volume(percentage);

‎src/js/utils.js‎

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -16,41 +16,6 @@ const utils = {
1616
return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':');
1717
},
1818

19-
/**
20-
* control play progress
21-
*/
22-
// get element's view position
23-
getElementViewLeft: (element) => {
24-
let actualLeft = element.offsetLeft;
25-
let current = element.offsetParent;
26-
const elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
27-
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
28-
while (current !== null) {
29-
actualLeft += current.offsetLeft;
30-
current = current.offsetParent;
31-
}
32-
}
33-
else {
34-
while (current !== null && current !== element) {
35-
actualLeft += current.offsetLeft;
36-
current = current.offsetParent;
37-
}
38-
}
39-
return actualLeft - elementScrollLeft;
40-
},
41-
42-
getElementViewTop: (element, noScrollTop) => {
43-
let actualTop = element.offsetTop;
44-
let current = element.offsetParent;
45-
let elementScrollTop = 0;
46-
while (current !== null) {
47-
actualTop += current.offsetTop;
48-
current = current.offsetParent;
49-
}
50-
elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop;
51-
return noScrollTop ? actualTop : actualTop - elementScrollTop;
52-
},
53-
5419
isMobile: isMobile,
5520

5621
storage: {

0 commit comments

Comments
 (0)