1 files changed, 6 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 cdfc5dc..d52f348 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -48,6 +48,7 @@ class EfluxChrome extends Component {
   }
   render() {
     const { navStyle, playing, transcriptOpen, growlOpen, growlMessage, atEndOfSection, currentSection } = this.props
+    const showingTranscriptTooltip = ((atEndOfSection && currentSection.index === 0) || this.state.transcript)
     return (
       <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}>
         <div className="eflux-logo">
@@ -81,10 +82,13 @@ class EfluxChrome extends Component {
         <div className={this.state.eflux ? "growl-tooltip tooltip-eflux hover" : "growl-tooltip tooltip-eflux"}>
           {'Back to e-flux'}
         </div>
-        <div className={this.state.play ? "growl-tooltip tooltip-play hover" : "growl-tooltip tooltip-play"}>
+        <div className={(!showingTranscriptTooltip && this.state.play) ? "growl-tooltip tooltip-play hover" : "growl-tooltip tooltip-play"}>
           {this.state.playMessage}
         </div>
-        <div className={((atEndOfSection && currentSection.index === 0) || this.state.transcript) ? "growl-tooltip tooltip-transcript hover" : "growl-tooltip tooltip-transcript"}>
+        <div
+          className={showingTranscriptTooltip ? "growl-tooltip tooltip-transcript hover" : "growl-tooltip tooltip-transcript"}
+          onClick={() => actions.viewer.toggleComponent('transcript')}
+        >
           {'Read the Transcript'}
         </div>
       </div>