1 files changed, 29 insertions, 2 deletions
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 7ca8687..e242e8a 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -5,12 +5,29 @@ import actions from 'app/actions'
 import { ROMAN_NUMERALS } from 'app/constants'
 import { Arrow } from './viewer.icons'
 import NavPlayer from './nav.player'
+import { thumbnailURL } from 'app/utils/annotation.utils'
 
 class NavParent extends Component {
+  state = {
+    hovering: false,
+    suppressHover: false,
+  }
+  constructor(props){
+    super(props)
+    this.handleMouseLeave = this.handleMouseLeave.bind(this)
+    this.handleMouseEnter = this.handleMouseEnter.bind(this)
+  }
+  handleMouseEnter(){
+    if (this.state.suppressHover) return
+    this.setState({ hovering: true })
+  }
+  handleMouseLeave(){
+    this.setState({ hovering: false, suppressHover: false })
+  }
   render() {
     const { viewer } = this.props
     return (
-      <div className={"viewer-nav " + viewer.navStyle}>
+      <div className={"viewer-nav " + viewer.navStyle + " " + (this.state.hovering ? 'hovering-next': '')} onMouseLeave={this.handleMouseLeave}>
         <div className='nav-row main-nav'>
           <div className='nav-section-name'>
             <span className="section-link link" onClick={() => actions.viewer.toggleComponent('nav')}>
@@ -25,7 +42,7 @@ class NavParent extends Component {
             </span>
           </div>
           <NavPlayer />
-          <div className='nav-next'>
+          <div className='nav-next' onMouseEnter={this.handleMouseEnter}>
             {viewer.nextSection &&
               <span className="next-link link" onClick={() => actions.viewer.seekToSection(viewer.nextSection)}>
                 Next
@@ -34,6 +51,16 @@ class NavParent extends Component {
             }
           </div>
         </div>
+        {viewer.nextSection &&
+          <div className="next-section-thumbnail"
+            onClick={() => {
+              actions.viewer.seekToSection(viewer.nextSection)
+              this.setState({ hovering: false, suppressHover: true })
+            }}
+            style={{
+            backgroundImage: viewer.nextSection.media.length && 'url(' + thumbnailURL(viewer.nextSection.media[0].media) + ')',
+          }}/>
+        }
       </div>
     )
   }