process list of paragraphs. fullscreen vs inline

7 files changed, 133 insertions, 105 deletions

diff --git a/animism-align/frontend/app/utils/transcript.utils.js b/animism-align/frontend/app/utils/transcript.utils.js
new file mode 100644
index 0000000..8386227
--- /dev/null
+++ b/animism-align/frontend/app/utils/transcript.utils.js
@@ -0,0 +1,81 @@
+import { store, history, dispatch } from 'app/store'
+import {
+  TEXT_ANNOTATION_TYPES,
+  MEDIA_ANNOTATION_TYPES,
+  UTILITY_ANNOTATION_TYPES,
+} from 'app/constants'
+
+export const buildParagraphs = annotationOrder => {
+  const state = store.getState()
+  const { lookup: annotationLookup } = state.annotation.index
+  const { lookup: paragraphLookup } = state.paragraph.index
+  let currentParagraph = {}
+  let sectionCount = 0
+  const paragraphs = []
+  // loop over the annotations in time order
+  annotationOrder.forEach((annotation_id, i) => {
+    const annotation = annotationLookup[annotation_id]
+    const paragraph = paragraphLookup[annotation.paragraph_id]
+    // if this annotation is a utility (curtain, gallery instructions), then skip it
+    if (UTILITY_ANNOTATION_TYPES.has(annotation.type)) {
+      return
+    }
+    // if this annotation is media, then insert it after the current paragraph
+    if (MEDIA_ANNOTATION_TYPES.has(annotation.type)) {
+      // add option to hide the citation from the transcript
+      if (!annotation.settings.hideCitation) {
+        paragraphs.push({
+          id: ('index_' + i),
+          type: annotation.type,
+          start_ts: annotation.start_ts,
+          end_ts: 0,
+          annotations: [annotation],
+        })
+      }
+      return
+    }
+    // if this annotation is from a different paragraph, make a new paragraph
+    if (annotation.type === 'section_heading' || annotation.type === 'heading_text' || annotation.paragraph_id !== currentParagraph.id) {
+      const paragraph_type = getParagraphType(annotation, paragraph)
+      currentParagraph = {
+        id: annotation.paragraph_id || ('index_' + i),
+        type: paragraph_type,
+        start_ts: annotation.start_ts,
+        end_ts: 0,
+        annotations: [],
+      }
+      if (annotation.type === 'section_heading') {
+        currentParagraph.sectionIndex = sectionCount++
+        currentParagraph.id = 'section_' + currentParagraph.sectionIndex
+      }
+      paragraphs.push(currentParagraph)
+    }
+    // if this annotation is a paragraph_end, set the end timestamp
+    if (annotation.type === 'paragraph_end') {
+      currentParagraph.end_ts = annotation.start_ts
+    }
+    // otherwise, just append this annotation to the paragraph
+    else {
+      currentParagraph.annotations.push(annotation)
+    }
+  })
+  for (let i = 0; i < (paragraphs.length - 1); i++) {
+    if (!paragraphs[i].end_ts) {
+      paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1
+    }
+  }
+  return paragraphs
+}
+
+const getParagraphType = (annotation, paragraph) => {
+  if (annotation.type === 'section_heading') {
+    return annotation.type
+  }
+  if (annotation.type === 'heading_text') {
+    return annotation.type
+  }
+  if (!paragraph) {
+    return annotation.type
+  }
+  return paragraph.type
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
index 490c822..2509970 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -23,11 +23,24 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h
         defaultOption='Choose an image'
         onChange={handleSettingsSelect}
       />
-      <AnnotationFormFullscreen
-        annotation={annotation}
-        handleSettingsChange={handleSettingsChange}
-        handleSettingsSelect={handleSettingsSelect}
+      <Checkbox
+        label="Fullscreen"
+        name="fullscreen"
+        checked={annotation.settings.fullscreen}
+        onChange={handleSettingsSelect}
+      />
+      <Checkbox
+        label="Inline"
+        name="inline"
+        checked={annotation.settings.inline}
+        onChange={handleSettingsSelect}
       />
+      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
+        <AnnotationFormFullscreen
+          annotation={annotation}
+          handleSettingsChange={handleSettingsChange}
+        />
+      )}
     </div>
   )
 }
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 4abb50e..f3d25fc 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
@@ -30,37 +30,18 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle
         alwaysAccessible
         annotation={annotation}
         handleSettingsChange={handleSettingsChange}
-        handleSettingsSelect={handleSettingsSelect}
       />
     </div>
   )
 }
 
-export const AnnotationFormFullscreen = ({ annotation, alwaysAccessible, handleSettingsChange, handleSettingsSelect }) => {
-  if (!alwaysAccessible && !annotation.settings.fullscreen) {
-    return (
-      <Checkbox
-        label="Fullscreen"
-        name="fullscreen"
-        checked={annotation.settings.fullscreen}
-        onChange={handleSettingsSelect}
-      />
-    )
-  }
+export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange }) => {
   const {
     fadeInDuration, fadeOutDuration, duration,
     start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
   } = annotationFadeTimings(annotation)
   return (
     <div>
-      {!alwaysAccessible && (
-        <Checkbox
-          label="Fullscreen"
-          name="fullscreen"
-          checked={annotation.settings.fullscreen}
-          onChange={handleSettingsSelect}
-        />
-      )}
       <TextInput
         title="Total duration"
         name="duration"
diff --git a/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js b/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
index aba9cca..09ba70c 100644
--- a/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
+++ b/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
@@ -23,12 +23,12 @@ class ParagraphEditor extends Component {
   }
 
   componentDidMount() {
-    actions.transcript.buildParagraphs()
+    actions.transcript.buildAllParagraphs()
   }
 
   componentDidUpdate(prevProps) {
     if (this.props.paragraph !== prevProps.paragraph) {
-      actions.transcript.buildParagraphs()
+      actions.transcript.buildAllParagraphs()
     }
   }
   
diff --git a/animism-align/frontend/app/views/paragraph/transcript.actions.js b/animism-align/frontend/app/views/paragraph/transcript.actions.js
index 5905cc5..b1038ea 100644
--- a/animism-align/frontend/app/views/paragraph/transcript.actions.js
+++ b/animism-align/frontend/app/views/paragraph/transcript.actions.js
@@ -1,83 +1,10 @@
 import * as types from 'app/types'
 import { store, history, dispatch } from 'app/store'
-import {
-  TEXT_ANNOTATION_TYPES,
-  MEDIA_ANNOTATION_TYPES,
-  UTILITY_ANNOTATION_TYPES,
-} from 'app/constants'
+import { buildParagraphs } from 'app/utils/transcript.utils'
 
-export const buildParagraphs = () => dispatch => {
+export const buildAllParagraphs = () => dispatch => {
   const state = store.getState()
-  const { order: annotationOrder, lookup: annotationLookup } = state.annotation.index
-  const { lookup: paragraphLookup } = state.paragraph.index
-  let currentParagraph = {}
-  let sectionCount = 0
-  const paragraphs = []
-  // loop over the annotations in time order
-  annotationOrder.forEach((annotation_id, i) => {
-    const annotation = annotationLookup[annotation_id]
-    const paragraph = paragraphLookup[annotation.paragraph_id]
-    // if this annotation is a utility (curtain, gallery instructions), then skip it
-    if (UTILITY_ANNOTATION_TYPES.has(annotation.type)) {
-      return
-    }
-    // if this annotation is media, then insert it after the current paragraph
-    if (MEDIA_ANNOTATION_TYPES.has(annotation.type)) {
-      // add option to hide the citation from the transcript
-      if (!annotation.settings.hideCitation) {
-        paragraphs.push({
-          id: ('index_' + i),
-          type: annotation.type,
-          start_ts: annotation.start_ts,
-          end_ts: 0,
-          annotations: [annotation],
-        })
-      }
-      return
-    }
-    // if this annotation is from a different paragraph, make a new paragraph
-    if (annotation.type === 'section_heading' || annotation.type === 'heading_text' || annotation.paragraph_id !== currentParagraph.id) {
-      const paragraph_type = getParagraphType(annotation, paragraph)
-      currentParagraph = {
-        id: annotation.paragraph_id || ('index_' + i),
-        type: paragraph_type,
-        start_ts: annotation.start_ts,
-        end_ts: 0,
-        annotations: [],
-      }
-      if (annotation.type === 'section_heading') {
-        currentParagraph.sectionIndex = sectionCount++
-        currentParagraph.id = 'section_' + currentParagraph.sectionIndex
-      }
-      paragraphs.push(currentParagraph)
-    }
-    // if this annotation is a paragraph_end, set the end timestamp
-    if (annotation.type === 'paragraph_end') {
-      currentParagraph.end_ts = annotation.start_ts
-    }
-    // otherwise, just append this annotation to the paragraph
-    else {
-      currentParagraph.annotations.push(annotation)
-    }
-  })
-  for (let i = 0; i < (paragraphs.length - 1); i++) {
-    if (!paragraphs[i].end_ts) {
-      paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1
-    }
-  }
+  const annotationOrder = state.annotation.index.order
+  const paragraphs = buildParagraphs(annotationOrder)
   dispatch({ type: types.paragraph.update_transcript, paragraphs })
 }
-
-const getParagraphType = (annotation, paragraph) => {
-  if (annotation.type === 'section_heading') {
-    return annotation.type
-  }
-  if (annotation.type === 'heading_text') {
-    return annotation.type
-  }
-  if (!paragraph) {
-    return annotation.type
-  }
-  return paragraph.type
-}
-
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
index c48af47..914b2b5 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -17,7 +17,7 @@ class Transcript extends Component {
   }
 
   componentDidMount() {
-    actions.transcript.buildParagraphs()
+    actions.transcript.buildAllParagraphs()
   }
 
   handleAnnotationClick(e, annotation) {
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 3d5fe49..ed92bb6 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -1,6 +1,10 @@
 import * as types from 'app/types'
 import { store, history, dispatch } from 'app/store'
-import { MEDIA_ANNOTATION_TYPES, MEDIA_LABEL_TYPES } from 'app/constants'
+import {
+  MEDIA_ANNOTATION_TYPES, MEDIA_LABEL_TYPES,
+  TEXT_ANNOTATION_TYPES, UTILITY_ANNOTATION_TYPES,
+} from 'app/constants'
+import { buildParagraphs } from 'app/utils/transcript.utils'
 
 const newSection = (annotation, index, mediaIndex) => ({
   start_ts: annotation.start_ts,
@@ -15,20 +19,27 @@ export const loadSections = () => dispatch => {
   let currentSection
   let mediaIndex = 0
   let mediaLabels = {}
+  let sectionAnnotationOrder = []
+
   const state = store.getState()
   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.
   annotationOrder.forEach((annotation_id, i) => {
+
     const annotation = annotationLookup[annotation_id]
     if (annotation.type === 'section_heading') {
       if (currentSection) {
         currentSection.mediaLabels = Object.keys(mediaLabels).join(', ')
+        currentSection.paragraphs = buildParagraphs(sectionAnnotationOrder)
         mediaLabels = {}
+        sectionAnnotationOrder = []
       }
       currentSection = newSection(annotation, sections.length, mediaIndex)
       sections.push(currentSection)
     }
+
     if (MEDIA_ANNOTATION_TYPES.has(annotation.type)) {
       if (currentSection) {
         const media = mediaLookup[annotation.settings.media_id]
@@ -40,14 +51,29 @@ export const loadSections = () => dispatch => {
           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")
       }
     }
+
+    // group media into sections
+    // group annotations by section, group into paragraphs
+    if (UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) {
+    }
+
+    if (TEXT_ANNOTATION_TYPES.has(annotation.type)) {
+      sectionAnnotationOrder.push(annotation.id)
+    }
+
   })
 
   if (currentSection && Object.keys(mediaLabels).length) {
     currentSection.mediaLabels = Object.keys(mediaLabels).join(', ')
+    currentSection.paragraphs = buildParagraphs(sectionAnnotationOrder)
   }
 
   // console.log(sections)