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>