scrub bar

2 files changed, 79 insertions, 0 deletions

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 e9586b6..d6f95ed 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
@@ -11,13 +11,28 @@ class FullscreenVideo extends Component {
     percent: 0.0,
     seconds: 0.0,
     seek: 0.0,
+    scrubbing: false,
   }
   constructor(props) {
     super(props)
+    this.scrubberRef = React.createRef()
     this.handlePlay = this.handlePlay.bind(this)
     this.handlePause = this.handlePause.bind(this)
     this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
     this.handleEnd = this.handleEnd.bind(this)
+    this.handleScrubBarClick = this.handleScrubBarClick.bind(this)
+    this.handleScrubDotMouseDown = this.handleScrubDotMouseDown.bind(this)
+    this.handleScrubDotMouseMove = this.handleScrubDotMouseMove.bind(this)
+    this.handleScrubDotMouseUp = this.handleScrubDotMouseUp.bind(this)
+  }
+  componentDidMount() {
+    window.addEventListener('mousemove', this.handleScrubDotMouseMove)
+    window.addEventListener('mouseup', this.handleScrubDotMouseUp)
+  }
+  componentWillUnmount() {
+    window.removeEventListener('mousemove', this.handleScrubDotMouseMove)
+    window.removeEventListener('mouseup', this.handleScrubDotMouseUp)
+    this.setState({ scrubbing: false })
   }
   componentDidUpdate(prevProps) {
     if (Math.abs(this.props.play_ts - prevProps.play_ts) > 2.0) {
@@ -38,6 +53,27 @@ class FullscreenVideo extends Component {
   handleTimeUpdate(timing) {
     this.setState(timing)
   }
+  handleScrubBarClick(e) {
+    e.stopPropagation()
+    const bounds = this.scrubberRef.current.getBoundingClientRect()
+    const percent = (e.pageX - bounds.left) / bounds.width
+    const seconds = percent * this.state.duration
+    actions.audio.seek(this.props.element.start_ts + seconds)
+    this.setState({ percent, seconds })
+    // actions.audio.seek(clamp(play_ts - 5.0, start_ts, end_ts))
+  }
+  handleScrubDotMouseDown(e) {
+    e.stopPropagation()
+    this.setState({ scrubbing: true })
+  }
+  handleScrubDotMouseMove(e) {
+    e.stopPropagation()
+    if (!this.state.scrubbing) return
+  }
+  handleScrubDotMouseUp(e) {
+    e.stopPropagation()
+    this.setState({ scrubbing: false })
+  }
   render() {
     const { element, media, transitionDuration, playing, volume } = this.props
     const { duration, percent, seconds } = this.state
@@ -70,6 +106,18 @@ class FullscreenVideo extends Component {
             onEnd={this.handleEnd}
           />
         </div>
+        <div
+          className='video-scrubber'
+          onClick={this.handleScrubBarClick}
+          ref={this.scrubberRef}
+        >
+          <div className='scrub-bar' />
+          <div
+            className='scrub-dot'
+            style={{ left: (100 * this.state.percent) + "%" }}
+            onMouseDown={this.handleScrubDotMouseDown}
+          />
+        </div>
         <div className='video-nav'>
           <div className='video-title' onClick={() => actions.viewer.toggleComponent('nav')}>
             {item.title}
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 f890234..7bb3038 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
@@ -290,3 +290,34 @@
 .black .vitrine-item:hover .zoomPlus {
   opacity: 1.0;
 }
+
+/* video scrubber */
+
+.video-scrubber {
+  position: absolute;
+  bottom: 5rem;
+  left: 50%;
+  width: 300px;
+  height: 16px;
+  margin-left: -150px;
+  cursor: pointer;
+}
+.video-scrubber .scrub-bar {
+  position: absolute;
+  top: 7px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: white;
+}
+.video-scrubber .scrub-dot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  margin-left: -8px;
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+}