Skip to content
Snippets Groups Projects
PlayButton.vue 3.69 KiB
Newer Older
  • Learn to ignore specific revisions
  •   <div :title="title" :class="['ui', {'tiny': discrete}, 'buttons']">
    
          :title="$t('Add to current queue')"
    
          :class="['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}, 'button']">
    
          <template v-if="!discrete"><slot><i18next path="Play"/></slot></template>
    
        <div v-if="!discrete" :class="['ui', {disabled: !playable}, 'floating', 'dropdown', 'icon', 'button']">
    
          <i class="dropdown icon"></i>
          <div class="menu">
    
            <div class="item" :disabled="!playable" @click="add"><i class="plus icon"></i><i18next path="Add to queue"/></div>
            <div class="item" :disabled="!playable" @click="addNext()"><i class="step forward icon"></i><i18next path="Play next"/></div>
            <div class="item" :disabled="!playable" @click="addNext(true)"><i class="arrow down icon"></i><i18next path="Play now"/></div>
    
    import axios from 'axios'
    
    import logger from '@/logging'
    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},
    
        playlist: {type: Object, required: false},
    
        discrete: {type: Boolean, default: false}
      },
    
      data () {
        return {
          isLoading: false
        }
      },
    
        if (!this.playlist && !this.track && !this.tracks) {
          logger.default.error('You have to provide either a track playlist or tracks property')
    
        title () {
          if (this.playable) {
            return this.$t('Play immediatly')
          } else {
            if (this.track) {
              return this.$t('This track is not imported and cannot be played')
            }
          }
        },
    
            return this.track.files.length > 0
    
          } else if (this.tracks) {
            return this.tracks.length > 0
          } else if (this.playlist) {
            return true
    
        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
          setTimeout(() => {
            self.isLoading = false
          }, 500)
        },
    
          this.getPlayableTracks().then((tracks) => {
            self.$store.dispatch('queue/appendMany', {tracks: tracks})
          })
    
          let wasEmpty = this.$store.state.queue.tracks.length === 0
    
          this.getPlayableTracks().then((tracks) => {
            self.$store.dispatch('queue/appendMany', {tracks: tracks, index: self.$store.state.queue.currentIndex + 1})
    
              self.$store.dispatch('queue/next')
            }
          })
    
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    i {
      cursor: pointer;
    }
    </style>