Skip to content
Snippets Groups Projects
Verified Commit d15fefe7 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Leverage new transcode endpoint in player

parent 1cfdf31e
No related branches found
No related tags found
No related merge requests found
export default {
formats: [
// 'audio/ogg',
'audio/mpeg'
],
formatsMap: {
'audio/ogg': 'ogg',
'audio/mpeg': 'mp3'
}
}
<template> <template>
<audio <audio
ref="audio" ref="audio"
:src="url"
@error="errored" @error="errored"
@progress="updateLoad"
@loadeddata="loaded" @loadeddata="loaded"
@durationchange="updateDuration"
@timeupdate="updateProgress" @timeupdate="updateProgress"
@ended="ended" @ended="ended"
preload> preload>
<source v-for="src in srcs" :src="src.url" :type="src.type">
</audio> </audio>
</template> </template>
<script> <script>
import {mapState} from 'vuex' import {mapState} from 'vuex'
import backend from '@/audio/backend'
import url from '@/utils/url' import url from '@/utils/url'
import formats from '@/audio/formats'
// import logger from '@/logging' // import logger from '@/logging'
...@@ -34,31 +33,43 @@ export default { ...@@ -34,31 +33,43 @@ export default {
volume: state => state.player.volume, volume: state => state.player.volume,
looping: state => state.player.looping looping: state => state.player.looping
}), }),
url: function () { srcs: function () {
let file = this.track.files[0] let file = this.track.files[0]
if (!file) { if (!file) {
this.$store.dispatch('player/trackErrored') this.$store.dispatch('player/trackErrored')
return null return []
}
let sources = [
{type: file.mimetype, url: file.path}
]
formats.formats.forEach(f => {
if (f !== file.mimetype) {
let format = formats.formatsMap[f]
let url = `/api/v1/trackfiles/transcode/?track_file=${file.id}&to=${format}`
sources.push({type: f, url: url})
} }
let path = backend.absoluteUrl(file.path) })
if (this.$store.state.auth.authenticated) { if (this.$store.state.auth.authenticated) {
// we need to send the token directly in url // we need to send the token directly in url
// so authentication can be checked by the backend // so authentication can be checked by the backend
// because for audio files we cannot use the regular Authentication // because for audio files we cannot use the regular Authentication
// header // header
path = url.updateQueryString(path, 'jwt', this.$store.state.auth.token) sources.forEach(e => {
e.url = url.updateQueryString(e.url, 'jwt', this.$store.state.auth.token)
})
} }
return path return sources
} }
}, },
methods: { methods: {
errored: function () { errored: function () {
this.$store.dispatch('player/trackErrored') this.$store.dispatch('player/trackErrored')
}, },
updateLoad: function () { updateDuration: function (e) {
this.$store.commit('player/duration', this.$refs.audio.duration)
}, },
loaded: function () { loaded: function () {
this.$refs.audio.volume = this.volume
if (this.isCurrent) { if (this.isCurrent) {
this.$store.commit('player/duration', this.$refs.audio.duration) this.$store.commit('player/duration', this.$refs.audio.duration)
if (this.startTime) { if (this.startTime) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment