2 files changed, 117 insertions, 22 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,
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index fe57779..2740a2e 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -76,17 +76,46 @@
   stroke: #fff;
 }
 
-.growl-message {
+.growl-tooltip {
   position: absolute;
-  top: 0; left: 50%;
-  transition: transform 0.2s;
-  transform: translateZ(0) translateY(-5rem) translateX(-50%);
   background: black;
   color: white;
   border: 1px solid;
   padding: 0.75rem;
+}
+.growl-tooltip.tooltip-eflux {
+  left: 1.8rem;
+  top: 4rem;
+  transition: opacity 0.2s, transform 0.2s;
+  transform: translateZ(0) translateY(1rem);
+  opacity: 0;
+}
+.growl-tooltip.tooltip-play {
+  right: 6.5rem;
+  top: 4rem;
+  transition: opacity 0.2s, transform 0.2s;
+  transform: translateZ(0) translateY(1rem);
+  opacity: 0;
+}
+.growl-tooltip.tooltip-transcript {
+  right: 2.2rem;
+  top: 4rem;
+  transition: opacity 0.2s, transform 0.2s;
+  transform: translateZ(0) translateY(1rem);
+  opacity: 0;
+}
+.growl-tooltip.tooltip-eflux.hover,
+.growl-tooltip.tooltip-play.hover,
+.growl-tooltip.tooltip-transcript.hover {
+  transform: translateZ(0) translateY(0);
+  opacity: 1;
+}
+.growl-message {
+  top: 0; left: 50%;
+  transition: transform 0.2s;
+  transform: translateZ(0) translateY(-5rem) translateX(-50%);
   margin-top: 1rem;
 }
 .growl-message.open {
   transform: translateZ(0) translateY(0) translateX(-50%);
-}
\ No newline at end of file
+}