Merge pull request #1374 from chme/web-next

web interface update

src/inputs/spotify_librespotc.c

@@ -731,6 +731,8 @@ logout(void)
   memset(&ctx->status, 0, sizeof(ctx->status));
 
   pthread_mutex_unlock(&spotify_ctx_lock);
+
+  listener_notify(LISTENER_SPOTIFY);
 }
 
 static int

web-src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "owntone-web",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "description": "OwnTone web interface",
   "author": "chme <christian.meffert@googlemail.com>",
@@ -11,7 +11,7 @@
     "dev": "vue-cli-service serve"
   },
   "dependencies": {
-    "axios": "^0.21.1",
+    "axios": "^0.24.0",
     "bulma": "^0.9.3",
     "bulma-switch": "^2.0.0",
     "core-js": "^3.15.2",
@@ -20,7 +20,7 @@
     "moment-duration-format": "^2.3.2",
     "npm": "^7.19.1",
     "reconnectingwebsocket": "^1.0.0",
-    "spotify-web-api-js": "^1.5.1",
+    "spotify-web-api-js": "^1.5.2",
     "string-to-color": "^2.2.2",
     "v-click-outside": "^3.1.2",
     "vue": "^2.6.14",
@@ -28,17 +28,17 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-progressbar": "^0.7.5",
     "vue-range-slider": "^0.6.0",
-    "vue-router": "^3.5.2",
+    "vue-router": "^3.5.3",
     "vue-scrollto": "^2.20.0",
     "vue-tiny-lazyload-img": "^0.1.0",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-eslint": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/eslint-config-standard": "^6.0.0",
+    "@vue/cli-plugin-babel": "^4.5.15",
+    "@vue/cli-plugin-eslint": "^5.0.0-rc.1",
+    "@vue/cli-service": "^4.5.15",
+    "@vue/eslint-config-standard": "^6.1.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.30.0",
     "eslint-plugin-import": "^2.23.4",

web-src/src/components/Notifications.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="fd-notifications">
+  <section class="fd-notifications" v-if="notifications.length > 0">
     <div class="columns is-centered">
       <div class="column is-half">
         <div class="notification has-shadow " v-for="notification in notifications" :key="notification.id" :class="['notification', notification.type ? `is-${notification.type}` : '']">

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>

web-src/src/pages/SettingsPageOnlineServices.vue

@@ -67,6 +67,11 @@
               Access to the Spotify Web API enables scanning of your Spotify library. Required scopes are
               <code>{{ spotify_required_scope | join }}</code>.
             </p>
+            <div v-if="spotify.webapi_token_valid" class="field fd-has-margin-top ">
+              <div class="control">
+                <a class="button is-danger" @click="logout_spotify">Logout</a>
+              </div>
+            </div>
           </div>
         </div>
       </template>
@@ -141,7 +146,7 @@ export default {
     },
 
     spotify_required_scope () {
-      if (this.spotify.webapi_token_valid && this.spotify.webapi_granted_scope && this.spotify.webapi_required_scope) {
+      if (this.spotify.webapi_required_scope) {
         return this.spotify.webapi_required_scope.split(' ')
       }
       return []
@@ -176,6 +181,10 @@ export default {
       })
     },
 
+    logout_spotify () {
+      webapi.spotify_logout()
+    },
+
     login_lastfm () {
       webapi.lastfm_login(this.lastfm_login).then(response => {
         this.lastfm_login.user = ''

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) {

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 })
     ])
   },
 

web-src/src/webapi/index.js

@@ -356,6 +356,10 @@ export default {
     return axios.post('./api/spotify-login', credentials)
   },
 
+  spotify_logout () {
+    return axios.get('./api/spotify-logout')
+  },
+
   lastfm () {
     return axios.get('./api/lastfm')
   },