play audio on click and navigate when finished

3 files changed, 63 insertions, 26 deletions

diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
index d6272bc..4fb00a3 100644
--- a/frontend/app/views/page/components/tile.form.js
+++ b/frontend/app/views/page/components/tile.form.js
@@ -153,7 +153,7 @@ const newPosition = (data) => ({
   has_audio: false,
   audio_on_click_id: 0,
   audio_on_hover_id: 0,
-  wait_for_audio_on_click: false,
+  navigate_when_audio_finishes: false,
   ...data,
 })
 
@@ -778,8 +778,8 @@ class TileForm extends Component {
 
             <Checkbox
               label="Navigate when audio finishes"
-              name="wait_for_audio_on_click"
-              checked={temporaryTile.settings.wait_for_audio_on_click}
+              name="navigate_when_audio_finishes"
+              checked={temporaryTile.settings.navigate_when_audio_finishes}
               onChange={this.handleSettingsSelect}
               autoComplete="off"
             />
diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index 42ff53f..eea0acf 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -1,3 +1,5 @@
+import { history } from 'site/store'
+
 export default class AudioPlayer {
   files = {}
   players = {}
@@ -16,6 +18,13 @@ export default class AudioPlayer {
     }, {})
   }
 
+  has(id) {
+    return (
+      (id > 0) &&
+      (id in this.files)
+    )
+  }
+
   done(id) {
     console.log('remove', id)
     delete this.players[id]
@@ -31,24 +40,41 @@ export default class AudioPlayer {
     ) {
       this.players[this.current_background_id].stop()
     }
-    if (background_audio_id in this.files) {
+    if (this.has(background_audio_id)) {
       this.current_background_id = background_audio_id
       this.playFile({
-        item: this.files[background_audio_id],
+        id: background_audio_id,
+        type: 'background',
         restart: !!restart_audio,
       })
     }
   }
 
-  playFile({ item, restart, loop }) {
-    const { id } = item
+  playTile({ tile, type }) {
+    let id = type === 'click'
+      ? tile.settings.audio_on_click_id
+      : type === 'hover'
+      ? tile.settings.audio_on_hover_id
+      : null
+    if (this.has(id)) {
+      this.playFile({ id, tile, type })
+    }
+  }
+
+  playFile({ id, tile, type, restart, loop }) {
+    const item = this.files[id]
     if (id in this.players) {
       if (restart) {
         this.players[id].restart()
       }
       return this.players[id]
     } else {
-      this.players[id] = new Player(item, this.done)
+      this.players[id] = new Player({
+        item,
+        tile,
+        type,
+        done: this.done
+      })
       this.players[id].play()
       return this.players[id]
     }
@@ -56,8 +82,10 @@ export default class AudioPlayer {
 }
 
 class Player {
-  constructor(item, done) {
+  constructor({ item, tile, type, done }) {
     this.item = item
+    this.tile = tile
+    this.type = type
     this.done = done
     this.audio = document.createElement('audio')
     this.handleEnded = this.handleEnded.bind(this)
@@ -69,6 +97,9 @@ class Player {
   }
 
   release() {
+    if (this.type === 'click' && this.tile && this.tile.settings.navigate_when_audio_finishes) {
+      history.push(this.tile.href)
+    }
     this.audio.removeEventListener('ended', this.handleEnded)
     this.audio.removeEventListener('error', this.handleError)
     this.done(this.item.id)
@@ -87,18 +118,15 @@ class Player {
   }
 
   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 314d243..1c8be43 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -38,15 +38,6 @@ class ViewerContainer extends Component {
     actions.site.interact()
   }
 
-  handleResize() {
-    this.setState({
-      bounds: {
-        width: window.innerWidth,
-        height: window.innerHeight,
-      }
-    })
-  }
-
   load() {
     const { graph_name, page_name } = this.props.match.params
     const page_path = ["", graph_name, page_name].join('/')
@@ -61,12 +52,30 @@ class ViewerContainer extends Component {
     }
   }
 
+  handleResize() {
+    this.setState({
+      bounds: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      }
+    })
+  }
+
   handleMouseDown(e, tile) {
-    console.log(tile)
-    if (tile.href.indexOf('http') === 0) {
-      window.location.href = tile.href
-    } else {
-      history.push(tile.href)
+    if (tile.href) {
+      if (tile.href.indexOf('http') === 0) {
+        window.location.href = tile.href
+        return
+      }
+      else if (!tile.settings.navigate_when_audio_finishes) {
+        history.push(tile.href)
+      }
+    }
+    if (tile.settings.audio_on_click_id > 0) {
+      this.props.audio.player.playTile({
+        type: "click",
+        tile,
+      })
     }
   }