annotation form for curtain events. refactor utilities

4 files changed, 95 insertions, 85 deletions

diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index e1e7970..3492d7f 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -4,32 +4,23 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import { floatLT, floatLTE } from 'app/utils'
-import actions from 'app/actions'
 import ParagraphForm from '../components/paragraph.form'
 import { MEDIA_TYPES } from 'app/constants'
 
 class ParagraphList extends Component {
   state = {
-    paragraphs: [],
     currentParagraph: -1,
     currentAnnotation: -1,
   }
   
-  componentDidMount() {
-    this.build()
-  }
-
   componentDidUpdate(prevProps) {
-    if (this.props.paragraph !== prevProps.paragraph) {
-      this.build()
-    }
     if (this.props.audio.play_ts === prevProps.audio.play_ts) return
     this.setCurrentParagraph()
   }
 
   setCurrentParagraph() {
     const { play_ts } = this.props.audio
-    const insideParagraph = this.state.paragraphs.some(paragraph => {
+    const insideParagraph = this.props.paragraphs.some(paragraph => {
       if (floatLTE(paragraph.start_ts, play_ts) && floatLT(play_ts, paragraph.end_ts)) {
         this.setCurrentAnnotation(paragraph, play_ts)
         return true
@@ -62,66 +53,13 @@ class ParagraphList extends Component {
     this.setState({ currentParagraph, currentAnnotation })
   }
 
-  build() {
-    const { order: annotationOrder, lookup: annotationLookup } = this.props.annotation
-    const { lookup: paragraphLookup } = this.props.paragraph
-    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 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.type === 'header' || 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 === 'header') {
-          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
-      }
-    }
-    this.setState({ paragraphs })
-  }
-
   render() {
     const {
-      media, paragraphElementLookup, selectedParagraph,
-      onAnnotationClick, onParagraphDoubleClick
+      paragraphs, media,
+      paragraphElementLookup, selectedParagraph,
+      onAnnotationClick, onParagraphDoubleClick,
     } = this.props
-    const { paragraphs, currentParagraph, currentAnnotation } = this.state
+    const { currentParagraph, currentAnnotation } = this.state
     return paragraphs.map(paragraph => {
       if (selectedParagraph && selectedParagraph.id === paragraph.id) {
         paragraph = selectedParagraph
@@ -146,19 +84,7 @@ class ParagraphList extends Component {
   }
 }
 
-const getParagraphType = (annotation, paragraph) => {
-  if (annotation.type === 'header') {
-    return annotation.type
-  }
-  if (!paragraph) {
-    return annotation.type
-  }
-  return paragraph.type
-}
-
 const mapStateToProps = state => ({
-  paragraph: state.paragraph.index,
-  annotation: state.annotation.index,
   audio: state.audio,
   media: state.media.index,
 })
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 c031d8a..aba9cca 100644
--- a/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
+++ b/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
@@ -21,6 +21,16 @@ class ParagraphEditor extends Component {
     this.handleCloseParagraphForm = this.handleCloseParagraphForm.bind(this)
     this.updateSelectedParagraph = this.updateSelectedParagraph.bind(this)
   }
+
+  componentDidMount() {
+    actions.transcript.buildParagraphs()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.paragraph !== prevProps.paragraph) {
+      actions.transcript.buildParagraphs()
+    }
+  }
   
   handleAnnotationClick(e, paragraph, annotation){
     actions.audio.seek(annotation.start_ts)
@@ -46,12 +56,13 @@ class ParagraphEditor extends Component {
   }
 
   render() {
-    // const { media } = this.props
-    const { paragraphs, selectedParagraph, selectedParagraphOffset } = this.state
+    const { paragraphs } = this.props
+    const { selectedParagraph, selectedParagraphOffset } = this.state
     return (
       <div className='paragraphs'>
         <div className='content'>
           <ParagraphList
+            paragraphs={paragraphs}
             paragraphElementLookup={paragraphElementLookup}
             selectedParagraph={selectedParagraph}
             onAnnotationClick={this.handleAnnotationClick}
@@ -72,10 +83,8 @@ class ParagraphEditor extends Component {
 }
 
 const mapStateToProps = state => ({
-  // paragraph: state.paragraph.index,
-  // annotation: state.annotation.index,
-  // audio: state.audio,
-  // media: state.media.index,
+  paragraph: state.paragraph.index,
+  paragraphs: state.paragraph.paragraphs,
 })
 
 const mapDispatchToProps = dispatch => ({
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.reducer.js b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
index c3babc8..5695ab3 100644
--- a/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
+++ b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
@@ -4,6 +4,7 @@ import { session, getDefault, getDefaultInt } from 'app/session'
 import { crudState, crudReducer } from 'app/api/crud.reducer'
 
 const initialState = crudState('paragraph', {
+  paragraphs: [],
   options: {
   }
 })
@@ -14,6 +15,11 @@ export default function paragraphReducer(state = initialState, action) {
   // console.log(action.type, action)
   state = reducer(state, action)
   switch (action.type) {
+    case types.paragraph.update_transcript:
+      return {
+        ...state,
+        paragraphs: action.paragraphs,
+      }
     default:
       return state
   }
diff --git a/animism-align/frontend/app/views/paragraph/transcript.actions.js b/animism-align/frontend/app/views/paragraph/transcript.actions.js
new file mode 100644
index 0000000..3d2b045
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/transcript.actions.js
@@ -0,0 +1,69 @@
+import * as types from 'app/types'
+import { store, history, dispatch } from 'app/store'
+import { MEDIA_TYPES } from 'app/constants'
+
+export const buildParagraphs = () => 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 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.type === 'header' || 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 === 'header') {
+        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
+    }
+  }
+  dispatch({ type: types.paragraph.update_transcript, paragraphs })
+}
+
+const getParagraphType = (annotation, paragraph) => {
+  if (annotation.type === 'header') {
+    return annotation.type
+  }
+  if (!paragraph) {
+    return annotation.type
+  }
+  return paragraph.type
+}
+