audio actually playing

4 files changed, 57 insertions, 9 deletions

diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index 9a2d783..acf2f52 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -1,13 +1,36 @@
 export default class AudioPlayer {
+  files = {}
   players = {}
 
-  play({ item, restart, loop }) {
+  load(graph) {
+    this.files = graph.uploads
+    .filter(upload => upload.tag === 'audio')
+    .reduce((accumulator, item) => {
+      accumulator[item.id] = item
+      return accumulator
+    }, {})
+    console.log(this.files)
+  }
+
+  playPage(page) {
+    console.log(page.settings)
+    const { background_audio_id, restart_audio } = page.settings
+    if (background_audio_id in this.files) {
+      this.playFile({
+        item: this.files[background_audio_id],
+        restart: !!restart_audio,
+      })
+    }
+  }
+
+  playFile({ item, restart, loop }) {
     return new Promise((resolve, reject) => {
       const { id, url } = item
-      if (id in players) {
+      console.log('play >>', id, url)
+      if (id in this.players) {
         if (restart) {
-          players[id].currentTime = 0
-          players[id].play()
+          this.players[id].currentTime = 0
+          this.players[id].play()
           return resolve()
         }
         return reject()
diff --git a/frontend/site/audio/audio.reducer.js b/frontend/site/audio/audio.reducer.js
new file mode 100644
index 0000000..f0bf0e9
--- /dev/null
+++ b/frontend/site/audio/audio.reducer.js
@@ -0,0 +1,18 @@
+import AudioPlayer from 'site/audio/audio.player'
+import * as types from 'site/types'
+
+const initialState = {
+  player: new AudioPlayer(),
+}
+
+export default function audioReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  switch (action.type) {
+    case types.site.loaded:
+      state.player.load(action.data.graph)
+      return state
+
+    default:
+      return state
+  }
+}
diff --git a/frontend/site/store.js b/frontend/site/store.js
index 5cb1a1b..60c3116 100644
--- a/frontend/site/store.js
+++ b/frontend/site/store.js
@@ -4,17 +4,18 @@ import { createBrowserHistory } from 'history'
 import thunk from 'redux-thunk'
 
 import siteReducer from 'site/site/site.reducer'
-import AudioPlayer from 'site/audio/audio.player'
+import audioReducer from 'site/audio/audio.reducer'
 
 const createRootReducer = history => (
   combineReducers({
     auth: (state = {}) => state,
     router: connectRouter(history),
+    audio: audioReducer,
     site: siteReducer,
   })
 )
 
-const configureStore = (initialState = { audio: audioPlayer }, history) => {
+const configureStore = (initialState = {}, history) => {
   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
 
   const store = createStore(
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 3f1c9c5..71c6bba 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -51,11 +51,12 @@ class ViewerContainer extends Component {
     const page_path = ["", graph_name, page_name].join('/')
     const { pages, home_page } = this.props.graph
     const page = pages[page_path] || pages[home_page]
-    if (!this.props.interactive && hasAutoplayVideo(page)) {
+    if (!this.props.interactive && hasAutoplay(page)) {
       this.setState({ page, roadblock: true })
     } else {
       this.setState({ page, roadblock: false })
       actions.site.interact()
+      this.props.audio.player.playPage(page)
     }
   }
 
@@ -103,8 +104,10 @@ class ViewerContainer extends Component {
   }
 
   removeRoadblock() {
+    console.log("remove roadblock")
     actions.site.interact()
     this.setState({ roadblock: false })
+    this.props.audio.player.playPage(this.state.page)
   }
   
   renderRoadblock() {
@@ -120,14 +123,17 @@ class ViewerContainer extends Component {
   }
 }
 
-const hasAutoplayVideo = page => {
-  return page.tiles.some(tile => {
+const hasAutoplay = page => {
+  const hasAutoplayVideo = page.tiles.some(tile => {
     return tile.type === 'video' && !tile.settings.muted
   })
+  const hasAutoplayAudio = page.settings.background_audio_id > 0
+  return hasAutoplayAudio || hasAutoplayVideo
 }
 
 const mapStateToProps = state => ({
   site: state.site,
+  audio: state.audio,
   graph: state.site.graph,
   interactive: state.site.interactive,
 })