displaying videos in paragraphs. style paragraphs to be a bit more textual

1 files changed, 23 insertions, 2 deletions

diff --git a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
index 18bd8c5..fc1a687 100644
--- a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
+++ b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
@@ -9,6 +9,8 @@ import { ParagraphElementLookup } from '../components/paragraph.types'
 const floatLT = (a,b) => ((a*10|0) < (b*10|0))
 const floatLTE = (a,b) => ((a*10|0) === (b*10|0) || floatLT(a,b))
 
+const MEDIA_TYPES = new Set(['image', 'gallery', 'vitrine', 'video'])
+
 class ParagraphList extends Component {
   state = {
     paragraphs: [],
@@ -65,9 +67,22 @@ class ParagraphList extends Component {
     const { lookup: paragraphLookup } = this.props.paragraph
     let currentParagraph = {}
     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 media, insert it after the current paragraph
+      if (MEDIA_TYPES.has(annotation.type)) {
+        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.paragraph_id !== currentParagraph.id) {
         const paragraph_type = getParagraphType(annotation, paragraph)
         currentParagraph = {
@@ -79,9 +94,12 @@ class ParagraphList extends Component {
         }
         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
-      } else {
+      }
+      // otherwise, just append this annotation to the paragraph
+      else {
         currentParagraph.annotations.push(annotation)
       }
     })
@@ -101,6 +119,7 @@ class ParagraphList extends Component {
     //
   }
   render() {
+    const { media } = this.props
     const { paragraphs, currentParagraph, currentAnnotation } = this.state
     return (
       <div className='paragraphs'>
@@ -112,6 +131,7 @@ class ParagraphList extends Component {
                 <ParagraphElement
                   key={paragraph.id}
                   paragraph={paragraph}
+                  media={media}
                   selectedParagraph={paragraph.id === currentParagraph}
                   selectedAnnotation={paragraph.id === currentParagraph && currentAnnotation}
                   onAnnotationClick={this.onAnnotationClick}
@@ -119,7 +139,7 @@ class ParagraphList extends Component {
                 />
               )
             } else {
-              return <div key={paragraph.id}>{'(empty)'}</div>
+              return <div key={paragraph.id}>{'(waiting to implement' + paragraph.type + ')'}</div>
             }
           })}
         </div>
@@ -139,6 +159,7 @@ const mapStateToProps = state => ({
   paragraph: state.paragraph.index,
   annotation: state.annotation.index,
   audio: state.audio,
+  media: state.media.index,
 })
 
 const mapDispatchToProps = dispatch => ({