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

web-src/src/components/ListItemArtistSpotify.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="media is-align-items-center">
     <div class="media-content is-clickable is-clipped" @click="open_artist">
-      <h1 class="title is-6" v-text="artist.name" />
+      <h1 class="title is-6" v-text="item.name" />
     </div>
     <div class="media-right">
       <slot name="actions" />
@@ -12,13 +12,13 @@
 <script>
 export default {
   name: 'ListItemArtistSpotify',
-  props: { artist: { required: true, type: Object } },
+  props: { item: { required: true, type: Object } },
 
   methods: {
     open_artist() {
       this.$router.push({
         name: 'music-spotify-artist',
-        params: { id: this.artist.id }
+        params: { id: this.item.id }
       })
     }
   }

web-src/src/components/ListItemPlaylistSpotify.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="media is-align-items-center">
     <div class="media-content is-clickable is-clipped" @click="open_playlist">
-      <h1 class="title is-6" v-text="playlist.name" />
+      <h1 class="title is-6" v-text="item.name" />
-      <h2 class="subtitle is-7" v-text="playlist.owner.display_name" />
+      <h2 class="subtitle is-7" v-text="item.owner.display_name" />
     </div>
     <div class="media-right">
       <slot name="actions" />
@@ -13,13 +13,13 @@
 <script>
 export default {
   name: 'ListItemPlaylistSpotify',
-  props: { playlist: { required: true, type: Object } },
+  props: { item: { required: true, type: Object } },
 
   methods: {
     open_playlist() {
       this.$router.push({
         name: 'playlist-spotify',
-        params: { id: this.playlist.id }
+        params: { id: this.item.id }
       })
     }
   }

web-src/src/components/ListItemTrackSpotify.vue

@@ -3,31 +3,31 @@
     <div
       class="media-content is-clipped"
       :class="{
-        'is-clickable': track.is_playable,
+        'is-clickable': item.is_playable,
-        'fd-is-not-allowed': !track.is_playable
+        'fd-is-not-allowed': !item.is_playable
       }"
       @click="play"
     >
       <h1
         class="title is-6"
-        :class="{ 'has-text-grey-light': !track.is_playable }"
+        :class="{ 'has-text-grey-light': !item.is_playable }"
-        v-text="track.name"
+        v-text="item.name"
       />
       <h2
         class="subtitle is-7"
         :class="{
-          'has-text-grey': track.is_playable,
+          'has-text-grey': item.is_playable,
-          'has-text-grey-light': !track.is_playable
+          'has-text-grey-light': !item.is_playable
         }"
-        v-text="track.artists[0].name"
+        v-text="item.artists[0].name"
       />
-      <h2 v-if="!track.is_playable" class="subtitle is-7">
+      <h2 v-if="!item.is_playable" class="subtitle is-7">
         (<span v-text="$t('list.spotify.not-playable-track')" />
         <span
-          v-if="track.restrictions && track.restrictions.reason"
+          v-if="item.restrictions && item.restrictions.reason"
           v-text="
             $t('list.spotify.restriction-reason', {
-              reason: track.restrictions.reason
+              reason: item.restrictions.reason
             })
           "
         />)
@@ -46,12 +46,12 @@ export default {
   name: 'ListItemTrackSpotify',
   props: {
     context_uri: { required: true, type: String },
-    position: { required: true, type: Number },
+    item: { required: true, type: Object },
-    track: { required: true, type: Object }
+    position: { required: true, type: Number }
   },
   methods: {
     play() {
-      if (this.track.is_playable) {
+      if (this.item.is_playable) {
         webapi.player_play_uri(this.context_uri, false, this.position)
       }
     }

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,
-
+      playlist: { tracks: {} },
-      show_track_details_modal: false,
       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
     },
-
+    load_next({ loaded }) {
-    play() {
+      const spotifyApi = new SpotifyWebApi()
-      this.show_details_modal = false
+      spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
-      webapi.player_play_uri(this.playlist.uri, true)
+      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)">