list item template

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;

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

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

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

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>