Skip to content

Commit 41478dc

Browse files
DIYgodDIYgod
committed
better progress and volume drag
1 parent ec0c5c3 commit 41478dc

2 files changed

Lines changed: 43 additions & 40 deletions

File tree

‎src/css/index.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -320,6 +320,10 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
320320
overflow: hidden;
321321
transition: all .2s ease-in-out;
322322

323+
&.aplayer-volume-bar-wrap-active {
324+
height: 40px;
325+
}
326+
323327
.aplayer-volume-bar {
324328
position: absolute;
325329
bottom: 0;

‎src/js/controller.js‎

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -45,58 +45,34 @@ class Controller {
4545
}
4646

4747
initPlayBar () {
48-
let barWidth;
49-
this.player.template.barWrap.addEventListener('click', (event) => {
50-
const e = event || window.event;
51-
barWidth = this.player.template.barWrap.clientWidth;
52-
const percentage = (e.clientX - utils.getElementViewLeft(this.player.template.barWrap)) / barWidth;
53-
if (isNaN(this.player.audio.duration)) {
54-
this.player.bar.set('played', 0, 'width');
55-
}
56-
else {
57-
this.player.seek(percentage * this.player.audio.duration);
58-
}
59-
});
60-
61-
const thumbMove = (event) => {
62-
const e = event || window.event;
63-
let percentage = (e.clientX - utils.getElementViewLeft(this.player.template.barWrap)) / barWidth;
64-
percentage = percentage > 0 ? percentage : 0;
65-
percentage = percentage < 1 ? percentage : 1;
48+
const thumbMove = (e) => {
49+
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.barWrap)) / this.player.template.barWrap.clientWidth;
50+
percentage = Math.max(percentage, 0);
51+
percentage = Math.min(percentage, 1);
6652
this.player.bar.set('played', percentage, 'width');
6753
this.player.lrc && this.player.lrc.update(percentage * this.player.audio.duration);
6854
this.player.template.ptime.innerHTML = utils.secondToTime(percentage * this.player.audio.duration);
6955
};
7056

71-
const thumbUp = () => {
72-
document.removeEventListener('mouseup', thumbUp);
73-
document.removeEventListener('mousemove', thumbMove);
74-
if (isNaN(this.player.audio.duration)) {
75-
this.player.bar.set('played', 0, 'width');
76-
}
77-
else {
78-
this.player.seek(this.player.bar.get('played', 'width') * this.player.audio.duration);
79-
this.player.timer.enable('progress');
80-
}
57+
const thumbUp = (e) => {
58+
document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
59+
document.removeEventListener(utils.nameMap.dragMove, thumbMove);
60+
let percentage = ((e.clientX || e.changedTouches[0].clientX) - utils.getElementViewLeft(this.player.template.barWrap)) / this.player.template.barWrap.clientWidth;
61+
percentage = Math.max(percentage, 0);
62+
percentage = Math.min(percentage, 1);
63+
this.player.bar.set('played', percentage, 'width');
64+
this.player.seek(this.player.bar.get('played', 'width') * this.player.audio.duration);
65+
this.player.timer.enable('progress');
8166
};
8267

83-
this.player.template.thumb.addEventListener('mousedown', () => {
84-
barWidth = this.player.template.barWrap.clientWidth;
68+
this.player.template.barWrap.addEventListener(utils.nameMap.dragStart, () => {
8569
this.player.timer.disable('progress');
86-
document.addEventListener('mousemove', thumbMove);
87-
document.addEventListener('mouseup', thumbUp);
70+
document.addEventListener(utils.nameMap.dragMove, thumbMove);
71+
document.addEventListener(utils.nameMap.dragEnd, thumbUp);
8872
});
8973
}
9074

9175
initVolumeButton () {
92-
const barHeight = 35;
93-
this.player.template.volumeBarWrap.addEventListener('click', (event) => {
94-
const e = event || window.event;
95-
let percentage = (barHeight - e.clientY + utils.getElementViewTop(this.player.template.volumeBar)) / barHeight;
96-
percentage = percentage > 0 ? percentage : 0;
97-
percentage = percentage < 1 ? percentage : 1;
98-
this.player.volume(percentage);
99-
});
10076
this.player.template.volumeButton.addEventListener('click', () => {
10177
if (this.player.audio.muted) {
10278
this.player.audio.muted = false;
@@ -109,6 +85,29 @@ class Controller {
10985
this.player.bar.set('volume', 0, 'height');
11086
}
11187
});
88+
89+
const thumbMove = (e) => {
90+
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - utils.getElementViewTop(this.player.template.volumeBar)) / this.player.template.volumeBar.clientHeight;
91+
percentage = Math.max(percentage, 0);
92+
percentage = Math.min(percentage, 1);
93+
this.player.volume(percentage);
94+
};
95+
96+
const thumbUp = (e) => {
97+
this.player.template.volumeBarWrap.classList.remove('aplayer-volume-bar-wrap-active');
98+
document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
99+
document.removeEventListener(utils.nameMap.dragMove, thumbMove);
100+
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - utils.getElementViewTop(this.player.template.volumeBar)) / this.player.template.volumeBar.clientHeight;
101+
percentage = Math.max(percentage, 0);
102+
percentage = Math.min(percentage, 1);
103+
this.player.volume(percentage);
104+
};
105+
106+
this.player.template.volumeBarWrap.addEventListener(utils.nameMap.dragStart, () => {
107+
this.player.template.volumeBarWrap.classList.add('aplayer-volume-bar-wrap-active');
108+
document.addEventListener(utils.nameMap.dragMove, thumbMove);
109+
document.addEventListener(utils.nameMap.dragEnd, thumbUp);
110+
});
112111
}
113112

114113
initOrderButton () {

0 commit comments

Comments
 (0)