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";
import { useRadioStore } from "../js/store";
import { storeToRefs } from "pinia";

export default {
  name: "radio",
  data() {
    return {
      radioUrl: null,
      isRadioReady: null,
      store: useRadioStore(),
      radio: () => {
        return this.store.radios[this.radioUrl];
      },
      loading: () => {
        return this.isRadioReady === null || !this.isRadioReady(this.radioUrl);
      },
      currentShowName: () => {
        if (this.loading()) {
          return "";
        }
        const radio = this.store.radios[this.radioUrl];
        const currentShow = radio.getShowAtTime();
        return currentShow == null ? "live" : currentShow.getName();
      },
    };
  },
  props: { f7route: Object, f7router: Object },
  async mounted() {
    this.radioUrl = decodeURIComponent(this.f7route.params.radioUrl);
    const { isRadioReady } = storeToRefs(this.store);
    this.isRadioReady = isRadioReady;
  },
  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>