fix auto-scrolling transcript

1 files changed, 40 insertions, 24 deletions

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 3288a0a..77bf585 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -15,7 +15,7 @@ class Transcript extends Component {
     built: false,
     paragraphs: [],
     windowHeight: 0.0,
-    scrolling: false,
+    autoscrolling: false,
   }
 
   constructor(props){
@@ -42,11 +42,11 @@ class Transcript extends Component {
         this.cacheScrollPositions()
       }, 1000)
     }
-    if (!this.state.scrolling) {
+    if (!this.state.autoscrolling) {
       if (this.props.viewer.currentSection !== prevProps.viewer.currentSection) {
         this.updateScrollPosition(this.props.viewer.currentSection.start_ts, true)
       } else {
-        this.updateScrollPosition(this.props.play_ts)
+        this.updateScrollPosition(this.props.play_ts, false)
       }
     }
   }
@@ -68,10 +68,13 @@ class Transcript extends Component {
   }
 
   updateScrollPosition(play_ts, forceScroll) {
-    if (this.state.scrolling) return
+    if (this.state.autoscrolling) return
     const { paragraphs, windowHeight, currentParagraph } = this.state
     const scrollTop = this.containerRef.current.scrollTop
-    if (!forceScroll && currentParagraph && floatInRange(currentParagraph.start_ts, play_ts, currentParagraph.end_ts)) return
+    const now = Date.now()
+    if (!forceScroll && currentParagraph && floatInRange(currentParagraph.start_ts, play_ts, currentParagraph.end_ts)) {
+      return
+    }
     let nextParagraph;
     const insideParagraph = paragraphs.some(paragraph => {
       if (floatInRange(paragraph.start_ts, play_ts, paragraph.end_ts)) {
@@ -80,47 +83,60 @@ class Transcript extends Component {
       }
       return false
     })
+    // the paragraph updated!
     if (insideParagraph && nextParagraph) {
+      // first check if we need to scroll.
+      // if we're not being forced and the next paragraph is in view, dont scroll
+      if (!forceScroll && floatInRange(scrollTop, nextParagraph.scrollTop, scrollTop + windowHeight)) {
+        this.setState({ currentParagraph: nextParagraph })
+        return
+      }
+      // ok, so we wanna scroll.
+      // is the transcript closed? then we can scroll immediately!
+      if (!this.props.viewer.transcript) {
+        this.setState({ currentParagraph: nextParagraph })
+        this.scrollImmediate(nextParagraph.scrollTop)
+        return
+      }
+
       // console.log(nextParagraph.scrollTop)
-      if (!floatInRange(scrollTop, nextParagraph.scrollTop, scrollTop + windowHeight) || forceScroll) {
-        const now = Date.now()
-        // suppress double-scrolling
-        // suppress scroll if transcript is open and we've scrolled more than one screen-length away
-        if (!this.props.viewer.transcript || (
-          now - this.lastScroll > 1200 &&
-          Math.abs(scrollTop - nextParagraph.scrollTop) < this.state.windowHeight
-        )) {
-          this.lastScroll = now
-          this.scrollToParagraph(scrollTop, nextParagraph.scrollTop)
-          this.setState({ currentParagraph: nextParagraph, scrolling: true })
-        } else {
-          this.setState({ currentParagraph: nextParagraph })
-        }
-      } else {
+      // if the last scroll event was within a second ago, suppress auto-scroll to avoid it bouncing around
+      if ((now - this.lastScroll) < 1200) {
         this.setState({ currentParagraph: nextParagraph })
+        return
       }
+      // before i was checking this criteria.. if the distance we wanna scroll is less than a window height
+      // Math.abs(scrollTop - nextParagraph.scrollTop) < this.state.windowHeight
+      this.lastScroll = now
+      this.scrollToParagraph(scrollTop, nextParagraph.scrollTop)
+      this.setState({ currentParagraph: nextParagraph, autoscrolling: true })
     }
   }
 
   scrollToParagraph(scrollFrom, scrollTo) {
     // suppress if already scrolling
-    if (this.state.scrolling) return
-    // console.log('scrolling!', scrollFrom, scrollTo)
+    if (this.state.autoscrolling) return
+    // console.log('autoscrolling!', scrollFrom, scrollTo)
     oktween.add({
       from: { scrollTop: scrollFrom },
       to: { scrollTop: scrollTo },
       duration: 1000,
       easing: oktween.easing.quad_in_out,
       update: obj => {
+        this.scrollImmediate(obj.scrollTop)
         this.containerRef.current.scrollTo(0, obj.scrollTop)
       },
       finished: tween => {
-        this.containerRef.current.scrollTo(0, tween.obj.scrollTop)
-        this.setState({ scrolling: false })
+        this.scrollImmediate(tween.obj.scrollTop)
+        this.setState({ autoscrolling: false })
       }
     })
   }
 
+  scrollImmediate(pos) {
+    this.containerRef.current.scrollTo(0, pos)
+  }
+
   handleAnnotationClick(e, paragraph, annotation) {
     if (annotation.type === 'footnote') {
       return actions.viewer.openFootnote(annotation)