2 files changed, 4 insertions, 4 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 c27947b..8ad0cd1 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -42,7 +42,7 @@ class NavParent extends Component {
     let containerClassName = "viewer-nav " + viewer.navStyle
     let navClassName = 'nav-row main-nav'
     if (this.state.hoveringNav) navClassName += ' hovering-nav'
-    if (this.state.hoveringNext) containerClassName += ' hovering-next'
+    if (this.state.hoveringNext || viewer.atEndOfSection) containerClassName += ' hovering-next'
     return (
       <div className={containerClassName} onMouseLeave={this.handleMouseLeave}>
         <div className={navClassName}>
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index 2ca8dff..7bc0219 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
-import { timestamp } from 'app/utils'
+import { clamp, timestamp } from 'app/utils'
 
 // arrows
 
@@ -75,10 +75,10 @@ export const PlayButton = ({ playing }) => {
 
 export const PlayerTime = ({ play_ts, duration }) => (
   <span className='playerTime'>
-    {timestamp(play_ts)}
+    {timestamp(clamp(play_ts, 0, duration))}
     <span className='playerDuration'>
     {' / '}
-    {timestamp(duration)}
+    {timestamp(clamp(duration, 0, duration))}
     </span>
   </span>
 )