[web-src] Show cover artwork in album listings

web-src/src/components/CoverArtwork.vue

@@ -15,7 +15,7 @@ import stringToColor from 'string-to-color'
 
 export default {
   name: 'CoverArtwork',
-  props: ['artist', 'album', 'artwork_url'],
+  props: ['artist', 'album', 'artwork_url', 'maxwidth', 'maxheight'],
 
   data () {
     return {
@@ -30,6 +30,9 @@ export default {
 
   computed: {
     artwork_url_with_size: function () {
+      if (this.maxwidth > 0 && this.maxheight > 0) {
+        return webapi.artwork_url_append_size_params(this.artwork_url, this.maxwidth, this.maxheight)
+      }
       return webapi.artwork_url_append_size_params(this.artwork_url)
     },
 

web-src/src/components/ListItemAlbum.vue

@@ -1,6 +1,10 @@
 <template functional>
   <div class="media" :id="'index_' + props.album.name_sort.charAt(0).toUpperCase()">
+    <div class="media-left fd-has-action"
+        v-if="$slots['artwork']"
+        @click="listeners.click">
       <slot name="artwork"></slot>
+    </div>
     <div class="media-content fd-has-action is-clipped" @click="listeners.click">
       <div style="margin-top:0.7rem;">
         <h1 class="title is-6">{{ props.album.name }}</h1>

web-src/src/pages/PageAlbums.vue

@@ -23,6 +23,16 @@
           :key="album.id"
           :album="album"
           @click="open_album(album)">
+            <template slot="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>
@@ -42,6 +52,7 @@ 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 webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 
@@ -61,7 +72,7 @@ const albumsData = {
 export default {
   name: 'PageAlbums',
   mixins: [LoadDataBeforeEnterMixin(albumsData)],
-  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemAlbum, ModalDialogAlbum },
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemAlbum, ModalDialogAlbum, CoverArtwork },
 
   data () {
     return {

web-src/src/pages/PageArtist.vue

@@ -16,6 +16,16 @@
     <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">
+          <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>
@@ -34,6 +44,7 @@ import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemAlbum from '@/components/ListItemAlbum'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import ModalDialogArtist from '@/components/ModalDialogArtist'
+import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 
 const artistData = {
@@ -53,7 +64,7 @@ const artistData = {
 export default {
   name: 'PageArtist',
   mixins: [LoadDataBeforeEnterMixin(artistData)],
-  components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum, ModalDialogArtist },
+  components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum, ModalDialogArtist, CoverArtwork },
 
   data () {
     return {

web-src/src/pages/PageBrowse.vue

@@ -10,6 +10,16 @@
       </template>
       <template slot="content">
         <list-item-album v-for="album in recently_added.items" :key="album.id" :album="album" @click="open_album(album)">
+          <template slot="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_album_dialog(album)">
               <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@@ -62,6 +72,7 @@ import ListItemAlbum from '@/components/ListItemAlbum'
 import ListItemTrack from '@/components/ListItemTrack'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
+import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 
 const browseData = {
@@ -81,7 +92,7 @@ const browseData = {
 export default {
   name: 'PageBrowse',
   mixins: [LoadDataBeforeEnterMixin(browseData)],
-  components: { ContentWithHeading, TabsMusic, ListItemAlbum, ListItemTrack, ModalDialogTrack, ModalDialogAlbum },
+  components: { ContentWithHeading, TabsMusic, ListItemAlbum, ListItemTrack, ModalDialogTrack, ModalDialogAlbum, CoverArtwork },
 
   data () {
     return {

web-src/src/pages/PageBrowseRecentlyAdded.vue

@@ -9,6 +9,16 @@
       </template>
       <template slot="content">
         <list-item-album v-for="album in recently_added.items" :key="album.id" :album="album" @click="open_album(album)">
+          <template slot="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>
@@ -27,6 +37,7 @@ import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import ListItemAlbum from '@/components/ListItemAlbum'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
+import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 
 const browseData = {
@@ -46,7 +57,7 @@ const browseData = {
 export default {
   name: 'PageBrowseType',
   mixins: [LoadDataBeforeEnterMixin(browseData)],
-  components: { ContentWithHeading, TabsMusic, ListItemAlbum, ModalDialogAlbum },
+  components: { ContentWithHeading, TabsMusic, ListItemAlbum, ModalDialogAlbum, CoverArtwork },
 
   data () {
     return {

web-src/src/pages/PageGenre.vue

@@ -20,6 +20,16 @@
       <template slot="content">
         <p class="heading has-text-centered-mobile">{{ genre_albums.total }} albums | <a class="has-text-link" @click="open_tracks">tracks</a></p>
         <list-item-albums v-for="album in genre_albums.items" :key="album.id" :album="album" @click="open_album(album)">
+          <template slot="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>
@@ -40,6 +50,7 @@ import IndexButtonList from '@/components/IndexButtonList'
 import ListItemAlbums from '@/components/ListItemAlbum'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import ModalDialogGenre from '@/components/ModalDialogGenre'
+import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 
 const genreData = {
@@ -56,7 +67,7 @@ const genreData = {
 export default {
   name: 'PageGenre',
   mixins: [LoadDataBeforeEnterMixin(genreData)],
-  components: { ContentWithHeading, IndexButtonList, ListItemAlbums, ModalDialogAlbum, ModalDialogGenre },
+  components: { ContentWithHeading, IndexButtonList, ListItemAlbums, ModalDialogAlbum, ModalDialogGenre, CoverArtwork },
 
   data () {
     return {

web-src/src/pages/PageSearch.vue

@@ -85,6 +85,16 @@
       </template>
       <template slot="content">
         <list-item-album v-for="album in albums.items" :key="album.id" :album="album" @click="open_album(album)">
+          <template slot="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_album_dialog(album)">
               <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@@ -141,12 +151,13 @@ import ModalDialogTrack from '@/components/ModalDialogTrack'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import ModalDialogArtist from '@/components/ModalDialogArtist'
 import ModalDialogPlaylist from '@/components/ModalDialogPlaylist'
+import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 
 export default {
   name: 'PageSearch',
-  components: { ContentWithHeading, TabsSearch, ListItemTrack, ListItemArtist, ListItemAlbum, ListItemPlaylist, ModalDialogTrack, ModalDialogAlbum, ModalDialogArtist, ModalDialogPlaylist },
+  components: { ContentWithHeading, TabsSearch, ListItemTrack, ListItemArtist, ListItemAlbum, ListItemPlaylist, ModalDialogTrack, ModalDialogAlbum, ModalDialogArtist, ModalDialogPlaylist, CoverArtwork },
 
   data () {
     return {