start on scroll

4 files changed, 34 insertions, 2 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
index 4220eff..ff1de04 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
@@ -53,6 +53,19 @@ export const AnnotationFormIntro = ({ annotation, media, handleSettingsChange, h
         onChange={handleSettingsSelect}
       />
 
+      <TextInput
+        title="Actual start time"
+        name="intro_start_ts"
+        placeholder="0:00"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+
+      <LabelDescription>
+        {'Timestamp where voiceover starts, after any intro sound effect.'}
+      </LabelDescription>
+
       <AnnotationFormFullscreen
         annotation={annotation}
         handleSettingsChange={handleSettingsChange}
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index 57478a0..f8a1fc6 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -64,7 +64,7 @@ export const PlayButton = ({ playing }) => {
   return (
     <div
       className={playing ? 'playToggle playing' : 'playToggle paused'}
-      onClick={() => playing ? actions.audio.pause() : actions.audio.play()}
+      onClick={() => playing ? actions.audio.pause() : actions.viewer.playFromClick()}
     >
       {playing ? PauseIcon : PlayIcon}
     </div>
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index dbc87b5..c34475c 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -50,6 +50,9 @@ class PlayerTranscript extends Component {
   handleScroll(e) {
     if (this.props.viewer.growlOpen) {
       actions.viewer.closeGrowl()
+      if (this.props.viewer.currentSection.index === 0) {
+        actions.audio.play()
+      }
     }
   }
 
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index bdf5640..7566968 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -10,7 +10,7 @@ import {
   CURTAIN_COLOR_LOOKUP,
   GROWL,
 } from 'app/constants'
-import { floatInRange } from 'app/utils'
+import { floatInRange, timestampToSeconds } from 'app/utils'
 import { buildParagraphs } from 'app/utils/transcript.utils'
 import { annotationFadeTimings } from 'app/utils/annotation.utils'
 import { getNextSection } from 'app/utils/viewer.utils'
@@ -111,6 +111,13 @@ export const loadSections = () => dispatch => {
     // build timeline of special inline items
     if (INLINE_UTILITY_ANNOTATION_TYPES.has(annotation.type)) {
       sectionTextAnnotationOrder.push(annotation.id)
+      if (annotation.type === 'intro') {
+        if (annotation.settings.intro_start_ts) {
+          currentSection.intro_start_ts = timestampToSeconds(annotation.settings.intro_start_ts)
+        } else {
+          currentSection.intro_start_ts = 0
+        }
+      }
     }
 
     // build timeline of fullscreen events
@@ -226,6 +233,15 @@ export const reachedEndOfSection = currentSection => dispatch => {
   }
 }
 
+export const playFromClick = () => dispatch => {
+  const state = store.getState()
+  if (state.audio.play_ts === 0 && state.viewer.currentSection.intro_start_ts) {
+    actions.viewer.seekToTimestamp(state.viewer.currentSection.intro_start_ts)
+  } else {
+    actions.audio.play()
+  }
+}
+
 export const setCurrentSection = (currentSection, nextSection) => dispatch => {
   dispatch({ type: types.viewer.set_current_section, currentSection, nextSection })
 }