Now use vuex to manage state for player/queue/radios

front/src/components/audio/Track.vue

@@ -0,0 +1,104 @@
+<template>
+  <audio
+    ref="audio"
+    :src="url"
+    @error="errored"
+    @progress="updateLoad"
+    @loadeddata="loaded"
+    @timeupdate="updateProgress"
+    @ended="ended"
+    preload>
+
+  </audio>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import backend from '@/audio/backend'
+import auth from '@/auth'
+import url from '@/utils/url'
+
+// import logger from '@/logging'
+
+export default {
+  props: {
+    track: {type: Object},
+    isCurrent: {type: Boolean, default: false}
+  },
+  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
+    }),
+    url: function () {
+      let file = this.track.files[0]
+      if (!file) {
+        this.$store.dispatch('player/trackErrored')
+        return null
+      }
+      let path = backend.absoluteUrl(file.path)
+      if (auth.user.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', auth.getAuthToken())
+      }
+      return path
+    }
+  },
+  methods: {
+    errored: function () {
+      this.$store.dispatch('player/trackErrored')
+    },
+    updateLoad: function () {
+
+    },
+    loaded: function () {
+      this.$store.commit('player/duration', this.$refs.audio.duration)
+      if (this.isCurrent) {
+        this.$store.commit('player/playing', true)
+        this.$refs.audio.play()
+      }
+    },
+    updateProgress: function () {
+      if (this.$refs.audio) {
+        this.$store.dispatch('player/updateProgress', this.$refs.audio.currentTime)
+      }
+    },
+    ended: function () {
+      if (this.looping === 1) {
+        this.setCurrentTime(0)
+        this.$refs.audio.play()
+      }
+      this.$store.dispatch('player/trackEnded', this.track)
+    },
+    setCurrentTime (t) {
+      if (t < 0 | t > this.duration) {
+        return
+      }
+      this.updateProgress(t)
+      this.$refs.audio.currentTime = t
+    }
+  },
+  watch: {
+    playing: function (newValue) {
+      if (newValue === true) {
+        this.$refs.audio.play()
+      } else {
+        this.$refs.audio.pause()
+      }
+    },
+    volume: function (newValue) {
+      this.$refs.audio.volume = newValue
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>