notion of selected annotation

3 files changed, 27 insertions, 15 deletions

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 09cb255..9117a80 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js
@@ -41,18 +41,24 @@ class AnnotationIndex extends Component {
     }).map(id => lookup[id]).reverse()
     this.setState({ items })
   }
-  handleClick(annotation) {
+  handleClick(e, annotation) {
     actions.audio.seek(annotation.start_ts)
+    actions.align.setSelectedAnnotation(annotation.id)
   }
-  handleDoubleClick(annotation) {
+  handleDoubleClick(e, annotation) {
     actions.align.showEditAnnotationForm(annotation)
   }
   render() {
     const { timeline } = this.props
-    const { start_ts } = timeline
+    const { start_ts, zoom, selected_annotation_id } = timeline
     const { items } = this.state
+    const className = (zoom < 2)
+      ? 'annotationIndex'
+      : (zoom < 3)
+      ? 'annotationIndex condensed'
+      : 'annotationIndex collapsed'
     return (
-      <div className='annotationIndex'>
+      <div className={className}>
         {items.map(annotation => {
           const { id, type, start_ts } = annotation
           const AnnotationElement = AnnotationElementLookup[type]
@@ -61,6 +67,7 @@ class AnnotationIndex extends Component {
             <AnnotationElement
               key={id}
               y={y}
+              selected={annotation.id === selected_annotation_id}
               annotation={annotation}
               onClick={this.handleClick}
               onDoubleClick={this.handleDoubleClick}
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 465844f..7639821 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.types.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.types.js
@@ -6,28 +6,33 @@ import { ZOOM_STEPS } from '../../constants'
 import { clamp } from '../../../../util'
 import { positionToTime, timeToPosition } from '../../align.util'
 
-export const AnnotationSentence = ({ y, annotation, onClick, onDoubleClick }) => {
-  const { start_ts, text } = annotation
+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'
+  if (selected) className += ' selected'
   return (
     <div
-      className='annotation sentence'
+      className={className}
       style={{ top: y }}
-      onClick={() => onClick(annotation)}
-      onDoubleClick={() => onDoubleClick(annotation)}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
     >
       {text}
     </div>
   )
 }
 
-export const AnnotationHeader = ({ y, annotation, onClick, onDoubleClick }) => {
+export const AnnotationHeader = ({ y, annotation, selected, onClick, onDoubleClick }) => {
   const { start_ts, text } = annotation
+  const className = selected ? 'annotation header selected' : 'annotation header'
   return (
     <div
-      className='annotation header'
+      className={className}
       style={{ top: y }}
-      onClick={() => onClick(annotation)}
-      onDoubleClick={() => onDoubleClick(annotation)}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
     >
       {text}
     </div>
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 0a118cf..785b020 100644
--- a/animism-align/frontend/views/align/components/timeline/waveform.component.js
+++ b/animism-align/frontend/views/align/components/timeline/waveform.component.js
@@ -48,8 +48,8 @@ class Waveform extends Component {
 
     let widthTimeDuration = h * secondsPerPixel // secs per pixel
 
-    let timeMin = start_ts
-    let timeMax = Math.min(start_ts + widthTimeDuration, duration)
+    let timeMin = Math.round(start_ts / secondsPerPixel) * secondsPerPixel
+    let timeMax = Math.min(timeMin + widthTimeDuration, duration)
     let timeWidth = timeMax - timeMin
 
     let stepMin = Math.floor(timeMin * 10)