scrubber timestamp

2 files changed, 51 insertions, 13 deletions

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 653a53b..f1f3e90 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
@@ -354,4 +354,21 @@
 .video-scrubber .playerTime {
   display: flex;
   align-items: center;
-}
\ No newline at end of file
+}
+.video-scrubber .scrub-timestamp {
+  position: absolute;
+  top: -3rem;
+  padding: 0.5rem;
+  background: black;
+  color: white;
+  text-align: center;
+  border-radius: 1rem;
+  width: 3rem;
+  margin-left: -1.5rem;
+  opacity: 0.0;
+  transition: opacity 0.1s;
+}
+.video-scrubber .scrub-bar-container:hover .scrub-timestamp {
+  opacity: 1.0;
+}
+
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 7bbbc07..53a93c3 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
@@ -6,20 +6,25 @@ import { clamp, timestamp } from 'app/utils'
 import { PlayButton, VolumeControl } from 'app/views/viewer/nav/viewer.icons'
 
 class VideoScrubber extends Component {
+  state = {
+    hovering: false,
+  }
   constructor(props) {
     super(props)
     this.scrubberRef = React.createRef()
-    this.handleScrubDotMouseDown = this.handleScrubDotMouseDown.bind(this)
-    this.handleScrubDotMouseMove = this.handleScrubDotMouseMove.bind(this)
-    this.handleScrubDotMouseUp = this.handleScrubDotMouseUp.bind(this)
+    this.handleMouseDown = this.handleMouseDown.bind(this)
+    this.handleMouseMove = this.handleMouseMove.bind(this)
+    this.handleMouseUp = this.handleMouseUp.bind(this)
+    this.handleMouseEnter = this.handleMouseEnter.bind(this)
+    this.handleMouseLeave = this.handleMouseLeave.bind(this)
   }
   componentDidMount() {
-    window.addEventListener('mousemove', this.handleScrubDotMouseMove)
-    window.addEventListener('mouseup', this.handleScrubDotMouseUp)
+    window.addEventListener('mousemove', this.handleMouseMove)
+    window.addEventListener('mouseup', this.handleMouseUp)
   }
   componentWillUnmount() {
-    window.removeEventListener('mousemove', this.handleScrubDotMouseMove)
-    window.removeEventListener('mouseup', this.handleScrubDotMouseUp)
+    window.removeEventListener('mousemove', this.handleMouseMove)
+    window.removeEventListener('mouseup', this.handleMouseUp)
   }
   scrub(x, scrubbing) {
     const { timing, start_ts, onScrub } = this.props
@@ -32,21 +37,29 @@ class VideoScrubber extends Component {
       percent, seconds, scrubbing
     })
   }
-  handleScrubDotMouseDown(e) {
+  handleMouseDown(e) {
     e.stopPropagation()
     this.scrub(e.pageX, true)
   }
-  handleScrubDotMouseMove(e) {
+  handleMouseMove(e) {
     e.stopPropagation()
     if (!this.props.timing.scrubbing) return
     this.scrub(e.pageX, true)
   }
-  handleScrubDotMouseUp(e) {
+  handleMouseUp(e) {
     e.stopPropagation()
     this.props.onScrub({ scrubbing: false })
   }
+  handleMouseEnter() {
+    this.setState({ hovering: true })
+  }
+  handleMouseLeave() {
+    this.setState({ hovering: false })
+  }
   render() {
     const { playing, volume, timing } = this.props
+    const { hovering } = this.state
+    const timestampText = timestamp(clamp(timing.seconds, 0, timing.duration))
     return (
       <div className='video-scrubber'>
         <div className='start-controls'>
@@ -54,7 +67,9 @@ class VideoScrubber extends Component {
         </div>
         <div
           className='scrub-bar-container'
-          onMouseDown={this.handleScrubDotMouseDown}
+          onMouseDown={this.handleMouseDown}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
           ref={this.scrubberRef}
         >
           <div className='scrub-bar' />
@@ -62,10 +77,16 @@ class VideoScrubber extends Component {
             className='scrub-dot'
             style={{ left: (100 * timing.percent) + "%" }}
           />
+          <div
+            className='scrub-timestamp'
+            style={{ left: (100 * (timing.percent)) + "%" }}
+          >
+            {timestampText}
+          </div>
         </div>
         <div className='end-controls'>
           <div className='playerTime'>
-            {timestamp(clamp(timing.seconds, 0, timing.duration))}
+            {timestampText}
           </div>
           <VolumeControl volume={volume} />
         </div>