eventbus + player

package.json

@@ -30,6 +30,7 @@
     "skeleton-elements": "^4.0.1",
     "swiper": "^8.4.6",
     "tailwindcss": "^3.2.4",
+    "tiny-emitter": "^2.1.0",
     "vue": "^3.2.45"
   },
   "devDependencies": {

src/components/Player.vue

@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import eventBus from '../js/eventBus'
+
 import { Howl } from 'howler'
 import Button from './Button.vue'
 
@@ -35,24 +37,35 @@ export default {
       player: null
     }
   },
-  // destroyed () {
-  //   this.$nuxt.$off('play:podcast', this.stop)
-  // },
-  // mounted () {
-  //   this.$nuxt.$on('play:podcast', this.stop)
-  // },
+  destroyed () {
+    eventBus.$off('play:now')
+  },
+  mounted () {
+    const t = this
+    eventBus.$on('play:now', function (url) {
+        t.play(url)
+        })
+  },
   methods: {
-    play () {
-      const rnd = Math.random()
+    play (url) {
+      var urls;
+      if (url === undefined) {
+        const rnd = Math.random()
+        urls = [
+        'https://stream.radioblackout.org/blackout.ogg?rnd=' + rnd,
+        'https://stream.radioblackout.org/blackout.mp3'
+        ]
+      } else {
+        urls = [url]
+      }
       this.player = new Howl({
         autoSuspend: false,
         html5: true,
         preload: true,
-        src: ['https://stream.radioblackout.org/blackout.ogg?rnd=' + rnd,
-        'https://stream.radioblackout.org/blackout.mp3'],
-      })      
+        src: urls,
+      })
+      console.log(this.player)
       this.player.play()
-      this.$nuxt.$emit('play:player')
     },
     stop () {
       if (this.player) {

src/js/eventBus.js

@@ -0,0 +1,9 @@
+// see https://v3-migration.vuejs.org/breaking-changes/events-api.html#_3-x-update
+import emitter from 'tiny-emitter/instance'
+
+export default {
+  $on: (...args) => emitter.on(...args),
+  $once: (...args) => emitter.once(...args),
+  $off: (...args) => emitter.off(...args),
+  $emit: (...args) => emitter.emit(...args)
+}

src/pages/Radio.vue

@@ -29,7 +29,6 @@ export default {
     this.radioId = this.f7route.params.radioName
     try {
       this.Radio = await radiomanifest.get(this.f7route.params.radioName)
-      // console.log('got', this.Radio)
       this.loading = false
     } catch (e) {
       console.error('le cose non vanno mai sempre bene!', e)

src/pages/Show.vue

@@ -9,7 +9,9 @@
     
     <f7-preloader v-if='loading' />
         <f7-list v-else>
-            <f7-list-item v-for='episode in Show.episodes' :key='episode.url' :title='episode.title' :link='`/radio/${radioId}/shows/${Show.name}/${episode.url}`' :footer='episode.text' />
+<a @click="play(episode)" v-for='episode in Show.episodes' :key='episode.url' >
+            <f7-list-item :title='episode.title'  :footer='episode.text' />
+</a>
         </f7-list>
 
   </f7-page>    
@@ -18,6 +20,7 @@
 <script>
 import radiomanifest from '../js/radiomanifest'
 import getPodcast from '../js/podcast'
+import eventBus from '../js/eventBus'
 
 export default {
   name: 'radio',
@@ -46,6 +49,11 @@ export default {
     } catch (e) {
       console.error('le cose non vanno mai sempre bene!', e)
     }
+  },
+  methods: {
+    play: function(episode) {
+      eventBus.$emit('play:now', episode.enclosure.url)
+    }
   }
 }