diff --git a/front/src/components/audio/Track.vue b/front/src/components/audio/Track.vue index 888a81c007cd8e1ceb401786d380abde83cfc975..2e0f8c421a0e780247224b93764b55fd476ae541 100644 --- a/front/src/components/audio/Track.vue +++ b/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) - }) - }, - 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) + 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 () { @@ -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) } } },