From 1f8db5735431f52b9c7f74add2be09dc27a1dd5c Mon Sep 17 00:00:00 2001
From: boyska <piuttosto@logorroici.org>
Date: Sun, 19 Mar 2023 00:52:48 +0000
Subject: [PATCH] eventbus + player

---
 package.json              |  1 +
 src/components/Player.vue | 37 +++++++++++++++++++++++++------------
 src/js/eventBus.js        |  9 +++++++++
 src/pages/Radio.vue       |  1 -
 src/pages/Show.vue        | 10 +++++++++-
 5 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 src/js/eventBus.js

diff --git a/package.json b/package.json
index 010f9f6..1d6b6cb 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/Player.vue b/src/components/Player.vue
index c4d9e47..20860ca 100644
--- a/src/components/Player.vue
+++ b/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) {
diff --git a/src/js/eventBus.js b/src/js/eventBus.js
new file mode 100644
index 0000000..a57e885
--- /dev/null
+++ b/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)
+}
diff --git a/src/pages/Radio.vue b/src/pages/Radio.vue
index 197f98f..45b6054 100644
--- a/src/pages/Radio.vue
+++ b/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)
diff --git a/src/pages/Show.vue b/src/pages/Show.vue
index c2ae5fb..241afaf 100644
--- a/src/pages/Show.vue
+++ b/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)
+    }
   }
 }