paragraph list view

7 files changed, 55 insertions, 30 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 6972f93..e18d6df 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -7,7 +7,7 @@ import actions from '../../../../actions'
 // import * as alignActions from '../align.actions'
 
 import { ZOOM_STEPS } from '../../constants'
-import { clamp } from '../../../../util'
+import { clamp, timestamp } from '../../../../util'
 import { timeToPosition } from '../../align.util'
 import { Select } from '../../../../common'
 
@@ -95,14 +95,17 @@ class AnnotationForm extends Component {
       >
         {annotation.type === 'sentence' && this.renderTextarea()}
         {annotation.type === 'header' && this.renderTextarea()}
-        <div className='row'>
-          <Select
-            name='type'
-            selected={annotation.type}
-            options={ANNOTATION_TYPES}
-            defaultOption='text'
-            onChange={this.handleSelect}
-          />
+        <div className='row buttons'>
+          <div>
+            <Select
+              name='type'
+              selected={annotation.type}
+              options={ANNOTATION_TYPES}
+              defaultOption='text'
+              onChange={this.handleSelect}
+            />
+            <div className='ts'>{timestamp(annotation.start_ts, 1, true)}</div>
+          </div>
           <button onClick={this.handleSubmit}>Save</button>
         </div>
       </div>
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.index.js b/animism-align/frontend/views/align/components/annotations/annotation.index.js
index 8121d1d..d5c1eed 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 
 import actions from '../../../../actions'
 
-import { ZOOM_STEPS } from '../../constants'
+import { ZOOM_STEPS, INNER_HEIGHT } from '../../constants'
 import { clamp } from '../../../../util'
 import { positionToTime, timeToPosition } from '../../align.util'
 
@@ -30,7 +30,7 @@ class AnnotationIndex extends Component {
     const { order, lookup } = index
 
     let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
-    let widthTimeDuration = window.innerHeight * secondsPerPixel // secs per pixel
+    let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel
 
     let timeMin = start_ts - 30.0
     let timeMax = Math.min(start_ts + widthTimeDuration, duration)
@@ -43,9 +43,37 @@ class AnnotationIndex extends Component {
   }
   handleClick(e, annotation) {
     e.stopPropagation()
+    if (e.shiftKey) {
+      e.preventDefault()
+      this.handleParagraphSelection(annotation)
+    }
     actions.audio.seek(annotation.start_ts)
     actions.align.setSelectedAnnotation(annotation.id)
   }
+  handleParagraphSelection(annotation) {
+    const { selected_paragraph_id } = this.props.timeline
+    console.log("___________________")
+    console.log(annotation)
+    console.log(selected_paragraph_id)
+    if (!selected_paragraph_id || selected_paragraph_id === -1) {
+      if (annotation.paragraph_id) {
+        actions.align.setSelectedParagraph(annotation.paragraph_id)
+      } else {
+        actions.paragraph.create({
+          type: 'paragraph',
+          start_ts: annotation.start_ts,
+        }) .then(data => {
+          console.log(data.res)
+          actions.align.setSelectedParagraph(data.res.id)
+          annotation.paragraph_id = data.res.id
+          actions.annotation.update(annotation)
+        })
+      }
+    } else if (selected_paragraph_id !== annotation.paragraph_id) {
+      annotation.paragraph_id = selected_paragraph_id
+      actions.annotation.update(annotation)
+    }
+  }
   handleDoubleClick(e, annotation) {
     e.stopPropagation()
     actions.align.showEditAnnotationForm(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 7639821..f95589d 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.types.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.types.js
@@ -8,9 +8,11 @@ import { positionToTime, timeToPosition } from '../../align.util'
 
 export const AnnotationSentence = ({ y, annotation, selected, onClick, onDoubleClick }) => {
   const { start_ts, text, paragraph_id } = annotation
-  let className = (paragraph_id % 2)
-    ? 'annotation sentence odd'
-    : 'annotation sentence even'
+  let className = !paragraph_id
+    ? 'annotation sentence'
+    : (paragraph_id % 2)
+      ? 'annotation sentence odd'
+      : 'annotation sentence even'
   if (selected) className += ' selected'
   return (
     <div
diff --git a/animism-align/frontend/views/align/components/timeline/playButton.component.js b/animism-align/frontend/views/align/components/player/playButton.component.js
index 486eaee..486eaee 100644
--- a/animism-align/frontend/views/align/components/timeline/playButton.component.js
+++ b/animism-align/frontend/views/align/components/player/playButton.component.js
diff --git a/animism-align/frontend/views/align/components/timeline/playCursor.component.js b/animism-align/frontend/views/align/components/timeline/playCursor.component.js
index 71e6a3a..e03d212 100644
--- a/animism-align/frontend/views/align/components/timeline/playCursor.component.js
+++ b/animism-align/frontend/views/align/components/timeline/playCursor.component.js
@@ -24,13 +24,6 @@ const PlayCursor = ({ timeline, audio }) => {
   )
 }
 
-/*
-      <div className='tickLabel'>
-        {timestamp(cursor_ts, 1)}
-      </div>
-
-*/
-
 const mapStateToProps = state => ({
   timeline: state.align.timeline,
   audio: state.audio,
diff --git a/animism-align/frontend/views/align/components/timeline/ticks.component.js b/animism-align/frontend/views/align/components/timeline/ticks.component.js
index 72f9bd0..747fb7a 100644
--- a/animism-align/frontend/views/align/components/timeline/ticks.component.js
+++ b/animism-align/frontend/views/align/components/timeline/ticks.component.js
@@ -1,16 +1,15 @@
 import React, { Component } from 'react'
 
-import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../../constants'
+import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from '../../constants'
 import { timestamp } from '../../../../util'
 
 export default class Ticks extends Component {
   render() {
     let { start_ts, zoom, duration } = this.props.timeline
-    const width = window.innerHeight
 
     let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
 
-    let widthTimeDuration = width * secondsPerPixel // secs per pixel
+    let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel
 
     let timeMin = start_ts
     let timeMax = Math.min(start_ts + widthTimeDuration, duration)
@@ -26,11 +25,11 @@ export default class Ticks extends Component {
     let startOffset = pixelsPerLabel - (pixelMin % pixelsPerLabel)
     let startTiming = (pixelMin + startOffset) * secondsPerPixel
 
-    let labelCount = Math.ceil(width / pixelsPerLabel) + 1
+    let labelCount = Math.ceil(INNER_HEIGHT / pixelsPerLabel) + 1
     let offset, timing, tickLabels = [], ticks = []
     for (var i = -1; i < labelCount; i++) {
       offset = i * pixelsPerLabel + startOffset
-      if (offset > width) continue
+      if (offset > INNER_HEIGHT) continue
       timing = i * secondsPerLabel + startTiming
       if (timing > duration) {
         break
@@ -63,7 +62,7 @@ export default class Ticks extends Component {
         />
       )
     }
-    let tickCount = Math.ceil(width / pixelsPerTick) + 6
+    let tickCount = Math.ceil(INNER_HEIGHT / pixelsPerTick) + 6
     for (var i = 0; i < tickCount; i += 1) {
       offset = i * pixelsPerTick + startOffset - pixelsPerLabel
       if (offset > durationOffset) {
diff --git a/animism-align/frontend/views/align/components/timeline/waveform.component.js b/animism-align/frontend/views/align/components/timeline/waveform.component.js
index 785b020..16ceaf6 100644
--- a/animism-align/frontend/views/align/components/timeline/waveform.component.js
+++ b/animism-align/frontend/views/align/components/timeline/waveform.component.js
@@ -6,7 +6,7 @@ import { connect } from 'react-redux'
 import actions from '../../../../actions'
 // import * as uploadActions from './upload.actions'
 
-import { WAVEFORM_SIZE, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../../constants'
+import { WAVEFORM_SIZE, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from '../../constants'
 
 class Waveform extends Component {
   constructor(props){
@@ -23,12 +23,12 @@ class Waveform extends Component {
   resize() {
     const canvas = this.canvasRef.current
     canvas.width = WAVEFORM_SIZE
-    canvas.height = window.innerHeight
+    canvas.height = INNER_HEIGHT
   }
   draw() {
     const canvas = this.canvasRef.current
     const ctx = canvas.getContext('2d')
-    const h = window.innerHeight
+    const h = INNER_HEIGHT
     this.clearCanvas(ctx, h)
     this.drawCurve(ctx, h)
   }