heavily comment the loadSection function

4 files changed, 92 insertions, 35 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 f3d25fc..a926741 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
@@ -88,4 +88,4 @@ export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange }) =
       </LabelDescription>
     </div>
   )
-}
\ 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 340b6c6..565ece1 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -20,6 +20,8 @@ class PlayerContainer extends Component {
 }
 
 const mapStateToProps = state => ({
+  sections: state.viewer.sections,
+  fullscreenTimeline: state.viewer.fullscreenTimeline,
 })
 
 export default connect(mapStateToProps)(PlayerContainer)
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index ed92bb6..cb5c119 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -5,80 +5,133 @@ import {
   TEXT_ANNOTATION_TYPES, UTILITY_ANNOTATION_TYPES,
 } from 'app/constants'
 import { buildParagraphs } from 'app/utils/transcript.utils'
+import { annotationFadeTimings } from 'app/utils/annotation.utils'
 
 const newSection = (annotation, index, mediaIndex) => ({
   start_ts: annotation.start_ts,
+  end_ts: 0,
   title: annotation.text,
   media: [],
   index,
   mediaIndex,
 })
 
+// build the list of sections from the raw annotation list.
 export const loadSections = () => dispatch => {
+  // list of all sections
   let sections = []
+
+  // current section being processed (i.e. last section)
   let currentSection
+
+  // keep tally of all media, so that we can display them with correct IDs in the checklist
   let mediaIndex = 0
-  let mediaLabels = {}
-  let sectionAnnotationOrder = []
 
+  // dedupe the labels that we see in each section
+  let currentMediaLabels = {}
+
+  // keep track of all annotations that constitute the "text" of the essay
+  // these include sentences, headings, and inline media. used to build paragraphs, then reset.
+  let sectionTextAnnotationOrder = []
+
+  // keep track of all annotations that constitute fullscreen events.
+  // these include curtains, title cards, and fullscreen media.
+  let fullscreenTimeline = []
+
+  // fetch all annotations and media
   const state = store.getState()
+  const { timeline } = state.align
   const { order: annotationOrder, lookup: annotationLookup } = state.annotation.index
   const { lookup: mediaLookup } = state.media.index
 
-  // loop over the annotations in time order. group the media found in each section.
+  // loop over the annotations in time order.
   annotationOrder.forEach((annotation_id, i) => {
-
+    // fetch the current annotation
     const annotation = annotationLookup[annotation_id]
+
+    // we have reached a new section.
     if (annotation.type === 'section_heading') {
+      // finish off the previous section.
       if (currentSection) {
-        currentSection.mediaLabels = Object.keys(mediaLabels).join(', ')
-        currentSection.paragraphs = buildParagraphs(sectionAnnotationOrder)
-        mediaLabels = {}
-        sectionAnnotationOrder = []
+        currentSection.mediaLabels = Object.keys(currentMediaLabels).join(', ')
+        currentSection.paragraphs = buildParagraphs(sectionTextAnnotationOrder)
+        currentSection.end_ts = currentSection.paragraphs[currentSection.paragraphs.length - 1].end_ts
       }
+      // create a new section and reset state variables
       currentSection = newSection(annotation, sections.length, mediaIndex)
+      currentMediaLabels = {}
+      sectionTextAnnotationOrder = []
+
+      // add this new section to the list!
       sections.push(currentSection)
     }
 
+    // sanity check. ignore everything before the first section.
+    if (!currentSection) {
+      return
+    }
+
+    // add media to the current section.
     if (MEDIA_ANNOTATION_TYPES.has(annotation.type)) {
-      if (currentSection) {
-        const media = mediaLookup[annotation.settings.media_id]
-        currentSection.media.push({
-          start_ts: annotation.start_ts,
-          media
-        })
-        if (media.type in MEDIA_LABEL_TYPES) {
-          mediaLabels[MEDIA_LABEL_TYPES[media.type]] = true
-        }
-        mediaIndex += 1
-        // non-fullscreen media should be displayed inline in the transcript
-        if (!annotation.settings.fullscreen && !annotation.settings.inline) {
-          sectionAnnotationOrder.push(annotation.id)
-        }
-      } else {
-        console.error("media found before first section")
+      // fetch the media and add it to the list of media (TODO: handle carousels)
+      const media = mediaLookup[annotation.settings.media_id]
+      currentSection.media.push({
+        start_ts: annotation.start_ts,
+        media
+      })
+
+      // get the display string for this media type
+      if (media.type in MEDIA_LABEL_TYPES) {
+        currentMediaLabels[MEDIA_LABEL_TYPES[media.type]] = true
+      }
+
+      // increment the media tally
+      mediaIndex += 1
+
+      // non-fullscreen, inline media should be displayed in the transcript.
+      if (!annotation.settings.fullscreen || annotation.settings.inline) {
+        sectionTextAnnotationOrder.push(annotation.id)
       }
     }
 
-    // group media into sections
-    // group annotations by section, group into paragraphs
+    // build timeline of fullscreen events
     if (UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) {
+      const event = makeFullscreenEvent(annotation)
+      fullscreenTimeline.push(event)
     }
 
+    // add text annotations to section annotation order
     if (TEXT_ANNOTATION_TYPES.has(annotation.type)) {
-      sectionAnnotationOrder.push(annotation.id)
+      sectionTextAnnotationOrder.push(annotation.id)
     }
-
   })
 
-  if (currentSection && Object.keys(mediaLabels).length) {
-    currentSection.mediaLabels = Object.keys(mediaLabels).join(', ')
-    currentSection.paragraphs = buildParagraphs(sectionAnnotationOrder)
+  // finished processing all annotations. finish off the last section.
+  if (currentSection) {
+    currentSection.mediaLabels = Object.keys(currentMediaLabels).join(', ')
+    currentSection.paragraphs = buildParagraphs(sectionTextAnnotationOrder)
+    currentSection.end_ts = timeline.duration
   }
 
-  // console.log(sections)
+  // set the end_ts for each section (i.e. just before the next section starts)
+  for (let i = 0; i < sections.length - 1; i++) {
+    currentSection = sections[i]
+    if (currentSection.end_ts === 0) {
+      currentSection.end_ts = sections[i+1].start_ts - 1
+    }
+  }
 
-  dispatch({ type: types.viewer.load_sections, data: sections })
+  console.log(sections)
+  console.log(fullscreenTimeline)
+  dispatch({ type: types.viewer.load_sections, sections, fullscreenTimeline })
+}
+
+const makeFullscreenEvent = annotation => {
+  const timing = annotationFadeTimings(annotation)
+  const event = {
+    annotation, timing
+  }
+  return event
 }
 
 export const showSection = section => dispatch => {
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 5a940d6..9eda4b5 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -5,6 +5,7 @@ const initialState = {
   checklist: false,
   nav: false,
   sections: { loading: true },
+  fullscreenTimeline: [],
   options: {
   }
 }
@@ -15,7 +16,8 @@ export default function viewerReducer(state = initialState, action) {
     case types.viewer.load_sections:
       return {
         ...state,
-        sections: action.data,
+        sections: action.sections,
+        fullscreenTimeline: action.fullscreenTimeline,
       }
 
     case types.viewer.toggle_section: