set paragraph end with specific element

6 files changed, 32 insertions, 8 deletions

diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css
index 12d5b1d..27f4b9e 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/views/align/align.css
@@ -158,6 +158,7 @@ canvas {
   z-index: 1;
   background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4));
 }
+
 .annotation.sentence.even {
   background-color: #83b;
 }
@@ -167,6 +168,14 @@ canvas {
 .annotation.header {
   background-color: #838;
 }
+.annotation.paragraph_end {
+  background-color: #bbb;
+  width: 100%;
+  padding: 2px;
+}
+
+/* Condensed layout (first lines) */
+
 .annotationIndex.condensed .annotation.sentence {
   z-index: 0;
   white-space: pre;
@@ -177,6 +186,8 @@ canvas {
   z-index: 1;
 }
 
+/* Collapsed layout (borders) */
+
 .annotationIndex.collapsed .annotation.sentence {
   height: 2px; overflow: hidden; padding: 0; z-index: 0;
 }
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 e18d6df..226bb45 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -12,7 +12,7 @@ import { timeToPosition } from '../../align.util'
 import { Select } from '../../../../common'
 
 const ANNOTATION_TYPES = [
-  'sentence', 'header'
+  'sentence', 'header', 'paragraph_end'
 ].map(name => ({ name, label: name }))
 
 class AnnotationForm extends Component {
@@ -68,6 +68,9 @@ class AnnotationForm extends Component {
   }
   handleSubmit() {
     const { annotation } = this.props
+    if (annotation.type === 'paragraph_end') {
+      annotation.text = ''
+    }
     if (annotation.id === 'new') {
       delete annotation.id
       actions.annotation.create(annotation)
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.types.js b/animism-align/frontend/views/align/components/annotations/annotation.types.js
index a2eae62..06be4a8 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.types.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.types.js
@@ -51,7 +51,6 @@ export const AnnotationParagraphEnd = ({ y, annotation, selected, onClick, onDou
       onClick={e => onClick(e, annotation)}
       onDoubleClick={e => onDoubleClick(e, annotation)}
     >
-      {text}
     </div>
   )
 }
diff --git a/animism-align/frontend/views/paragraph/components/paragraph.types.js b/animism-align/frontend/views/paragraph/components/paragraph.types.js
index daab5db..54eb965 100644
--- a/animism-align/frontend/views/paragraph/components/paragraph.types.js
+++ b/animism-align/frontend/views/paragraph/components/paragraph.types.js
@@ -27,7 +27,6 @@ export const Paragraph = ({ paragraph, selectedParagraph, selectedAnnotation, on
 export const ParagraphHeader = ({ paragraph, selectedParagraph, selectedAnnotation, onAnnotationClick, onDoubleClick }) => {
   let className = selectedParagraph ? 'header selected' : 'header'
   const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
-  console.log(text)
   return (
     <div
       className={className}
diff --git a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
index 8b61df5..600eaad 100644
--- a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
+++ b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
@@ -7,7 +7,7 @@ import actions from '../../../actions'
 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 floatLTE = (a,b) => ((a*10|0) === (b*10|0) || floatLT(a,b))
 
 class ParagraphList extends Component {
   state = {
@@ -29,13 +29,19 @@ class ParagraphList extends Component {
   }
   setCurrentParagraph() {
     const { play_ts } = this.props.audio
-    this.state.paragraphs.some(paragraph => {
+    const insideParagraph = this.state.paragraphs.some(paragraph => {
       if (floatLTE(paragraph.start_ts, play_ts) && floatLT(play_ts, paragraph.end_ts)) {
         this.setCurrentAnnotation(paragraph, play_ts)
         return true
       }
       return false
     })
+    if (!insideParagraph) {
+      this.setState({
+        currentParagraph: -1,
+        currentAnnotation: -1,
+      })
+    }
   }
   setCurrentAnnotation(paragraph, play_ts) {
     const { id: currentParagraph, annotations } = paragraph
@@ -80,10 +86,12 @@ class ParagraphList extends Component {
       }
     })
     for (let i = 0; i < (paragraphs.length - 1); i++) {
+      console.log(paragraphs[i].end_ts)
       if (!paragraphs[i].end_ts) {
         paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1
       }
     }
+    console.log(paragraphs)
     this.setState({ paragraphs })
   }
   onAnnotationClick(e, paragraph, annotation){
diff --git a/animism-align/frontend/views/paragraph/paragraph.container.js b/animism-align/frontend/views/paragraph/paragraph.container.js
index 13753a4..4587450 100644
--- a/animism-align/frontend/views/paragraph/paragraph.container.js
+++ b/animism-align/frontend/views/paragraph/paragraph.container.js
@@ -27,17 +27,21 @@ class ParagraphContainer extends Component {
     if (document.activeElement !== document.body) {
       return
     }
-    // console.log(e.keyCode)
+    console.log(e.keyCode)
     switch (e.keyCode) {
       case 32: // spacebar
         e.preventDefault()
         actions.audio.toggle()
         break
+      case 37: // left
       case 38: // up
-        actions.audio.jump(- ZOOM_STEPS[this.props.timeline.zoom] * 0.1)
+        e.preventDefault()
+        actions.audio.jump(-5.0)
         break
+      case 39: // right
       case 40: // down
-        actions.audio.jump(ZOOM_STEPS[this.props.timeline.zoom] * 0.1)
+        e.preventDefault()
+        actions.audio.jump(5.0)
         break
     }
   }