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,
@@ -26,6 +28,66 @@ export default {
     }
   },
   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 }),
@@ -65,52 +127,6 @@ export default {
         this.observeProgress(true)
       }
     },
-  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.track.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.track.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: {
     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)
       }
     }
   },