cancel playback if background audio id changes

2 files changed, 87 insertions, 41 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()
   }
 }
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 71c6bba..314d243 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -3,6 +3,7 @@ import { Route } from 'react-router-dom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
+import { history } from 'site/store'
 import actions from 'site/actions'
 import { Loader } from 'app/common/loader.component'
 import TileHandle from 'app/views/page/components/tile.handle'
@@ -61,11 +62,16 @@ class ViewerContainer extends Component {
   }
 
   handleMouseDown(e, tile) {
-    // console.log(tile)
+    console.log(tile)
+    if (tile.href.indexOf('http') === 0) {
+      window.location.href = tile.href
+    } else {
+      history.push(tile.href)
+    }
   }
 
   render() {
-    const { page } = this.state
+    const { page, audio } = this.state
     if (this.state.roadblock) {
       return this.renderRoadblock()
     }
@@ -92,6 +98,7 @@ class ViewerContainer extends Component {
                 viewing
                 key={tile.id}
                 tile={tile}
+                audio={audio}
                 bounds={this.state.bounds}
                 onMouseDown={e => this.handleMouseDown(e, tile)}
                 onDoubleClick={e => {}}