each section has its own fullscreen timeline to prevent overlap

6 files changed, 20 insertions, 12 deletions

diff --git a/animism-align/README.md b/animism-align/README.md
index 0e41ed4..045751e 100644
--- a/animism-align/README.md
+++ b/animism-align/README.md
@@ -1,4 +1,4 @@
-# animism-align
+# Animism
 
 Align a text to an audio file.
 
diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index 857c20a..c244a60 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -92,3 +92,8 @@ export const DISPLAY_SIZE = 2000
 export const DISPLAY_QUALITY= 80
 export const THUMBNAIL_SIZE = 320
 export const THUMBNAIL_QUALITY = 80
+
+export const GROWL = {
+  OPENING_MESSAGE: "Start the episode by clicking play or scroll to browse on your own.",
+  REACHED_END_OF_FIRST_SECTION: "Click \"Next\" to advance the exhibition.",
+}
\ No newline at end of file
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 1c82e0d..3379bfe 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
+import { GROWL } from 'app/constants'
 import { floatInRange, clamp } from 'app/utils'
 
 import PlayerTranscript from './player.transcript'
@@ -74,11 +75,10 @@ class PlayerContainer extends Component {
     if (floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) {
       return
     }
-
     if (autoAdvance) {
       actions.viewer.setSectionFromTimestamp(play_ts)
     } else {
-      actions.viewer.reachedEndOfSection()
+      actions.viewer.reachedEndOfSection(currentSection)
     }
   }
   
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 2f62ff5..90e4925 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -103,7 +103,7 @@ const FirstChild = (props) => {
 const mapStateToProps = state => ({
   audio: state.audio,
   media: state.media.index,
-  timeline: state.viewer.fullscreenTimeline,
+  timeline: state.viewer.currentSection ? state.viewer.currentSection.fullscreenTimeline : [],
 })
 
 export default connect(mapStateToProps)(PlayerFullscreen)
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 3b6fbdd..167da97 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -6,7 +6,7 @@ import {
   TEXT_ANNOTATION_TYPES,
   INLINE_UTILITY_ANNOTATION_TYPES,
   FULLSCREEN_UTILITY_ANNOTATION_TYPES,
-  CURTAIN_COLOR_LOOKUP,
+  CURTAIN_COLOR_LOOKUP, GROWL,
 } from 'app/constants'
 import { floatInRange } from 'app/utils'
 import { buildParagraphs } from 'app/utils/transcript.utils'
@@ -18,6 +18,7 @@ const newSection = (annotation, index, mediaIndex) => ({
   end_ts: 0,
   title: annotation.text,
   media: [],
+  fullscreenTimeline: [],
   index,
   mediaIndex,
   no_audio: !!annotation.settings.no_audio,
@@ -46,7 +47,7 @@ export const loadSections = () => dispatch => {
 
   // keep track of all annotations that constitute fullscreen events.
   // these include curtains, title cards, and fullscreen media.
-  let fullscreenTimeline = []
+  // let fullscreenTimeline = []
 
   // fetch all annotations and media
   const state = store.getState()
@@ -116,7 +117,7 @@ export const loadSections = () => dispatch => {
     // build timeline of fullscreen events
     if (FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) {
       const event = makeFullscreenEvent(eventIndex++, annotation)
-      fullscreenTimeline.push(event)
+      currentSection.fullscreenTimeline.push(event)
     }
 
     // add text annotations to section annotation order
@@ -143,7 +144,7 @@ export const loadSections = () => dispatch => {
 
   // console.log(sections)
   // console.log(fullscreenTimeline)
-  dispatch({ type: types.viewer.load_sections, sections, fullscreenTimeline })
+  dispatch({ type: types.viewer.load_sections, sections })
 }
 
 const makeFullscreenEvent = (index, annotation) => {
@@ -177,9 +178,12 @@ export const toggleComponent = key => dispatch => {
   dispatch({ type: types.viewer.toggle_component, key, value: !store.getState().viewer[key] })
 }
 
-export const reachedEndOfSection = () => dispatch => {
+export const reachedEndOfSection = currentSection => dispatch => {
   actions.audio.pause()
   dispatch({ type: types.viewer.reached_end_of_section })
+  if (currentSection && currentSection.index === 0) {
+    actions.viewer.openGrowl(GROWL.REACHED_END_OF_FIRST_SECTION)
+  }
 }
 
 export const setCurrentSection = (currentSection, nextSection) => dispatch => {
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 4c25d64..e32a0df 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -1,18 +1,18 @@
 import * as types from 'app/types'
+import { GROWL } from 'app/constants'
 
 const initialState = {
   transcript: false,
   checklist: false,
   nav: false,
   sections: { loading: true },
-  fullscreenTimeline: [],
   currentSection: null,
   nextSection: null,
   navStyle: 'white',
   autoAdvance: false,
   atEndOfSection: false,
   growlOpen: true,
-  growlMessage: "Start the episode by clicking play or scroll to browse on your own.",
+  growlMessage: GROWL.OPENING_MESSAGE,
   vitrineModal: {
     open: false,
     media: null,
@@ -54,7 +54,6 @@ export default function viewerReducer(state = initialState, action) {
       return {
         ...state,
         sections: action.sections,
-        fullscreenTimeline: action.fullscreenTimeline,
       }
 
     case types.viewer.set_current_section: