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...

---
 .../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 +-
 6 files changed, 75 insertions(+), 75 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

(limited to 'animism-align/frontend/app/views/viewer')

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