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

new api: list.clear

This commit is contained in:
DIYgod 2018-03-20 18:18:39 +08:00
parent a4bdc5345b
commit 95ee708ab1
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
4 changed files with 65 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/controller.js
View File

@ -27,8 +27,8 @@ class Controller {
percentage = Math.max(percentage, 0);
percentage = Math.min(percentage, 1);
this.player.bar.set('played', percentage, 'width');
this.player.lrc && this.player.lrc.update(percentage * this.player.audio.duration);
this.player.template.ptime.innerHTML = utils.secondToTime(percentage * this.player.audio.duration);
this.player.lrc && this.player.lrc.update(percentage * this.player.duration);
this.player.template.ptime.innerHTML = utils.secondToTime(percentage * this.player.duration);
};
const thumbUp = (e) => {
@ -38,7 +38,7 @@ class Controller {
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.audio.duration);
this.player.seek(this.player.bar.get('played', 'width') * this.player.duration);
this.player.disableTimeupdate = false;
};
@ -102,7 +102,7 @@ class Controller {
initLoopButton () {
this.player.template.loop.addEventListener('click', () => {
if (this.player.isMultiple()) {
if (this.player.list.audios.length > 1) {
if (this.player.options.loop === 'one') {
this.player.options.loop = 'none';
this.player.template.loop.innerHTML = Icons.loopNone;

72
src/js/list.js
View File

@ -75,37 +75,39 @@ class List {
remove (index) {
this.player.events.trigger('listremove', index);
if (this.audios[index] && this.audios.length > 1) {
const list = this.player.container.querySelectorAll('.aplayer-list li');
list[index].remove();
if (this.audios[index]) {
if (this.audios.length > 1) {
const list = this.player.container.querySelectorAll('.aplayer-list li');
list[index].remove();
this.audios.splice(index, 1);
this.audios.splice(index, 1);
if (index === this.index) {
if (this.audios[index + 1]) {
this.switch(index);
if (index === this.index) {
if (this.audios[index]) {
this.switch(index);
}
else {
this.switch(index - 1);
}
}
else {
this.switch(index - 1);
if (this.index > index) {
this.index--;
}
}
if (this.index > index) {
this.index--;
}
for (let i = index; i < list.length; i++) {
list[i].getElementsByClassName('aplayer-list-index')[0].textContent = i;
}
if (this.audios.length === 1) {
this.player.container.classList.remove('aplayer-withlist');
}
this.player.template.list.style.height = this.audios.length * 33 - 1 + 'px';
this.player.template.listOl.style.height = this.audios.length * 33 - 1 + 'px';
for (let i = index; i < list.length; i++) {
list[i].getElementsByClassName('aplayer-list-index')[0].textContent = i;
}
if (this.audios.length === 1) {
this.player.container.classList.remove('aplayer-withlist');
}
this.player.template.list.style.height = this.audios.length * 33 - 1 + 'px';
this.player.template.listOl.style.height = this.audios.length * 33 - 1 + 'px';
this.player.template.listCurs = this.player.container.querySelectorAll('.aplayer-list-cur');
}
else {
// TODO
this.player.template.listCurs = this.player.container.querySelectorAll('.aplayer-list-cur');
}
else {
this.clear();
}
}
}
@ -136,10 +138,26 @@ class List {
this.player.lrc && this.player.lrc.switch(this.index);
// set duration time
if (this.player.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
this.player.template.dtime.innerHTML = this.player.audio.duration ? utils.secondToTime(this.player.audio.duration) : '00:00';
if (this.player.duration !== 1) { // compatibility: Android browsers will output 1 at first
this.player.template.dtime.innerHTML = utils.secondToTime(this.player.duration);
}
}
clear () {
this.player.events.trigger('listclear');
this.index = 0;
this.player.container.classList.remove('aplayer-withlist');
this.player.pause();
this.audios = [];
this.player.audio.src = '';
this.player.template.listOl.innerHTML = '';
this.player.template.pic.style.backgroundImage = '';
this.player.theme(this.player.options.theme, this.index);
this.player.template.title.innerHTML = 'No audio';
this.player.template.author.innerHTML = '';
this.player.bar.set('loaded', 0, 'width');
this.player.template.dtime.innerHTML = utils.secondToTime(0);
}
}
export default List;

3
src/js/lrc.js
View File

@ -39,7 +39,7 @@ class Lrc {
this.parsed[index] = [['00:00', 'Loading']];
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (index === this.player.playIndex && xhr.readyState === 4) {
if (index === this.player.list.index && xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
this.parsed[index] = this.parse(xhr.responseText);
}
@ -47,7 +47,6 @@ class Lrc {
this.player.notice(`LRC file request fails: status ${xhr.status}`);
this.parsed[index] = [['00:00', 'Not available']];
}
this.container.innerHTML = tplLrc({
lyrics: this.parsed[index]
});

33
src/js/player.js
View File

@ -125,7 +125,7 @@ class APlayer {
this.on('timeupdate', () => {
if (!this.disableTimeupdate) {
this.bar.set('played', this.audio.currentTime / this.audio.duration, 'width');
this.bar.set('played', this.audio.currentTime / this.duration, 'width');
this.lrc && this.lrc.update();
const currentTime = utils.secondToTime(this.audio.currentTime);
if (this.template.ptime.innerHTML !== currentTime) {
@ -136,20 +136,22 @@ class APlayer {
// show audio time: the metadata has loaded or changed
this.on('durationchange', () => {
if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
this.template.dtime.innerHTML = utils.secondToTime(this.audio.duration);
if (this.duration !== 1) { // compatibility: Android browsers will output 1 at first
this.template.dtime.innerHTML = utils.secondToTime(this.duration);
}
});
// show audio loaded bar: to inform interested parties of progress downloading the media
this.on('progress', () => {
const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration : 0;
const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.duration : 0;
this.bar.set('loaded', percentage, 'width');
});
// audio download error: an error occurs
this.on('error', () => {
this.notice('An audio error has occurred.');
if (this.list.audios.length) {
this.notice('An audio error has occurred.');
}
});
// multiple audio play
@ -242,8 +244,8 @@ class APlayer {
}
theme (color = this.list.audios[this.list.index].theme || this.options.theme, index = this.list.index) {
this.list.audios[index].theme = color;
this.template.listCurs[index].style.backgroundColor = color;
this.list.audios[index] && (this.list.audios[index].theme = color);
this.template.listCurs[index] && (this.template.listCurs[index].style.backgroundColor = color);
if (index === this.list.index) {
this.template.pic.style.backgroundColor = color;
this.template.played.style.background = color;
@ -254,21 +256,16 @@ class APlayer {
seek (time) {
time = Math.max(time, 0);
if (this.audio.duration) {
time = Math.min(time, this.audio.duration);
}
time = Math.min(time, this.duration);
this.audio.currentTime = time;
if (isNaN(this.audio.duration)) {
this.bar.set('played', 0, 'width');
}
else {
this.bar.set('played', time / this.audio.duration, 'width');
}
this.bar.set('played', time / this.duration, 'width');
this.template.ptime.innerHTML = utils.secondToTime(time);
}
get duration () {
return isNaN(this.audio.duration) ? 0 : this.audio.duration;
}
setUIPlaying () {
if (this.paused) {
this.paused = false;