PlayButton.vue 5.05 KB
Newer Older
1
<template>
2
  <div :title="title" :class="['ui', {'tiny': discrete}, 'buttons']">
3
    <button
Eliot Berriot's avatar
Eliot Berriot committed
4
      :title="$gettext('Add to current queue')"
5
      @click="addNext(true)"
6
      :disabled="!playable"
7
      :class="['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}, 'button']">
8
      <i class="ui play icon"></i>
9
      <template v-if="!discrete"><slot><translate>Play</translate></slot></template>
10
    </button>
11
    <div v-if="!discrete" :class="['ui', {disabled: !playable}, 'floating', 'dropdown', 'icon', 'button']">
12
13
      <i class="dropdown icon"></i>
      <div class="menu">
14
15
16
        <div class="item" :disabled="!playable" @click="add"><i class="plus icon"></i><translate>Add to queue</translate></div>
        <div class="item" :disabled="!playable" @click="addNext()"><i class="step forward icon"></i><translate>Play next</translate></div>
        <div class="item" :disabled="!playable" @click="addNext(true)"><i class="arrow down icon"></i><translate>Play now</translate></div>
17
18
19
20
21
22
      </div>
    </div>
  </div>
</template>

<script>
23
import axios from 'axios'
24
25
26
27
28
29
30
import jQuery from 'jquery'

export default {
  props: {
    // we can either have a single or multiple tracks to play when clicked
    tracks: {type: Array, required: false},
    track: {type: Object, required: false},
31
    playlist: {type: Object, required: false},
32
33
34
    discrete: {type: Boolean, default: false},
    artist: {type: Number, required: false},
    album: {type: Number, required: false}
35
  },
36
37
38
39
40
  data () {
    return {
      isLoading: false
    }
  },
41
  mounted () {
42
    jQuery(this.$el).find('.ui.dropdown').dropdown()
43
  },
44
  computed: {
45
46
    title () {
      if (this.playable) {
Eliot Berriot's avatar
Eliot Berriot committed
47
        return this.$gettext('Play immediatly')
48
49
      } else {
        if (this.track) {
Eliot Berriot's avatar
Eliot Berriot committed
50
          return this.$gettext('This track is not imported and cannot be played')
51
52
53
        }
      }
    },
54
    playable () {
55
      if (this.track) {
56
        return this.track.files.length > 0
57
58
59
60
      } else if (this.tracks) {
        return this.tracks.length > 0
      } else if (this.playlist) {
        return true
61
62
63
64
      } else if (this.artist) {
        return true
      } else if (this.album) {
        return true
65
      }
66
      return false
67
68
69
    }
  },
  methods: {
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
    getTracksPage (page, params, resolve, tracks) {
      if (page > 10) {
        // it's 10 * 100 tracks already, let's stop here
        resolve(tracks)
      }
      // when fetching artists/or album tracks, sometimes, we may have to fetch
      // multiple pages
      let self = this
      params['page_size'] = 100
      params['page'] = page
      tracks = tracks || []
      axios.get('tracks/', {params: params}).then((response) => {
        response.data.results.forEach(t => {
          tracks.push(t)
        })
        if (response.data.next) {
          self.getTracksPage(page + 1, params, resolve, tracks)
        } else {
          resolve(tracks)
        }
      })
    },
92
93
    getPlayableTracks () {
      let self = this
94
      this.isLoading = true
95
96
97
98
99
100
101
102
103
104
105
106
      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
            }))
          })
107
        } else if (self.artist) {
108
109
          let params = {'artist': self.artist, 'ordering': 'album__release_date,position'}
          self.getTracksPage(1, params, resolve)
110
        } else if (self.album) {
111
112
          let params = {'album': self.album, 'ordering': 'position'}
          self.getTracksPage(1, params, resolve)
113
114
115
        }
      })
      return getTracks.then((tracks) => {
116
117
118
        setTimeout(e => {
          self.isLoading = false
        }, 250)
119
120
121
122
123
        return tracks.filter(e => {
          return e.files.length > 0
        })
      })
    },
124
    add () {
125
126
      let self = this
      this.getPlayableTracks().then((tracks) => {
127
        self.$store.dispatch('queue/appendMany', {tracks: tracks}).then(() => self.addMessage(tracks))
128
      })
129
130
    },
    addNext (next) {
131
      let self = this
132
      let wasEmpty = this.$store.state.queue.tracks.length === 0
133
      this.getPlayableTracks().then((tracks) => {
134
        self.$store.dispatch('queue/appendMany', {tracks: tracks, index: self.$store.state.queue.currentIndex + 1}).then(() => self.addMessage(tracks))
135
136
        let goNext = next && !wasEmpty
        if (goNext) {
137
138
139
          self.$store.dispatch('queue/next')
        }
      })
140
141
142
143
144
    },
    addMessage (tracks) {
      if (tracks.length < 1) {
        return
      }
Eliot Berriot's avatar
Eliot Berriot committed
145
      let msg = this.$ngettext('%{ count } track was added to your queue', '%{ count } tracks were added to your queue', tracks.length)
146
      this.$store.commit('ui/addMessage', {
Eliot Berriot's avatar
Eliot Berriot committed
147
        content: this.$gettextInterpolate(msg, {count: tracks.length}),
148
149
        date: new Date()
      })
150
151
152
153
154
155
156
157
158
159
160
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
i {
  cursor: pointer;
}
</style>