video scrubber inherits duration from fullscreen element, not video itself

2 files changed, 7 insertions, 6 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 7f23ac7..78c7807 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
@@ -62,7 +62,7 @@ class FullscreenVideo extends Component {
             video={item.url}
             paused={!playing}
             autoplay={true}
-            muted={!annotation.settings.unmuted}
+            muted={!element.settings.unmuted}
             loop={!!element.settings.loop}
             seek={this.state.seek}
             responsive={true}
@@ -77,6 +77,7 @@ class FullscreenVideo extends Component {
         <VideoScrubber
           start_ts={element.start_ts}
           playing={playing}
+          duration={element.duration}
           timing={this.state}
           onScrub={this.handleTimeUpdate}
         />
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 884b5e2..01255f6 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,13 +43,13 @@ class VideoScrubber extends Component {
     this.setState({ showing: false })
   }
   scrub(x, scrubbing) {
-    const { timing, start_ts, onScrub } = this.props
+    const { timing, start_ts, onScrub, duration } = this.props
     const bounds = this.scrubberRef.current.getBoundingClientRect()
     const percent = clamp((x - bounds.left) / bounds.width, 0, 1)
-    const seconds = percent * timing.duration
+    const seconds = percent * duration
     actions.audio.seek(start_ts + seconds)
     onScrub({
-      seek: seconds,
+      seek: seconds % timing.duration,
       percent, seconds, scrubbing
     })
   }
@@ -74,9 +74,9 @@ class VideoScrubber extends Component {
     this.setState({ hovering: false })
   }
   render() {
-    const { playing, volume, timing } = this.props
+    const { playing, volume, timing, duration } = this.props
     const { hovering, showing } = this.state
-    const timestampText = timestamp(clamp(timing.seconds, 0, timing.duration))
+    const timestampText = timestamp(clamp(timing.seconds, 0, duration))
     const className = (hovering || showing) ? 'video-scrubber show' : 'video-scrubber'
     return (
       <div className={className}>