Play live, too!

src/js/routes.js

@@ -1,6 +1,7 @@
 
 import HomePage from '../pages/home.vue'
 import RadioPage from '../pages/Radio.vue'
+import RadioLivePage from '../pages/RadioLive.vue'
 import RadioShowsPage from '../pages/RadioShows.vue'
 import ShowPage from '../pages/Show.vue'
 import NotFoundPage from '../pages/404.vue'
@@ -17,6 +18,11 @@ var routes = [
       component: RadioPage,
     },
     {
+      name: 'RadioLive',
+      path: '/radio/:radioName/live',
+      component: RadioLivePage,
+    },
+    {
       name: 'RadioShows',
       path: '/radio/:radioName/shows',
       component: RadioShowsPage,

src/pages/RadioLive.vue

@@ -0,0 +1,62 @@
+<template>
+  <f7-page name="RadioLive">
+    <img :src='Radio.logo' id='logo'/> 
+    <f7-block-title>{{Radio.name}}</f7-block-title>
+    <f7-block-header>{{Radio.description}}</f7-block-header>
+
+    <f7-preloader v-if='loading' />
+    <f7-block v-else>
+    {{currentShowName}}
+    <f7-button type="button" @click="playLive">Ascolta la diretta</f7-button>
+    </f7-block>
+  </f7-page>    
+</template>
+
+<script>
+import radiomanifest from '../js/radiomanifest'
+import eventBus from '../js/eventBus'
+
+
+export default {
+  name: 'radio',
+  data () {
+    return {
+      loading: true,
+      radioId: null,
+      radio: { name: '' },
+      currentShowName: '',
+      Radio: { }
+    }
+  },
+  props: { f7route: Object, f7router: Object },
+  async mounted () {
+    this.radioId = this.f7route.params.radioName
+    try {
+      this.Radio = await radiomanifest.get(this.f7route.params.radioName)
+      const currentShow = this.Radio.getShowAtTime();
+      this.currentShowName = currentShow == null ? "live" : currentShow.getName();
+      this.loading = false
+    } catch (e) {
+      console.error('le cose non vanno mai sempre bene!', e)
+    }
+  },
+  methods: {
+             async playLive() {
+             const urls = await this.Radio.getStreaming().pickURLs();
+             eventBus.$emit('play:now', urls, {
+              live: true,
+              title: this.Radio.getName() + " - live"
+              })
+             }
+  }
+}
+
+</script>
+<style>
+#logo {
+  margin-left: 10px;
+  max-width: 40px;
+}
+</style>
+
+

src/pages/RadioShows.vue

@@ -1,5 +1,5 @@
 <template>
-  <f7-page name="radio">
+  <f7-page name="RadioShows">
     <img :src='Radio.logo' id='logo'/> 
     <f7-block-title>{{Radio.name}}</f7-block-title>
     <f7-block-header>{{Radio.description}}</f7-block-header>
@@ -42,4 +42,4 @@ export default {
   margin-left: 10px;
   max-width: 40px;
 }
-</style>
+</style>