mute button. muting audio

5 files changed, 68 insertions, 2 deletions

diff --git a/frontend/site/audio/audio.actions.js b/frontend/site/audio/audio.actions.js
new file mode 100644
index 0000000..0b0b44b
--- /dev/null
+++ b/frontend/site/audio/audio.actions.js
@@ -0,0 +1,9 @@
+import * as types from 'site/types'
+
+export const mute = () => dispatch => {
+  dispatch({ type: types.site.mute_audio })
+}
+
+export const unmute = () => dispatch => {
+  dispatch({ type: types.site.unmute_audio })
+}
\ No newline at end of file
diff --git a/frontend/site/audio/audio.icons.js b/frontend/site/audio/audio.icons.js
new file mode 100644
index 0000000..1e1b251
--- /dev/null
+++ b/frontend/site/audio/audio.icons.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const VolumeOn = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
+  </svg>
+)
+
+export const VolumeOff = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
+  </svg>
+)
diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index d036347..fcdcb6f 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -37,9 +37,14 @@ export default class AudioPlayer {
     delete this.players[id]
   }
 
+  toggleMuted(muted) {
+    this.muted = muted
+    Object.keys(this.players).forEach(id => this.players[id].toggleMuted(muted))
+  }
+
   playPage(page) {
     const { background_audio_id, restart_audio, stop_all_sounds } = page.settings
-    console.log('playPage', page)
+    // console.log('playPage', page)
     if (stop_all_sounds && this.current_background_id !== background_audio_id) {
       Object.keys(this.players).forEach(id => this.stop(id))
     } else if (
@@ -86,8 +91,9 @@ export default class AudioPlayer {
         item,
         tile,
         type,
-        done: this.done
+        done: this.done,
       })
+      this.players[id].toggleMuted(this.muted)
       this.players[id].play()
       return this.players[id]
     }
@@ -100,6 +106,7 @@ export default class AudioPlayer {
       type: "url",
       done: this.done
     })
+    this.players[id].toggleMuted(this.muted)
     this.players[id].play()
     return this.players[id]
   }
@@ -120,6 +127,10 @@ class Player {
     this.audio.src = item.url
   }
 
+  toggleMuted(muted) {
+    this.audio.muted = muted
+  }
+
   release() {
     if (this.type === 'click' && this.tile && this.tile.settings.navigate_when_audio_finishes) {
       history.push(this.tile.href)
diff --git a/frontend/site/audio/audio.reducer.js b/frontend/site/audio/audio.reducer.js
index f0bf0e9..9cdda54 100644
--- a/frontend/site/audio/audio.reducer.js
+++ b/frontend/site/audio/audio.reducer.js
@@ -3,6 +3,7 @@ import * as types from 'site/types'
 
 const initialState = {
   player: new AudioPlayer(),
+  muted: false,
 }
 
 export default function audioReducer(state = initialState, action) {
@@ -12,6 +13,20 @@ export default function audioReducer(state = initialState, action) {
       state.player.load(action.data.graph)
       return state
 
+    case types.site.mute_audio:
+      state.player.toggleMuted(true)
+      return {
+        ...state,
+        muted: true,
+      }
+
+    case types.site.unmute_audio:
+      state.player.toggleMuted(false)
+      return {
+        ...state,
+        muted: false,
+      }
+
     default:
       return state
   }
diff --git a/frontend/site/audio/mute.button.js b/frontend/site/audio/mute.button.js
new file mode 100644
index 0000000..c2606d3
--- /dev/null
+++ b/frontend/site/audio/mute.button.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import { VolumeOn, VolumeOff } from './audio.icons'
+
+import actions from 'site/actions'
+
+const MuteButton = ({ muted }) => (
+  <div className="mute" onClick={muted ? actions.audio.unmute : actions.audio.mute}>
+    {muted ? VolumeOff : VolumeOn}
+  </div>
+)
+
+const mapStateToProps = state => ({
+  muted: state.audio.muted,
+})
+
+export default connect(mapStateToProps)(MuteButton)