read the transcript at end of first section

1 files changed, 4 insertions, 2 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 283f3cb..cdfc5dc 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -47,7 +47,7 @@ class EfluxChrome extends Component {
     }
   }
   render() {
-    const { navStyle, playing, transcriptOpen, growlOpen, growlMessage } = this.props
+    const { navStyle, playing, transcriptOpen, growlOpen, growlMessage, atEndOfSection, currentSection } = this.props
     return (
       <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}>
         <div className="eflux-logo">
@@ -84,7 +84,7 @@ class EfluxChrome extends Component {
         <div className={this.state.play ? "growl-tooltip tooltip-play hover" : "growl-tooltip tooltip-play"}>
           {this.state.playMessage}
         </div>
-        <div className={this.state.transcript ? "growl-tooltip tooltip-transcript hover" : "growl-tooltip tooltip-transcript"}>
+        <div className={((atEndOfSection && currentSection.index === 0) || this.state.transcript) ? "growl-tooltip tooltip-transcript hover" : "growl-tooltip tooltip-transcript"}>
           {'Read the Transcript'}
         </div>
       </div>
@@ -98,6 +98,8 @@ const mapStateToProps = state => ({
   transcriptOpen: state.viewer.transcript,
   growlOpen: state.viewer.growlOpen,
   growlMessage: state.viewer.growlMessage,
+  atEndOfSection: state.viewer.atEndOfSection,
+  currentSection: state.viewer.currentSection,
 })
 
 export default connect(mapStateToProps)(EfluxChrome)