FIX the flicker between audio play and play event firing

3 files changed, 14 insertions, 6 deletions

diff --git a/animism-align/frontend/app/views/audio/audio.actions.js b/animism-align/frontend/app/views/audio/audio.actions.js
index a156f9b..e152b25 100644
--- a/animism-align/frontend/app/views/audio/audio.actions.js
+++ b/animism-align/frontend/app/views/audio/audio.actions.js
@@ -26,9 +26,11 @@ export const load = () => dispatch => {
   })
 }
 export const play = () => dispatch => {
+  dispatch({ type: types.audio.play })
   audioPlayer.play()
 }
 export const pause = () => dispatch => {
+  dispatch({ type: types.audio.pause })
   audioPlayer.pause()
 }
 export const seek = play_ts => dispatch => {
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
index 6ec6e3d..96a428e 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -5,7 +5,7 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group'
 import actions from 'app/actions'
 import { clamp, floatInRange, floatLT } from 'app/utils'
 
-import { PERSISTENT_FULLSCREEN_ELEMENTS } from 'app/constants'
+import { PERSISTENT_FULLSCREEN_ELEMENTS, CURTAIN_COLOR_LOOKUP } from 'app/constants'
 import { fullscreenComponents } from './components.fullscreen'
 import { makeFullscreenEvent } from '../viewer.actions'
 
@@ -76,6 +76,8 @@ class PlayerFullscreen extends Component {
           }
           return e
         })
+        // const sectionColor = currentSection.paragraphs[0].annotations[0].settings.color || 'white'
+        // CURTAIN_COLOR_LOOKUP[sectionColor],
         elements.unshift(makeFullscreenEvent(100, {
           start_ts: seek_ts,
           end_ts: seek_ts + 1.3,
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 2ac4665..277cb21 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -227,7 +227,11 @@ export const makeFullscreenEvent = (index, annotation, currentSection) => {
     timelineLookup: {},
   }
   if (annotation.settings.color) {
-    event.color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+    if (annotation.settings.color.name) {
+      event.color = annotation.settings.color
+    } else {
+      event.color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
+    }
   } else {
     event.color = CURTAIN_COLOR_LOOKUP.white
   }
@@ -236,7 +240,7 @@ export const makeFullscreenEvent = (index, annotation, currentSection) => {
       title: currentSection.title,
       index: currentSection.index,
     }
-    console.log(event.section)
+    // console.log(event.section)
   }
   return event
 }
@@ -330,26 +334,26 @@ export const setCurrentSection = (currentSection, nextSection) => dispatch => {
 }
 
 export const seekToSection = section => dispatch => {
-  actions.viewer.setCurrentSection(section, getNextSection(section))
   actions.audio.seek(section.start_ts)
   actions.audio.play()
+  actions.viewer.setCurrentSection(section, getNextSection(section))
   actions.viewer.hideComponent('nav')
   actions.viewer.hideComponent('share')
 }
 
 export const seekToMediaItem = (section, mediaItem) => dispatch => {
-  actions.viewer.setCurrentSection(section, getNextSection(section))
   actions.audio.seek(mediaItem.start_ts)
   actions.audio.play()
+  actions.viewer.setCurrentSection(section, getNextSection(section))
   actions.viewer.hideComponent('nav')
   actions.viewer.hideComponent('checklist')
   actions.viewer.hideComponent('share')
 }
 
 export const seekToTimestamp = play_ts => dispatch => {
-  actions.viewer.setSectionFromTimestamp(play_ts)
   actions.audio.seek(play_ts)
   actions.audio.play()
+  actions.viewer.setSectionFromTimestamp(play_ts)
 }
 
 export const seekToBeginning = () => dispatch => {