Fetch upload data from tracks when missing to avoid unecessary transcoding

front/src/components/audio/Track.vue

@@ -7,6 +7,7 @@ import {mapState} from 'vuex'
 import _ from '@/lodash'
 import url from '@/utils/url'
 import {Howl} from 'howler'
+import axios from 'axios'
 
 // import logger from '@/logging'
 
@@ -19,6 +20,7 @@ export default {
   },
   data () {
     return {
+      trackData: this.track,
       sourceErrors: 0,
       sound: null,
       isUpdatingTime: false,
@@ -27,42 +29,16 @@ export default {
   },
   mounted () {
     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)
+    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', {})
       })
-      },
-      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)
+    } else {
+      this.setupSound()
     }
   },
   destroyed () {
@@ -78,7 +54,7 @@ export default {
       looping: state => state.player.looping
     }),
     srcs: function () {
-      let sources = this.track.uploads.map(u => {
+      let sources = this.trackData.uploads.map(u => {
         return {
           type: u.extension,
           url: this.$store.getters['instance/absoluteUrl'](u.listen_url),
@@ -90,7 +66,7 @@ export default {
       sources.push({
         type: 'mp3',
         url: url.updateQueryString(
-          this.$store.getters['instance/absoluteUrl'](this.track.listen_url),
+          this.$store.getters['instance/absoluteUrl'](this.trackData.listen_url),
           'to',
           'mp3'
         )
@@ -111,6 +87,46 @@ export default {
     }
   },
   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;
@@ -178,7 +194,7 @@ export default {
         this.sound.seek(0)
         this.sound.play()
       } else {
-        this.$store.dispatch('player/trackEnded', this.track)
+        this.$store.dispatch('player/trackEnded', this.trackData)
       }
     }
   },