From a4a10fc4fc3785b953967afe598d5663df33a28e Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 24 Jul 2020 14:31:05 +0200
Subject: refactor out player...

---
 animism-align/frontend/app/types.js                |  2 +-
 .../frontend/app/views/audio/audio.actions.js      | 10 ++--
 .../frontend/app/views/audio/audio.reducer.js      |  6 +--
 .../frontend/app/views/viewer/nav/nav.parent.js    | 41 +++++++++++++++++
 .../frontend/app/views/viewer/nav/nav.player.js    | 27 +++++++++++
 .../frontend/app/views/viewer/nav/viewer.icons.js  | 23 ++--------
 .../frontend/app/views/viewer/nav/viewer.nav.js    | 53 ----------------------
 .../app/views/viewer/player/player.container.js    |  2 +-
 .../frontend/app/views/viewer/viewer.container.js  |  4 +-
 9 files changed, 82 insertions(+), 86 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/nav/nav.parent.js
 create mode 100644 animism-align/frontend/app/views/viewer/nav/nav.player.js
 delete mode 100644 animism-align/frontend/app/views/viewer/nav/viewer.nav.js

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/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
new file mode 100644
index 0000000..f932648
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import { ROMAN_NUMERALS } from 'app/constants'
+import { Arrow } from './viewer.icons'
+import NavPlayer from './nav.player'
+
+class NavParent extends Component {
+  render() {
+    const { viewer } = this.props
+    return (
+      <div className="viewer-nav">
+        <div className='nav-row main-nav'>
+          <div className='nav-section-name'>
+            <span className="section-link link" onClick={() => actions.viewer.toggleSection('nav')}>
+              <Arrow type={viewer.nav ? 'down' : 'up'} />
+              {ROMAN_NUMERALS[0]}
+              {'. '}
+              {'Introduction'}
+            </span>
+          </div>
+          <NavPlayer />
+          <div className='nav-next'>
+            <span className="next-link link">
+              Next
+              <Arrow type={'right'} />
+            </span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  viewer: state.viewer,
+})
+
+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/nav/viewer.nav.js b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
deleted file mode 100644
index 4310017..0000000
--- a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-import { ROMAN_NUMERALS } from 'app/constants'
-import { Arrow, VolumeControl, PlayButton, PlayerTime } from './viewer.icons'
-
-class ViewerNav extends Component {
-  componentDidMount() {
-  }
-  
-  render() {
-    const { viewer } = this.props
-    return (
-      <div className="viewer-nav">
-        <div className='nav-row main-nav'>
-          <div>
-            <span className="section-link link" onClick={() => actions.viewer.toggleSection('nav')}>
-              <Arrow type={viewer.nav ? 'down' : 'up'} />
-              {ROMAN_NUMERALS[0]}
-              {'. '}
-              {'Introduction'}
-            </span>
-          </div>
-          <div>
-            <PlayButton />
-            <PlayerTime />
-            <VolumeControl />
-          </div>
-          <div>
-            <span className="next-link link">
-              Next
-              <Arrow type={'right'} />
-            </span>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  viewer: state.viewer,
-})
-
-export default connect(mapStateToProps)(ViewerNav)
-
-/*
-- section name, number
-- next link
-- player
-*/
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 />
-- 
cgit v1.2.3-70-g09d2