tooltips

1 files changed, 83 insertions, 17 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 f8c2892..a7f6d24 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -7,24 +7,90 @@ import {
 import { PlayButton } from './viewer.icons'
 import actions from 'app/actions'
 
-const EfluxChrome = React.memo(({ navStyle, playing, transcriptOpen, started, growlOpen, growlMessage }) => (
-  <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}>
-    <div className="eflux-logo">
-      <a href="/">
-        {EfluxLogo}
-      </a>
-    </div>
-    <div className={growlOpen ? "growl-message open" : "growl-message"}>
-      {growlMessage}
-    </div>
-    <div className="eflux-nav">
-      <PlayButton playing={playing} />
-      <div className="transcript-icon" onClick={() => actions.viewer.toggleComponent('transcript')}>
-        {EfluxMenu}
+const PLAY_MESSAGES = {
+  not_started: 'Start the Exhibition',
+  playing: 'Pause',
+  paused: 'Resume',
+}
+
+class EfluxChrome extends Component {
+  state = {
+    eflux: false,
+    play: false,
+    transcript: false,
+    started: false,
+    playMessage: PLAY_MESSAGES.not_started,
+  }
+  handleMouseEnter(category) {
+    this.setState({ [category]: true })
+  }
+  handleMouseLeave(category) {
+    this.setState({ [category]: false })
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.playing !== prevProps.playing) {
+      if (!this.state.started) {
+        this.setState({
+          started: true,
+          play: false,
+        })
+        setTimeout(() => {
+          this.setState({
+            playMessage: this.props.playing ? PLAY_MESSAGES.playing : PLAY_MESSAGES.paused,
+          })
+        }, 150)
+      } else {
+        this.setState({
+          playMessage: this.props.playing ? PLAY_MESSAGES.playing : PLAY_MESSAGES.paused,
+        })
+      }
+    }
+  }
+  render() {
+    const { navStyle, playing, transcriptOpen, growlOpen, growlMessage } = this.props
+    return (
+      <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}>
+        <div className="eflux-logo">
+          <a
+            href="/"
+            onMouseEnter={() => this.handleMouseEnter('eflux')}
+            onMouseLeave={() => this.handleMouseLeave('eflux')}
+          >
+            {EfluxLogo}
+          </a>
+        </div>
+        <div className={growlOpen ? "growl-tooltip growl-message open" : "growl-tooltip growl-message"}>
+          {growlMessage}
+        </div>
+        <div className="eflux-nav">
+          <span
+            onMouseEnter={() => this.handleMouseEnter('play')}
+            onMouseLeave={() => this.handleMouseLeave('play')}
+          >
+            <PlayButton playing={playing} />
+          </span>
+          <div
+            className="transcript-icon"
+            onMouseEnter={() => this.handleMouseEnter('transcript')}
+            onMouseLeave={() => this.handleMouseLeave('transcript')}
+            onClick={() => actions.viewer.toggleComponent('transcript')}
+          >
+            {EfluxMenu}
+          </div>
+        </div>
+        <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"}>
+          {this.state.playMessage}
+        </div>
+        <div className={this.state.transcript ? "growl-tooltip tooltip-transcript hover" : "growl-tooltip tooltip-transcript"}>
+          {'Read the Transcript'}
+        </div>
       </div>
-    </div>
-  </div>
-))
+    )
+  }
+}
 
 const mapStateToProps = state => ({
   navStyle: state.viewer.navStyle,