[web] Fix bug when adding playable items to queue

web-src/src/components/ListAlbumsSpotify.vue

@@ -4,17 +4,13 @@
       class="media is-align-items-center is-clickable mb-0"
       @click="open(item)"
     >
-      <div
+      <cover-artwork
         v-if="settingsStore.show_cover_artwork_in_album_lists"
-        class="media-left"
-      >
-        <cover-artwork
-          :url="artwork_url(item)"
-          :artist="item.artist"
-          :album="item.name"
-          class="is-small"
-        />
-      </div>
+        :url="item.images?.[0]?.url ?? ''"
+        :artist="item.artist"
+        :album="item.name"
+        class="media-left is-small"
+      />
       <div class="media-content">
         <div class="is-size-6 has-text-weight-bold" v-text="item.name" />
         <div
@@ -51,19 +47,13 @@ export default {
   name: 'ListAlbumsSpotify',
   components: { CoverArtwork, ModalDialogAlbumSpotify },
   props: { items: { required: true, type: Object } },
-
   setup() {
     return { settingsStore: useSettingsStore() }
   },
-
   data() {
     return { selected_item: {}, show_details_modal: false }
   },
-
   methods: {
-    artwork_url(item) {
-      return item.images?.[0]?.url ?? ''
-    },
     open(item) {
       this.$router.push({
         name: 'music-spotify-album',

web-src/src/components/ListArtists.vue

@@ -1,13 +1,11 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
     <div v-if="!item.isItem" class="py-5">
-      <div class="media-content">
-        <span
-          :id="`index_${item.index}`"
-          class="tag is-small has-text-weight-bold"
-          v-text="item.index"
-        />
-      </div>
+      <span
+        :id="`index_${item.index}`"
+        class="tag is-small has-text-weight-bold"
+        v-text="item.index"
+      />
     </div>
     <div
       v-else
@@ -39,15 +37,10 @@ import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
 export default {
   name: 'ListArtists',
   components: { ModalDialogArtist },
-  props: {
-    items: { required: true, type: Object }
-  },
+  props: { items: { required: true, type: Object } },
 
   data() {
-    return {
-      selected_item: {},
-      show_details_modal: false
-    }
+    return { selected_item: {}, show_details_modal: false }
   },
 
   methods: {

web-src/src/components/ListComposers.vue

@@ -39,15 +39,10 @@ import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
 export default {
   name: 'ListComposers',
   components: { ModalDialogComposer },
-  props: {
-    items: { required: true, type: Object }
-  },
+  props: { items: { required: true, type: Object } },
 
   data() {
-    return {
-      selected_item: {},
-      show_details_modal: false
-    }
+    return { selected_item: {}, show_details_modal: false }
   },
 
   methods: {

web-src/src/components/ListDirectories.vue

@@ -54,10 +54,7 @@ export default {
   props: { items: { required: true, type: Array } },
 
   data() {
-    return {
-      selected_item: '',
-      show_details_modal: false
-    }
+    return { selected_item: '', show_details_modal: false }
   },
 
   computed: {

web-src/src/components/ListGenres.vue

@@ -45,10 +45,7 @@ export default {
     media_kind: { required: true, type: String }
   },
   data() {
-    return {
-      selected_item: {},
-      show_details_modal: false
-    }
+    return { selected_item: {}, show_details_modal: false }
   },
   methods: {
     open(item) {

web-src/src/components/ListItemQueueItem.vue

@@ -60,9 +60,7 @@ export default {
   },
 
   setup() {
-    return {
-      playerStore: usePlayerStore()
-    }
+    return { playerStore: usePlayerStore() }
   },
 
   computed: {

web-src/src/components/ListPlaylists.vue

@@ -33,10 +33,7 @@ export default {
   props: { items: { required: true, type: Object } },
 
   data() {
-    return {
-      selected_item: {},
-      show_details_modal: false
-    }
+    return { selected_item: {}, show_details_modal: false }
   },
 
   methods: {

web-src/src/components/ListTracks.vue

@@ -69,10 +69,7 @@ export default {
   emits: ['play-count-changed'],
 
   data() {
-    return {
-      selected_item: {},
-      show_details_modal: false
-    }
+    return { selected_item: {}, show_details_modal: false }
   },
 
   methods: {

web-src/src/components/ModalDialogAlbum.vue

@@ -46,8 +46,7 @@ export default {
         name: this.item.name,
         handler: this.open,
         image: this.item.artwork_url,
-        artist: this.item.artist,
-        album: this.item.name,
+        uri: this.item.uri,
         properties: [
           {
             label: 'property.artist',

web-src/src/components/ModalDialogAlbumSpotify.vue

@@ -19,12 +19,11 @@ export default {
       return {
         name: this.item.name || '',
         image: this.item?.images?.[0]?.url || '',
-        artist: this.item.artist || '',
-        album: this.item.name || '',
         handler: this.open,
+        uri: this.item.uri,
         properties: [
           {
-            label: 'property.album-artist',
+            label: 'property.artist',
             value: this.item?.artists?.[0]?.name,
             handler: this.open_artist
           },

web-src/src/components/ModalDialogPlaylist.vue

@@ -23,6 +23,7 @@ export default {
       return {
         name: this.item.name,
         handler: this.open,
+        uri: this.item.uri,
         uris: this.uris,
         properties: [
           { label: 'property.tracks', value: this.item.item_count },

web-src/src/components/ModalDialogPlaylistSpotify.vue

@@ -19,6 +19,7 @@ export default {
       return {
         name: this.item.name,
         handler: this.open,
+        uri: this.item.uri,
         properties: [
           {
             label: 'property.owner',

web-src/src/components/ModalDialogQueueItem.vue

@@ -44,6 +44,7 @@ export default {
     playable() {
       return {
         name: this.item.title,
+        uri: this.item.uri,
         properties: [
           {
             label: 'property.album',

web-src/src/components/ModalDialogTrack.vue

@@ -43,6 +43,7 @@ export default {
     playable() {
       return {
         name: this.item.title,
+        uri: this.item.uri,
         properties: [
           {
             label: 'property.album',

web-src/src/components/ModalDialogTrackSpotify.vue

@@ -16,9 +16,12 @@ export default {
   emits: ['close'],
   computed: {
     playable() {
+      if (!this.item.artists) {
+        return {}
+      }
       return {
         name: this.item.name,
-        subtitle: this.item.artists[0].name,
+        uri: this.item.uri,
         properties: [
           {
             label: 'property.album',
@@ -27,20 +30,20 @@ export default {
           },
           {
             label: 'property.album-artist',
-            value: this.item.artists[0].name,
+            value: this.item.artists[0]?.name,
             handler: this.open_artist
           },
           {
             label: 'property.release-date',
-            value: this.$filters.date(item.album.release_date)
+            value: this.$filters.date(this.item.album.release_date)
           },
           {
             label: 'property.position',
-            value: [item.disc_number, item.track_number].join(' / ')
+            value: [this.item.disc_number, this.item.track_number].join(' / ')
           },
           {
             label: 'property.duration',
-            value: this.$filters.durationInHours(item.duration_ms)
+            value: this.$filters.durationInHours(this.item.duration_ms)
           },
           { label: 'property.path', value: this.item.uri }
         ]

web-src/src/components/NotificationList.vue

@@ -23,9 +23,7 @@ export default {
   name: 'NotificationList',
 
   setup() {
-    return {
-      notificationsStore: useNotificationsStore()
-    }
+    return { notificationsStore: useNotificationsStore() }
   },
 
   computed: {

web-src/src/components/TabsSearch.vue

@@ -41,9 +41,7 @@ export default {
   emits: ['search-library', 'search-spotify'],
 
   setup() {
-    return {
-      servicesStore: useServicesStore()
-    }
+    return { servicesStore: useServicesStore() }
   },
 
   computed: {