Fix #572: Preload next track in queue

changes/changelog.d/572.enhancement

+Preload next track in queue (#572)

front/src/components/audio/Track.vue

-<template>
-  <i />
-</template>
-
-<script>
-import {mapState} from 'vuex'
-import _ from '@/lodash'
-import url from '@/utils/url'
-import {Howl} from 'howler'
-import axios from 'axios'
-
-// import logger from '@/logging'
-
-export default {
-  props: {
-    track: {type: Object},
-    isCurrent: {type: Boolean, default: false},
-    startTime: {type: Number, default: 0},
-    autoplay: {type: Boolean, default: false}
-  },
-  data () {
-    return {
-      trackData: this.track,
-      sourceErrors: 0,
-      sound: null,
-      isUpdatingTime: false,
-      progressInterval: null
-    }
-  },
-  mounted () {
-    let self = this
-    if (!this.trackData.uploads.length || this.trackData.uploads.length === 0) {
-      // we don't have upload informations for this track, we need to fetch it
-      axios.get(`tracks/${this.trackData.id}/`).then((response) => {
-        self.trackData = response.data
-        self.setupSound()
-      }, error => {
-        self.$emit('errored', {})
-      })
-    } else {
-      this.setupSound()
-    }
-  },
-  destroyed () {
-    this.observeProgress(false)
-    this.sound.unload()
-  },
-  computed: {
-    ...mapState({
-      playing: state => state.player.playing,
-      currentTime: state => state.player.currentTime,
-      duration: state => state.player.duration,
-      volume: state => state.player.volume,
-      looping: state => state.player.looping
-    }),
-    srcs: function () {
-      let sources = this.trackData.uploads.map(u => {
-        return {
-          type: u.extension,
-          url: this.$store.getters['instance/absoluteUrl'](u.listen_url),
-        }
-      })
-      // We always add a transcoded MP3 src at the end
-      // because transcoding is expensive, but we want browsers that do
-      // not support other codecs to be able to play it :)
-      sources.push({
-        type: 'mp3',
-        url: url.updateQueryString(
-          this.$store.getters['instance/absoluteUrl'](this.trackData.listen_url),
-          'to',
-          'mp3'
-        )
-      })
-      if (this.$store.state.auth.authenticated) {
-        // we need to send the token directly in url
-        // so authentication can be checked by the backend
-        // because for audio files we cannot use the regular Authentication
-        // header
-        sources.forEach(e => {
-          e.url = url.updateQueryString(e.url, 'jwt', this.$store.state.auth.token)
-        })
-      }
-      return sources
-    },
-    updateProgressThrottled () {
-      return _.throttle(this.updateProgress, 250)
-    }
-  },
-  methods: {
-    setupSound () {
-      let self = this
-      this.sound = new Howl({
-        src: this.srcs.map((s) => { return s.url }),
-        format: this.srcs.map((s) => { return s.type }),
-        autoplay: false,
-        loop: false,
-        html5: true,
-        preload: true,
-        volume: this.volume,
-        onend: function () {
-          self.ended()
-        },
-        onunlock: function () {
-          if (this.$store.state.player.playing) {
-            self.sound.play()
-          }
-        },
-        onload: function () {
-          self.$store.commit('player/isLoadingAudio', false)
-          self.$store.commit('player/resetErrorCount')
-          self.$store.commit('player/errored', false)
-          self.$store.commit('player/duration', self.sound.duration())
-          let node = self.sound._sounds[0]._node;
-          node.addEventListener('progress', () => {
-            self.updateBuffer(node)
-          })
-        },
-        onloaderror: function (sound, error) {
-          console.log('Error while playing:', sound, error)
-          self.$emit('errored', {sound, error})
-        },
-      })
-      if (this.autoplay) {
-        self.$store.commit('player/isLoadingAudio', true)
-        this.sound.play()
-        this.$store.commit('player/playing', true)
-        this.observeProgress(true)
-      }
-    },
-    updateBuffer (node) {
-      // from https://github.com/goldfire/howler.js/issues/752#issuecomment-372083163
-      let range = 0;
-      let bf = node.buffered;
-      let time = node.currentTime;
-      try {
-        while(!(bf.start(range) <= time && time <= bf.end(range))) {
-          range += 1;
-        }
-      } catch (IndexSizeError) {
-        return
-      }
-      let loadPercentage
-      let start =  bf.start(range)
-      let end =  bf.end(range)
-      if (range === 0) {
-        // easy case, no user-seek
-        let loadStartPercentage = start / node.duration;
-        let loadEndPercentage = end / node.duration;
-        loadPercentage = loadEndPercentage - loadStartPercentage;
-      } else {
-        let loaded = end - start
-        let remainingToLoad = node.duration - start
-        // user seeked a specific position in the audio, our progress must be
-        // computed based on the remaining portion of the track
-        loadPercentage = loaded / remainingToLoad;
-      }
-      this.$store.commit('player/bufferProgress', loadPercentage * 100)
-    },
-    updateProgress: function () {
-      this.isUpdatingTime = true
-      if (this.sound && this.sound.state() === 'loaded') {
-        this.$store.dispatch('player/updateProgress', this.sound.seek())
-        this.updateBuffer(this.sound._sounds[0]._node)
-      }
-    },
-    observeProgress: function (enable) {
-      let self = this
-      if (enable) {
-        if (self.progressInterval) {
-          clearInterval(self.progressInterval)
-        }
-        self.progressInterval = setInterval(() => {
-          self.updateProgress()
-        }, 1000)
-      } else {
-        clearInterval(self.progressInterval)
-      }
-    },
-    setCurrentTime (t) {
-      if (t < 0 | t > this.duration) {
-        return
-      }
-      if (t === this.sound.seek()) {
-        return
-      }
-      if (t === 0) {
-        this.updateProgressThrottled.cancel()
-      }
-      this.sound.seek(t)
-    },
-    ended: function () {
-      let onlyTrack = this.$store.state.queue.tracks.length === 1
-      if (this.looping === 1 || (onlyTrack && this.looping === 2)) {
-        this.sound.seek(0)
-        this.sound.play()
-      } else {
-        this.$store.dispatch('player/trackEnded', this.trackData)
-      }
-    }
-  },
-  watch: {
-    playing: function (newValue) {
-      if (newValue === true) {
-        this.sound.play()
-      } else {
-        this.sound.pause()
-      }
-      this.observeProgress(newValue)
-    },
-    volume: function (newValue) {
-      this.sound.volume(newValue)
-    },
-    currentTime (newValue) {
-      if (!this.isUpdatingTime) {
-        this.setCurrentTime(newValue)
-      }
-      this.isUpdatingTime = false
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

front/src/lodash.js

@@ -11,4 +11,5 @@ export default {
   throttle: require('lodash/throttle'),
   uniq: require('lodash/uniq'),
   remove: require('lodash/remove'),
+  reverse: require('lodash/reverse'),
 }

front/src/store/index.js

@@ -54,8 +54,7 @@ export default new Vuex.Store({
       paths: [
         'player.looping',
         'player.volume',
-        'player.duration',
-        'player.errored'],
+        'player.duration'],
       filter: (mutation) => {
         return mutation.type.startsWith('player/') && mutation.type !== 'player/currentTime'
       }