cancel playback if background audio id changes

1 files changed, 78 insertions, 39 deletions

diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index acf2f52..42ff53f 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -1,6 +1,11 @@
 export default class AudioPlayer {
   files = {}
   players = {}
+  current_background_id = 0
+
+  constructor() {
+    this.done = this.done.bind(this)
+  }
 
   load(graph) {
     this.files = graph.uploads
@@ -9,13 +14,25 @@ export default class AudioPlayer {
       accumulator[item.id] = item
       return accumulator
     }, {})
-    console.log(this.files)
+  }
+
+  done(id) {
+    console.log('remove', id)
+    delete this.players[id]
   }
 
   playPage(page) {
-    console.log(page.settings)
     const { background_audio_id, restart_audio } = page.settings
+    console.log('playPage', background_audio_id)
+    if (
+      this.current_background_id
+      && this.current_background_id !== background_audio_id
+      && this.current_background_id in this.players
+    ) {
+      this.players[this.current_background_id].stop()
+    }
     if (background_audio_id in this.files) {
+      this.current_background_id = background_audio_id
       this.playFile({
         item: this.files[background_audio_id],
         restart: !!restart_audio,
@@ -24,43 +41,65 @@ export default class AudioPlayer {
   }
 
   playFile({ item, restart, loop }) {
-    return new Promise((resolve, reject) => {
-      const { id, url } = item
-      console.log('play >>', id, url)
-      if (id in this.players) {
-        if (restart) {
-          this.players[id].currentTime = 0
-          this.players[id].play()
-          return resolve()
-        }
-        return reject()
-      }
-      const player = document.createElement('audio')
-      const handleEnded = () => {
-        unbind()
-        resolve()
-      }
-      const handleError = (error) => {
-        console.error(error)
-        unbind()
-        reject(error)
+    const { id } = item
+    if (id in this.players) {
+      if (restart) {
+        this.players[id].restart()
       }
-      const bind = () => {
-        player.addEventListener('ended', handleEnded)
-        player.addEventListener('error', handleError)
-        this.players[id] = player
-      }
-      const unbind = () => {
-        player.removeEventListener('ended', handleEnded)
-        player.removeEventListener('error', handleError)
-        delete this.players[id]
-      }
-      const start = () => {
-        player.src = url
-        player.play()
-      }
-      bind()
-      start()
-    })
+      return this.players[id]
+    } else {
+      this.players[id] = new Player(item, this.done)
+      this.players[id].play()
+      return this.players[id]
+    }
+  }
+}
+
+class Player {
+  constructor(item, done) {
+    this.item = item
+    this.done = done
+    this.audio = document.createElement('audio')
+    this.handleEnded = this.handleEnded.bind(this)
+    this.handleError = this.handleError.bind(this)
+    this.release = this.release.bind(this)
+    this.audio.addEventListener('ended', this.handleEnded)
+    this.audio.addEventListener('error', this.handleError)
+    this.audio.src = item.url
+  }
+
+  release() {
+    this.audio.removeEventListener('ended', this.handleEnded)
+    this.audio.removeEventListener('error', this.handleError)
+    this.done(this.item.id)
+    this.item = null
+    this.done = null
+    this.audio = null
+  }
+
+  handleError(error) {
+    console.error(error)
+    this.release()
+  }
+
+  handleEnded() {
+    this.release()
+  }
+
+  play() {
+    console.log('play', this.item.id)
+    this.audio.play()
+  }
+
+  restart() {
+    console.log('replay', this.item.id)
+    this.audio.currentTime = 0
+    this.audio.play()
+  }
+
+  stop() {
+    console.log('stop', this.item.id)
+    this.audio.pause()
+    this.release()
   }
 }