[web] Refactor the Spotify album page

web-src/src/components/ListItemAlbumSpotify.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="media is-align-items-center" @click="open_album">
-    <div v-if="$slots['artwork']" class="media-left is-clickable">
+    <div v-if="show_artwork" class="media-left is-clickable">
-      <slot name="artwork" />
+      <cover-artwork
+        :artwork_url="artwork_url"
+        :artist="item.artist"
+        :album="item.name"
+        class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
+      />
     </div>
     <div class="media-content is-clickable is-clipped">
       <h1 class="title is-6" v-text="item.name" />
@@ -21,10 +26,25 @@
 </template>
 
 <script>
+import CoverArtwork from '@/components/CoverArtwork.vue'
+
 export default {
   name: 'ListItemAlbumSpotify',
+  components: { CoverArtwork },
   props: { item: { required: true, type: Object } },
 
+  computed: {
+    artwork_url() {
+      return this.item.images?.[0]?.url ?? ''
+    },
+    show_artwork() {
+      return this.$store.getters.settings_option(
+        'webinterface',
+        'show_cover_artwork_in_album_lists'
+      ).value
+    }
+  },
+
   methods: {
     open_album() {
       this.$router.push({

web-src/src/pages/PageArtistSpotify.vue

@@ -28,14 +28,6 @@
           :key="album.id"
           :item="album"
         >
-          <template v-if="is_visible_artwork" #artwork>
-            <cover-artwork
-              :artwork_url="artwork_url(album)"
-              :artist="album.artist"
-              :album="album.name"
-              class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
-            />
-          </template>
           <template #actions>
             <a @click.prevent.stop="open_dialog(album)">
               <mdicon
@@ -73,7 +65,6 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
 import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
 import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
@@ -113,7 +104,6 @@ export default {
   name: 'PageArtistSpotify',
   components: {
     ContentWithHeading,
-    CoverArtwork,
     ListItemAlbumSpotify,
     ModalDialogAlbumSpotify,
     ModalDialogArtistSpotify,
@@ -145,27 +135,12 @@ export default {
     }
   },
 
-  computed: {
-    is_visible_artwork() {
-      return this.$store.getters.settings_option(
-        'webinterface',
-        'show_cover_artwork_in_album_lists'
-      ).value
-    }
-  },
-
   methods: {
     append_albums(data) {
       this.albums = this.albums.concat(data.items)
       this.total = data.total
       this.offset += data.limit
     },
-    artwork_url(album) {
-      if (album.images && album.images.length > 0) {
-        return album.images[0].url
-      }
-      return ''
-    },
     load_next({ loaded }) {
       const spotifyApi = new SpotifyWebApi()
       spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)

web-src/src/pages/PageMusicSpotify.vue

@@ -12,14 +12,6 @@
           :key="album.id"
           :item="album"
         >
-          <template v-if="is_visible_artwork" #artwork>
-            <cover-artwork
-              :artwork_url="artwork_url(album)"
-              :artist="album.artist"
-              :album="album.name"
-              class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
-            />
-          </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
               <mdicon
@@ -96,7 +88,6 @@
 <script>
 import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
 import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
 import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
 import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
@@ -143,7 +134,6 @@ export default {
   name: 'PageMusicSpotify',
   components: {
     ContentWithHeading,
-    CoverArtwork,
     ListItemAlbumSpotify,
     ListItemPlaylistSpotify,
     ModalDialogAlbumSpotify,
@@ -177,21 +167,12 @@ 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
-    },
     new_releases() {
       return this.$store.state.spotify_new_releases.slice(0, 3)
     }
   },
 
   methods: {
-    artwork_url(album) {
-      return album.images?.[0]?.url || ''
-    },
     open_album_dialog(album) {
       this.selected_album = album
       this.show_album_details_modal = true

web-src/src/pages/PageMusicSpotifyNewReleases.vue

@@ -11,14 +11,6 @@
           :key="album.id"
           :item="album"
         >
-          <template v-if="is_visible_artwork" #artwork>
-            <cover-artwork
-              :artwork_url="artwork_url(album)"
-              :artist="album.artist"
-              :album="album.name"
-              class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
-            />
-          </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
               <mdicon
@@ -42,7 +34,6 @@
 <script>
 import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
 import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
 import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
@@ -74,7 +65,6 @@ export default {
   name: 'PageMusicSpotifyNewReleases',
   components: {
     ContentWithHeading,
-    CoverArtwork,
     ListItemAlbumSpotify,
     ModalDialogAlbumSpotify,
     TabsMusic
@@ -101,21 +91,12 @@ export default {
   },
 
   computed: {
-    is_visible_artwork() {
-      return this.$store.getters.settings_option(
-        'webinterface',
-        'show_cover_artwork_in_album_lists'
-      ).value
-    },
     new_releases() {
       return this.$store.state.spotify_new_releases
     }
   },
 
   methods: {
-    artwork_url(album) {
-      return album.images?.[0]?.url || ''
-    },
     open_album_dialog(album) {
       this.selected_album = album
       this.show_details_modal = true

web-src/src/pages/PageSearchSpotify.vue

@@ -170,14 +170,6 @@
           :key="album.id"
           :item="album"
         >
-          <template v-if="is_visible_artwork" #artwork>
-            <cover-artwork
-              :artwork_url="artwork_url(album)"
-              :artist="album.artist"
-              :album="album.name"
-              class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
-            />
-          </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
               <mdicon
@@ -295,7 +287,6 @@
 <script>
 import ContentText from '@/templates/ContentText.vue'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
 import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
 import ListItemArtistSpotify from '@/components/ListItemArtistSpotify.vue'
 import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
@@ -316,7 +307,6 @@ export default {
   components: {
     ContentText,
     ContentWithHeading,
-    CoverArtwork,
     ListItemAlbumSpotify,
     ListItemArtistSpotify,
     ListItemPlaylistSpotify,
@@ -351,12 +341,6 @@ export default {
   },
 
   computed: {
-    is_visible_artwork() {
-      return this.$store.getters.settings_option(
-        'webinterface',
-        'show_cover_artwork_in_album_lists'
-      ).value
-    },
     recent_searches() {
       return this.$store.state.recent_searches.filter(
         (search) => !search.startsWith('query:')
@@ -377,9 +361,6 @@ export default {
   },
 
   methods: {
-    artwork_url(album) {
-      return album.images?.[0]?.url || ''
-    },
     new_search() {
       if (!this.search_query) {
         return