From 6a2f85e04f66bbfc9a75f52dfecad637e72a044a Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 10 Jun 2023 18:25:12 +0200
Subject: [PATCH] [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.
---
 .../src/components/SpotifyListItemTrack.vue   | 14 ++++++++---
 web-src/src/pages/SpotifyPageAlbum.vue        |  1 -
 web-src/src/pages/SpotifyPagePlaylist.vue     | 24 ++++++++++++-------
 web-src/src/pages/SpotifyPageSearch.vue       |  1 -
 4 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/web-src/src/components/SpotifyListItemTrack.vue b/web-src/src/components/SpotifyListItemTrack.vue
index 763ab419..3c80bd49 100644
--- a/web-src/src/components/SpotifyListItemTrack.vue
+++ b/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)
+      }
     }
   }
 }
diff --git a/web-src/src/pages/SpotifyPageAlbum.vue b/web-src/src/pages/SpotifyPageAlbum.vue
index cda26182..b133c5b4 100644
--- a/web-src/src/pages/SpotifyPageAlbum.vue
+++ b/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>
diff --git a/web-src/src/pages/SpotifyPagePlaylist.vue b/web-src/src/pages/SpotifyPagePlaylist.vue
index 4a2d495f..4a6f70b3 100644
--- a/web-src/src/pages/SpotifyPagePlaylist.vue
+++ b/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="index"
+        :position="track.position"
         :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) => {
-        if (item.track) {
-          tracks.push(item.track)
+      let position = Math.max(
+        -1,
+        ...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
     },
diff --git a/web-src/src/pages/SpotifyPageSearch.vue b/web-src/src/pages/SpotifyPageSearch.vue
index afd996c4..7ecb1e27 100644
--- a/web-src/src/pages/SpotifyPageSearch.vue
+++ b/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"
         >