[web-src] Starting playback now explicitely turns shuffle mode on/off

Additionally some small refactoring to make starting playback for an uri
easier.

web-src/src/components/ListItemAlbum.vue

@@ -67,11 +67,7 @@ export default {
   methods: {
     play: function () {
       this.show_details_modal = false
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.album.uri).then(() =>
-          webapi.player_play()
-        )
-      )
+      webapi.player_play_uri(this.album.uri, false)
     },
 
     queue_add: function () {

web-src/src/components/ListItemArtist.vue

@@ -62,11 +62,7 @@ export default {
   methods: {
     play: function () {
       this.show_details_modal = false
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.artist.uri).then(() =>
-          webapi.player_play()
-        )
-      )
+      webapi.player_play_uri(this.artist.uri, false)
     },
 
     queue_add: function () {

web-src/src/components/ListItemGenre.vue

@@ -64,29 +64,27 @@ export default {
   methods: {
     play: function () {
       this.show_details_modal = false
-      webapi.queue_clear().then(() =>
       webapi.library_genre(this.genre.name).then(({ data }) =>
-          webapi.queue_add(data.albums.items.map(a => a.uri).join(',')).then(() =>
-            webapi.player_play()
-          )
-        )
+        webapi.player_play_uri(data.albums.items.map(a => a.uri).join(','), false)
       )
     },
 
     queue_add: function () {
       this.show_details_modal = false
       webapi.library_genre(this.genre.name).then(({ data }) =>
-        webapi.queue_add(data.albums.items.map(a => a.uri).join(','))
-      )
+        webapi.queue_add(data.albums.items.map(a => a.uri).join(',')).then(() =>
           this.$store.dispatch('add_notification', { text: 'Genre albums appended to queue', type: 'info', timeout: 1500 })
+        )
+      )
     },
 
     queue_add_next: function () {
       this.show_details_modal = false
       webapi.library_genre(this.genre.name).then(({ data }) =>
-        webapi.queue_add_next(data.albums.items.map(a => a.uri).join(','))
-      )
+        webapi.queue_add_next(data.albums.items.map(a => a.uri).join(',')).then(() =>
           this.$store.dispatch('add_notification', { text: 'Genre albums playing next', type: 'info', timeout: 1500 })
+        )
+      )
     },
 
     open_genre: function () {

web-src/src/components/ListItemPlaylist.vue

@@ -58,11 +58,7 @@ export default {
   methods: {
     play: function () {
       this.show_details_modal = false
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.playlist.uri).then(() =>
-          webapi.player_play()
-        )
-      )
+      webapi.player_play_uri(this.playlist.uri, false)
     },
 
     queue_add: function () {

web-src/src/components/ListItemQueueItem.vue

@@ -107,7 +107,7 @@ export default {
 
     play: function () {
       this.show_details_modal = false
-      webapi.player_playid(this.item.id)
+      webapi.player_play({ 'item_id': this.item.id })
     }
   }
 }

web-src/src/components/ListItemTrack.vue

@@ -99,20 +99,12 @@ export default {
   methods: {
     play: function () {
       this.show_details_modal = false
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.context_uri).then(() =>
-          webapi.player_playpos(this.position)
-        )
-      )
+      webapi.player_play_uri(this.context_uri, false, this.position)
     },
 
     play_track: function () {
       this.show_details_modal = false
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.track.uri).then(() =>
-          webapi.player_play()
-        )
-      )
+      webapi.player_play_uri(this.track.uri, false)
     },
 
     queue_add: function () {

web-src/src/components/SpotifyListItemAlbum.vue

@@ -68,12 +68,8 @@ export default {
 
   methods: {
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.album.uri).then(() =>
-          webapi.player_play()
-        )
-      )
       this.show_details_modal = false
+      webapi.player_play_uri(this.album.uri, false)
     },
 
     queue_add: function () {

web-src/src/components/SpotifyListItemArtist.vue

@@ -63,12 +63,8 @@ export default {
 
   methods: {
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.artist.uri).then(() =>
-          webapi.player_play()
-        )
-      )
       this.show_details_modal = false
+      webapi.player_play_uri(this.artist.uri, false)
     },
 
     queue_add: function () {

web-src/src/components/SpotifyListItemPlaylist.vue

@@ -68,12 +68,8 @@ export default {
 
   methods: {
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.playlist.uri).then(() =>
-          webapi.player_play()
-        )
-      )
       this.show_details_modal = false
+      webapi.player_play_uri(this.playlist.uri, false)
     },
 
     queue_add: function () {

web-src/src/components/SpotifyListItemTrack.vue

@@ -83,12 +83,8 @@ export default {
 
   methods: {
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.context_uri).then(() =>
-          webapi.player_playpos(this.position)
-        )
-      )
       this.show_details_modal = false
+      webapi.player_play_uri(this.context_uri, false, this.position)
     },
 
     queue_add: function () {

web-src/src/pages/PageAlbum.vue

@@ -5,12 +5,16 @@
       <a class="title is-4 has-text-link has-text-weight-normal" @click="open_artist">{{ album.artist }}</a>
     </template>
     <template slot="heading-right">
+      <div class="buttons is-centered">
         <a class="button is-small is-dark is-rounded" @click="play">
-        <span class="icon">
-          <i class="mdi mdi-play"></i>
-        </span>
-        <span>Play</span>
+          <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
         </a>
+        <!--
+        <a class="button is-small is-dark is-rounded" @click="play">
+          <span class="icon"><i class="mdi mdi-play"></i></span> <span>Play</span>
+        </a>
+        -->
+      </div>
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
@@ -58,11 +62,7 @@ export default {
     },
 
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.album.uri).then(() =>
-          webapi.player_play()
-        )
-      )
+      webapi.player_play_uri(this.album.uri, true)
     }
   }
 }

web-src/src/pages/PageArtist.vue

@@ -5,10 +5,7 @@
     </template>
     <template slot="heading-right">
       <a class="button is-small is-dark is-rounded" @click="play">
-        <span class="icon">
-          <i class="mdi mdi-play"></i>
-        </span>
-        <span>Play</span>
+        <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
       </a>
     </template>
     <template slot="content">
@@ -56,11 +53,7 @@ export default {
     },
 
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.albums.items.map(a => a.uri).join(',')).then(() =>
-          webapi.player_play()
-        )
-      )
+      webapi.player_play_uri(this.albums.items.map(a => a.uri).join(','), true)
     }
   }
 }

web-src/src/pages/PageAudiobook.vue

@@ -53,11 +53,7 @@ export default {
 
   methods: {
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.album.uri).then(() =>
-          webapi.player_play()
-        )
-      )
+      webapi.player_play_uri(this.album.uri, false)
     }
   }
 }

web-src/src/pages/PageGenre.vue

@@ -9,10 +9,7 @@
       </template>
       <template slot="heading-right">
         <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon">
-            <i class="mdi mdi-play"></i>
-          </span>
-          <span>Play</span>
+          <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
         </a>
       </template>
       <template slot="content">
@@ -69,11 +66,7 @@ export default {
 
   methods: {
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.genreAlbums.items.map(a => a.uri).join(',')).then(() =>
-          webapi.player_play()
-        )
-      )
+      webapi.player_play_uri(this.genreAlbums.items.map(a => a.uri).join(','), true)
     }
   }
 }

web-src/src/pages/PagePlaylist.vue

@@ -5,10 +5,7 @@
     </template>
     <template slot="heading-right">
       <a class="button is-small is-dark is-rounded" @click="play">
-        <span class="icon">
-          <i class="mdi mdi-play"></i>
-        </span>
-        <span>Play</span>
+        <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
       </a>
     </template>
     <template slot="content">
@@ -52,11 +49,7 @@ export default {
 
   methods: {
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.playlist.uri).then(() =>
-          webapi.player_play()
-        )
-      )
+      webapi.player_play_uri(this.playlist.uri, true)
     }
   }
 }

web-src/src/pages/PagePodcast.vue

@@ -52,11 +52,7 @@ export default {
 
   methods: {
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.album.uri).then(() =>
-          webapi.player_play()
-        )
-      )
+      webapi.player_play_uri(this.album.uri, false)
     }
   }
 }

web-src/src/pages/PageTracks.vue

@@ -6,10 +6,7 @@
       </template>
       <template slot="heading-right">
         <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon">
-            <i class="mdi mdi-play"></i>
-          </span>
-          <span>Play</span>
+          <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
         </a>
       </template>
       <template slot="content">
@@ -59,11 +56,7 @@ export default {
     },
 
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.tracks.items.map(a => a.uri).join(',')).then(() =>
-          webapi.player_play()
-        )
-      )
+      webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), true)
     }
   }
 }

web-src/src/pages/SpotifyPageAlbum.vue

@@ -6,10 +6,7 @@
     </template>
     <template slot="heading-right">
       <a class="button is-small is-dark is-rounded" @click="play">
-        <span class="icon">
-          <i class="mdi mdi-play"></i>
-        </span>
-        <span>Play</span>
+        <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
       </a>
     </template>
     <template slot="content">
@@ -56,12 +53,8 @@ export default {
     },
 
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.album.uri).then(() =>
-          webapi.player_play()
-        )
-      )
       this.show_details_modal = false
+      webapi.player_play_uri(this.album.uri, true)
     }
   }
 }

web-src/src/pages/SpotifyPagePlaylist.vue

@@ -5,10 +5,7 @@
     </template>
     <template slot="heading-right">
       <a class="button is-small is-dark is-rounded" @click="play">
-        <span class="icon">
-          <i class="mdi mdi-play"></i>
-        </span>
-        <span>Play</span>
+        <span class="icon"><i class="mdi mdi-shuffle"></i></span> <span>Shuffle</span>
       </a>
     </template>
     <template slot="content">
@@ -84,12 +81,8 @@ export default {
     },
 
     play: function () {
-      webapi.queue_clear().then(() =>
-        webapi.queue_add(this.playlist.uri).then(() =>
-          webapi.player_play()
-        )
-      )
       this.show_details_modal = false
+      webapi.player_play_uri(this.playlist.uri, true)
     }
   }
 }

web-src/src/webapi/index.js

@@ -57,8 +57,18 @@ export default {
     return axios.get('/api/player')
   },
 
-  player_play () {
-    return axios.put('/api/player/play')
+  player_play_uri (uris, shuffle, position = 0) {
+    return this.queue_clear().then(() =>
+      this.player_shuffle(shuffle).then(() =>
+        this.queue_add(uris).then(() =>
+          this.player_play({ 'position': position })
+        )
+      )
+    )
+  },
+
+  player_play (options = {}) {
+    return axios.put('/api/player/play', undefined, { params: options })
   },
 
   player_playpos (position) {