defer video scrubber appearance to mouse movement. user must move the mouse at least 2 ticks.

1 files changed, 21 insertions, 4 deletions

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 fcc097a..e281559 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
@@ -19,21 +19,24 @@ class VideoScrubber extends Component {
     this.handleMouseUp = this.handleMouseUp.bind(this)
     this.handleMouseEnter = this.handleMouseEnter.bind(this)
     this.handleMouseLeave = this.handleMouseLeave.bind(this)
+    this.handleWindowFocus = this.handleWindowFocus.bind(this)
     this.hide = this.hide.bind(this)
   }
   componentDidMount() {
     window.addEventListener('mousemove', this.handleMouseMove)
     window.addEventListener('mouseup', this.handleMouseUp)
+    window.addEventListener('focus', this.handleWindowFocus)
     // this.show()
   }
   componentWillUnmount() {
     window.removeEventListener('mousemove', this.handleMouseMove)
     window.removeEventListener('mouseup', this.handleMouseUp)
-    clearTimeout(this.timeout)
+    window.removeEventListener('focus', this.handleWindowFocus)
+    clearTimeout(this.hideTimeout)
   }
   show() {
-    clearTimeout(this.timeout)
-    this.timeout = setTimeout(this.hide, VIDEO_SCRUBBER_HIDE_DELAY)
+    clearTimeout(this.hideTimeout)
+    this.hideTimeout = setTimeout(this.hide, VIDEO_SCRUBBER_HIDE_DELAY)
     if (!this.showing) {
       this.setState({ showing: true })
     }
@@ -41,6 +44,7 @@ class VideoScrubber extends Component {
   hide() {
     clearTimeout(this.timeout)
     this.setState({ showing: false })
+    this.defer = false
   }
   scrub(x, scrubbing) {
     const { timing, start_ts, video_start_ts, onScrub, duration } = this.props
@@ -69,7 +73,16 @@ class VideoScrubber extends Component {
   }
   handleMouseMove(e) {
     e.stopPropagation()
-    this.show()
+    console.log('move', this.defer)
+    if (this.defer) {
+      this.defer = false
+      this.show()
+    }
+    this.defer = true
+    clearTimeout(this.showTimeout)
+    this.showTimeout = setTimeout(() => {
+      this.defer = false
+    }, 16)
     if (!this.props.timing.scrubbing) return
     this.scrub(e.pageX, true)
   }
@@ -83,6 +96,10 @@ class VideoScrubber extends Component {
   handleMouseLeave() {
     this.setState({ hovering: false })
   }
+  handleWindowFocus() {
+    this.setState({ showing: false, hovering: false })
+    clearTimeout(this.hideTimeout)
+  }
   render() {
     const { playing, start_ts, play_ts, volume, timing, video_start_ts, duration } = this.props
     const { hovering, showing } = this.state