hovering logic

5 files changed, 28 insertions, 5 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,
 })
 
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 3725372..8d32abd 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -145,9 +145,13 @@
   align-items: center;
   opacity: 0;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.2s;
+  transform: translateZ(0);
   padding: 1.5rem;
 }
+.audio-paused .not-scrollable .speaker-icon {
+  transform: translateZ(0) translateY(-3rem);
+}
 .paragraph .speaker-icon {
   top: -1.5rem;
   left: -5.5rem;
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index 44c5bb2..fc0b3ea 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -58,7 +58,7 @@ class PlayerTranscript extends Component {
   render() {
     const { paragraphs, color, inlineParagraphCount } = this.props.section
     const className = "player-transcript " + color + " " + (
-      inlineParagraphCount > 2 ? 'scrollable' : ''
+      inlineParagraphCount > 2 ? 'scrollable' : 'not-scrollable'
     )
     return (
       <div
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index dde5ba6..38f08e4 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -33,11 +33,16 @@ import VitrineModal from './modals/modals.vitrine'
 
 class ViewerContainer extends Component {
   render() {
-    const { loaded, viewer } = this.props
+    const { loaded, viewer, playing } = this.props
     if (!loaded) {
       return <div className='viewer loading'><Loader /></div>
     }
     let className = 'viewer'
+    if (playing) {
+      className += ' audio-playing'
+    } else {
+      className += ' audio-paused'
+    }
     if (viewer.checklist || viewer.credits) {
       className += ' checklist-open'
     } else {
@@ -77,6 +82,7 @@ const mapStateToProps = state => ({
     !!state.media.index.lookup &&
     !!state.viewer.sections.length
   ),
+  playing: state.audio.playing,
   viewer: state.viewer,
 })