[web-src] Refactor album+artist lists and add audiobooks artist page

web-src/src/components/ListAlbums.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <list-item-album v-for="album in albums"
+        :key="album.id"
+        :album="album"
+        @click="open_album(album)">
+        <template slot="artwork" v-if="is_visible_artwork">
+            <p class="image is-64x64 fd-has-shadow fd-has-action">
+            <cover-artwork
+                :artwork_url="album.artwork_url"
+                :artist="album.artist"
+                :album="album.name"
+                :maxwidth="64"
+                :maxheight="64" />
+            </p>
+        </template>
+        <template slot="actions">
+            <a @click="open_dialog(album)">
+            <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+            </a>
+        </template>
+    </list-item-album>
+    <modal-dialog-album :show="show_details_modal" :album="selected_album" :media_kind="media_kind" @close="show_details_modal = false" />
+  </div>
+</template>
+
+<script>
+import ListItemAlbum from '@/components/ListItemAlbum'
+import ModalDialogAlbum from '@/components/ModalDialogAlbum'
+import CoverArtwork from '@/components/CoverArtwork'
+
+export default {
+  name: 'ListAlbums',
+  components: { ListItemAlbum, ModalDialogAlbum, CoverArtwork },
+
+  props: ['albums', 'media_kind'],
+
+  data () {
+    return {
+      show_details_modal: false,
+      selected_album: {}
+    }
+  },
+
+  computed: {
+    is_visible_artwork () {
+      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
+    },
+
+    media_kind_resolved: function () {
+      return this.media_kind ? this.media_kind : this.selected_album.media_kind
+    }
+  },
+
+  methods: {
+    open_album: function (album) {
+      this.selected_album = album
+      if (this.media_kind_resolved === 'podcast') {
+        this.$router.push({ path: '/podcasts/' + album.id })
+      } else if (this.media_kind_resolved === 'audiobook') {
+        this.$router.push({ path: '/audiobooks/' + album.id })
+      } else {
+        this.$router.push({ path: '/music/albums/' + album.id })
+      }
+    },
+
+    open_dialog: function (album) {
+      this.selected_album = album
+      this.show_details_modal = true
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ListArtists.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <list-item-artist v-for="artist in artists"
+        :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" :media_kind="media_kind" @close="show_details_modal = false" />
+  </div>
+</template>
+
+<script>
+import ListItemArtist from '@/components/ListItemArtist'
+import ModalDialogArtist from '@/components/ModalDialogArtist'
+
+export default {
+  name: 'ListArtists',
+  components: { ListItemArtist, ModalDialogArtist },
+
+  props: ['artists', 'media_kind'],
+
+  data () {
+    return {
+      show_details_modal: false,
+      selected_artist: {}
+    }
+  },
+
+  computed: {
+    media_kind_resolved: function () {
+      return this.media_kind ? this.media_kind : this.selected_artist.media_kind
+    }
+  },
+
+  methods: {
+    open_artist: function (artist) {
+      this.selected_artist = artist
+      if (this.media_kind_resolved === 'podcast') {
+        // No artist page for podcasts
+      } else if (this.media_kind_resolved === 'audiobook') {
+        this.$router.push({ path: '/audiobooks/artists/' + artist.id })
+      } else {
+        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/components/ModalDialogAlbum.vue

@@ -14,19 +14,15 @@
               <p class="title is-4">
                 <a class="has-text-link" @click="open_album">{{ album.name }}</a>
               </p>
-              <div class="buttons" v-if="media_kind === 'podcast'">
+              <div class="buttons" v-if="media_kind_resolved === 'podcast'">
                 <a class="button is-small" @click="mark_played">Mark as played</a>
                 <a class="button is-small" @click="$emit('remove_podcast')">Remove podcast</a>
               </div>
               <div class="content is-small">
-                <p v-if="album.artist && media_kind !== 'audiobook'">
+                <p v-if="album.artist">
                   <span class="heading">Album artist</span>
                   <a class="title is-6 has-text-link" @click="open_artist">{{ album.artist }}</a>
                 </p>
-                <p v-if="album.artist && media_kind === 'audiobook'">
-                  <span class="heading">Album artist</span>
-                  <span class="title is-6">{{ album.artist }}</span>
-                </p>
                 <p v-if="album.date_released">
                   <span class="heading">Release date</span>
                   <span class="title is-6">{{ album.date_released | time('L') }}</span>
@@ -90,6 +86,10 @@ export default {
   computed: {
     artwork_url: function () {
       return webapi.artwork_url_append_size_params(this.album.artwork_url)
+    },
+
+    media_kind_resolved: function () {
+      return this.media_kind ? this.media_kind : this.album.media_kind
     }
   },
 
@@ -110,9 +110,9 @@ export default {
     },
 
     open_album: function () {
-      if (this.media_kind === 'podcast') {
+      if (this.media_kind_resolved === 'podcast') {
         this.$router.push({ path: '/podcasts/' + this.album.id })
-      } else if (this.media_kind === 'audiobook') {
+      } else if (this.media_kind_resolved === 'audiobook') {
         this.$router.push({ path: '/audiobooks/' + this.album.id })
       } else {
         this.$router.push({ path: '/music/albums/' + this.album.id })
@@ -120,7 +120,13 @@ export default {
     },
 
     open_artist: function () {
+      if (this.media_kind_resolved === 'podcast') {
+        // No artist page for podcasts
+      } else if (this.media_kind_resolved === 'audiobook') {
+        this.$router.push({ path: '/audiobooks/artists/' + this.album.artist_id })
+      } else {
         this.$router.push({ path: '/music/artists/' + this.album.artist_id })
+      }
     },
 
     mark_played: function () {

web-src/src/pages/PageAlbums.vue

@@ -19,27 +19,7 @@
         </a>
       </template>
       <template slot="content">
-        <list-item-album v-for="album in albums_filtered"
+        <list-albums :albums="albums_filtered"></list-albums>
-          :key="album.id"
-          :album="album"
-          @click="open_album(album)">
-            <template slot="artwork" v-if="is_visible_artwork">
-              <p class="image is-64x64 fd-has-shadow fd-has-action">
-                <cover-artwork
-                  :artwork_url="album.artwork_url"
-                  :artist="album.artist"
-                  :album="album.name"
-                  :maxwidth="64"
-                  :maxheight="64" />
-              </p>
-            </template>
-            <template slot="actions">
-              <a @click="open_dialog(album)">
-                <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-              </a>
-            </template>
-        </list-item-album>
-        <modal-dialog-album :show="show_details_modal" :album="selected_album" @close="show_details_modal = false" />
       </template>
     </content-with-heading>
   </div>
@@ -50,9 +30,7 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import IndexButtonList from '@/components/IndexButtonList'
-import ListItemAlbum from '@/components/ListItemAlbum'
+import ListAlbums from '@/components/ListAlbums'
-import ModalDialogAlbum from '@/components/ModalDialogAlbum'
-import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 
@@ -72,15 +50,12 @@ const albumsData = {
 export default {
   name: 'PageAlbums',
   mixins: [LoadDataBeforeEnterMixin(albumsData)],
-  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemAlbum, ModalDialogAlbum, CoverArtwork },
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListAlbums },
 
   data () {
     return {
       albums: { items: [] },
-      index_list: [],
+      index_list: []
-
-      show_details_modal: false,
-      selected_album: {}
     }
   },
 
@@ -91,25 +66,12 @@ export default {
 
     albums_filtered () {
       return this.albums.items.filter(album => !this.hide_singles || album.track_count > 2)
-    },
-
-    is_visible_artwork () {
-      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
     }
   },
 
   methods: {
     update_hide_singles: function (e) {
       this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
-    },
-
-    open_album: function (album) {
-      this.$router.push({ path: '/music/albums/' + album.id })
-    },
-
-    open_dialog: function (album) {
-      this.selected_album = album
-      this.show_details_modal = true
     }
   },
 

web-src/src/pages/PageArtist.vue

@@ -15,24 +15,7 @@
     </template>
     <template slot="content">
       <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" @click="open_album(album)">
+      <list-albums :albums="albums.items"></list-albums>
-        <template slot="artwork" v-if="is_visible_artwork">
-          <p class="image is-64x64 fd-has-shadow fd-has-action">
-            <cover-artwork
-              :artwork_url="album.artwork_url"
-              :artist="album.artist"
-              :album="album.name"
-              :maxwidth="64"
-              :maxheight="64" />
-          </p>
-        </template>
-        <template slot="actions">
-          <a @click="open_dialog(album)">
-            <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-          </a>
-        </template>
-      </list-item-album>
-      <modal-dialog-album :show="show_details_modal" :album="selected_album" @close="show_details_modal = false" />
       <modal-dialog-artist :show="show_artist_details_modal" :artist="artist" @close="show_artist_details_modal = false" />
     </template>
   </content-with-heading>
@@ -41,10 +24,8 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
-import ListItemAlbum from '@/components/ListItemAlbum'
+import ListAlbums from '@/components/ListAlbums'
-import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import ModalDialogArtist from '@/components/ModalDialogArtist'
-import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 
 const artistData = {
@@ -64,16 +45,13 @@ const artistData = {
 export default {
   name: 'PageArtist',
   mixins: [LoadDataBeforeEnterMixin(artistData)],
-  components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum, ModalDialogArtist, CoverArtwork },
+  components: { ContentWithHeading, ListAlbums, ModalDialogArtist },
 
   data () {
     return {
       artist: {},
       albums: {},
 
-      show_details_modal: false,
-      selected_album: {},
-
       show_artist_details_modal: false
     }
   },
@@ -85,19 +63,6 @@ export default {
 
     play: function () {
       webapi.player_play_uri(this.albums.items.map(a => a.uri).join(','), true)
-    },
-
-    open_album: function (album) {
-      this.$router.push({ path: '/music/albums/' + album.id })
-    },
-
-    open_dialog: function (album) {
-      this.selected_album = album
-      this.show_details_modal = true
-    },
-
-    is_visible_artwork () {
-      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
     }
   }
 }

web-src/src/pages/PageArtists.vue

@@ -19,17 +19,7 @@
         </a>
       </template>
       <template slot="content">
-        <list-item-artist v-for="artist in artists_filtered"
+        <list-artists :artists="artists_filtered"></list-artists>
-          :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>
@@ -40,8 +30,7 @@ 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 ListArtists from '@/components/ListArtists'
-import ModalDialogArtist from '@/components/ModalDialogArtist'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 
@@ -58,14 +47,11 @@ const artistsData = {
 export default {
   name: 'PageArtists',
   mixins: [LoadDataBeforeEnterMixin(artistsData)],
-  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemArtist, ModalDialogArtist },
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListArtists },
 
   data () {
     return {
-      artists: { items: [] },
+      artists: { items: [] }
-
-      show_details_modal: false,
-      selected_artist: {}
     }
   },
 
@@ -88,15 +74,6 @@ export default {
   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
     }
   }
 }

web-src/src/pages/PageAudiobooks.vue

@@ -8,14 +8,7 @@
         <p class="heading">{{ albums.total }} audiobooks</p>
       </template>
       <template slot="content">
-        <list-item-album v-for="album in albums.items" :key="album.id" :album="album" :media_kind="'audiobook'" @click="open_album(album)">
+        <list-albums :albums="albums.items"></list-albums>
-          <template slot="actions">
-            <a @click="open_dialog(album)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-album>
-        <modal-dialog-album :show="show_details_modal" :album="selected_album" :media_kind="'audiobook'" @close="show_details_modal = false" />
       </template>
     </content-with-heading>
   </div>
@@ -25,8 +18,7 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import TabsAudiobooks from '@/components/TabsAudiobooks'
 import ContentWithHeading from '@/templates/ContentWithHeading'
-import ListItemAlbum from '@/components/ListItemAlbum'
+import ListAlbums from '@/components/ListAlbums'
-import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import webapi from '@/webapi'
 
 const albumsData = {
@@ -42,26 +34,15 @@ const albumsData = {
 export default {
   name: 'PageAudiobooks',
   mixins: [LoadDataBeforeEnterMixin(albumsData)],
-  components: { TabsAudiobooks, ContentWithHeading, ListItemAlbum, ModalDialogAlbum },
+  components: { TabsAudiobooks, ContentWithHeading, ListAlbums },
 
   data () {
     return {
-      albums: {},
+      albums: { items: [] }
-
-      show_details_modal: false,
-      selected_album: {}
     }
   },
 
   methods: {
-    open_album: function (album) {
-      this.$router.push({ path: '/audiobooks/' + album.id })
-    },
-
-    open_dialog: function (album) {
-      this.selected_album = album
-      this.show_details_modal = true
-    }
   }
 }
 </script>

web-src/src/pages/PageAudiobooksArtist.vue

@@ -0,0 +1,68 @@
+<template>
+  <content-with-heading>
+    <template slot="heading-left">
+      <p class="title is-4">{{ artist.name }}</p>
+    </template>
+    <template slot="heading-right">
+      <div class="buttons is-centered">
+        <a class="button is-small is-light is-rounded" @click="show_artist_details_modal = true">
+          <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
+        </a>
+        <a class="button is-small is-dark is-rounded" @click="play">
+          <span class="icon"><i class="mdi mdi-play"></i></span> <span>Shuffle</span>
+        </a>
+      </div>
+    </template>
+    <template slot="content">
+      <p class="heading has-text-centered-mobile">{{ artist.album_count }} albums</p>
+      <list-albums :albums="albums.items"></list-albums>
+      <modal-dialog-artist :show="show_artist_details_modal" :artist="artist" @close="show_artist_details_modal = false" />
+    </template>
+  </content-with-heading>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListAlbums from '@/components/ListAlbums'
+import ModalDialogArtist from '@/components/ModalDialogArtist'
+import webapi from '@/webapi'
+
+const artistData = {
+  load: function (to) {
+    return Promise.all([
+      webapi.library_artist(to.params.artist_id),
+      webapi.library_artist_albums(to.params.artist_id)
+    ])
+  },
+
+  set: function (vm, response) {
+    vm.artist = response[0].data
+    vm.albums = response[1].data
+  }
+}
+
+export default {
+  name: 'PageAudiobooksArtist',
+  mixins: [LoadDataBeforeEnterMixin(artistData)],
+  components: { ContentWithHeading, ListAlbums, ModalDialogArtist },
+
+  data () {
+    return {
+      artist: {},
+      albums: {},
+
+      show_artist_details_modal: false
+    }
+  },
+
+  methods: {
+    play: function () {
+      webapi.player_play_uri(this.albums.items.map(a => a.uri).join(','), false)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageAudiobooksArtists.vue

@@ -13,17 +13,7 @@
       <template slot="heading-right">
       </template>
       <template slot="content">
-        <list-item-artist v-for="artist in artists_filtered"
+        <list-artists :artists="artists.items"></list-artists>
-          :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>
@@ -34,10 +24,8 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsAudiobooks from '@/components/TabsAudiobooks'
 import IndexButtonList from '@/components/IndexButtonList'
-import ListItemArtist from '@/components/ListItemArtist'
+import ListArtists from '@/components/ListArtists'
-import ModalDialogArtist from '@/components/ModalDialogArtist'
 import webapi from '@/webapi'
-import * as types from '@/store/mutation_types'
 
 const artistsData = {
   load: function (to) {
@@ -52,46 +40,23 @@ const artistsData = {
 export default {
   name: 'PageAudiobooksArtists',
   mixins: [LoadDataBeforeEnterMixin(artistsData)],
-  components: { ContentWithHeading, TabsAudiobooks, IndexButtonList, ListItemArtist, ModalDialogArtist },
+  components: { ContentWithHeading, TabsAudiobooks, IndexButtonList, ListArtists },
 
   data () {
     return {
-      artists: { items: [] },
+      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>

web-src/src/router/index.js

@@ -19,6 +19,7 @@ import PagePodcasts from '@/pages/PagePodcasts'
 import PagePodcast from '@/pages/PagePodcast'
 import PageAudiobooks from '@/pages/PageAudiobooks'
 import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists'
+import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist'
 import PageAudiobook from '@/pages/PageAudiobook'
 import PagePlaylists from '@/pages/PagePlaylists'
 import PagePlaylist from '@/pages/PagePlaylist'
@@ -149,6 +150,12 @@ export const router = new VueRouter({
       component: PageAudiobooksArtists,
       meta: { show_progress: true, has_tabs: true, has_index: true }
     },
+    {
+      path: '/audiobooks/artists/:artist_id',
+      name: 'AudiobooksArtist',
+      component: PageAudiobooksArtist,
+      meta: { show_progress: true }
+    },
     {
       path: '/audiobooks/albums',
       name: 'AudiobooksAlbums',