search: fix track list

src/search/SearchResult.vue

@@ -10,46 +10,23 @@
       <AlbumList :items="result.albums"/>
     </div>
 
-    <div>
+    <div v-if="result.tracks.length > 0">
-      <h5 class="text-uppercase">Tracks</h5>
+      <h1>Tracks</h1>
-        <b-table-simple hover>
+      <TrackList :tracks="result.tracks" showAlbum/>
-      <!-- <thead>
+    </div>
-        <tr>
-          <th class="text-left"></th>
-          <th class="text-left">Title</th>
-          <th class="text-left">Artist</th>
-          <th class="text-left">Album</th>
-          <th class="text-left">Duration</th>
-          <th class="text-left">Actions</th>
-        </tr>
-      </thead> -->
-      <tbody>
-        <tr v-for="(item, index) in result.tracks">
-          <td>
-            <span  @click="play(index)">
-              <Icon icon="play-fill"/>
-            </span>
-          </td>
-          <td>{{ item.title }}</td>
-          <td>{{ item.artist }}</td>
-          <td>{{ item.album }}</td>
-          <!-- <td>{{ item.duration | duration }}</td> -->
-        </tr>
-      </tbody>
-    </b-table-simple>
-
-  </div>
   </div>
 </template>
 <script lang="ts">
   import Vue from "vue";
   import AlbumList from "@/library/album/AlbumList.vue";
   import ArtistList from "@/library/artist/ArtistList.vue";
+  import TrackList from "@/library/TrackList.vue"
 
   export default Vue.extend({
     components: {
       AlbumList,
       ArtistList,
+      TrackList,
     },
     props: {
       query: String,

src/shared/api.ts

@@ -222,7 +222,7 @@ export class API {
     };
     const data = await this.get("rest/search3", params);
     return {
-      tracks: data.searchResult3.song || [],
+      tracks: this.normalizeTrackList(data.searchResult3.song || []),
       albums: (data.searchResult3.album || []).map((x: any) => this.normalizeAlbumResponse(x)),
       artists: (data.searchResult3.artist || []).map((x: any) => this.normalizeArtistResponse(x)),
     };