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 class="block" large outline @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,
      currentShowName: "",
      Radio: {},
    };
  },
  props: { f7route: Object, f7router: Object },
  async mounted() {
    try {
      this.Radio = await radiomanifest.get(
        decodeURIComponent(this.f7route.params.radioUrl),
      );
      const currentShow = this.Radio.getShowAtTime();
      this.currentShowName =
        currentShow == null ? "live" : currentShow.getName();
      this.loading = false;
    } catch (e) {
      console.error("error fetching", 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>