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

web-src/src/pages/PageAlbumSpotify.vue

@@ -42,7 +42,7 @@
         <list-item-track-spotify
           v-for="(track, index) in album.tracks.items"
           :key="track.id"
-          :track="track"
+          :item="track"
           :position="index"
           :context_uri="album.uri"
         >

web-src/src/pages/PageMusicSpotify.vue

@@ -10,7 +10,7 @@
         <list-item-album-spotify
           v-for="album in new_releases"
           :key="album.id"
-          :album="album"
+          :item="album"
           @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
@@ -61,7 +61,7 @@
         <list-item-playlist-spotify
           v-for="playlist in featured_playlists"
           :key="playlist.id"
-          :playlist="playlist"
+          :item="playlist"
         >
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
@@ -176,42 +176,37 @@ export default {
   },
 
   computed: {
-    new_releases() {
-      return this.$store.state.spotify_new_releases.slice(0, 3)
-    },
-
     featured_playlists() {
       return this.$store.state.spotify_featured_playlists.slice(0, 3)
     },
-
     is_visible_artwork() {
       return this.$store.getters.settings_option(
         'webinterface',
         'show_cover_artwork_in_album_lists'
       ).value
+    },
+    new_releases() {
+      return this.$store.state.spotify_new_releases.slice(0, 3)
     }
   },
 
   methods: {
+    artwork_url(album) {
+      return album.images?.[0]?.url || ''
+    },
     open_album(album) {
       this.$router.push({
         name: 'music-spotify-album',
         params: { id: album.id }
       })
     },
-
     open_album_dialog(album) {
       this.selected_album = album
       this.show_album_details_modal = true
     },
-
     open_playlist_dialog(playlist) {
       this.selected_playlist = playlist
       this.show_playlist_details_modal = true
-    },
-
-    artwork_url(album) {
-      return album.images?.[0]?.url || ''
     }
   }
 }

web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue

@@ -12,7 +12,7 @@
         <list-item-playlist-spotify
           v-for="playlist in featured_playlists"
           :key="playlist.id"
-          :playlist="playlist"
+          :item="playlist"
         >
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">

web-src/src/pages/PagePlaylistTracksSpotify.vue

@@ -28,7 +28,7 @@
         <list-item-track-spotify
           v-for="track in tracks"
           :key="track.id"
-          :track="track"
+          :item="track"
           :position="track.position"
           :context_uri="playlist.uri"
         >
@@ -95,6 +95,7 @@ const dataObject = {
   },
 
   set(vm, response) {
+    console.log(response[0])
     vm.playlist = response[0]
     vm.tracks = []
     vm.total = 0
@@ -128,34 +129,17 @@ export default {
 
   data() {
     return {
-      playlist: { tracks: {} },
-      tracks: [],
-      total: 0,
       offset: 0,
-
-      show_track_details_modal: false,
+      playlist: { tracks: {} },
       selected_track: {},
-
-      show_playlist_details_modal: false
+      show_playlist_details_modal: false,
+      show_track_details_modal: false,
+      total: 0,
+      tracks: []
     }
   },
 
   methods: {
-    load_next({ loaded }) {
-      const spotifyApi = new SpotifyWebApi()
-      spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
-      spotifyApi
-        .getPlaylistTracks(this.playlist.id, {
-          limit: PAGE_SIZE,
-          offset: this.offset,
-          market: store.state.spotify.webapi_country
-        })
-        .then((data) => {
-          this.append_tracks(data)
-          loaded(data.items.length, PAGE_SIZE)
-        })
-    },
-
     append_tracks(data) {
       let position = Math.max(
         -1,
@@ -174,15 +158,27 @@ export default {
       this.total = data.total
       this.offset += data.limit
     },
-
-    play() {
-      this.show_details_modal = false
-      webapi.player_play_uri(this.playlist.uri, true)
+    load_next({ loaded }) {
+      const spotifyApi = new SpotifyWebApi()
+      spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
+      spotifyApi
+        .getPlaylistTracks(this.playlist.id, {
+          limit: PAGE_SIZE,
+          market: store.state.spotify.webapi_country,
+          offset: this.offset
+        })
+        .then((data) => {
+          this.append_tracks(data)
+          loaded(data.items.length, PAGE_SIZE)
+        })
     },
-
     open_track_dialog(track) {
       this.selected_track = track
       this.show_track_details_modal = true
+    },
+    play() {
+      this.show_details_modal = false
+      webapi.player_play_uri(this.playlist.uri, true)
     }
   }
 }

web-src/src/pages/PageSearchSpotify.vue

@@ -43,7 +43,7 @@
         <list-item-track-spotify
           v-for="track in tracks.items"
           :key="track.id"
-          :track="track"
+          :item="track"
           :position="0"
           :context_uri="track.uri"
         >
@@ -107,7 +107,7 @@
         <list-item-artist-spotify
           v-for="artist in artists.items"
           :key="artist.id"
-          :artist="artist"
+          :item="artist"
         >
           <template #actions>
             <a @click.prevent.stop="open_artist_dialog(artist)">
@@ -238,7 +238,7 @@
         <list-item-playlist-spotify
           v-for="playlist in playlists.items"
           :key="playlist.id"
-          :playlist="playlist"
+          :item="playlist"
         >
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">