From ddcf4612c20db8b0386043773e7c5aed4655e365 Mon Sep 17 00:00:00 2001
From: DIYgod <diy.d.god@gmail.com>
Date: Fri, 16 Mar 2018 14:17:50 +0800
Subject: [PATCH] list item template

---
 src/js/options.js          |  4 ++--
 src/js/player.js           | 20 +++++++-------------
 src/js/template.js         |  1 +
 src/template/list-item.art |  8 ++++++++
 src/template/player.art    | 13 +++++--------
 5 files changed, 23 insertions(+), 23 deletions(-)
 create mode 100644 src/template/list-item.art

diff --git a/src/js/options.js b/src/js/options.js
index 6d3920b..2e1c64f 100644
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -27,8 +27,8 @@ export default (options) => {
     }
 
     options.audio.map((item) => {
-        item.name = item.name || item.title;
-        item.artist = item.artist || item.author;
+        item.name = item.name || item.title || 'Audio name';
+        item.artist = item.artist || item.author || 'Audio artist';
         item.cover = item.cover || item.pic;
         item.type = item.type || 'normal';
         return item;
diff --git a/src/js/player.js b/src/js/player.js
index 15de67f..041765a 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -10,6 +10,7 @@ import Lrc from './lrc';
 import Controller from './controller';
 import Timer from './timer';
 import Events from './events';
+import tplListItem from '../template/list-item.art';
 
 const instances = [];
 
@@ -449,23 +450,16 @@ class APlayer {
         this.events.trigger('addaudio', newMusic);
         const wasSingle = !this.isMultiple();
 
-        this.options.audio = this.options.audio.concat(newMusic);
+        this.template.listOl.innerHTML += tplListItem({
+            theme: this.options.theme,
+            audio: newMusic,
+            index: this.options.audio.length + 1
+        });
 
-        let newItemHTML = ``;
-        for (let i = 0; i < newMusic.length; i++) {
-            newItemHTML += `
-                <li>
-                    <span class="aplayer-list-cur" style="background: ${newMusic[i].theme || this.options.theme};"></span>
-                    <span class="aplayer-list-index">${this.options.audio.length - newMusic.length + i + 1}</span>
-                    <span class="aplayer-list-title">${newMusic[i].name}</span>
-                    <span class="aplayer-list-author">${newMusic[i].artist}</span>
-                </li>`;
-        }
-        this.template.listOl.innerHTML += newItemHTML;
+        this.options.audio = this.options.audio.concat(newMusic);
 
         if (wasSingle && this.isMultiple()) {
             this.container.classList.add('aplayer-withlist');
-            this.audio.loop = false;
         }
         this.template.list.style.height = this.options.audio.length * 33 - 1 + 'px';
         this.template.listOl.style.height = this.options.audio.length * 33 - 1 + 'px';
diff --git a/src/js/template.js b/src/js/template.js
index a0f1036..7521127 100644
--- a/src/js/template.js
+++ b/src/js/template.js
@@ -22,6 +22,7 @@ class Template {
             options: this.options,
             icons: Icons,
             cover: cover,
+            getObject: (obj) => obj,
         });
 
         this.lrc = this.container.querySelector('.aplayer-lrc-contents');
diff --git a/src/template/list-item.art b/src/template/list-item.art
new file mode 100644
index 0000000..fa33085
--- /dev/null
+++ b/src/template/list-item.art
@@ -0,0 +1,8 @@
+{{each audio}}
+<li>
+    <span class="aplayer-list-cur" style="background-color: {{ $value.theme || theme }};"></span>
+    <span class="aplayer-list-index">{{ $index + index }}</span>
+    <span class="aplayer-list-title">{{ $value.name }}</span>
+    <span class="aplayer-list-author">{{ $value.artist }}</span>
+</li>
+{{/each}}
\ No newline at end of file
diff --git a/src/template/player.art b/src/template/player.art
index bbd8e44..b7be18d 100644
--- a/src/template/player.art
+++ b/src/template/player.art
@@ -53,13 +53,10 @@
 </div>
 <div class="aplayer-list{{ if options.listFolded }} aplayer-list-hide{{ /if }}"{{ if options.listMaxHeight }} style="max-height: {{ options.listMaxHeight }}"{{ /if }}>
     <ol{{ if options.listMaxHeight }} style="max-height: {{ options.listMaxHeight }}"{{ /if }}>
-        {{each options.audio}}
-        <li>
-            <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>
-        </li>
-        {{/each}}
+        {{ include './list-item.art' getObject({
+            theme: options.theme,
+            audio: options.audio,
+            index: 1
+        }) }}
     </ol>
 </div>
\ No newline at end of file