Verified Commit 38a45590 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

PlayButton is now able to handle playlists

parent bf6fe44b
......@@ -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) {
logger.default.error('You have to provide either a track or tracks property')
if (!this.playlist && !this.track && !this.tracks) {
logger.default.error('You have to provide either a track playlist or tracks property')
}
},
mounted () {
......@@ -45,19 +47,40 @@ export default {
}
},
computed: {
playableTracks () {
let tracks
playable () {
if (this.track) {
tracks = [this.track]
} else {
tracks = this.tracks
return true
} else if (this.tracks) {
return this.tracks.length > 0
} else if (this.playlist) {
return true
}
return tracks.filter(e => {
return e.files.length > 0
})
return false
}
},
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})
if (next) {
this.$store.dispatch('queue/next')
}
this.getPlayableTracks().then((tracks) => {
self.$store.dispatch('queue/appendMany', {tracks: tracks, index: self.$store.state.queue.currentIndex + 1})
if (next) {
self.$store.dispatch('queue/next')
}
})
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment