plaid/src/pages/Show.vue

<template>
  <f7-page name="show">

    <f7-preloader v-if='loading_meta' />
    <f7-block v-else>
        <f7-block-title>{{ShowBasicInfo.name}}</f7-block-title>
        <f7-block-header>{{Radio.name}}</f7-block-header>
    </f7-block>
    
    <div v-if='loading' strong class="text-align-center">
      <f7-preloader />
    </div>

  </f7-page>    
</template>

<script>
import radiomanifest from '../js/radiomanifest'
import getPodcast from '../js/podcast'
import eventBus from '../js/eventBus'

export default {
  name: 'radio',
  data () {
    return {
      loading_meta: true,
      loading: true,
      radioId: null,
      showId: null,
      Show: null,
    }
  },
  props: { f7route: Object, f7router: Object },
  async mounted () {
    this.radioId = this.f7route.params.radioId
    this.showId = this.f7route.params.showId
    this.ShowBasicInfo = {}

    try {
      this.Radio = await radiomanifest.get(this.f7route.params.radioId)
      this.ShowBasicInfo = this.Radio.getShowByName(this.showId)
      this.loading_meta = false
      this.Show = await getPodcast(this.ShowBasicInfo.getFeed())
      console.log('Show =', this.Show)
      this.loading = false
    } catch (e) {
      console.error('le cose non vanno mai sempre bene!', e)
    }
  },
  methods: {
    play: function(episode) {
      eventBus.$emit('play:now', episode.enclosure.url, {
        live: false,
        title: episode.title
        })
    }
  }
}

</script>