fix scrubber, next hover. much nicer transitions when seeking

5 files changed, 25 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 6cab857..3e7b000 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -106,7 +106,7 @@
 }
 
 .next-link {
-  padding-right: .25rem;
+  padding: 0.25rem 0.25rem 0.25rem 8rem;
 }
 .transcript-link {
   padding-right: 1.25rem;
@@ -128,6 +128,7 @@
   width: 12rem;
   height: 8rem;
   z-index: 2;
+  margin-top: 3rem;
   margin-bottom: 0.5rem;
   margin-right: 0.75rem;
   background-size: cover;
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 fdad211..00eab26 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -15,6 +15,7 @@ class NavParent extends Component {
   }
   constructor(props){
     super(props)
+    this.suppressHover = false
     this.handleMouseEnter = this.handleMouseEnter.bind(this)
     this.handleMouseLeave = this.handleMouseLeave.bind(this)
     this.handleMouseEnterNext = this.handleMouseEnterNext.bind(this)
@@ -23,22 +24,30 @@ class NavParent extends Component {
     this.goToNextSection = this.goToNextSection.bind(this)
   }
   handleMouseEnter(){
+    // console.log('mouse enter')
     if (this.state.suppressHover) return
     this.setState({ hoveringNext: false, hoveringNav: true })
   }
   handleMouseEnterNext(){
+    // console.log('mouse enter next', this.state.suppressHover)
     if (this.state.suppressHover) return
     this.setState({ hoveringNext: true, hoveringNav: false })
   }
   handleMouseLeave(){
-    this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: false })
+    // console.log('mouse leave')
+    this.setState({ hoveringNav: false })
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.setState({ hoveringNext: false, suppressHover: false })
+    }, 100)
   }
   handleMouseLeaveNext(){
+    // console.log('mouse leave next')
     this.setState({ hoveringNext: false, suppressHover: true, })
     clearTimeout(this.timeout)
     this.timeout = setTimeout(() => {
       this.setState({ suppressHover: false })
-    }, 50)
+    }, 100)
   }
   handleNavBarClick(e) {
     e && e.stopPropagation()
@@ -85,11 +94,12 @@ class NavParent extends Component {
           </div>
           <div
             className='nav-next'
-            onMouseEnter={this.handleMouseEnterNext}
+            onMouseEnter={this.handleMouseEnter}
             onClick={this.goToNextSection}
           >
             <span
               className="next-link link"
+              onMouseEnter={this.handleMouseEnterNext}
             >
               {viewer.nextSection
                 ? "Next"
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
index a2c4b72..e226bab 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
@@ -28,6 +28,7 @@ class FullscreenVideo extends Component {
     this.handlePlay = this.handlePlay.bind(this)
     this.handlePause = this.handlePause.bind(this)
     this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
+    this.handleScrub = this.handleScrub.bind(this)
     this.handleEnd = this.handleEnd.bind(this)
   }
   componentDidMount() {
@@ -61,6 +62,10 @@ class FullscreenVideo extends Component {
       this.setState(timing)
     }
   }
+  handleScrub(timing) {
+    console.log(timing)
+    this.setState(timing)
+  }
 
   render() {
     const { element, media, transitionDuration, play_ts, playing } = this.props
@@ -109,7 +114,7 @@ class FullscreenVideo extends Component {
           playing={playing}
           duration={element.duration}
           timing={this.state}
-          onScrub={this.handleTimeUpdate}
+          onScrub={this.handleScrub}
         />
       </div>
     )
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
index 78c4b1d..aec82ca 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js
@@ -55,6 +55,7 @@ class VideoScrubber extends Component {
     // in case the video loops, modulo the length of the original video
     const video_seek = ((seconds + video_start_ts) % timing.duration)
     // 
+    console.log(start_ts, seconds)
     onScrub({
       seek: video_seek,
       seconds: seconds,
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
index 75a7e33..2f17375 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -49,6 +49,7 @@ class PlayerFullscreen extends Component {
     // also any elements starting at this point should transition immediately,
     // to prevent flash of the underlying content.
     if (seekedElements.length) {
+      // console.log(play_ts, seek_ts, 'seeked', seekedElements)
       elements = seekedElements.map(e => {
         if (e.start_ts === seek_ts && e.type !== 'curtain') {
           return {
@@ -58,6 +59,8 @@ class PlayerFullscreen extends Component {
         }
         return e
       })
+    } else {
+      // console.log(play_ts, seek_ts, 'elements', elements)
     }
     // console.log(elements)
     // set nav style from top-most element