new video UI

1 files changed, 12 insertions, 52 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 a196ee5..929daef 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
@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import VimeoPlayer from 'app/utils/vendor/vimeo'
 
 import actions from 'app/actions'
-import { PlayButton, PlayerTime, VolumeControl } from 'app/views/viewer/nav/viewer.icons'
+import { VideoScrubber } from '../components.media'
 
 class FullscreenVideo extends Component {
   state = {
@@ -15,24 +15,10 @@ class FullscreenVideo extends Component {
   }
   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) {
@@ -51,31 +37,13 @@ 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 })
+    if (!this.state.scrubbing || ('scrubbing' in timing)) {
+      this.setState(timing)
+    }
   }
+
   render() {
-    const { element, media, transitionDuration, playing, volume } = this.props
+    const { element, media, transitionDuration, playing } = this.props
     const { duration, percent, seconds } = this.state
     const { color } = element
     const item = media.lookup[element.settings.media_id]
@@ -84,7 +52,6 @@ class FullscreenVideo extends Component {
       color: color.textColor,
       transitionDuration,
     }
-    // console.log(item)
     return (
       <div
         className='fullscreen-element video'
@@ -106,18 +73,12 @@ 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>
+        <VideoScrubber
+          start_ts={element.start_ts}
+          playing={playing}
+          timing={this.state}
+          onScrub={this.handleTimeUpdate}
+        />
       </div>
     )
   }
@@ -127,7 +88,6 @@ const mapStateToProps = state => ({
   viewer: state.viewer,
   play_ts: state.audio.play_ts,
   playing: state.audio.playing,
-  volume: state.audio.volume,
 })
 
 export default connect(mapStateToProps)(FullscreenVideo)