[web-src] Hide cover artwork in lists if disabled in settings

web-src/src/pages/PageAlbums.vue

@@ -23,7 +23,7 @@
           :key="album.id"
           :album="album"
           @click="open_album(album)">
-            <template slot="artwork">
+            <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"
@@ -91,6 +91,10 @@ 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
     }
   },
 

web-src/src/pages/PageArtist.vue

@@ -16,7 +16,7 @@
     <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">
+        <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"
@@ -94,6 +94,10 @@ export default {
     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/PageBrowse.vue

@@ -10,7 +10,7 @@
       </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">
+          <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"
@@ -107,6 +107,12 @@ export default {
     }
   },
 
+  computed: {
+    is_visible_artwork () {
+      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
+    }
+  },
+
   methods: {
     open_browse: function (type) {
       this.$router.push({ path: '/music/browse/' + type })

web-src/src/pages/PageBrowseRecentlyAdded.vue

@@ -9,7 +9,7 @@
       </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">
+          <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"
@@ -68,6 +68,12 @@ export default {
     }
   },
 
+  computed: {
+    is_visible_artwork () {
+      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
+    }
+  },
+
   methods: {
     open_album: function (album) {
       this.$router.push({ path: '/music/albums/' + album.id })

web-src/src/pages/PageGenre.vue

@@ -20,7 +20,7 @@
       <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">
+          <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"
@@ -85,6 +85,10 @@ export default {
     index_list () {
       return [...new Set(this.genre_albums.items
         .map(album => album.name.charAt(0).toUpperCase()))]
+    },
+
+    is_visible_artwork () {
+      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
     }
   },
 

web-src/src/pages/PageSearch.vue

@@ -85,7 +85,7 @@
       </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">
+          <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"
@@ -213,6 +213,10 @@ export default {
     },
     show_all_playlists_button () {
       return this.playlists.total > this.playlists.items.length
+    },
+
+    is_visible_artwork () {
+      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
     }
   },
 

web-src/src/pages/SpotifyPageArtist.vue

@@ -19,7 +19,7 @@
           :key="album.id"
           :album="album"
           @click="open_album(album)">
-        <template slot="artwork">
+        <template slot="artwork" v-if="is_visible_artwork">
           <p class="image is-64x64 fd-has-shadow fd-has-action">
             <cover-artwork
               :artwork_url="artwork_url(album)"
@@ -93,6 +93,12 @@ export default {
     }
   },
 
+  computed: {
+    is_visible_artwork () {
+      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
+    }
+  },
+
   methods: {
     load_next: function ($state) {
       const spotifyApi = new SpotifyWebApi()

web-src/src/pages/SpotifyPageBrowse.vue

@@ -12,7 +12,7 @@
             :key="album.id"
             :album="album"
             @click="open_album(album)">
-          <template slot="artwork">
+          <template slot="artwork" v-if="is_visible_artwork">
             <p class="image is-64x64 fd-has-shadow fd-has-action">
               <cover-artwork
                 :artwork_url="artwork_url(album)"
@@ -126,6 +126,10 @@ export default {
 
     featured_playlists () {
       return this.$store.state.spotify_featured_playlists.slice(0, 3)
+    },
+
+    is_visible_artwork () {
+      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
     }
   },
 

web-src/src/pages/SpotifyPageBrowseNewReleases.vue

@@ -11,7 +11,7 @@
             :key="album.id"
             :album="album"
             @click="open_album(album)">
-          <template slot="artwork">
+          <template slot="artwork" v-if="is_visible_artwork">
             <p class="image is-64x64 fd-has-shadow fd-has-action">
               <cover-artwork
                 :artwork_url="artwork_url(album)"
@@ -77,6 +77,10 @@ export default {
   computed: {
     new_releases () {
       return this.$store.state.spotify_new_releases
+    },
+
+    is_visible_artwork () {
+      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
     }
   },
 

web-src/src/pages/SpotifyPageSearch.vue

@@ -83,7 +83,20 @@
         <p class="title is-4">Albums</p>
       </template>
       <template slot="content">
-        <spotify-list-item-album v-for="album in albums.items" :key="album.id" :album="album">
+        <spotify-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="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>
@@ -142,6 +155,7 @@ import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack'
 import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist'
 import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum'
 import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist'
+import CoverArtwork from '@/components/CoverArtwork'
 import SpotifyWebApi from 'spotify-web-api-js'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
@@ -149,7 +163,7 @@ import InfiniteLoading from 'vue-infinite-loading'
 
 export default {
   name: 'SpotifyPageSearch',
-  components: { ContentWithHeading, TabsSearch, SpotifyListItemTrack, SpotifyListItemArtist, SpotifyListItemAlbum, SpotifyListItemPlaylist, SpotifyModalDialogTrack, SpotifyModalDialogArtist, SpotifyModalDialogAlbum, SpotifyModalDialogPlaylist, InfiniteLoading },
+  components: { ContentWithHeading, TabsSearch, SpotifyListItemTrack, SpotifyListItemArtist, SpotifyListItemAlbum, SpotifyListItemPlaylist, SpotifyModalDialogTrack, SpotifyModalDialogArtist, SpotifyModalDialogAlbum, SpotifyModalDialogPlaylist, InfiniteLoading, CoverArtwork },
 
   data () {
     return {
@@ -207,6 +221,10 @@ export default {
     },
     show_all_playlists_button () {
       return this.playlists.total > this.playlists.items.length
+    },
+
+    is_visible_artwork () {
+      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
     }
   },
 
@@ -390,6 +408,17 @@ export default {
     open_playlist_dialog: function (playlist) {
       this.selected_playlist = playlist
       this.show_playlist_details_modal = true
+    },
+
+    open_album: function (album) {
+      this.$router.push({ path: '/music/spotify/albums/' + album.id })
+    },
+
+    artwork_url: function (album) {
+      if (album.images && album.images.length > 0) {
+        return album.images[0].url
+      }
+      return ''
     }
   },