[web-src] Use generic albums api function for all media kinds

web-src/src/pages/PageAlbums.vue

@@ -47,7 +47,7 @@ import * as types from '@/store/mutation_types'
 
 const albumsData = {
   load: function (to) {
-    return webapi.library_albums()
+    return webapi.library_albums('music')
   },
 
   set: function (vm, response) {

web-src/src/pages/PageArtist.vue

@@ -40,7 +40,7 @@ const artistData = {
   load: function (to) {
     return Promise.all([
       webapi.library_artist(to.params.artist_id),
-      webapi.library_albums(to.params.artist_id)
+      webapi.library_artist_albums(to.params.artist_id)
     ])
   },
 

web-src/src/pages/PageAudiobooks.vue

@@ -28,7 +28,7 @@ import webapi from '@/webapi'
 
 const albumsData = {
   load: function (to) {
-    return webapi.library_audiobooks()
+    return webapi.library_albums('audiobook')
   },
 
   set: function (vm, response) {

web-src/src/pages/PageAudiobooksArtists.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <content-with-heading>
+      <template slot="options">
+        <index-button-list :index="index_list"></index-button-list>
+      </template>
+      <template slot="heading-left">
+        <p class="title is-4">Artists</p>
+        <p class="heading">{{ artists.total }} artists</p>
+      </template>
+      <template slot="heading-right">
+        <a class="button is-small" :class="{ 'is-info': hide_singles }" @click="update_hide_singles">
+          <span class="icon">
+            <i class="mdi mdi-numeric-1-box-multiple-outline"></i>
+          </span>
+          <span>Hide singles</span>
+        </a>
+      </template>
+      <template slot="content">
+        <list-item-artist v-for="artist in artists_filtered"
+          :key="artist.id"
+          :artist="artist"
+          @click="open_artist(artist)">
+            <template slot="actions">
+              <a @click="open_dialog(artist)">
+                <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+              </a>
+            </template>
+        </list-item-artist>
+        <modal-dialog-artist :show="show_details_modal" :artist="selected_artist" @close="show_details_modal = false" />
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import IndexButtonList from '@/components/IndexButtonList'
+import ListItemArtist from '@/components/ListItemArtist'
+import ModalDialogArtist from '@/components/ModalDialogArtist'
+import webapi from '@/webapi'
+import * as types from '@/store/mutation_types'
+
+const artistsData = {
+  load: function (to) {
+    return webapi.library_artists()
+  },
+
+  set: function (vm, response) {
+    vm.artists = response.data
+  }
+}
+
+export default {
+  name: 'PageArtists',
+  mixins: [LoadDataBeforeEnterMixin(artistsData)],
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemArtist, ModalDialogArtist },
+
+  data () {
+    return {
+      artists: { items: [] },
+
+      show_details_modal: false,
+      selected_artist: {}
+    }
+  },
+
+  computed: {
+    hide_singles () {
+      return this.$store.state.hide_singles
+    },
+
+    index_list () {
+      return [...new Set(this.artists.items
+        .filter(artist => !this.$store.state.hide_singles || artist.track_count > (artist.album_count * 2))
+        .map(artist => artist.name_sort.charAt(0).toUpperCase()))]
+    },
+
+    artists_filtered () {
+      return this.artists.items.filter(artist => !this.hide_singles || artist.track_count > (artist.album_count * 2))
+    }
+  },
+
+  methods: {
+    update_hide_singles: function (e) {
+      this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
+    },
+
+    open_artist: function (artist) {
+      this.$router.push({ path: '/music/artists/' + artist.id })
+    },
+
+    open_dialog: function (artist) {
+      this.selected_artist = artist
+      this.show_details_modal = true
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PagePodcasts.vue

@@ -101,7 +101,7 @@ import webapi from '@/webapi'
 const albumsData = {
   load: function (to) {
     return Promise.all([
-      webapi.library_podcasts(),
+      webapi.library_albums('podcast'),
       webapi.library_podcasts_new_episodes()
     ])
   },
@@ -195,7 +195,7 @@ export default {
     },
 
     reload_podcasts: function () {
-      webapi.library_podcasts().then(({ data }) => {
+      webapi.library_albums('podcast').then(({ data }) => {
         this.albums = data
         this.reload_new_episodes()
       })

web-src/src/webapi/index.js

@@ -208,11 +208,12 @@ export default {
     return axios.get('/api/library/artists/' + artistId)
   },
 
-  library_albums (artistId) {
-    if (artistId) {
-      return axios.get('/api/library/artists/' + artistId + '/albums')
-    }
-    return axios.get('/api/library/albums?media_kind=music')
+  library_artist_albums (artistId) {
+    return axios.get('/api/library/artists/' + artistId + '/albums')
+  },
+
+  library_albums (media_kind = undefined) {
+    return axios.get('/api/library/albums', { params: { media_kind: media_kind } })
   },
 
   library_album (albumId) {
@@ -278,10 +279,6 @@ export default {
     }
   },
 
-  library_podcasts () {
-    return axios.get('/api/library/albums?media_kind=podcast')
-  },
-
   library_podcasts_new_episodes () {
     var episodesParams = {
       type: 'tracks',
@@ -310,10 +307,6 @@ export default {
     return axios.delete('/api/library/playlists/' + playlistId, undefined)
   },
 
-  library_audiobooks () {
-    return axios.get('/api/library/albums?media_kind=audiobook')
-  },
-
   library_playlists () {
     return axios.get('/api/library/playlists')
   },