refactor radiolive

src/js/radiomanifest.js

@@ -1,32 +1,28 @@
 import radiomanifest from "@radiomanifest/radiomanifest";
 
-const knownRadios = [
-  "https://www.ondarossa.info",
-  "https://radiospore.oziosi.org",
-];
 class Controller {
   constructor() {
     this.cache = {};
     this.currentRadio = null;
+  }
 
-    for (let r in knownRadios) {
-      this.get(r);
+  getFromCache(url) {
+    console.log("cache", Object.keys(this.cache));
+    if (this.cache[url]) {
+      this.currentRadio = this.cache[url];
+      return this.cache[url];
     }
   }
-
   async get(url) {
     if (this.cache[url]) {
       this.currentRadio = this.cache[url];
       return this.cache[url];
     }
-    this.cache[url] = knownRadios[url];
-    // fetch more data in background
     this.cache[url] = await radiomanifest.get(url);
     return this.cache[url];
   }
 }
 
 const ControllerSingleton = new Controller();
-// console.log(ControllerSingleton);
 
 export default ControllerSingleton;

src/js/store.js

@@ -32,11 +32,8 @@ export const useRadioStore = defineStore("radio", {
       return;
     },
     updateRadio(url, data) {
-      this.radios[url] = {
-        ...this.radios[url],
-        ...data,
-        lastFetch: Date.now(),
-      };
+      this.radios[url] = data;
+      this.radios[url].lastFetch = Date.now();
     },
   },
 });

src/pages/Radio.vue

@@ -1,10 +1,10 @@
 <template>
   <f7-page name="radio">
-    <img :src="Radio.logo" id="logo" />
-    <f7-block-title>{{ Radio.name }}</f7-block-title>
-    <f7-block-header>{{ Radio.description }}</f7-block-header>
+    <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" >
+    <div v-if="loading()" strong class="text-align-center">
       <f7-preloader v-if="loading()" />
     </div>
     <f7-list v-else>
@@ -35,10 +35,13 @@ export default {
     return {
       isRadioReady: null,
       radioUrl: null,
-      radio: { name: "" },
-      Radio: {},
       store: useRadioStore(),
-loading: () => {return this.isRadioReady === null || !this.isRadioReady(this.radioUrl)}
+      radio: () => {
+        return this.store.radios[this.radioUrl] || {};
+      },
+      loading: () => {
+        return this.isRadioReady === null || !this.isRadioReady(this.radioUrl);
+      },
     };
   },
   props: { f7route: Object, f7router: Object },

src/pages/RadioLive.vue

@@ -1,14 +1,14 @@
 <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>
+    <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">
+    <div v-if="loading()" strong class="text-align-center">
       <f7-preloader />
     </div>
     <f7-block v-else>
-      {{ currentShowName }}
+      {{ currentShowName() }}
 
       <f7-button class="block" large outline @click="playLive"
         >Ascolta la diretta</f7-button
@@ -20,36 +20,44 @@
 <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 {
-      loading: true,
-      currentShowName: "",
-      Radio: {},
+      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() {
-    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);
-    }
+    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();
+      const urls = await this.radio().getStreaming().pickURLs();
       eventBus.$emit("play:now", urls, {
         live: true,
-        title: this.Radio.getName() + " - live",
+        title: this.radio().getName() + " - live",
       });
     },
   },

src/pages/home.vue

@@ -11,7 +11,7 @@ setTimeout(() => {
       radiomanifest.get(url).then((data) => {
         store.updateRadio(url, data);
       });
-    }, i * 2000);
+    }, i * 200);
   }
 }, 100);
 </script>