From c97f94fec2f89364351638ddfd87489c3bf84b43 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Tue, 6 Nov 2018 21:44:01 +0100
Subject: [PATCH] [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      |  6 +----
 web-src/src/components/ListItemArtist.vue     |  6 +----
 web-src/src/components/ListItemGenre.vue      | 18 +++++++--------
 web-src/src/components/ListItemPlaylist.vue   |  6 +----
 web-src/src/components/ListItemQueueItem.vue  |  2 +-
 web-src/src/components/ListItemTrack.vue      | 12 ++--------
 .../src/components/SpotifyListItemAlbum.vue   |  6 +----
 .../src/components/SpotifyListItemArtist.vue  |  6 +----
 .../components/SpotifyListItemPlaylist.vue    |  6 +----
 .../src/components/SpotifyListItemTrack.vue   |  6 +----
 web-src/src/pages/PageAlbum.vue               | 22 +++++++++----------
 web-src/src/pages/PageArtist.vue              | 11 ++--------
 web-src/src/pages/PageAudiobook.vue           |  6 +----
 web-src/src/pages/PageGenre.vue               | 11 ++--------
 web-src/src/pages/PagePlaylist.vue            | 11 ++--------
 web-src/src/pages/PagePodcast.vue             |  6 +----
 web-src/src/pages/PageTracks.vue              | 11 ++--------
 web-src/src/pages/SpotifyPageAlbum.vue        | 11 ++--------
 web-src/src/pages/SpotifyPagePlaylist.vue     | 11 ++--------
 web-src/src/webapi/index.js                   | 14 ++++++++++--
 20 files changed, 55 insertions(+), 133 deletions(-)

diff --git a/web-src/src/components/ListItemAlbum.vue b/web-src/src/components/ListItemAlbum.vue
index 70bb8461..91ed52d8 100644
--- a/web-src/src/components/ListItemAlbum.vue
+++ b/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 () {
diff --git a/web-src/src/components/ListItemArtist.vue b/web-src/src/components/ListItemArtist.vue
index 58b733c7..795de846 100644
--- a/web-src/src/components/ListItemArtist.vue
+++ b/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 () {
diff --git a/web-src/src/components/ListItemGenre.vue b/web-src/src/components/ListItemGenre.vue
index 09190ff6..e0675b92 100644
--- a/web-src/src/components/ListItemGenre.vue
+++ b/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.library_genre(this.genre.name).then(({ data }) =>
+        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 })
+        )
       )
-      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 })
+        )
       )
-      this.$store.dispatch('add_notification', { text: 'Genre albums playing next', type: 'info', timeout: 1500 })
     },
 
     open_genre: function () {
diff --git a/web-src/src/components/ListItemPlaylist.vue b/web-src/src/components/ListItemPlaylist.vue
index efdeabd1..1adf756b 100644
--- a/web-src/src/components/ListItemPlaylist.vue
+++ b/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 () {
diff --git a/web-src/src/components/ListItemQueueItem.vue b/web-src/src/components/ListItemQueueItem.vue
index 78663d15..b7b4577a 100644
--- a/web-src/src/components/ListItemQueueItem.vue
+++ b/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 })
     }
   }
 }
diff --git a/web-src/src/components/ListItemTrack.vue b/web-src/src/components/ListItemTrack.vue
index 126315f9..ef1ae984 100644
--- a/web-src/src/components/ListItemTrack.vue
+++ b/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 () {
diff --git a/web-src/src/components/SpotifyListItemAlbum.vue b/web-src/src/components/SpotifyListItemAlbum.vue
index a138921d..09fb82ed 100644
--- a/web-src/src/components/SpotifyListItemAlbum.vue
+++ b/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 () {
diff --git a/web-src/src/components/SpotifyListItemArtist.vue b/web-src/src/components/SpotifyListItemArtist.vue
index c4ddfe0f..404e67f7 100644
--- a/web-src/src/components/SpotifyListItemArtist.vue
+++ b/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 () {
diff --git a/web-src/src/components/SpotifyListItemPlaylist.vue b/web-src/src/components/SpotifyListItemPlaylist.vue
index bc0ff9a4..c4688d41 100644
--- a/web-src/src/components/SpotifyListItemPlaylist.vue
+++ b/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 () {
diff --git a/web-src/src/components/SpotifyListItemTrack.vue b/web-src/src/components/SpotifyListItemTrack.vue
index d65038df..a4407b72 100644
--- a/web-src/src/components/SpotifyListItemTrack.vue
+++ b/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 () {
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index dae4f2d6..4992e870 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/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">
-      <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 class="buttons is-centered">
+        <a class="button is-small is-dark is-rounded" @click="play">
+          <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)
     }
   }
 }
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 1e651ec9..f6ac1b54 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/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)
     }
   }
 }
diff --git a/web-src/src/pages/PageAudiobook.vue b/web-src/src/pages/PageAudiobook.vue
index c6499ff1..d54adf6a 100644
--- a/web-src/src/pages/PageAudiobook.vue
+++ b/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)
     }
   }
 }
diff --git a/web-src/src/pages/PageGenre.vue b/web-src/src/pages/PageGenre.vue
index 4335518f..aefda285 100644
--- a/web-src/src/pages/PageGenre.vue
+++ b/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)
     }
   }
 }
diff --git a/web-src/src/pages/PagePlaylist.vue b/web-src/src/pages/PagePlaylist.vue
index 74ebb168..bdddadd4 100644
--- a/web-src/src/pages/PagePlaylist.vue
+++ b/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)
     }
   }
 }
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index f874ffce..d5b111a2 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/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)
     }
   }
 }
diff --git a/web-src/src/pages/PageTracks.vue b/web-src/src/pages/PageTracks.vue
index a27c416f..11eeacd8 100644
--- a/web-src/src/pages/PageTracks.vue
+++ b/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)
     }
   }
 }
diff --git a/web-src/src/pages/SpotifyPageAlbum.vue b/web-src/src/pages/SpotifyPageAlbum.vue
index c60a8649..307cd98b 100644
--- a/web-src/src/pages/SpotifyPageAlbum.vue
+++ b/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)
     }
   }
 }
diff --git a/web-src/src/pages/SpotifyPagePlaylist.vue b/web-src/src/pages/SpotifyPagePlaylist.vue
index b83925e8..801656d0 100644
--- a/web-src/src/pages/SpotifyPagePlaylist.vue
+++ b/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)
     }
   }
 }
diff --git a/web-src/src/webapi/index.js b/web-src/src/webapi/index.js
index a539e59d..eac00331 100644
--- a/web-src/src/webapi/index.js
+++ b/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) {