displaying annotation list, click to select, doubleclick to show form, updating annotations

1 files changed, 83 insertions, 0 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
new file mode 100644
index 0000000..7b562c2
--- /dev/null
+++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js
@@ -0,0 +1,83 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from '../../../../actions'
+
+import { ZOOM_STEPS } from '../../constants'
+import { clamp } from '../../../../util'
+import { positionToTime, timeToPosition } from '../../align.util'
+
+import { AnnotationElementLookup } from './annotation.types'
+
+class AnnotationIndex extends Component {
+  state = {
+    items: [],
+  }
+  constructor(props){
+    super(props)
+    this.handleClick = this.handleClick.bind(this)
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.index.loading) return
+    if (prevProps.timeline !== this.props.timeline || prevProps.index !== this.props.index) {
+      this.update()
+    }
+  }
+  update() {
+    let { timeline, index } = this.props
+    let { start_ts, zoom, duration } = this.props.timeline
+    const { order, lookup } = index
+
+    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
+    let widthTimeDuration = window.innerHeight * secondsPerPixel // secs per pixel
+
+    let timeMin = start_ts - 30.0
+    let timeMax = Math.min(start_ts + widthTimeDuration, duration)
+
+    const items = order.filter(id => {
+      const { start_ts: ts } = lookup[id]
+      return (timeMin < ts && ts < timeMax)
+    }).map(id => lookup[id])
+    this.setState({ items })
+  }
+  handleClick(annotation) {
+    actions.audio.seek(annotation.start_ts)
+  }
+  handleDoubleClick(annotation) {
+    actions.align.showEditAnnotationForm(annotation)
+  }
+  render() {
+    const { timeline } = this.props
+    const { start_ts } = timeline
+    const { items } = this.state
+    return (
+      <div className='annotationIndex'>
+        {items.map(annotation => {
+          const { id, type, start_ts } = annotation
+          const AnnotationElement = AnnotationElementLookup[type]
+          const y = timeToPosition(start_ts, timeline)
+          return (
+            <AnnotationElement
+              key={id}
+              y={y}
+              annotation={annotation}
+              onClick={this.handleClick}
+              onDoubleClick={this.handleDoubleClick}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  timeline: state.align.timeline,
+  index: state.annotation.index,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(AnnotationIndex)