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-list media-list v-else>
      <f7-list-item v-for='episode in Show.episodes' :key='episode.url'
        :title='episode.title' 
        :after='new Date(episode.pubDate).toLocaleString()'
        link='#'
        @click="play(episode)">
          <small v-html='episode.description'/>
        <!--
          - l'html della descrizione va tagliato e filtato
          - qua ci sta mettere l'immagine se c'e', nelle f7-list c'e' uno slot media apposito
        -->
      </f7-list-item>
    </f7-list>

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