Skip to content

Commit 95ee708

Browse files
DIYgodDIYgod
committed
new api: list.clear
1 parent a4bdc53 commit 95ee708

4 files changed

Lines changed: 65 additions & 51 deletions

File tree

‎src/js/controller.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ class Controller {
2727
percentage = Math.max(percentage, 0);
2828
percentage = Math.min(percentage, 1);
2929
this.player.bar.set('played', percentage, 'width');
30-
this.player.lrc && this.player.lrc.update(percentage * this.player.audio.duration);
31-
this.player.template.ptime.innerHTML = utils.secondToTime(percentage * this.player.audio.duration);
30+
this.player.lrc && this.player.lrc.update(percentage * this.player.duration);
31+
this.player.template.ptime.innerHTML = utils.secondToTime(percentage * this.player.duration);
3232
};
3333

3434
const thumbUp = (e) => {
@@ -38,7 +38,7 @@ class Controller {
3838
percentage = Math.max(percentage, 0);
3939
percentage = Math.min(percentage, 1);
4040
this.player.bar.set('played', percentage, 'width');
41-
this.player.seek(this.player.bar.get('played', 'width') * this.player.audio.duration);
41+
this.player.seek(this.player.bar.get('played', 'width') * this.player.duration);
4242
this.player.disableTimeupdate = false;
4343
};
4444

@@ -102,7 +102,7 @@ class Controller {
102102

103103
initLoopButton () {
104104
this.player.template.loop.addEventListener('click', () => {
105-
if (this.player.isMultiple()) {
105+
if (this.player.list.audios.length > 1) {
106106
if (this.player.options.loop === 'one') {
107107
this.player.options.loop = 'none';
108108
this.player.template.loop.innerHTML = Icons.loopNone;

‎src/js/list.js‎

Lines changed: 45 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -75,37 +75,39 @@ class List {
7575

7676
remove (index) {
7777
this.player.events.trigger('listremove', index);
78-
if (this.audios[index] && this.audios.length > 1) {
79-
const list = this.player.container.querySelectorAll('.aplayer-list li');
80-
list[index].remove();
81-
82-
this.audios.splice(index, 1);
78+
if (this.audios[index]) {
79+
if (this.audios.length > 1) {
80+
const list = this.player.container.querySelectorAll('.aplayer-list li');
81+
list[index].remove();
82+
83+
this.audios.splice(index, 1);
84+
85+
if (index === this.index) {
86+
if (this.audios[index]) {
87+
this.switch(index);
88+
}
89+
else {
90+
this.switch(index - 1);
91+
}
92+
}
93+
if (this.index > index) {
94+
this.index--;
95+
}
8396

84-
if (index === this.index) {
85-
if (this.audios[index + 1]) {
86-
this.switch(index);
97+
for (let i = index; i < list.length; i++) {
98+
list[i].getElementsByClassName('aplayer-list-index')[0].textContent = i;
8799
}
88-
else {
89-
this.switch(index - 1);
100+
if (this.audios.length === 1) {
101+
this.player.container.classList.remove('aplayer-withlist');
90102
}
91-
}
92-
if (this.index > index) {
93-
this.index--;
94-
}
103+
this.player.template.list.style.height = this.audios.length * 33 - 1 + 'px';
104+
this.player.template.listOl.style.height = this.audios.length * 33 - 1 + 'px';
95105

96-
for (let i = index; i < list.length; i++) {
97-
list[i].getElementsByClassName('aplayer-list-index')[0].textContent = i;
106+
this.player.template.listCurs = this.player.container.querySelectorAll('.aplayer-list-cur');
98107
}
99-
if (this.audios.length === 1) {
100-
this.player.container.classList.remove('aplayer-withlist');
108+
else {
109+
this.clear();
101110
}
102-
this.player.template.list.style.height = this.audios.length * 33 - 1 + 'px';
103-
this.player.template.listOl.style.height = this.audios.length * 33 - 1 + 'px';
104-
105-
this.player.template.listCurs = this.player.container.querySelectorAll('.aplayer-list-cur');
106-
}
107-
else {
108-
// TODO
109111
}
110112
}
111113

@@ -136,10 +138,26 @@ class List {
136138
this.player.lrc && this.player.lrc.switch(this.index);
137139

138140
// set duration time
139-
if (this.player.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
140-
this.player.template.dtime.innerHTML = this.player.audio.duration ? utils.secondToTime(this.player.audio.duration) : '00:00';
141+
if (this.player.duration !== 1) { // compatibility: Android browsers will output 1 at first
142+
this.player.template.dtime.innerHTML = utils.secondToTime(this.player.duration);
141143
}
142144
}
145+
146+
clear () {
147+
this.player.events.trigger('listclear');
148+
this.index = 0;
149+
this.player.container.classList.remove('aplayer-withlist');
150+
this.player.pause();
151+
this.audios = [];
152+
this.player.audio.src = '';
153+
this.player.template.listOl.innerHTML = '';
154+
this.player.template.pic.style.backgroundImage = '';
155+
this.player.theme(this.player.options.theme, this.index);
156+
this.player.template.title.innerHTML = 'No audio';
157+
this.player.template.author.innerHTML = '';
158+
this.player.bar.set('loaded', 0, 'width');
159+
this.player.template.dtime.innerHTML = utils.secondToTime(0);
160+
}
143161
}
144162

145163
export default List;

‎src/js/lrc.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,14 @@ class Lrc {
3939
this.parsed[index] = [['00:00', 'Loading']];
4040
const xhr = new XMLHttpRequest();
4141
xhr.onreadystatechange = () => {
42-
if (index === this.player.playIndex && xhr.readyState === 4) {
42+
if (index === this.player.list.index && xhr.readyState === 4) {
4343
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
4444
this.parsed[index] = this.parse(xhr.responseText);
4545
}
4646
else {
4747
this.player.notice(`LRC file request fails: status ${xhr.status}`);
4848
this.parsed[index] = [['00:00', 'Not available']];
4949
}
50-
5150
this.container.innerHTML = tplLrc({
5251
lyrics: this.parsed[index]
5352
});

‎src/js/player.js‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ class APlayer {
125125

126126
this.on('timeupdate', () => {
127127
if (!this.disableTimeupdate) {
128-
this.bar.set('played', this.audio.currentTime / this.audio.duration, 'width');
128+
this.bar.set('played', this.audio.currentTime / this.duration, 'width');
129129
this.lrc && this.lrc.update();
130130
const currentTime = utils.secondToTime(this.audio.currentTime);
131131
if (this.template.ptime.innerHTML !== currentTime) {
@@ -136,20 +136,22 @@ class APlayer {
136136

137137
// show audio time: the metadata has loaded or changed
138138
this.on('durationchange', () => {
139-
if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
140-
this.template.dtime.innerHTML = utils.secondToTime(this.audio.duration);
139+
if (this.duration !== 1) { // compatibility: Android browsers will output 1 at first
140+
this.template.dtime.innerHTML = utils.secondToTime(this.duration);
141141
}
142142
});
143143

144144
// show audio loaded bar: to inform interested parties of progress downloading the media
145145
this.on('progress', () => {
146-
const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration : 0;
146+
const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.duration : 0;
147147
this.bar.set('loaded', percentage, 'width');
148148
});
149149

150150
// audio download error: an error occurs
151151
this.on('error', () => {
152-
this.notice('An audio error has occurred.');
152+
if (this.list.audios.length) {
153+
this.notice('An audio error has occurred.');
154+
}
153155
});
154156

155157
// multiple audio play
@@ -242,8 +244,8 @@ class APlayer {
242244
}
243245

244246
theme (color = this.list.audios[this.list.index].theme || this.options.theme, index = this.list.index) {
245-
this.list.audios[index].theme = color;
246-
this.template.listCurs[index].style.backgroundColor = color;
247+
this.list.audios[index] && (this.list.audios[index].theme = color);
248+
this.template.listCurs[index] && (this.template.listCurs[index].style.backgroundColor = color);
247249
if (index === this.list.index) {
248250
this.template.pic.style.backgroundColor = color;
249251
this.template.played.style.background = color;
@@ -254,21 +256,16 @@ class APlayer {
254256

255257
seek (time) {
256258
time = Math.max(time, 0);
257-
if (this.audio.duration) {
258-
time = Math.min(time, this.audio.duration);
259-
}
260-
259+
time = Math.min(time, this.duration);
261260
this.audio.currentTime = time;
262-
263-
if (isNaN(this.audio.duration)) {
264-
this.bar.set('played', 0, 'width');
265-
}
266-
else {
267-
this.bar.set('played', time / this.audio.duration, 'width');
268-
}
261+
this.bar.set('played', time / this.duration, 'width');
269262
this.template.ptime.innerHTML = utils.secondToTime(time);
270263
}
271264

265+
get duration () {
266+
return isNaN(this.audio.duration) ? 0 : this.audio.duration;
267+
}
268+
272269
setUIPlaying () {
273270
if (this.paused) {
274271
this.paused = false;

0 commit comments

Comments
 (0)