3 files changed, 12 insertions, 6 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 b62c36e..6972f93 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -22,6 +22,12 @@ class AnnotationForm extends Component {
     this.handleSelect = this.handleSelect.bind(this)
     this.handleKeyDown = this.handleKeyDown.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
+    this.textareaRef = React.createRef()
+  }
+  componentDidMount() {
+    if (this.textareaRef && this.textareaRef.current) {
+      this.textareaRef.current.focus()
+    }
   }
   handleKeyDown(e) {
     if (e.keyCode === 27) { // escape
@@ -111,6 +117,7 @@ class AnnotationForm extends Component {
           value={annotation.text}
           onKeyDown={this.handleKeyDown}
           onChange={this.handleChange}
+          ref={this.textareaRef}
         />
       </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 7b562c2..09cb255 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.index.js
@@ -38,7 +38,7 @@ class AnnotationIndex extends Component {
     const items = order.filter(id => {
       const { start_ts: ts } = lookup[id]
       return (timeMin < ts && ts < timeMax)
-    }).map(id => lookup[id])
+    }).map(id => lookup[id]).reverse()
     this.setState({ items })
   }
   handleClick(annotation) {
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 128204a..0a118cf 100644
--- a/animism-align/frontend/views/align/components/timeline/waveform.component.js
+++ b/animism-align/frontend/views/align/components/timeline/waveform.component.js
@@ -45,7 +45,6 @@ class Waveform extends Component {
 
     let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
     let stepsPerPixel = ZOOM_STEPS[zoom] // 0.1 sec / step
-    let indexesPerPixel = stepsPerPixel * 2
 
     let widthTimeDuration = h * secondsPerPixel // secs per pixel
 
@@ -53,7 +52,7 @@ class Waveform extends Component {
     let timeMax = Math.min(start_ts + widthTimeDuration, duration)
     let timeWidth = timeMax - timeMin
 
-    let stepMin = Math.floor(timeMin * 10 * 2)
+    let stepMin = Math.floor(timeMin * 10)
     let pixelWidth = Math.ceil(timeWidth / secondsPerPixel)
 
     let i = 0
@@ -62,17 +61,17 @@ class Waveform extends Component {
     let origin = (1 - peaks[step]) * waveformPeak
     let y
     let peak
-    // console.log(0 * indexesPerPixel + stepMin, pixelWidth * indexesPerPixel + stepMin)
+    // console.log(stepMin, pixelWidth * stepsPerPixel + stepMin)
     ctx.beginPath()
     ctx.moveTo(origin, 0)
     for (i = 0; i < pixelWidth; i++) {
-      step = i * indexesPerPixel + stepMin
+      step = i * stepsPerPixel + stepMin
       peak = peaks[step]
       y = (1 - peak) * waveformPeak
       ctx.lineTo(y, i)
     }
     for (i = pixelWidth - 1; i > 0; i--) {
-      step = i * indexesPerPixel + stepMin
+      step = i * stepsPerPixel + stepMin
       peak = peaks[step]
       y = (1 + peak) * waveformPeak
       ctx.lineTo(y, i)