lrc show/hide button in fixed mode

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;

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;

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',
         ];
     }
 

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;

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;

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++) {

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;

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');
     }
 }
 

src/template/player.art

@@ -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>