refactor out player...

1 files changed, 4 insertions, 19 deletions

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)