diff --git a/web-src/src/components/ControlImage.vue b/web-src/src/components/ControlImage.vue
index c9cc2073..c63d89b6 100644
--- a/web-src/src/components/ControlImage.vue
+++ b/web-src/src/components/ControlImage.vue
@@ -10,8 +10,7 @@ import { renderSVG } from '@/lib/SVGRenderer'
export default {
name: 'ControlImage',
props: {
- album: { default: '', type: String },
- artist: { default: '', type: String },
+ caption: { default: '', type: String },
url: { default: '', type: String }
},
emits: ['click'],
@@ -29,8 +28,8 @@ export default {
methods: {
dataURI() {
return renderSVG({
- alternate: `${this.artist} - ${this.album}`,
- caption: (this.album || this.artist || '').substring(0, 2),
+ alternate: this.caption,
+ caption: this.caption.substring(0, 2),
font: this.font,
size: this.size
})
diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index b0b07a1a..564930c9 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/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
}
}
}
diff --git a/web-src/src/components/ListAlbumsSpotify.vue b/web-src/src/components/ListAlbumsSpotify.vue
index a124cd99..6b90f56d 100644
--- a/web-src/src/components/ListAlbumsSpotify.vue
+++ b/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
}
}
}
diff --git a/web-src/src/components/ListItem.vue b/web-src/src/components/ListItem.vue
index 051320b7..186aef51 100644
--- a/web-src/src/components/ListItem.vue
+++ b/web-src/src/components/ListItem.vue
@@ -15,7 +15,12 @@
@click="open"
>