hovering logic

2 files changed, 15 insertions, 2 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 5fda863..788289f 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -9,6 +9,18 @@
 .viewer-nav.black .main-nav {
   color: white;
 }
+/*
+.viewer-nav.white span {
+  text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 3px #fff;
+}
+.viewer-nav.black span {
+  text-shadow: 0 0 2px #000, 0 0 3px #000, 0 0 3px #000;
+}
+.viewer-nav.hovering-nav.white span,
+.viewer-nav.hovering-nav.black span {
+  text-shadow: 0 0 0px;
+}
+*/
 .main-nav {
   transition: all 0.2s;
   transform: translateZ(0) translateY(0);
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index 97919ce..98598d0 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -47,11 +47,11 @@ class NavParent extends Component {
     }
   }
   render() {
-    const { viewer, play_ts, started } = this.props
+    const { viewer, play_ts, started, playing } = this.props
     let containerClassName = "viewer-nav " + viewer.navStyle
     let navClassName = 'nav-row main-nav'
     if (this.state.hoveringNav || !started) containerClassName += ' hovering-nav'
-    if ((this.state.hoveringNext || viewer.atEndOfSection) && !viewer.nav && viewer.nextSection) containerClassName += ' hovering-next'
+    if ((this.state.hoveringNext || (viewer.atEndOfSection && !playing)) && !viewer.nav && viewer.nextSection) containerClassName += ' hovering-next'
     return (
       <div className={containerClassName} onMouseLeave={this.handleMouseLeave}>
         <div className={navClassName}>
@@ -107,6 +107,7 @@ class NavParent extends Component {
 const mapStateToProps = state => ({
   viewer: state.viewer,
   started: state.audio.started,
+  playing: state.audio.playing,
   play_ts: state.audio.play_ts,
 })