[web-src] Show cover artwork in Spotify album listings

web-src/src/components/SpotifyListItemAlbum.vue

@@ -1,9 +1,14 @@
-<template>
+<template functional>
   <div class="media">
-    <div class="media-content fd-has-action is-clipped" v-on:click="open_album">
+    <div class="media-left fd-has-action"
-      <h1 class="title is-6">{{ album.name }}</h1>
+        v-if="$slots['artwork']"
-      <h2 class="subtitle is-7 has-text-grey"><b>{{ album.artists[0].name }}</b></h2>
+        @click="listeners.click">
-      <h2 class="subtitle is-7 has-text-grey has-text-weight-normal">({{ album.album_type }}, {{ album.release_date | time('L') }})</h2>
+      <slot name="artwork"></slot>
+    </div>
+    <div class="media-content fd-has-action is-clipped" @click="listeners.click">
+      <h1 class="title is-6">{{ props.album.name }}</h1>
+      <h2 class="subtitle is-7 has-text-grey"><b>{{ props.album.artists[0].name }}</b></h2>
+      <h2 class="subtitle is-7 has-text-grey has-text-weight-normal">({{ props.album.album_type }}, {{ props.album.release_date | time('L') }})</h2>
     </div>
     <div class="media-right">
       <slot name="actions"></slot>
@@ -14,14 +19,7 @@
 <script>
 export default {
   name: 'SpotifyListItemAlbum',
-
+  props: ['album']
-  props: ['album'],
-
-  methods: {
-    open_album: function () {
-      this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
-    }
-  }
 }
 </script>
 

web-src/src/pages/SpotifyPageArtist.vue

@@ -15,7 +15,20 @@
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ total }} albums</p>
-      <spotify-list-item-album v-for="album in albums" :key="album.id" :album="album">
+      <spotify-list-item-album v-for="album in albums"
+          :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="artwork_url(album)"
+              :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>
@@ -35,6 +48,7 @@ import ContentWithHeading from '@/templates/ContentWithHeading'
 import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
 import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum'
 import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist'
+import CoverArtwork from '@/components/CoverArtwork'
 import store from '@/store'
 import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
@@ -63,7 +77,7 @@ const artistData = {
 export default {
   name: 'SpotifyPageArtist',
   mixins: [LoadDataBeforeEnterMixin(artistData)],
-  components: { ContentWithHeading, SpotifyListItemAlbum, SpotifyModalDialogAlbum, SpotifyModalDialogArtist, InfiniteLoading },
+  components: { ContentWithHeading, SpotifyListItemAlbum, SpotifyModalDialogAlbum, SpotifyModalDialogArtist, InfiniteLoading, CoverArtwork },
 
   data () {
     return {
@@ -106,9 +120,20 @@ export default {
       webapi.player_play_uri(this.artist.uri, true)
     },
 
+    open_album: function (album) {
+      this.$router.push({ path: '/music/spotify/albums/' + album.id })
+    },
+
     open_dialog: function (album) {
       this.selected_album = album
       this.show_details_modal = true
+    },
+
+    artwork_url: function (album) {
+      if (album.images && album.images.length > 0) {
+        return album.images[0].url
+      }
+      return ''
     }
   }
 }

web-src/src/pages/SpotifyPageBrowse.vue

@@ -8,7 +8,20 @@
         <p class="title is-4">New Releases</p>
       </template>
       <template slot="content">
-        <spotify-list-item-album v-for="album in new_releases" :key="album.id" :album="album">
+        <spotify-list-item-album v-for="album in new_releases"
+            :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="artwork_url(album)"
+                :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>
@@ -64,6 +77,7 @@ import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
 import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist'
 import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum'
 import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist'
+import CoverArtwork from '@/components/CoverArtwork'
 import store from '@/store'
 import * as types from '@/store/mutation_types'
 import SpotifyWebApi from 'spotify-web-api-js'
@@ -93,7 +107,7 @@ const browseData = {
 export default {
   name: 'SpotifyPageBrowse',
   mixins: [LoadDataBeforeEnterMixin(browseData)],
-  components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum, SpotifyListItemPlaylist, SpotifyModalDialogAlbum, SpotifyModalDialogPlaylist },
+  components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum, SpotifyListItemPlaylist, SpotifyModalDialogAlbum, SpotifyModalDialogPlaylist, CoverArtwork },
 
   data () {
     return {
@@ -116,6 +130,11 @@ export default {
   },
 
   methods: {
+
+    open_album: function (album) {
+      this.$router.push({ path: '/music/spotify/albums/' + album.id })
+    },
+
     open_album_dialog: function (album) {
       this.selected_album = album
       this.show_album_details_modal = true
@@ -124,6 +143,13 @@ export default {
     open_playlist_dialog: function (playlist) {
       this.selected_playlist = playlist
       this.show_playlist_details_modal = true
+    },
+
+    artwork_url: function (album) {
+      if (album.images && album.images.length > 0) {
+        return album.images[0].url
+      }
+      return ''
     }
   }
 }

web-src/src/pages/SpotifyPageBrowseNewReleases.vue

@@ -7,9 +7,22 @@
         <p class="title is-4">New Releases</p>
       </template>
       <template slot="content">
-        <spotify-list-item-album v-for="album in new_releases" :key="album.id" :album="album">
+        <spotify-list-item-album v-for="album in new_releases"
+            :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="artwork_url(album)"
+                :artist="album.artist"
+                :album="album.name"
+                :maxwidth="64"
+                :maxheight="64" />
+            </p>
+          </template>
           <template slot="actions">
-            <a @click="open_album(album)">
+            <a @click="open_album_dialog(album)">
               <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
             </a>
           </template>
@@ -26,6 +39,7 @@ import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
 import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum'
+import CoverArtwork from '@/components/CoverArtwork'
 import store from '@/store'
 import * as types from '@/store/mutation_types'
 import SpotifyWebApi from 'spotify-web-api-js'
@@ -51,7 +65,7 @@ const browseData = {
 export default {
   name: 'SpotifyPageBrowseNewReleases',
   mixins: [LoadDataBeforeEnterMixin(browseData)],
-  components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum, SpotifyModalDialogAlbum },
+  components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum, SpotifyModalDialogAlbum, CoverArtwork },
 
   data () {
     return {
@@ -67,9 +81,21 @@ export default {
   },
 
   methods: {
+
     open_album: function (album) {
+      this.$router.push({ path: '/music/spotify/albums/' + album.id })
+    },
+
+    open_album_dialog: function (album) {
       this.selected_album = album
       this.show_album_details_modal = true
+    },
+
+    artwork_url: function (album) {
+      if (album.images && album.images.length > 0) {
+        return album.images[0].url
+      }
+      return ''
     }
   }
 }