From 4552dd093a13df50787c097e1948713c85e3d679 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Thu, 22 Mar 2018 23:47:17 +0800 Subject: [PATCH] lrc show/hide button in fixed mode --- src/assets/lrc.svg | 3 +++ src/css/index.scss | 16 ++++++++++++++-- src/js/controller.js | 14 ++++++++++++++ src/js/events.js | 5 ++++- src/js/icons.js | 2 ++ src/js/list.js | 12 +++++++++--- src/js/lrc.js | 19 +++++++++++++++++++ src/js/player.js | 17 +++++++++++++---- src/js/template.js | 2 ++ src/template/player.art | 6 ++++++ 10 files changed, 86 insertions(+), 10 deletions(-) create mode 100644 src/assets/lrc.svg diff --git a/src/assets/lrc.svg b/src/assets/lrc.svg new file mode 100644 index 0000000..57fac17 --- /dev/null +++ b/src/assets/lrc.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/css/index.scss b/src/css/index.scss index 4b13a19..0d3f0bd 100644 --- a/src/css/index.scss +++ b/src/css/index.scss @@ -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; diff --git a/src/js/controller.js b/src/js/controller.js index fe68c67..b66ad03 100644 --- a/src/js/controller.js +++ b/src/js/controller.js @@ -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; \ No newline at end of file diff --git a/src/js/events.js b/src/js/events.js index d8f96c2..e06a31a 100644 --- a/src/js/events.js +++ b/src/js/events.js @@ -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', ]; } diff --git a/src/js/icons.js b/src/js/icons.js index f06091a..9f6d552 100644 --- a/src/js/icons.js +++ b/src/js/icons.js @@ -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; diff --git a/src/js/list.js b/src/js/list.js index f97473c..1d54fe4 100644 --- a/src/js/list.js +++ b/src/js/list.js @@ -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; diff --git a/src/js/lrc.js b/src/js/lrc.js index b3e69b0..2cb4420 100644 --- a/src/js/lrc.js +++ b/src/js/lrc.js @@ -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++) { diff --git a/src/js/player.js b/src/js/player.js index b4e85b3..94faf06 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -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; diff --git a/src/js/template.js b/src/js/template.js index 070bbec..81f3667 100644 --- a/src/js/template.js +++ b/src/js/template.js @@ -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'); } } diff --git a/src/template/player.art b/src/template/player.art index fcae1c3..d115794 100644 --- a/src/template/player.art +++ b/src/template/player.art @@ -54,6 +54,9 @@ + @@ -131,6 +134,9 @@ +