adding the icons

1 files changed, 16 insertions, 9 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
index c66cf21..40c8365 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -1,25 +1,32 @@
-import React from 'react'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
 
 import {
   EfluxLogo, EfluxClose, EfluxMenu
 } from './eflux.icons'
+import { PlayButton } from './viewer.icons'
+import actions from 'app/actions'
 
-const EfluxChrome = React.memo(({ navStyle }) => (
-  <div className={"eflux-header " + navStyle}>
+const EfluxChrome = React.memo(({ navStyle, playing, transcriptOpen }) => (
+  <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}>
     <div className="eflux-logo">
       <a href="/">
         {EfluxLogo}
       </a>
     </div>
     <div className="eflux-nav">
-      <a href="/">
-        {EfluxClose}
-      </a>
-      <a href="/">
+      <PlayButton playing={playing} />
+      <div className="transcript-icon" onClick={() => actions.viewer.toggleComponent('transcript')}>
         {EfluxMenu}
-      </a>
+      </div>
     </div>
   </div>
 ))
 
-export default EfluxChrome
+const mapStateToProps = state => ({
+  navStyle: state.viewer.navStyle,
+  playing: state.audio.playing,
+  transcriptOpen: state.viewer.transcript,
+})
+
+export default connect(mapStateToProps)(EfluxChrome)