making sure audio is loaded before we start

5 files changed, 18 insertions, 17 deletions

diff --git a/animism-align/frontend/app/views/audio/audio.actions.js b/animism-align/frontend/app/views/audio/audio.actions.js
index be9e7dc..86dd100 100644
--- a/animism-align/frontend/app/views/audio/audio.actions.js
+++ b/animism-align/frontend/app/views/audio/audio.actions.js
@@ -3,16 +3,8 @@ import { store, history, dispatch } from 'app/store'
 
 import { URLS } from 'app/constants'
 
-// import actions from 'app/actions'
-// import { session } from 'app/session'
-
 const audioPlayer = document.createElement('audio')
 // audioPlayer.volume = 0.0
-audioPlayer.src = URLS.audio
-audioPlayer.addEventListener('loadedmetadata', () => {
-  // console.log('audio duration:', audioPlayer.duration)
-  dispatch({ type: types.align.set_display_setting, key: 'duration', value: audioPlayer.duration })
-})
 audioPlayer.addEventListener('play', () => {
   dispatch({ type: types.audio.play })
 })
@@ -23,6 +15,16 @@ audioPlayer.addEventListener('timeupdate', () => {
   dispatch({ type: types.audio.update_time, play_ts: audioPlayer.currentTime })
 })
 
+export const load = () => dispatch => {
+  return new Promise((resolve, reject) => {
+    audioPlayer.addEventListener('loadedmetadata', () => {
+      // console.log('audio duration:', audioPlayer.duration)
+      dispatch({ type: types.align.set_display_setting, key: 'duration', value: audioPlayer.duration })
+      resolve()
+    })
+    audioPlayer.src = URLS.audio
+  })
+}
 export const play = () => dispatch => {
   audioPlayer.play()
 }
diff --git a/animism-align/frontend/app/views/site/site.actions.js b/animism-align/frontend/app/views/site/site.actions.js
index 6e8b72b..31a88b9 100644
--- a/animism-align/frontend/app/views/site/site.actions.js
+++ b/animism-align/frontend/app/views/site/site.actions.js
@@ -7,6 +7,7 @@ export const loadProject = () => dispatch => {
   Promise.all([
     actions.site.loadText(),
     actions.site.loadPeaks(),
+    actions.audio.load(),
     actions.annotation.index(),
     actions.paragraph.index(),
     actions.media.index(),
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 ef76aa7..afb6a40 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -89,15 +89,12 @@ class PlayerContainer extends Component {
   
   render() {
     // const { } = this.props
-    const { currentSection, viewer } = this.props
-    if (!currentSection && !viewer.credits) { return <div /> }
+    const { currentSection } = this.props
+    if (!currentSection) { return <div /> }
     // console.log(currentSection)
     return (
       <div className='viewer-container'>
-        {viewer.credits
-          ? <PlayerCredits />
-          : <PlayerTranscript section={currentSection} />
-        }
+        <PlayerTranscript section={currentSection} />
         <PlayerFullscreen />
       </div>
     )
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 16a3d8f..6894b3a 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -22,7 +22,7 @@ export const loadSections = () => dispatch => {
   let sections = []
 
   // current section being processed (i.e. last section)
-  let currentSection
+  let currentSection, sectionColor
 
   // keep tally of all media, so that we can display them with correct IDs in the checklist
   let mediaIndex = 0
@@ -159,12 +159,13 @@ export const loadSections = () => dispatch => {
     }
     if ((!currentSection.fullscreenTimeline.length || time_to_first_fullscreen_element > 0.0) && currentSection.index !== 0) {
       // here we should create a dummy curtain event
+      sectionColor = currentSection.paragraphs[0].annotations[0].settings.color || 'white'
       initial_curtain_event = makeFullscreenEvent(0, {
         start_ts: currentSection.start_ts,
         end_ts: currentSection.start_ts + 1.1,
         type: 'curtain',
         settings: {
-          color: CURTAIN_COLOR_LOOKUP.white, // TODO: get this from the first annotation
+          color: CURTAIN_COLOR_LOOKUP[sectionColor],
           fade_in_duration: '0.0',
           fade_out_duration: '1.0',
           duration: '1.0',
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index c26f513..6395a68 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -37,7 +37,7 @@ class ViewerContainer extends Component {
       return <div className='viewer loading'><Loader /></div>
     }
     let className = 'viewer'
-    if (viewer.checklist) {
+    if (viewer.checklist || viewer.credits) {
       className += ' checklist-open'
     } else {
       if (viewer.transcript) className += ' transcript-open'