[webui] list all tracks for artist

web-src/src/pages/PageArtist.vue

@@ -4,7 +4,7 @@
       <p class="title is-4">{{ artist.name }}</p>
     </template>
     <template slot="content">
-      <p class="heading has-text-centered-mobile">{{ artist.album_count }} albums | {{ artist.track_count }} tracks</p>
+      <p class="heading has-text-centered-mobile">{{ artist.album_count }} albums | <a class="has-text-link" @click="open_tracks">{{ artist.track_count }} tracks</a></p>
       <list-item-album v-for="album in albums.items" :key="album.id" :album="album"></list-item-album>
     </template>
   </content-with-heading>
@@ -43,6 +43,9 @@ export default {
   },
 
   methods: {
+    open_tracks: function () {
+      this.$router.push({ path: '/music/artists/' + this.artist.id + '/tracks' })
+    }
   }
 }
 </script>

web-src/src/pages/PageTracks.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <content-with-heading>
+      <template slot="heading-left">
+        <a class="title is-4 has-text-link has-text-weight-normal" @click="open_artist">{{ artist }}</a>
+        <p class="heading">{{ tracks.total }} tracks</p>
+      </template>
+      <template slot="heading-right">
+        <a class="button is-small is-dark is-rounded" @click="play">
+          <span class="icon">
+            <i class="mdi mdi-play"></i>
+          </span>
+          <span>Play</span>
+        </a>
+      </template>
+      <template slot="content">
+        <list-item-track v-for="(track, index) in tracks.items" :key="track.id" :track="track" :position="index" :context_uri="track.uri" :links="links"></list-item-track>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemTrack from '@/components/ListItemTrack'
+import webapi from '@/webapi'
+
+const tracksData = {
+  load: function (to) {
+    return webapi.library_artist_tracks(to.params.artist)
+  },
+
+  set: function (vm, response) {
+    vm.artist_id = vm.$route.params.artist
+    vm.tracks = response.data.tracks
+  }
+}
+
+export default {
+  name: 'PageTracks',
+  mixins: [ LoadDataBeforeEnterMixin(tracksData) ],
+  components: { ContentWithHeading, ListItemTrack },
+
+  data () {
+    return {
+      tracks: {},
+      artist: '',
+      artist_id: 0
+    }
+  },
+
+  methods: {
+    open_artist: function () {
+      this.show_details_modal = false
+      this.$router.push({ path: '/music/artists/' + this.artist_id })
+    },
+
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.tracks.items.map(a => a.uri).join(',')).then(() =>
+          webapi.player_play()
+        )
+      )
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/router/index.js

@@ -13,6 +13,7 @@ import PageAlbums from '@/pages/PageAlbums'
 import PageAlbum from '@/pages/PageAlbum'
 import PageGenres from '@/pages/PageGenres'
 import PageGenre from '@/pages/PageGenre'
+import PageTracks from '@/pages/PageTracks'
 import PagePodcasts from '@/pages/PagePodcasts'
 import PagePodcast from '@/pages/PagePodcast'
 import PageAudiobooks from '@/pages/PageAudiobooks'
@@ -82,6 +83,12 @@ export const router = new VueRouter({
       component: PageArtist,
       meta: { show_progress: true }
     },
+    {
+      path: '/music/artists/:artist/tracks',
+      name: 'Tracks',
+      component: PageTracks,
+      meta: { show_progress: true }
+    },
     {
       path: '/music/albums',
       name: 'Albums',

web-src/src/webapi/index.js

@@ -153,6 +153,18 @@ export default {
     })
   },
 
+  library_artist_tracks (artist) {
+    if (artist) {
+      var artistParams = {
+        'type': 'tracks',
+        'expression': 'songartistid is "' + artist + '"'
+      }
+      return axios.get('/api/search', {
+        params: artistParams
+      })
+    }
+  },
+
   library_podcasts () {
     return axios.get('/api/library/albums?media_kind=podcast')
   },