video scrubber inherits duration from fullscreen element, not video itself

5 files changed, 10 insertions, 10 deletions

diff --git a/animism-align/frontend/app/views/align/components/sidebar/tableOfContents.component.js b/animism-align/frontend/app/views/align/components/sidebar/tableOfContents.component.js
index 24cb59c..34aedb5 100644
--- a/animism-align/frontend/app/views/align/components/sidebar/tableOfContents.component.js
+++ b/animism-align/frontend/app/views/align/components/sidebar/tableOfContents.component.js
@@ -11,7 +11,6 @@ class TableOfContents extends Component {
     const { loading, order, lookup } = this.props.annotation
     if (loading || !order) return null
     const sectionIds = order.filter(id => lookup[id].type === "section_heading")
-    console.log(this.props.annotation)
     return (
       <div className="toc">
         {sectionIds.map((id, i) => (
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}>
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
index e81ee7b..6b73087 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
@@ -8,7 +8,7 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
   if (className !== 'paragraph') className += ' paragraph'
   if (currentParagraph) className += ' current'
   const firstAnnotation = paragraph.annotations[0]
-console.log(paragraph.start_ts, paragraph)
+  // console.log(paragraph.start_ts, paragraph)
   return (
     <div
       className={className}
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
index 52ff2f6..b9caa69 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -91,7 +91,7 @@ class Transcript extends Component {
 
   scrollToParagraph(scrollFrom, scrollTo) {
     if (this.state.scrolling) return
-    console.log('scrolling!', scrollFrom, scrollTo)
+    // console.log('scrolling!', scrollFrom, scrollTo)
     oktween.add({
       from: { scrollTop: scrollFrom },
       to: { scrollTop: scrollTo },
@@ -129,7 +129,7 @@ class Transcript extends Component {
 
   render() {
     const { viewer, paragraphs } = this.props
-    console.log(paragraphs.map(p => p.annotations.filter(a => a.type === 'footnote')).filter(p => p.length))
+    // console.log(paragraphs.map(p => p.annotations.filter(a => a.type === 'footnote')).filter(p => p.length))
     return (
       <div className="transcript">
         <div