[web] Simplify image control

web-src/src/components/ControlImage.vue

@@ -10,8 +10,7 @@ import { renderSVG } from '@/lib/SVGRenderer'
 export default {
   name: 'ControlImage',
   props: {
-    album: { default: '', type: String },
+    caption: { default: '', type: String },
-    artist: { default: '', type: String },
     url: { default: '', type: String }
   },
   emits: ['click'],
@@ -29,8 +28,8 @@ export default {
   methods: {
     dataURI() {
       return renderSVG({
-        alternate: `${this.artist} - ${this.album}`,
+        alternate: this.caption,
-        caption: (this.album || this.artist || '').substring(0, 2),
+        caption: this.caption.substring(0, 2),
         font: this.font,
         size: this.size
       })

web-src/src/components/ListAlbums.vue

@@ -3,7 +3,7 @@
     v-for="item in items"
     :key="item.itemId"
     :is-item="item.isItem"
-    :image="url(item)"
+    :image="image(item)"
     :index="item.index"
     :lines="[
       item.item.name,
@@ -79,6 +79,12 @@ export default {
     }
   },
   methods: {
+    image(item) {
+      if (this.settingsStore.show_cover_artwork_in_album_lists) {
+        return { url: item.item.artwork_url, caption: item.item.name }
+      }
+      return null
+    },
     open(item) {
       this.selectedItem = item
       if (this.media_kind_resolved === 'podcast') {
@@ -117,12 +123,6 @@ export default {
       webapi.library_playlist_delete(this.playlistToRemove.id).then(() => {
         this.$emit('podcast-deleted')
       })
-    },
-    url(item) {
-      if (this.settingsStore.show_cover_artwork_in_album_lists) {
-        return item.item.artwork_url
-      }
-      return null
     }
   }
 }

web-src/src/components/ListAlbumsSpotify.vue

@@ -3,7 +3,7 @@
     v-for="item in items"
     :key="item.id"
     :is-item="item.isItem"
-    :image="url(item)"
+    :image="image(item)"
     :index="item.index"
     :lines="[
       item.name,
@@ -36,6 +36,12 @@ export default {
     return { selectedItem: {}, showDetailsModal: false }
   },
   methods: {
+    image(item) {
+      if (this.settingsStore.show_cover_artwork_in_album_lists) {
+        return { url: item.images?.[0]?.url ?? '', caption: item.name }
+      }
+      return null
+    },
     open(item) {
       this.$router.push({
         name: 'music-spotify-album',
@@ -45,12 +51,6 @@ export default {
     openDetails(item) {
       this.selectedItem = item
       this.showDetailsModal = true
-    },
-    url(item) {
-      if (this.settingsStore.show_cover_artwork_in_album_lists) {
-        return item.images?.[0]?.url ?? ''
-      }
-      return null
     }
   }
 }

web-src/src/components/ListItem.vue

@@ -15,7 +15,12 @@
     @click="open"
   >
     <mdicon v-if="icon" class="media-left icon" :name="icon" />
-    <control-image v-if="image" :url="image" class="media-left is-small" />
+    <control-image
+      v-if="image"
+      :url="image.url"
+      :caption="image.caption"
+      class="media-left is-small"
+    />
     <div class="media-content">
       <div
         v-for="(line, position) in lines"
@@ -51,7 +56,7 @@ export default {
   components: { ControlImage },
   props: {
     icon: { default: null, type: String },
-    image: { default: null, type: String },
+    image: { default: null, type: Object },
     index: { default: null, type: [String, Number] },
     isItem: { default: true, type: Boolean },
     lines: { default: null, type: Array },

web-src/src/components/ListProperties.vue

@@ -2,8 +2,7 @@
   <control-image
     v-if="item.image"
     :url="item.image"
-    :artist="item.artist"
+    :caption="item.name"
-    :album="item.name"
     class="is-normal mb-5"
   />
   <slot v-if="$slots.buttons" name="buttons" />

web-src/src/pages/PageAlbum.vue

@@ -7,8 +7,7 @@
       <template #image>
         <control-image
           :url="album.artwork_url"
-          :artist="album.artist"
+          :caption="album.name"
-          :album="album.name"
           class="is-clickable is-medium"
           @click="openDetails"
         />

web-src/src/pages/PageAlbumSpotify.vue

@@ -7,8 +7,7 @@
       <template #image>
         <control-image
           :url="album.images?.[0]?.url ?? ''"
-          :artist="album.artists[0].name"
+          :caption="album.name"
-          :album="album.name"
           class="is-clickable is-medium"
           @click="openDetails"
         />

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -7,8 +7,7 @@
       <template #image>
         <control-image
           :url="album.artwork_url"
-          :artist="album.artist"
+          :caption="album.name"
-          :album="album.name"
           class="is-clickable is-medium"
           @click="openDetails"
         />

web-src/src/pages/PageNowPlaying.vue

@@ -5,8 +5,7 @@
     <div v-if="track.id" class="mx-auto" style="max-width: 32rem">
       <control-image
         :url="track.artwork_url"
-        :artist="track.artist"
+        :caption="track.album"
-        :album="track.album"
         class="is-clickable is-big"
         :class="{ 'is-masked': lyricsStore.active }"
         @click="openDetails(track)"

web-src/src/pages/PagePodcast.vue

@@ -7,8 +7,7 @@
       <template #image>
         <control-image
           :url="album.artwork_url"
-          :artist="album.artist"
+          :caption="album.name"
-          :album="album.name"
           class="is-clickable is-medium"
           @click="openDetails"
         />