subtitles in transcript. clicking them seeks video

1 files changed, 75 insertions, 1 deletions

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 1c1b3cc..8e65843 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
@@ -1,5 +1,9 @@
 import React, { Component } from 'react'
 
+import actions from 'app/actions'
+import { timestampToSeconds, floatInRange } from 'app/utils'
+import { parseSubtitles } from 'app/utils/transcript.utils'
+
 import { MediaCitation } from './elementTypes.image'
 
 export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
@@ -11,7 +15,7 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
   }
   const item = media.lookup[annotation.settings.media_id]
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
-  return (
+  const el = (
     <div
       className={className}
       data-startts={paragraph.start_ts}
@@ -24,4 +28,74 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati
       {"]"}
     </div>
   )
+  if (item.settings.subtitles) {
+    return (
+      <div>
+        {el}
+        <TranscriptVideoSubtitles
+          annotation={annotation}
+          mediaItem={item}
+        />
+      </div>
+    )
+  }
+  return el
+}
+
+class TranscriptVideoSubtitles extends Component {
+  state = {
+    subtitles: [],
+    current: null,
+  }
+  componentDidMount() {
+    this.loadSubtitles()
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.play_ts !== prevProps.play_ts) {
+      this.updateCurrentSubtitle()
+    }
+  }
+  loadSubtitles() {
+    const { annotation, mediaItem, } = this.props
+    const { start_ts } = annotation
+    const video_start_ts = timestampToSeconds(annotation.settings.video_start_ts) || 0.0
+    const subtitles = parseSubtitles(mediaItem, start_ts - video_start_ts)
+    console.log('subtitles', start_ts, video_start_ts, subtitles)
+    if (subtitles) {
+      this.setState({ subtitles, current: null })
+    }
+  }
+  updateCurrentSubtitle() {
+    const { play_ts } = this.props
+    const current = this.state.subtitles.filter(({ start_ts, end_ts }) => (
+      floatInRange(start_ts, play_ts, end_ts)
+    )).slice(-1)
+    if (!current.length) {
+      this.setState({ current: null })
+    } else {
+      this.setState({ current: current[0] })
+    }
+  }
+  render() {
+    const { subtitles, current } = this.state
+    if (!subtitles) return
+    return (
+      <div className="paragraph pullquote subtitles">
+        {subtitles.map(subtitle => {
+          return (
+            <span
+              onClick={e => {
+                e && e.stopPropagation()
+                console.log(subtitle, e)
+                actions.viewer.seekToTimestamp(subtitle.start_ts)
+              }}
+              className={subtitle === current ? 'current' : ""}
+            >
+              {subtitle.lines.join(" ")}
+            </span>
+          )
+        })}
+      </div>
+    )
+  }
 }