video scrubber

3 files changed, 28 insertions, 3 deletions

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index 44c55cf..dfee865 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -100,4 +100,6 @@ export const THUMBNAIL_QUALITY = 80
 export const GROWL = {
   OPENING_MESSAGE: "Start the episode by clicking play or scroll to browse on your own.",
   REACHED_END_OF_FIRST_SECTION: "Click \"Next\" to advance the exhibition.",
-}
\ No newline at end of file
+}
+
+export const VIDEO_SCRUBBER_HIDE_DELAY = 2000
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index f1f3e90..3e9f349 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -310,6 +310,11 @@
   border-radius: 1.5rem;
   display: flex;
   align-items: center;
+  opacity: 0.0;
+  transition: opacity 0.2s;
+}
+.video-scrubber.show {
+  opacity: 1.0;
 }
 .video-scrubber .start-controls {
   width: 3rem;
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 53a93c3..884b5e2 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
@@ -2,12 +2,14 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
+import { VIDEO_SCRUBBER_HIDE_DELAY } from 'app/constants'
 import { clamp, timestamp } from 'app/utils'
 import { PlayButton, VolumeControl } from 'app/views/viewer/nav/viewer.icons'
 
 class VideoScrubber extends Component {
   state = {
     hovering: false,
+    showing: true,
   }
   constructor(props) {
     super(props)
@@ -17,14 +19,28 @@ class VideoScrubber extends Component {
     this.handleMouseUp = this.handleMouseUp.bind(this)
     this.handleMouseEnter = this.handleMouseEnter.bind(this)
     this.handleMouseLeave = this.handleMouseLeave.bind(this)
+    this.hide = this.hide.bind(this)
   }
   componentDidMount() {
     window.addEventListener('mousemove', this.handleMouseMove)
     window.addEventListener('mouseup', this.handleMouseUp)
+    this.show()
   }
   componentWillUnmount() {
     window.removeEventListener('mousemove', this.handleMouseMove)
     window.removeEventListener('mouseup', this.handleMouseUp)
+    clearTimeout(this.timeout)
+  }
+  show() {
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(this.hide, VIDEO_SCRUBBER_HIDE_DELAY)
+    if (!this.showing) {
+      this.setState({ showing: true })
+    }
+  }
+  hide() {
+    clearTimeout(this.timeout)
+    this.setState({ showing: false })
   }
   scrub(x, scrubbing) {
     const { timing, start_ts, onScrub } = this.props
@@ -43,6 +59,7 @@ class VideoScrubber extends Component {
   }
   handleMouseMove(e) {
     e.stopPropagation()
+    this.show()
     if (!this.props.timing.scrubbing) return
     this.scrub(e.pageX, true)
   }
@@ -58,10 +75,11 @@ class VideoScrubber extends Component {
   }
   render() {
     const { playing, volume, timing } = this.props
-    const { hovering } = this.state
+    const { hovering, showing } = this.state
     const timestampText = timestamp(clamp(timing.seconds, 0, timing.duration))
+    const className = (hovering || showing) ? 'video-scrubber show' : 'video-scrubber'
     return (
-      <div className='video-scrubber'>
+      <div className={className}>
         <div className='start-controls'>
           <PlayButton playing={playing} />
         </div>