Fix #586: The progress bar in the player now display loading state / buffer loading

front/src/components/audio/Track.vue

@@ -44,11 +44,17 @@ export default {
         }
       },
       onload: function () {
+        self.$store.commit('player/isLoadingAudio', false)
         self.$store.commit('player/resetErrorCount')
         self.$store.commit('player/duration', self.sound.duration())
+        let node = self.sound._sounds[0]._node;
+        node.addEventListener('progress', () => {
+          self.updateBuffer(node)
+        })
       }
     })
     if (this.autoplay) {
+      self.$store.commit('player/isLoadingAudio', true)
       this.sound.play()
       this.$store.commit('player/playing', true)
       this.observeProgress(true)
@@ -91,10 +97,40 @@ export default {
     }
   },
   methods: {
+    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) {