From 791d3610fdaec2cd96b7b25d2aa4ba9b15974d00 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Sun, 26 Dec 2021 19:49:23 +0100
Subject: [PATCH] [web] Display info text if spotify track is not playable

Additionally set market query parameter for albums and tracks. According to the spotify documentation, this should not be necessary, as the market for the user account should be used if not set.
---
 web-src/src/components/SpotifyListItemTrack.vue | 7 +++++--
 web-src/src/pages/SpotifyPageAlbum.vue          | 2 +-
 web-src/src/pages/SpotifyPageArtist.vue         | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web-src/src/components/SpotifyListItemTrack.vue b/web-src/src/components/SpotifyListItemTrack.vue
index 5222dc28..37310236 100644
--- a/web-src/src/components/SpotifyListItemTrack.vue
+++ b/web-src/src/components/SpotifyListItemTrack.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="media">
     <div class="media-content fd-has-action is-clipped" v-on:click="play">
-      <h1 class="title is-6">{{ track.name }}</h1>
-      <h2 class="subtitle is-7 has-text-grey"><b>{{ track.artists[0].name }}</b></h2>
+      <h1 class="title is-6" :class="{ 'has-text-grey-light': !track.is_playable }">{{ track.name }}</h1>
+      <h2 class="subtitle is-7" :class="{ 'has-text-grey': track.is_playable, 'has-text-grey-light': !track.is_playable }"><b>{{ track.artists[0].name }}</b></h2>
+      <h2 class="subtitle is-7" v-if="!track.is_playable">
+        (Track is not playable, restriction reason: {{ track.restrictions.reason }})
+      </h2>
     </div>
     <div class="media-right">
       <slot name="actions"></slot>
diff --git a/web-src/src/pages/SpotifyPageAlbum.vue b/web-src/src/pages/SpotifyPageAlbum.vue
index b646989d..d52f4d27 100644
--- a/web-src/src/pages/SpotifyPageAlbum.vue
+++ b/web-src/src/pages/SpotifyPageAlbum.vue
@@ -54,7 +54,7 @@ const albumData = {
   load: function (to) {
     const spotifyApi = new SpotifyWebApi()
     spotifyApi.setAccessToken(store.state.spotify.webapi_token)
-    return spotifyApi.getAlbum(to.params.album_id)
+    return spotifyApi.getAlbum(to.params.album_id, { market: store.state.spotify.webapi_country })
   },
 
   set: function (vm, response) {
diff --git a/web-src/src/pages/SpotifyPageArtist.vue b/web-src/src/pages/SpotifyPageArtist.vue
index e9b6bca2..846683ac 100644
--- a/web-src/src/pages/SpotifyPageArtist.vue
+++ b/web-src/src/pages/SpotifyPageArtist.vue
@@ -60,7 +60,7 @@ const artistData = {
     spotifyApi.setAccessToken(store.state.spotify.webapi_token)
     return Promise.all([
       spotifyApi.getArtist(to.params.artist_id),
-      spotifyApi.getArtistAlbums(to.params.artist_id, { limit: 50, offset: 0, include_groups: 'album,single' })
+      spotifyApi.getArtistAlbums(to.params.artist_id, { limit: 50, offset: 0, include_groups: 'album,single', market: store.state.spotify.webapi_country })
     ])
   },