[web] Fix for Spotify playlist not being played properly

If a Spotify playlist is containing unplayable tracks (e.g., wrong market), the position of the subsequent tracks in the playlist must be changed accordingly.
Moreover, the album property was provided for no reason.

web-src/src/components/SpotifyListItemTrack.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="media">
-    <div class="media-content fd-has-action is-clipped" @click="play">
+    <div
+      class="media-content is-clipped"
+      :class="{
+        'is-clickable': track.is_playable
+      }"
+      @click="play"
+    >
       <h1
         class="title is-6"
         :class="{ 'has-text-grey-light': !track.is_playable }"
@@ -37,10 +43,12 @@ import webapi from '@/webapi'
 
 export default {
   name: 'SpotifyListItemTrack',
-  props: ['track', 'position', 'album', 'context_uri'],
+  props: ['track', 'position', 'context_uri'],
   methods: {
     play() {
-      webapi.player_play_uri(this.context_uri, false, this.position)
+      if (this.track.is_playable) {
+        webapi.player_play_uri(this.context_uri, false, this.position)
+      }
     }
   }
 }

web-src/src/pages/SpotifyPageAlbum.vue

@@ -43,7 +43,6 @@
         :key="track.id"
         :track="track"
         :position="index"
-        :album="album"
         :context_uri="album.uri"
       >
         <template #actions>

web-src/src/pages/SpotifyPagePlaylist.vue

@@ -25,11 +25,10 @@
         "
       />
       <spotify-list-item-track
-        v-for="(track, index) in tracks"
+        v-for="track in tracks"
         :key="track.id"
         :track="track"
-        :album="track.album"
+        :position="track.position"
-        :position="index"
         :context_uri="playlist.uri"
       >
         <template #actions>
@@ -67,6 +66,7 @@ import store from '@/store'
 import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
+import { mdiAxe } from '@mdi/js'
 
 const PAGE_SIZE = 50
 
@@ -147,12 +147,20 @@ export default {
     },
 
     append_tracks(data) {
-      this.tracks = data.items.reduce((tracks, item) => {
+      let position = Math.max(
-        if (item.track) {
+        -1,
-          tracks.push(item.track)
+        ...this.tracks.map((item) => item.position).filter((item) => item)
+      )
+      // Filters out null tracks and adds a position to the playable tracks
+      data.items.forEach((item) => {
+        const track = item.track
+        if (track) {
+          if (track.is_playable) {
+            track.position = ++position
+          }
+          this.tracks.push(track)
         }
-        return tracks
+      })
-      }, this.tracks)
       this.total = data.total
       this.offset += data.limit
     },

web-src/src/pages/SpotifyPageSearch.vue

@@ -46,7 +46,6 @@
           v-for="track in tracks.items"
           :key="track.id"
           :track="track"
-          :album="track.album"
           :position="0"
           :context_uri="track.uri"
         >