From d15fefe730484f4bb042547eeab20844a6f1f9db Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sun, 18 Feb 2018 23:50:08 +0100
Subject: [PATCH] Leverage new transcode endpoint in player
---
front/src/audio/formats.js | 10 +++++++++
front/src/components/audio/Track.vue | 33 ++++++++++++++++++----------
2 files changed, 32 insertions(+), 11 deletions(-)
create mode 100644 front/src/audio/formats.js
diff --git a/front/src/audio/formats.js b/front/src/audio/formats.js
new file mode 100644
index 00000000..f6e2157a
--- /dev/null
+++ b/front/src/audio/formats.js
@@ -0,0 +1,10 @@
+export default {
+ formats: [
+ // 'audio/ogg',
+ 'audio/mpeg'
+ ],
+ formatsMap: {
+ 'audio/ogg': 'ogg',
+ 'audio/mpeg': 'mp3'
+ }
+}
diff --git a/front/src/components/audio/Track.vue b/front/src/components/audio/Track.vue
index a513c468..d8dcaff9 100644
--- a/front/src/components/audio/Track.vue
+++ b/front/src/components/audio/Track.vue
@@ -1,21 +1,20 @@
<template>
<audio
ref="audio"
- :src="url"
@error="errored"
- @progress="updateLoad"
@loadeddata="loaded"
+ @durationchange="updateDuration"
@timeupdate="updateProgress"
@ended="ended"
preload>
-
+ <source v-for="src in srcs" :src="src.url" :type="src.type">
</audio>
</template>
<script>
import {mapState} from 'vuex'
-import backend from '@/audio/backend'
import url from '@/utils/url'
+import formats from '@/audio/formats'
// import logger from '@/logging'
@@ -34,31 +33,43 @@ export default {
volume: state => state.player.volume,
looping: state => state.player.looping
}),
- url: function () {
+ srcs: function () {
let file = this.track.files[0]
if (!file) {
this.$store.dispatch('player/trackErrored')
- return null
+ return []
}
- let path = backend.absoluteUrl(file.path)
+ 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})
+ }
+ })
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
- 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: {
errored: function () {
this.$store.dispatch('player/trackErrored')
},
- updateLoad: function () {
-
+ updateDuration: function (e) {
+ this.$store.commit('player/duration', this.$refs.audio.duration)
},
loaded: function () {
+ this.$refs.audio.volume = this.volume
if (this.isCurrent) {
this.$store.commit('player/duration', this.$refs.audio.duration)
if (this.startTime) {
--
GitLab