getting scrubber working with the new start ts

1 files changed, 22 insertions, 7 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 01255f6..bb6a753 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
@@ -43,14 +43,22 @@ class VideoScrubber extends Component {
     this.setState({ showing: false })
   }
   scrub(x, scrubbing) {
-    const { timing, start_ts, onScrub, duration } = this.props
+    const { timing, start_ts, video_start_ts, onScrub, duration } = this.props
     const bounds = this.scrubberRef.current.getBoundingClientRect()
+    // get percent offset from the scrubber
     const percent = clamp((x - bounds.left) / bounds.width, 0, 1)
+    // this offset in seconds based on the length of the fullscreen element
     const seconds = percent * duration
+    // we can use this to seek the audio
     actions.audio.seek(start_ts + seconds)
+    // apply the video start offset.
+    // in case the video loops, modulo the length of the original video
+    const video_seek = ((seconds + video_start_ts) % timing.duration)
+    // 
     onScrub({
-      seek: seconds % timing.duration,
-      percent, seconds, scrubbing
+      seek: video_seek,
+      seconds: video_seek,
+      scrubbing,
     })
   }
   handleMouseDown(e) {
@@ -74,10 +82,17 @@ class VideoScrubber extends Component {
     this.setState({ hovering: false })
   }
   render() {
-    const { playing, volume, timing, duration } = this.props
+    const { playing, volume, timing, video_start_ts, duration } = this.props
     const { hovering, showing } = this.state
-    const timestampText = timestamp(clamp(timing.seconds, 0, duration))
+    // remove video start offset from timing
+    const player_ts = timing.seconds - video_start_ts
+    // compute percent from the length of the fullscreen element
+    const percent = player_ts / duration
+    // display timestamp from the fullscreen element too
+    const timestampText = timestamp(clamp(player_ts, 0, duration))
+    // show or hide the scrubber bar
     const className = (hovering || showing) ? 'video-scrubber show' : 'video-scrubber'
+    // console.log(timing.seconds, video_start_ts, duration)
     return (
       <div className={className}>
         <div className='start-controls'>
@@ -93,11 +108,11 @@ class VideoScrubber extends Component {
           <div className='scrub-bar' />
           <div
             className='scrub-dot'
-            style={{ left: (100 * timing.percent) + "%" }}
+            style={{ left: (100 * percent) + "%" }}
           />
           <div
             className='scrub-timestamp'
-            style={{ left: (100 * (timing.percent)) + "%" }}
+            style={{ left: (100 * percent) + "%" }}
           >
             {timestampText}
           </div>