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

lrc show/hide button in fixed mode

This commit is contained in:
DIYgod 2018-03-22 23:47:17 +08:00
parent a002a4b180
commit 4552dd093a
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
10 changed files with 86 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/lrc.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<path d="M26.667 5.333h-21.333c-0 0-0.001 0-0.001 0-1.472 0-2.666 1.194-2.666 2.666 0 0 0 0.001 0 0.001v-0 16c0 0 0 0.001 0 0.001 0 1.472 1.194 2.666 2.666 2.666 0 0 0.001 0 0.001 0h21.333c0 0 0.001 0 0.001 0 1.472 0 2.666-1.194 2.666-2.666 0-0 0-0.001 0-0.001v0-16c0-0 0-0.001 0-0.001 0-1.472-1.194-2.666-2.666-2.666-0 0-0.001 0-0.001 0h0zM5.333 16h5.333v2.667h-5.333v-2.667zM18.667 24h-13.333v-2.667h13.333v2.667zM26.667 24h-5.333v-2.667h5.333v2.667zM26.667 18.667h-13.333v-2.667h13.333v2.667z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 590 B

16
src/css/index.scss
View File

@ -150,7 +150,8 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
.aplayer-icon-back,
.aplayer-icon-play,
.aplayer-icon-forward {
.aplayer-icon-forward,
.aplayer-icon-lrc {
display: inline-block;
}
@ -230,10 +231,17 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
.aplayer-icon-order,
.aplayer-icon-back,
.aplayer-icon-play,
.aplayer-icon-forward {
.aplayer-icon-forward,
.aplayer-icon-lrc {
display: none;
}
.aplayer-icon-lrc-inactivity {
svg {
opacity: 0.4;
}
}
.aplayer-icon-forward {
transform: rotate(180deg);
}
@ -547,6 +555,10 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
}
}
&.aplayer-lrc-hide {
display: none;
}
.aplayer-lrc-contents {
width: 100%;
transition: all 0.5s ease-out;

14
src/js/controller.js
View File

@ -15,6 +15,7 @@ class Controller {
}
this.initMiniSwitcher();
this.initSkipButton();
this.initLrcButton();
}
initPlayButton () {
@ -154,6 +155,19 @@ class Controller {
this.player.toggle();
});
}
initLrcButton () {
this.player.template.lrcButton.addEventListener('click', () => {
if (this.player.template.lrcButton.classList.contains('aplayer-icon-lrc-inactivity')) {
this.player.template.lrcButton.classList.remove('aplayer-icon-lrc-inactivity');
this.player.lrc && this.player.lrc.show();
}
else {
this.player.template.lrcButton.classList.add('aplayer-icon-lrc-inactivity');
this.player.lrc && this.player.lrc.hide();
}
});
}
}
export default Controller;

5
src/js/events.js
View File

@ -9,7 +9,10 @@ class Events {
'timeupdate', 'volumechange', 'waiting'
];
this.playerEvents = [
'destroy', 'listshow', 'listhide', 'listadd', 'listremove', 'listswitch', 'listclear', 'noticeshow', 'noticehide'
'destroy',
'listshow', 'listhide', 'listadd', 'listremove', 'listswitch', 'listclear',
'noticeshow', 'noticehide',
'lrcshow', 'lrchide',
];
}

2
src/js/icons.js
View File

@ -12,6 +12,7 @@ import loopNone from '../assets/loop-none.svg';
import loading from '../assets/loading.svg';
import right from '../assets/right.svg';
import skip from '../assets/skip.svg';
import lrc from '../assets/lrc.svg';
const Icons = {
play: play,
@ -28,6 +29,7 @@ const Icons = {
loading: loading,
right: right,
skip: skip,
lrc: lrc,
};
export default Icons;

12
src/js/list.js
View File

@ -52,7 +52,9 @@ class List {
}
add (audios) {
this.player.events.trigger('listadd', audios);
this.player.events.trigger('listadd', {
audios: audios,
});
const wasSingle = !(this.audios.length > 1);
const wasEmpty = this.audios.length === 0;
@ -84,7 +86,9 @@ class List {
}
remove (index) {
this.player.events.trigger('listremove', index);
this.player.events.trigger('listremove', {
index: index,
});
if (this.audios[index]) {
if (this.audios.length > 1) {
const list = this.player.container.querySelectorAll('.aplayer-list li');
@ -120,7 +124,9 @@ class List {
}
switch (index) {
this.player.events.trigger('listswitch', index);
this.player.events.trigger('listswitch', {
index: index,
});
if (typeof index !== 'undefined' && this.audios[index]) {
this.index = index;

19
src/js/lrc.js
View File

@ -11,6 +11,25 @@ class Lrc {
this.current = [];
}
show () {
this.player.events.trigger('lrcshow');
this.player.template.lrcWrap.classList.remove('aplayer-lrc-hide');
}
hide () {
this.player.events.trigger('lrchide');
this.player.template.lrcWrap.classList.add('aplayer-lrc-hide');
}
toggle () {
if (this.player.template.lrcWrap.classList.contains('aplayer-lrc-hide')) {
this.show();
}
else {
this.hide();
}
}
update (currentTime = this.player.audio.currentTime) {
if (this.index > this.current.length - 1 || currentTime < this.current[this.index][0] || (!this.current[this.index + 1] || currentTime >= this.current[this.index + 1][0])) {
for (let i = 0; i < this.current.length; i++) {

17
src/js/player.js
View File

@ -91,6 +91,7 @@ class APlayer {
this.list = new List(this);
this.initAudio();
this.bindEvents();
if (this.options.order === 'random') {
this.list.switch(this.randomOrder[0]);
}
@ -116,6 +117,10 @@ class APlayer {
});
}
this.volume(this.storage.get('volume'), true);
}
bindEvents () {
this.on('play', () => {
if (this.paused) {
this.setUIPlaying();
@ -153,10 +158,11 @@ class APlayer {
});
// audio download error: an error occurs
let skipTime;
this.on('error', () => {
if (this.list.audios.length) {
this.notice('An audio error has occurred, player will skip forward in 2 seconds.');
setTimeout(() => {
skipTime = setTimeout(() => {
this.skipForward();
if (!this.paused) {
this.play();
@ -167,6 +173,9 @@ class APlayer {
this.notice('An audio error has occurred.');
}
});
this.events.on('listswitch', () => {
skipTime && clearTimeout(skipTime);
});
// multiple audio play
this.on('ended', () => {
@ -201,8 +210,6 @@ class APlayer {
this.play();
}
});
this.volume(this.storage.get('volume'), true);
}
setAudio (audio) {
@ -434,7 +441,9 @@ class APlayer {
if (this.noticeTime) {
clearTimeout(this.noticeTime);
}
this.events.trigger('noticeshow', text);
this.events.trigger('noticeshow', {
text: text,
});
if (time) {
this.noticeTime = setTimeout(() => {
this.template.notice.style.opacity = 0;

2
src/js/template.js
View File

@ -28,6 +28,7 @@ class Template {
});
this.lrc = this.container.querySelector('.aplayer-lrc-contents');
this.lrcWrap = this.container.querySelector('.aplayer-lrc');
this.ptime = this.container.querySelector('.aplayer-ptime');
this.info = this.container.querySelector('.aplayer-info');
this.time = this.container.querySelector('.aplayer-time');
@ -56,6 +57,7 @@ class Template {
this.skipBackButton = this.container.querySelector('.aplayer-icon-back');
this.skipForwardButton = this.container.querySelector('.aplayer-icon-forward');
this.skipPlayButton = this.container.querySelector('.aplayer-icon-play');
this.lrcButton = this.container.querySelector('.aplayer-icon-lrc');
}
}

6
src/template/player.art
View File

@ -54,6 +54,9 @@
<button type="button" class="aplayer-icon aplayer-icon-menu">
{{@ icons.menu }}
</button>
<button type="button" class="aplayer-icon aplayer-icon-lrc">
{{@ icons.lrc }}
</button>
</div>
</div>
</div>
@ -131,6 +134,9 @@
<button type="button" class="aplayer-icon aplayer-icon-menu">
{{@ icons.menu }}
</button>
<button type="button" class="aplayer-icon aplayer-icon-lrc">
{{@ icons.lrc }}
</button>
</div>
</div>
</div>