properly seek to media in transcript

5 files changed, 32 insertions, 17 deletions

diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js
index 8640fa9..2e53be1 100644
--- a/animism-align/frontend/app/utils/annotation.utils.js
+++ b/animism-align/frontend/app/utils/annotation.utils.js
@@ -46,4 +46,4 @@ export const sectionProgress = (section, play_ts) => {
 
 export const sectionProgressPercentage = (section, play_ts) => {
   return (Math.round(sectionProgress(section, play_ts) * 2000) / 20) + '%'
-}
\ No newline at end of file
+}
diff --git a/animism-align/frontend/app/utils/transcript.utils.js b/animism-align/frontend/app/utils/transcript.utils.js
index 3a21bda..65d13fd 100644
--- a/animism-align/frontend/app/utils/transcript.utils.js
+++ b/animism-align/frontend/app/utils/transcript.utils.js
@@ -95,11 +95,13 @@ export const buildParagraphs = (annotationOrder, sectionCount) => {
     }
   })
 
-  // finally, go over the paragraphs and update their end_ts, if none is set
+  // finally, go over the paragraphs to fix some timestamps
   for (let i = 0; i < (paragraphs.length - 1); i++) {
+    // update the end_ts, if none is set
     if (!paragraphs[i].end_ts) {
       paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1
     }
+    // push the timestamp for media to the next paragraph
     if (paragraphs[i].isMedia) {
       paragraphs[i].start_ts = paragraphs[i+1].start_ts - 0.01
     }
diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js
index 9e43c32..1c82e0d 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -12,12 +12,14 @@ class PlayerContainer extends Component {
     super(props)
     this.handleKeyDown = this.handleKeyDown.bind(this)
   }
+  
   componentDidMount() {
     // console.log(this.props.sections)
     const { sections } = this.props
     actions.viewer.setCurrentSection(sections[0], sections[1])
     document.addEventListener('keydown', this.handleKeyDown)
   }
+
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown)
   }
@@ -74,19 +76,7 @@ class PlayerContainer extends Component {
     }
 
     if (autoAdvance) {
-      const insideSection = sections.some((section, i) => {
-        if (floatInRange(section.start_ts, play_ts, section.end_ts)) {
-          if (currentSection !== section) {
-            const nextSection = sections[i+1]
-            actions.viewer.setCurrentSection(section, nextSection)
-          }
-          return true
-        }
-        return false
-      })
-      if (!insideSection) {
-        actions.viewer.setCurrentSection(sections[sections.length-1], null)
-      }
+      actions.viewer.setSectionFromTimestamp(play_ts)
     } else {
       actions.viewer.reachedEndOfSection()
     }
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 f6ed49c..2dd8402 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -22,8 +22,7 @@ class Transcript extends Component {
 
   handleAnnotationClick(e, paragraph, annotation) {
     // console.log(annotation)
-    actions.audio.seek(annotation.start_ts)
-    actions.audio.play()
+    actions.viewer.seekToTimestamp(paragraph.start_ts)
   }
   
   handleParagraphDoubleClick(e, paragraph) {
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 5673fd8..c1b11be 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -8,6 +8,7 @@ import {
   FULLSCREEN_UTILITY_ANNOTATION_TYPES,
   CURTAIN_COLOR_LOOKUP,
 } from 'app/constants'
+import { floatInRange } from 'app/utils'
 import { buildParagraphs } from 'app/utils/transcript.utils'
 import { annotationFadeTimings } from 'app/utils/annotation.utils'
 
@@ -207,6 +208,29 @@ export const seekToMediaItem = (section, mediaItem) => dispatch => {
   actions.viewer.hideComponent('checklist')
 }
 
+export const seekToTimestamp = play_ts => dispatch => {
+  actions.viewer.setSectionFromTimestamp(play_ts)
+  actions.audio.seek(play_ts)
+  actions.audio.play()
+}
+
+export const setSectionFromTimestamp = play_ts => dispatch => {
+  const { sections, currentSection } = store.getState().viewer
+  const insideSection = sections.some((section, i) => {
+    if (floatInRange(section.start_ts, play_ts, section.end_ts)) {
+      if (currentSection !== section) {
+        const nextSection = sections[i+1]
+        actions.viewer.setCurrentSection(section, nextSection)
+      }
+      return true
+    }
+    return false
+  })
+  if (!insideSection) {
+    actions.viewer.setCurrentSection(sections[sections.length-1], null)
+  }
+}
+
 export const openVitrineModal = (media, id) => dispatch => {
   console.log(media)
   const index = media.settings.image_order.indexOf(id)