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

web-src/src/pages/PageAlbums.vue

@@ -19,27 +19,7 @@
         </a>
       </template>
       <template slot="content">
-        <list-item-album v-for="album in albums_filtered"
-          :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" />
+        <list-albums :albums="albums_filtered"></list-albums>
       </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 ModalDialogAlbum from '@/components/ModalDialogAlbum'
-import CoverArtwork from '@/components/CoverArtwork'
+import ListAlbums from '@/components/ListAlbums'
 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: [],
-
-      show_details_modal: false,
-      selected_album: {}
+      index_list: []
     }
   },
 
@@ -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)">
-        <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" />
+      <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>
@@ -41,10 +24,8 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
-import ListItemAlbum from '@/components/ListItemAlbum'
-import ModalDialogAlbum from '@/components/ModalDialogAlbum'
+import ListAlbums from '@/components/ListAlbums'
 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"
-          :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" />
+        <list-artists :artists="artists_filtered"></list-artists>
       </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 ModalDialogArtist from '@/components/ModalDialogArtist'
+import ListArtists from '@/components/ListArtists'
 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: [] },
-
-      show_details_modal: false,
-      selected_artist: {}
+      artists: { items: [] }
     }
   },
 
@@ -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)">
-          <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" />
+        <list-albums :albums="albums.items"></list-albums>
       </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 ModalDialogAlbum from '@/components/ModalDialogAlbum'
+import ListAlbums from '@/components/ListAlbums'
 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: {},
-
-      show_details_modal: false,
-      selected_album: {}
+      albums: { items: [] }
     }
   },
 
   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"
-          :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" />
+        <list-artists :artists="artists.items"></list-artists>
       </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 ModalDialogArtist from '@/components/ModalDialogArtist'
+import ListArtists from '@/components/ListArtists'
 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: [] },
-
-      show_details_modal: false,
-      selected_artist: {}
+      artists: { items: [] }
     }
   },
 
   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>