plaid/src/pages/RadioLive.vue

<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>

    <div v-if='loading' strong class="text-align-center">
      <f7-preloader />
    </div>
    <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>