[web] Streamline name of component properties to prepare for refactoring

web-src/src/components/ListAlbums.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-for="album in albums" :key="album.itemId">
+  <template v-for="album in items" :key="album.itemId">
     <div v-if="!album.isItem" class="mt-6 mb-5 py-2">
       <span
         :id="'index_' + album.index"
@@ -8,7 +8,7 @@
       />
     </div>
     <div
-      v-else-if="album.isItem"
+      v-else
       class="media is-align-items-center"
       @click="open_album(album.item)"
     >
@@ -78,17 +78,17 @@ export default {
   name: 'ListAlbums',
   components: { CoverArtwork, ModalDialog, ModalDialogAlbum },
   props: {
-    albums: { required: true, type: Object },
+    items: { required: true, type: Object },
     media_kind: { default: '', type: String }
   },
   emits: ['play-count-changed', 'podcast-deleted'],
 
   data() {
     return {
-      show_details_modal: false,
+      rss_playlist_to_remove: {},
       selected_album: {},
-      show_remove_podcast_modal: false,
-      rss_playlist_to_remove: {}
+      show_details_modal: false,
+      show_remove_podcast_modal: false
     }
   },
 
@@ -101,7 +101,7 @@ export default {
     },
 
     media_kind_resolved() {
-      return this.media_kind ? this.media_kind : this.selected_album.media_kind
+      return this.media_kind || this.selected_album.media_kind
     }
   },
 

web-src/src/components/ListArtists.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-for="artist in artists" :key="artist.itemId">
+  <template v-for="artist in items" :key="artist.itemId">
     <div v-if="!artist.isItem" class="mt-6 mb-5 py-2">
       <div class="media-content is-clipped">
         <span
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div
-      v-else-if="artist.isItem"
+      v-else
       class="media is-align-items-center"
       @click="open_artist(artist.item)"
     >
@@ -40,7 +40,7 @@ export default {
   name: 'ListArtists',
   components: { ModalDialogArtist },
   props: {
-    artists: { required: true, type: Object }
+    items: { required: true, type: Object }
   },
 
   data() {

web-src/src/components/ListComposers.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-for="composer in composers" :key="composer.itemId">
+  <template v-for="composer in items" :key="composer.itemId">
     <div v-if="!composer.isItem" class="mt-6 mb-5 py-2">
       <div class="media-content is-clipped">
         <span
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div
-      v-else-if="composer.isItem"
+      v-else
       class="media is-align-items-center"
       @click="open_composer(composer.item)"
     >
@@ -40,13 +40,13 @@ export default {
   name: 'ListComposers',
   components: { ModalDialogComposer },
   props: {
-    composers: { required: true, type: Object }
+    items: { required: true, type: Object }
   },
 
   data() {
     return {
-      show_details_modal: false,
-      selected_composer: {}
+      selected_composer: {},
+      show_details_modal: false
     }
   },
 

web-src/src/components/ListGenres.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-for="genre in genres" :key="genre.itemId">
+  <template v-for="genre in items" :key="genre.itemId">
     <div v-if="!genre.isItem" class="mt-6 mb-5 py-2">
       <div class="media-content is-clipped">
         <span
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div
-      v-else-if="genre.isItem"
+      v-else
       class="media is-align-items-center"
       @click="open_genre(genre.item)"
     >
@@ -41,28 +41,28 @@ export default {
   name: 'ListGenres',
   components: { ModalDialogGenre },
   props: {
-    genres: { required: true, type: Object },
+    items: { required: true, type: Object },
     media_kind: { required: true, type: String }
   },
 
   data() {
     return {
-      show_details_modal: false,
-      selected_genre: {}
+      selected_genre: {},
+      show_details_modal: false
     }
   },
 
   methods: {
+    open_dialog(genre) {
+      this.selected_genre = genre
+      this.show_details_modal = true
+    },
     open_genre(genre) {
       this.$router.push({
         name: 'genre-albums',
         params: { name: genre.name },
         query: { media_kind: this.media_kind }
       })
-    },
-    open_dialog(genre) {
-      this.selected_genre = genre
-      this.show_details_modal = true
     }
   }
 }

web-src/src/components/ListItemAlbumSpotify.vue

@@ -4,16 +4,14 @@
       <slot name="artwork" />
     </div>
     <div class="media-content is-clickable is-clipped">
-      <h1 class="title is-6" v-text="album.name" />
+      <h1 class="title is-6" v-text="item.name" />
       <h2
         class="subtitle is-7 has-text-grey has-text-weight-bold"
-        v-text="album.artists[0].name"
+        v-text="item.artists[0]?.name"
       />
       <h2
         class="subtitle is-7 has-text-grey"
-        v-text="
-          [album.album_type, $filters.date(album.release_date)].join(', ')
-        "
+        v-text="[item.album_type, $filters.date(item.release_date)].join(', ')"
       />
     </div>
     <div class="media-right">
@@ -25,7 +23,7 @@
 <script>
 export default {
   name: 'ListItemAlbumSpotify',
-  props: { album: { required: true, type: Object } }
+  props: { item: { required: true, type: Object } }
 }
 </script>
 

web-src/src/components/ListPlaylists.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-for="playlist in playlists"
+    v-for="playlist in items"
     :key="playlist.itemId"
     class="media is-align-items-center"
     @click="open_playlist(playlist.item)"
@@ -32,16 +32,28 @@ import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue'
 export default {
   name: 'ListPlaylists',
   components: { ModalDialogPlaylist },
-  props: { playlists: { required: true, type: Object } },
+  props: { items: { required: true, type: Object } },
 
   data() {
     return {
-      show_details_modal: false,
-      selected_playlist: {}
+      selected_playlist: {},
+      show_details_modal: false
     }
   },
 
   methods: {
+    icon_name(playlist) {
+      if (playlist.type === 'folder') {
+        return 'folder'
+      } else if (playlist.type === 'rss') {
+        return 'rss'
+      }
+      return 'music-box-multiple'
+    },
+    open_dialog(playlist) {
+      this.selected_playlist = playlist
+      this.show_details_modal = true
+    },
     open_playlist(playlist) {
       if (playlist.type === 'folder') {
         this.$router.push({
@@ -54,20 +66,6 @@ export default {
           params: { id: playlist.id }
         })
       }
-    },
-
-    open_dialog(playlist) {
-      this.selected_playlist = playlist
-      this.show_details_modal = true
-    },
-
-    icon_name(playlist) {
-      if (playlist.type === 'folder') {
-        return 'folder'
-      } else if (playlist.type === 'rss') {
-        return 'rss'
-      }
-      return 'music-box-multiple'
     }
   }
 }

web-src/src/components/ListTracks.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-for="track in tracks" :key="track.itemId">
+  <template v-for="track in items" :key="track.itemId">
     <div v-if="!track.isItem" class="mt-6 mb-5 py-2">
       <span
         :id="'index_' + track.index"
@@ -63,17 +63,17 @@ export default {
   components: { ModalDialogTrack },
   props: {
     expression: { default: '', type: String },
+    items: { required: true, type: Object },
     show_icon: Boolean,
     show_progress: Boolean,
-    tracks: { required: true, type: Object },
     uris: { default: '', type: String }
   },
   emits: ['play-count-changed'],
 
   data() {
     return {
-      show_details_modal: false,
-      selected_track: {}
+      selected_track: {},
+      show_details_modal: false
     }
   },
 
@@ -82,19 +82,18 @@ export default {
       this.selected_track = track
       this.show_details_modal = true
     },
-
     play_track(track) {
       if (this.uris) {
         webapi.player_play_uri(
           this.uris,
           false,
-          this.tracks.items.indexOf(track)
+          this.items.items.indexOf(track)
         )
       } else if (this.expression) {
         webapi.player_play_expression(
           this.expression,
           false,
-          this.tracks.items.indexOf(track)
+          this.items.items.indexOf(track)
         )
       } else {
         webapi.player_play_uri(track.uri, false)

web-src/src/components/ModalDialogAlbum.vue

@@ -50,7 +50,7 @@
                   v-text="$filters.date(album.date_released)"
                 />
               </p>
-              <p v-else-if="album.year > 0">
+              <p v-else-if="album.year">
                 <span class="heading" v-text="$t('dialog.album.year')" />
                 <span class="title is-6" v-text="album.year" />
               </p>
@@ -133,7 +133,7 @@ export default {
 
   computed: {
     media_kind_resolved() {
-      return this.media_kind ? this.media_kind : this.album.media_kind
+      return this.media_kind || this.album.media_kind
     }
   },
 
@@ -192,14 +192,6 @@ export default {
           this.$emit('play-count-changed')
           this.$emit('close')
         })
-    },
-
-    artwork_loaded() {
-      this.artwork_visible = true
-    },
-
-    artwork_error() {
-      this.artwork_visible = false
     }
   }
 }