tween-scroll the transcript

6 files changed, 100 insertions, 3 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
index 2033465..4fc3964 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
@@ -6,7 +6,7 @@ import actions from 'app/actions'
 
 export const Vitrine = ({ media }) => {
   const { image_order, image_lookup, thumbnail_lookup } = media.settings
-  const width = (Math.floor(100 / image_order.length * 2) - 2) + 'vw'
+  const width = (Math.floor(100 / image_order.length * 2) - 2) + '%'
   // console.log(width)
   return (
     <div className='vitrine-items'>
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js
index 6d6db2d..d21cc79 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.gallery.js
@@ -14,6 +14,9 @@ export const MediaGallery = ({ paragraph, media, currentParagraph, currentAnnota
   return (
     <div
       className={className}
+      data-startts={paragraph.start_ts}
+      data-endts={paragraph.end_ts}
+      data-media={true}
       onClick={e => onAnnotationClick(e, paragraph, annotation)}
     >
       {"["}
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js
index 64de3a2..6eef6a0 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js
@@ -39,6 +39,9 @@ export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotati
   return (
     <div
       className={className}
+      data-startts={paragraph.start_ts}
+      data-endts={paragraph.end_ts}
+      data-media={true}
       onClick={e => onAnnotationClick(e, paragraph, annotation)}
     >
       {"["}
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 292eec8..5ea12da 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
@@ -9,6 +9,8 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
   return (
     <div
       className={className}
+      data-startts={paragraph.start_ts}
+      data-endts={paragraph.end_ts}
     >
       {paragraph.annotations.map(annotation => (
         <span
@@ -29,6 +31,8 @@ export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotatio
   return (
     <div
       className={className}
+      data-startts={paragraph.start_ts}
+      data-endts={paragraph.end_ts}
       onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}
     >
       <span>{ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text}</span>
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
index 423a055..1c1b3cc 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
@@ -14,6 +14,9 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
   return (
     <div
       className={className}
+      data-startts={paragraph.start_ts}
+      data-endts={paragraph.end_ts}
+      data-media={true}
       onClick={e => onAnnotationClick(e, paragraph, annotation)}
     >
       {"["}
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 2dd8402..3cc23bd 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -5,24 +5,107 @@ import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 
+import { toArray, floatInRange } from 'app/utils'
+import oktween from 'app/utils/oktween'
 import ParagraphList from 'app/views/paragraph/components/paragraph.list'
 import { transcriptElementLookup } from './components'
 
 class Transcript extends Component {
+  state = {
+    built: false,
+    paragraphs: [],
+    windowHeight: 0.0,
+    scrolling: false,
+  }
+
   constructor(props){
     super(props)
     this.handleClose = this.handleClose.bind(this)
     this.handleAnnotationClick = this.handleAnnotationClick.bind(this)
     this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this)
+    this.containerRef = React.createRef()
   }
 
   componentDidMount() {
     actions.transcript.buildAllParagraphs()
+    this.setState({
+      built: true,
+      windowHeight: window.innerHeight * 0.6 - 48,
+    })
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.built !== prevState.built) {
+      setTimeout(() => {
+        this.cacheScrollPositions()
+      }, 1000)
+    }
+    if (!this.state.scrolling) {
+      this.updateScrollPosition(this.props.play_ts)
+    }
+  }
+
+  cacheScrollPositions() {
+    let paragraphs = toArray(this.containerRef.current.querySelectorAll('.content > div')).map(el => {
+      const isHeading = el.classList.contains('section_heading')
+      const isMedia = el.dataset.media === 'true'
+      const scrollTop = isHeading ? el.offsetTop : el.offsetTop - 16 // 1.5rem
+      const start_ts = parseFloat(el.dataset.startts)
+      let end_ts = parseFloat(el.dataset.endts)
+      if (isHeading) console.log(scrollTop, start_ts, end_ts)
+      if (!start_ts || !end_ts) return null
+      if (end_ts < start_ts) {
+        end_ts = start_ts + 0.5
+      }
+      return { start_ts, end_ts, scrollTop }
+    }).filter(el => !!el)
+    this.setState({ paragraphs })
+  }
+
+  updateScrollPosition(play_ts, forceScroll) {
+    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
+    let nextParagraph;
+    const insideParagraph = paragraphs.some(paragraph => {
+      if (floatInRange(paragraph.start_ts, play_ts, paragraph.end_ts)) {
+        nextParagraph = paragraph
+        return true
+      }
+      return false
+    })
+    if (insideParagraph && nextParagraph) {
+      console.log(nextParagraph.scrollTop)
+      if (!floatInRange(scrollTop, nextParagraph.scrollTop, scrollTop + windowHeight) || forceScroll) {
+        this.setState({ currentParagraph: nextParagraph, scrolling: true })
+        this.scrollToParagraph(scrollTop, nextParagraph.scrollTop)
+      } else {
+        this.setState({ currentParagraph: nextParagraph })
+      }
+    }
+  }
+
+  scrollToParagraph(scrollFrom, scrollTo) {
+    if (this.state.scrolling) return
+    console.log('scrolling!', scrollFrom, scrollTo)
+    oktween.add({
+      from: { scrollTop: scrollFrom },
+      to: { scrollTop: scrollTo },
+      duration: 1000,
+      easing: oktween.easing.quad_in_out,
+      update: obj => {
+        this.containerRef.current.scrollTo(0, obj.scrollTop)
+      },
+      finished: tween => {
+        this.containerRef.current.scrollTo(0, tween.obj.scrollTop)
+        this.setState({ scrolling: false })
+      }
+    })
   }
 
   handleAnnotationClick(e, paragraph, annotation) {
-    // console.log(annotation)
     actions.viewer.seekToTimestamp(paragraph.start_ts)
+    this.updateScrollPosition(paragraph.start_ts + 0.1, annotation.type === 'section_heading')
   }
   
   handleParagraphDoubleClick(e, paragraph) {
@@ -37,7 +120,7 @@ class Transcript extends Component {
     const { viewer, paragraphs } = this.props
     return (
       <div className="transcript">
-        <div className='content'>
+        <div className='content' ref={this.containerRef}>
           <ParagraphList
             paragraphs={paragraphs}
             paragraphElementLookup={transcriptElementLookup}
@@ -59,6 +142,7 @@ class Transcript extends Component {
 
 const mapStateToProps = state => ({
   viewer: state.viewer,
+  play_ts: state.audio.play_ts,
   paragraphs: state.paragraph.paragraphs,
 })