[web-src] Add "Add next" button to modal dialogs for

album/artist/track/playlist details

web-src/src/components/ListItemAlbum.vue

@@ -34,6 +34,9 @@
               <a class="card-footer-item has-text-dark" @click="queue_add">
                 <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
               </a>
+              <a class="card-footer-item has-text-dark" @click="queue_add_next">
+                <span class="icon"><i class="mdi mdi-playlist-play mdi-18px"></i></span> <span>Add Next</span>
+              </a>
               <a class="card-footer-item has-text-dark" @click="play">
                 <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
               </a>
@@ -78,6 +81,13 @@ export default {
       )
     },
 
+    queue_add_next: function () {
+      this.show_details_modal = false
+      webapi.queue_add_next(this.album.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
     open_album: function () {
       this.show_details_modal = false
       if (this.media_kind === 'podcast') {

web-src/src/components/ListItemArtist.vue

@@ -29,6 +29,9 @@
               <a class="card-footer-item has-text-dark" @click="queue_add">
                 <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
               </a>
+              <a class="card-footer-item has-text-dark" @click="queue_add_next">
+                <span class="icon"><i class="mdi mdi-playlist-play mdi-18px"></i></span> <span>Add Next</span>
+              </a>
               <a class="card-footer-item has-text-dark" @click="play">
                 <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
               </a>
@@ -73,6 +76,13 @@ export default {
       )
     },
 
+    queue_add_next: function () {
+      this.show_details_modal = false
+      webapi.queue_add_next(this.artist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
     open_artist: function () {
       this.show_details_modal = false
       this.$router.push({ path: '/music/artists/' + this.artist.id })

web-src/src/components/ListItemPlaylist.vue

@@ -25,6 +25,9 @@
               <a class="card-footer-item has-text-dark" @click="queue_add">
                 <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
               </a>
+              <a class="card-footer-item has-text-dark" @click="queue_add_next">
+                <span class="icon"><i class="mdi mdi-playlist-play mdi-18px"></i></span> <span>Add Next</span>
+              </a>
               <a class="card-footer-item has-text-dark" @click="play">
                 <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
               </a>
@@ -69,6 +72,13 @@ export default {
       )
     },
 
+    queue_add_next: function () {
+      this.show_details_modal = false
+      webapi.queue_add_next(this.playlist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
     open_playlist: function () {
       this.show_details_modal = false
       this.$router.push({ path: '/playlists/' + this.playlist.id })

web-src/src/components/ListItemTrack.vue

@@ -66,6 +66,9 @@
               <a class="card-footer-item has-text-dark" @click="queue_add">
                 <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
               </a>
+              <a class="card-footer-item has-text-dark" @click="queue_add_next">
+                <span class="icon"><i class="mdi mdi-playlist-play mdi-18px"></i></span> <span>Add Next</span>
+              </a>
               <a class="card-footer-item has-text-dark" @click="play_track">
                 <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
               </a>
@@ -119,6 +122,13 @@ export default {
       )
     },
 
+    queue_add_next: function () {
+      this.show_details_modal = false
+      webapi.queue_add_next(this.track.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
     open_album: function () {
       this.show_details_modal = false
       if (this.track.media_kind === 'podcast') {

web-src/src/components/SpotifyListItemAlbum.vue

@@ -36,6 +36,9 @@
                 <a class="card-footer-item has-text-dark" @click="queue_add">
                   <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
                 </a>
+                <a class="card-footer-item has-text-dark" @click="queue_add_next">
+                  <span class="icon"><i class="mdi mdi-playlist-play mdi-18px"></i></span> <span>Add Next</span>
+                </a>
                 <a class="card-footer-item has-text-dark" @click="play">
                   <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
                 </a>
@@ -81,6 +84,13 @@ export default {
       this.show_details_modal = false
     },
 
+    queue_add_next: function () {
+      webapi.queue_add_next(this.album.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+      this.show_details_modal = false
+    },
+
     show_details: function () {
       this.show_details_modal = true
     },

web-src/src/components/SpotifyListItemArtist.vue

@@ -31,6 +31,9 @@
                 <a class="card-footer-item has-text-dark" @click="queue_add">
                   <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
                 </a>
+                <a class="card-footer-item has-text-dark" @click="queue_add_next">
+                  <span class="icon"><i class="mdi mdi-playlist-play mdi-18px"></i></span> <span>Add Next</span>
+                </a>
                 <a class="card-footer-item has-text-dark" @click="play">
                   <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
                 </a>
@@ -75,6 +78,13 @@ export default {
       this.show_details_modal = false
     },
 
+    queue_add_next: function () {
+      webapi.queue_add_next(this.artist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Artist tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+      this.show_details_modal = false
+    },
+
     show_details: function () {
       this.show_details_modal = true
     },

web-src/src/components/SpotifyListItemPlaylist.vue

@@ -36,6 +36,9 @@
                 <a class="card-footer-item has-text-dark" @click="queue_add">
                   <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
                 </a>
+                <a class="card-footer-item has-text-dark" @click="queue_add_next">
+                  <span class="icon"><i class="mdi mdi-playlist-play mdi-18px"></i></span> <span>Add Next</span>
+                </a>
                 <a class="card-footer-item has-text-dark" @click="play">
                   <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
                 </a>
@@ -80,6 +83,13 @@ export default {
       this.show_details_modal = false
     },
 
+    queue_add_next: function () {
+      webapi.queue_add_next(this.playlist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Playlist tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+      this.show_details_modal = false
+    },
+
     show_details: function () {
       this.show_details_modal = true
     },

web-src/src/components/SpotifyListItemTrack.vue

@@ -51,6 +51,9 @@
                 <a class="card-footer-item has-text-dark" @click="queue_add">
                   <span class="icon"><i class="mdi mdi-playlist-plus mdi-18px"></i></span> <span>Add</span>
                 </a>
+                <a class="card-footer-item has-text-dark" @click="queue_add_next">
+                  <span class="icon"><i class="mdi mdi-playlist-play mdi-18px"></i></span> <span>Add Next</span>
+                </a>
                 <a class="card-footer-item has-text-dark" @click="play">
                   <span class="icon"><i class="mdi mdi-play mdi-18px"></i></span> <span>Play</span>
                 </a>
@@ -95,6 +98,13 @@ export default {
       this.show_details_modal = false
     },
 
+    queue_add_next: function () {
+      webapi.queue_add_next(this.track.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Track appended to queue', type: 'info', timeout: 2000 })
+      )
+      this.show_details_modal = false
+    },
+
     show_details: function () {
       this.show_details_modal = true
     },

web-src/src/webapi/index.js

@@ -45,6 +45,14 @@ export default {
     return axios.post('/api/queue/items/add?uris=' + uri)
   },
 
+  queue_add_next (uri) {
+    var position = 0
+    if (store.getters.now_playing && store.getters.now_playing.id) {
+      position = store.getters.now_playing.position + 1
+    }
+    return axios.post('/api/queue/items/add?uris=' + uri + '&position=' + position)
+  },
+
   player_status () {
     return axios.get('/api/player')
   },