player: propagate metadata

src/components/Player.vue

@@ -1,6 +1,9 @@
 <template>
-<f7-link @click="onPlay" v-if="status != 'playing'">Play</f7-link>
+<f7-toolbar v-if="status != 'empty'">
-<f7-link @click="onPause" v-else>Pause</f7-link>
+  <f7-link @click="onPlay" v-if="status == 'pause'">Play</f7-link>
+  <f7-link @click="onPause" v-if="status == 'playing'">Pause</f7-link>
+{{title}}
+</f7-toolbar>
 </template>
 
 <script>
@@ -13,7 +16,7 @@ export default {
   data () {
     return {
       loading: true,
-      status: 'pause',
+      status: 'empty',
       volume: 100,
       title: 'RadioBlackout > DIRETTA',
       subtitle: '',
@@ -25,20 +28,22 @@ 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) {
+    eventBus.$on('play:now', function (url, metadata) {
-        t.play(url)
+        t.play(url, metadata)
         t.status = 'playing'
         })
     eventBus.$on('play:pause', function() {
         if(t.player) {
           t.player.pause()
+	  t.status = 'pause'
         }
-        t.status = 'pause'
         })
     eventBus.$on('play:resume', function() {
         if(t.player) {
           t.player.play()
+	  t.status = 'playing'
         }
         })
   },
@@ -49,7 +54,7 @@ export default {
      onPause() {
        eventBus.$emit('play:pause')
      },
-    play (url) {
+    play (url, metadata) {
       let newPlayer = new Howl({
         autoSuspend: false,
         html5: true,
@@ -61,6 +66,11 @@ export default {
         this.player.stop()
       }
       this.player = newPlayer
+
+      if(metadata !== undefined) {
+        this.title = metadata.title
+        this.live = metadata.live
+      }
     },
     stop () {
       if (this.player) {

src/components/app.vue

@@ -27,14 +27,11 @@
 <template>
   <f7-app v-bind="f7params" >
     <!-- Top Navbar -->
-    <f7-toolbar>
-      <Player />
-    </f7-toolbar>
     <f7-navbar back-link="Back" title='plaid' />
+    <Player />
 
     <!-- Your main view, should have "view-main" class -->
     <f7-view main url="/"></f7-view>
 
-    
   </f7-app>
 </template>

src/pages/Show.vue

@@ -52,7 +52,10 @@ export default {
   },
   methods: {
     play: function(episode) {
-      eventBus.$emit('play:now', episode.enclosure.url)
+      eventBus.$emit('play:now', episode.enclosure.url, {
+        live: false,
+        title: episode.title
+        })
     }
   }
 }