8 files changed, 48 insertions, 52 deletions
diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index eaff1f6..80db842 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -19,7 +19,7 @@ export const align = crud_type('align', [
 ])
 
 export const audio = with_type('audio', [
-  'play', 'pause', 'update_time', 'toggle_muted',
+  'play', 'pause', 'update_time', 'set_volume',
 ])
 
 export const viewer = with_type('viewer', [
diff --git a/animism-align/frontend/app/views/audio/audio.actions.js b/animism-align/frontend/app/views/audio/audio.actions.js
index c12f7ee..0ee41c6 100644
--- a/animism-align/frontend/app/views/audio/audio.actions.js
+++ b/animism-align/frontend/app/views/audio/audio.actions.js
@@ -38,11 +38,7 @@ export const toggle = () => dispatch => {
     play()(dispatch)
   }
 }
-export const toggleMuted = () => dispatch => {
-  if (store.getState().audio.muted) {
-    audioPlayer.muted = false
-  } else {
-    audioPlayer.muted = true
-  }
-  dispatch({ type: types.audio.toggle_muted })
+export const setVolume = volume => dispatch => {
+  audioPlayer.volume = volume
+  dispatch({ type: types.audio.set_volume, volume })
 }
diff --git a/animism-align/frontend/app/views/audio/audio.reducer.js b/animism-align/frontend/app/views/audio/audio.reducer.js
index 09ce6ce..35a364d 100644
--- a/animism-align/frontend/app/views/audio/audio.reducer.js
+++ b/animism-align/frontend/app/views/audio/audio.reducer.js
@@ -4,7 +4,7 @@ import { session, getDefault, getDefaultInt } from 'app/session'
 const initialState = {
   playing: false,
   play_ts: 0,
-  muted: false,
+  volume: 1.0,
 }
 
 export default function alignReducer(state = initialState, action) {
@@ -25,10 +25,10 @@ export default function alignReducer(state = initialState, action) {
         ...state,
         play_ts: action.play_ts,
       }
-    case types.audio.toggle_muted:
+    case types.audio.set_volume:
       return {
         ...state,
-        muted: !state.muted,
+        volume: action.volume,
       }
     default:
       return state
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index 4310017..f932648 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -4,18 +4,16 @@ import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 import { ROMAN_NUMERALS } from 'app/constants'
-import { Arrow, VolumeControl, PlayButton, PlayerTime } from './viewer.icons'
+import { Arrow } from './viewer.icons'
+import NavPlayer from './nav.player'
 
-class ViewerNav extends Component {
-  componentDidMount() {
-  }
-  
+class NavParent extends Component {
   render() {
     const { viewer } = this.props
     return (
       <div className="viewer-nav">
         <div className='nav-row main-nav'>
-          <div>
+          <div className='nav-section-name'>
             <span className="section-link link" onClick={() => actions.viewer.toggleSection('nav')}>
               <Arrow type={viewer.nav ? 'down' : 'up'} />
               {ROMAN_NUMERALS[0]}
@@ -23,12 +21,8 @@ class ViewerNav extends Component {
               {'Introduction'}
             </span>
           </div>
-          <div>
-            <PlayButton />
-            <PlayerTime />
-            <VolumeControl />
-          </div>
-          <div>
+          <NavPlayer />
+          <div className='nav-next'>
             <span className="next-link link">
               Next
               <Arrow type={'right'} />
@@ -44,10 +38,4 @@ const mapStateToProps = state => ({
   viewer: state.viewer,
 })
 
-export default connect(mapStateToProps)(ViewerNav)
-
-/*
-- section name, number
-- next link
-- player
-*/
+export default connect(mapStateToProps)(NavParent)
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.player.js b/animism-align/frontend/app/views/viewer/nav/nav.player.js
new file mode 100644
index 0000000..a19f1c9
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/nav.player.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import { PlayButton, PlayerTime, VolumeControl } from './viewer.icons'
+
+class NavPlayer extends Component {
+  render() {
+    const { playing, play_ts, duration, volume } = this.props
+    return (
+      <div className='nav-player'>
+        <PlayButton playing={playing} />
+        <PlayerTime play_ts={play_ts} duration={duration} />
+        <VolumeControl volume={volume} />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  playing: state.audio.playing,
+  volume: state.audio.volume,
+  play_ts: state.audio.play_ts,
+  duration: state.align.timeline.duration,
+})
+
+export default connect(mapStateToProps)(NavPlayer)
+
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index c65c2e6..a39cb16 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -38,8 +38,8 @@ export const Arrow = React.memo(({ type }) => (
 
 // volume toggle
 
-const VolumeIcon = React.memo(({ muted }) => (
-  <div className={muted ? 'volume muted' : 'volume'} onClick={() => actions.audio.toggleMuted()}>
+export const VolumeControl = React.memo(({ volume }) => (
+  <div className={volume ? 'volume' : 'volume muted'} onClick={() => actions.audio.setVolume(setVolume ? 0.0 : 1.0)}>
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
       <path d="M5,25h4.17l0,2.5H5V25z M15.33,27.5h4.17V20h-4.17V27.5z M20.5,27.5h4.17v-10H20.5V27.5z M25.67,27.5h4.17V15h-4.17V27.5z
        M30.83,27.5H35v-15h-4.17V27.5z M10.17,27.5h4.17v-5h-4.17V27.5z"/>
@@ -47,11 +47,6 @@ const VolumeIcon = React.memo(({ muted }) => (
   </div>
 ))
 
-export const VolumeControl = connect(state => ({
-  muted: state.audio.muted,
-}))(VolumeIcon)
-
-
 // play / pause button
 
 const PlayIcon = (
@@ -65,7 +60,7 @@ const PauseIcon = (
   </svg>
 )
 
-const PlayButtonIcon = ({ playing }) => {
+export const PlayButton = ({ playing }) => {
   return (
     <div
       className='playToggle'
@@ -76,22 +71,12 @@ const PlayButtonIcon = ({ playing }) => {
   )
 }
 
-export const PlayButton = connect(state => ({
-  playing: state.audio.playing,
-}))(PlayButtonIcon)
-
-
 // player current time
 
-const PlayerTimeSpan = ({ play_ts, duration }) => (
+export const PlayerTime = ({ play_ts, duration }) => (
   <span className='playerTime'>
     {timestamp(play_ts)}
     {' / '}
     {timestamp(duration)}
   </span>
 )
-
-export const PlayerTime = connect(state => ({
-  play_ts: state.audio.play_ts,
-  duration: state.align.timeline.duration,
-}))(PlayerTimeSpan)
diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js
index 86b8896..0ad1bab 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -12,7 +12,7 @@ class PlayerContainer extends Component {
     const { } = this.props
     return (
       <div className="player">
-        Player container
+        Document container
       </div>
     )
   }
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index 7e59881..20ee208 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -13,7 +13,7 @@ import './transcript/transcript.css'
 import actions from 'app/actions'
 import { Loader } from 'app/common'
 
-import ViewerNav from './nav/viewer.nav'
+import NavParent from './nav/nav.parent'
 import ViewerSections from './sections/viewer.sections'
 import ViewerRouter from './nav/viewer.router'
 import EfluxChrome from './nav/eflux.chrome'
@@ -70,7 +70,7 @@ class ViewerContainer extends Component {
             <div className='viewer-container'>
               <Player />
             </div>
-            <ViewerNav />
+            <NavParent />
             <ViewerSections />
             <Transcript />
             <Checklist />