PlayButton is now able to handle playlists

front/src/components/audio/PlayButton.vue

@@ -3,11 +3,11 @@
     <button
       title="Add to current queue"
       @click="add"
-      :class="['ui', {loading: isLoading}, {'mini': discrete}, {disabled: playableTracks.length === 0}, 'button']">
+      :class="['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}, 'button']">
       <i class="ui play icon"></i>
       <template v-if="!discrete"><slot>Play</slot></template>
     </button>
-    <div v-if="!discrete" class="ui floating dropdown icon button">
+    <div v-if="!discrete" :class="['ui', {disabled: !playable}, 'floating', 'dropdown', 'icon', 'button']">
       <i class="dropdown icon"></i>
       <div class="menu">
         <div class="item"@click="add"><i class="plus icon"></i> Add to queue</div>
@@ -19,6 +19,7 @@
 </template>
 
 <script>
+import axios from 'axios'
 import logger from '@/logging'
 import jQuery from 'jquery'
 
@@ -27,6 +28,7 @@ export default {
     // we can either have a single or multiple tracks to play when clicked
     tracks: {type: Array, required: false},
     track: {type: Object, required: false},
+    playlist: {type: Object, required: false},
     discrete: {type: Boolean, default: false}
   },
   data () {
@@ -35,8 +37,8 @@ export default {
     }
   },
   created () {
-    if (!this.track & !this.tracks) {
+    if (!this.playlist && !this.track && !this.tracks) {
-      logger.default.error('You have to provide either a track or tracks property')
+      logger.default.error('You have to provide either a track playlist or tracks property')
     }
   },
   mounted () {
@@ -45,19 +47,40 @@ export default {
     }
   },
   computed: {
-    playableTracks () {
+    playable () {
-      let tracks
       if (this.track) {
-        tracks = [this.track]
+        return true
-      } else {
+      } else if (this.tracks) {
-        tracks = this.tracks
+        return this.tracks.length > 0
+      } else if (this.playlist) {
+        return true
       }
-      return tracks.filter(e => {
+      return false
-        return e.files.length > 0
-      })
     }
   },
   methods: {
+    getPlayableTracks () {
+      let self = this
+      let getTracks = new Promise((resolve, reject) => {
+        if (self.track) {
+          resolve([self.track])
+        } else if (self.tracks) {
+          resolve(self.tracks)
+        } else if (self.playlist) {
+          let url = 'playlists/' + self.playlist.id + '/'
+          axios.get(url + 'tracks').then((response) => {
+            resolve(response.data.results.map(plt => {
+              return plt.track
+            }))
+          })
+        }
+      })
+      return getTracks.then((tracks) => {
+        return tracks.filter(e => {
+          return e.files.length > 0
+        })
+      })
+    },
     triggerLoad () {
       let self = this
       this.isLoading = true
@@ -66,15 +89,21 @@ export default {
       }, 500)
     },
     add () {
+      let self = this
       this.triggerLoad()
-      this.$store.dispatch('queue/appendMany', {tracks: this.playableTracks})
+      this.getPlayableTracks().then((tracks) => {
+        self.$store.dispatch('queue/appendMany', {tracks: tracks})
+      })
     },
     addNext (next) {
+      let self = this
       this.triggerLoad()
-      this.$store.dispatch('queue/appendMany', {tracks: this.playableTracks, index: this.$store.state.queue.currentIndex + 1})
+      this.getPlayableTracks().then((tracks) => {
+        self.$store.dispatch('queue/appendMany', {tracks: tracks, index: self.$store.state.queue.currentIndex + 1})
         if (next) {
-        this.$store.dispatch('queue/next')
+          self.$store.dispatch('queue/next')
         }
+      })
     }
   }
 }