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" > - +
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue index 01061784..5ee78573 100644 --- a/web-src/src/pages/PageAlbum.vue +++ b/web-src/src/pages/PageAlbum.vue @@ -7,8 +7,7 @@