Player: track loading state better

src/components/Player.vue

@@ -1,8 +1,9 @@
 <template>
 <f7-toolbar v-if="status != 'empty'">
-  <f7-link @click="onPlay" v-if="status == 'pause'">Play</f7-link>
-  <f7-link @click="onPause" v-if="status == 'playing'">Pause</f7-link>
-{{title}}
+<f7-preloader v-if="loading" />
+<f7-link @click="onPlay" v-if="!loading && status == 'pause'">Play</f7-link>
+<f7-link @click="onPause" v-if="!loading && status == 'playing'">Pause</f7-link>
+<div slot="before-inner" v-if="!loading">{{title}}</div>
 </f7-toolbar>
 </template>
 
@@ -28,22 +29,18 @@ export default {
     eventBus.$off('play:now')
   },
   mounted () {
-// XXX: should track events from this.player, instead of manually setting
     const t = this
     eventBus.$on('play:now', function (url, metadata) {
         t.play(url, metadata)
-        t.status = 'playing'
         })
     eventBus.$on('play:pause', function() {
         if(t.player) {
           t.player.pause()
-	  t.status = 'pause'
         }
         })
     eventBus.$on('play:resume', function() {
         if(t.player) {
           t.player.play()
-	  t.status = 'playing'
         }
         })
   },
@@ -54,23 +51,36 @@ export default {
      onPause() {
        eventBus.$emit('play:pause')
      },
+   updateStatusFromPlayer () {
+     this.status = this.player.playing() ? 'playing' : 'pause'
+   },
     play (url, metadata) {
+      this.loading = true
       let newPlayer = new Howl({
         autoSuspend: false,
         html5: true,
         preload: true,
         src: [url],
       })
-      newPlayer.play()
-      if(this.player) {
-        this.player.stop()
+      const t = this
+      for(const eventName of ['pause', 'play', 'end']) {
+        newPlayer.on(eventName, this.updateStatusFromPlayer)
       }
-      this.player = newPlayer
+      newPlayer.once('play', function setProperData() {
+        if(t.player) {
+          t.player.stop()
+          t.player.unload()
+        }
+        t.player = newPlayer
+        if(metadata !== undefined) {
+          t.title = metadata.title
+          t.live = metadata.live
+        }
+        t.loading = false
+        t.updateStatusFromPlayer()
+      })
+      newPlayer.play()
 
-      if(metadata !== undefined) {
-        this.title = metadata.title
-        this.live = metadata.live
-      }
     },
     stop () {
       if (this.player) {