notion of selected annotation

1 files changed, 11 insertions, 4 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}