new api: theme

DIYgod · Mar 13, 2018 · ba76929 · ba76929
1 parent e105283
commit ba76929
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/src/js/player.js b/src/js/player.js
@@ -206,12 +206,7 @@ class APlayer {
             else {
                 this.template.pic.style.backgroundImage = '';
             }
-            if (this.options.audio[this.playIndex].theme) {
-                this.template.pic.style.backgroundColor = this.options.audio[this.playIndex].theme;
-                this.template.played.style.background = this.options.audio[this.playIndex].theme;
-                this.template.thumb.style.background = this.options.audio[this.playIndex].theme;
-                this.template.volume.style.background = this.options.audio[this.playIndex].theme;
-            }
+            this.theme();
             this.template.title.innerHTML = this.options.audio[this.playIndex].name;
             this.template.author.innerHTML = this.options.audio[this.playIndex].artist ? ' - ' + this.options.audio[this.playIndex].artist : '';
             const light = this.container.getElementsByClassName('aplayer-list-light')[0];
@@ -244,6 +239,17 @@ class APlayer {
         });
     }
 
+    theme (color = this.options.audio[this.playIndex].theme, index = this.playIndex) {
+        this.options.audio[index].theme = color;
+        this.template.listCurs[index].style.backgroundColor = color;
+        if (index === this.playIndex) {
+            this.template.pic.style.backgroundColor = color;
+            this.template.played.style.background = color;
+            this.template.thumb.style.background = color;
+            this.template.volume.style.background = color;
+        }
+    }
+
     seek (time) {
         time = Math.max(time, 0);
         if (this.audio.duration) {

diff --git a/src/js/template.js b/src/js/template.js
@@ -32,6 +32,7 @@ class Template {
         this.button = this.container.querySelector('.aplayer-button');
         this.list = this.container.querySelector('.aplayer-list');
         this.listOl = this.container.querySelector('.aplayer-list ol');
+        this.listCurs = this.container.querySelectorAll('.aplayer-list-cur');
         this.played = this.container.querySelector('.aplayer-played');
         this.loaded = this.container.querySelector('.aplayer-loaded');
         this.thumb = this.container.querySelector('.aplayer-thumb');

diff --git a/src/template/player.art b/src/template/player.art
@@ -52,7 +52,7 @@
     <ol{{ if options.listMaxHeight }} style="max-height: {{ options.listMaxHeight }}"{{ /if }}>
         {{each options.audio}}
         <li>
-            <span class="aplayer-list-cur" style="background: {{ $value.theme || options.theme }};"></span>
+            <span class="aplayer-list-cur" style="background-color: {{ $value.theme || options.theme }};"></span>
             <span class="aplayer-list-index">{{ $index + 1 }}</span>
             <span class="aplayer-list-title">{{ $value.name }}</span>
             <span class="aplayer-list-author">{{ $value.artist }}</span>