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

4 files changed, 52 insertions, 9 deletions

diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js
index eb5c0ad..3348804 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -7,13 +7,13 @@ import actions from '../../../../actions'
 // import * as alignActions from '../align.actions'
 
 import { ZOOM_STEPS } from '../../constants'
-import { clamp, timestamp } from '../../../../util'
+import { clamp, timestamp, capitalize } from '../../../../util'
 import { timeToPosition } from '../../align.util'
 import { Select } from '../../../../common'
 
 const ANNOTATION_TYPES = [
   'sentence', 'header', 'paragraph_end', 'video',
-].map(name => ({ name, label: name }))
+].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
 
 class AnnotationForm extends Component {
   constructor(props){
diff --git a/animism-align/frontend/views/paragraph/components/paragraph.types.js b/animism-align/frontend/views/paragraph/components/paragraph.types.js
index 54eb965..6fd8558 100644
--- a/animism-align/frontend/views/paragraph/components/paragraph.types.js
+++ b/animism-align/frontend/views/paragraph/components/paragraph.types.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import VimeoPlayer from '@u-wave/react-vimeo'
 
 import actions from '../../../actions'
 
@@ -37,8 +38,26 @@ export const ParagraphHeader = ({ paragraph, selectedParagraph, selectedAnnotati
   )
 }
 
+export const MediaVideo = ({ paragraph, media, selectedParagraph, selectedAnnotation, onAnnotationClick, onDoubleClick }) => {
+  if (!media.lookup) return <div />
+  const className = selectedParagraph ? 'media selected' : 'media'
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+  if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
+  console.log(item)
+  return (
+    <div
+      className={className}
+      onDoubleClick={e => onDoubleClick(e, paragraph)}
+    >
+      <VimeoPlayer video={item.url} autoplay muted width="650" />
+    </div>
+  )
+}
+
 export const ParagraphElementLookup = {
   paragraph: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
   header: React.memo(ParagraphHeader),
+  video: React.memo(MediaVideo),
 }
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 => ({
diff --git a/animism-align/frontend/views/paragraph/paragraph.css b/animism-align/frontend/views/paragraph/paragraph.css
index 031b7ab..07399d6 100644
--- a/animism-align/frontend/views/paragraph/paragraph.css
+++ b/animism-align/frontend/views/paragraph/paragraph.css
@@ -2,8 +2,9 @@
   width: 100%;
   height: calc(100% - 3.125rem);
   overflow: scroll;
-  padding-top: 1rem;
-  padding-left: 1rem;
+  background: white;
+  color: black;
+  padding: 1rem;
 }
 
 /* general paragraph styles */
@@ -11,6 +12,7 @@
 .paragraphs .content {
   font-family: 'Georgia', serif;
   width: 650px;
+  margin: 0 auto;
   padding-bottom: 6rem;
 }
 
@@ -36,13 +38,14 @@
 /* current paragraph */
 
 .paragraphs .paragraph.selected {
-  background: rgba(255,255,255,0.1);
+  background: rgba(0,0,0,0.0);
 }
 
 /* sentences */
 
 .paragraphs span {
   margin-right: 4px;
+  cursor: pointer;
 }
 
 .paragraphs .paragraph .selected {
@@ -51,6 +54,6 @@
               -2px  3px 0 #fff,
                2px  3px 0 #fff;
   box-decoration-break: clone;
-  background: #fff;
-  color: #000;
+  background: black;
+  color: white;
 }
\ No newline at end of file