From e973412b5ea29685f4fa260d8eb44baae095fb81 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 4 Jul 2020 16:37:19 +0200
Subject: rename timestamp to annotation

---
 .../components/annotations/annotation.form.js      | 95 ++++++++++------------
 1 file changed, 45 insertions(+), 50 deletions(-)

(limited to 'animism-align/frontend/views/align/components')

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 03e44e1..9432948 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -11,36 +11,42 @@ import { clamp } from '../../../../util'
 import { timeToPosition } from '../../align.util'
 import { Select } from '../../../../common'
 
-const TIMESTAMP_TYPES = ['sentence', 'header'].map(name => ({ name, label: name }))
+const ANNOTATION_TYPES = [
+  'sentence', 'header'
+].map(name => ({ name, label: name }))
 
 class AnnotationForm extends Component {
-  state = {
-    data: {},
-  }
   constructor(props){
     super(props)
     this.handleChange = this.handleChange.bind(this)
     this.handleSelect = this.handleSelect.bind(this)
     this.handleKeyDown = this.handleKeyDown.bind(this)
-  }
-  componentDidMount(){
-    this.setState({
-      data: { ...this.props.annotation },
-    })
-  }
-  componentDidUpdate(prevProps){
-    if (this.props.annotation !== prevProps.annotation) {
-      this.setState({
-        data: {
-          ...this.props.annotation,
-          text: this.state.data.text,
-          type: this.state.data.text,
-        },
-      })
-    }
+    this.handleSubmit = this.handleSubmit.bind(this)
   }
   handleKeyDown(e) {
+    if (!e.metaKey && !e.ctrlKey) return
+    let { start_ts } = this.props.annotation
+    console.log(e.keyCode)
     switch (e.keyCode) {
+      case 38: // up
+        e.preventDefault()
+        start_ts -= 0.1
+        actions.align.updateAnnotationForm('start_ts', start_ts)
+        actions.audio.seek(start_ts)
+        actions.align.setCursor(start_ts)
+        break
+      case 40: // down
+        e.preventDefault()
+        start_ts += 0.1
+        actions.align.updateAnnotationForm('start_ts', start_ts)
+        actions.audio.seek(start_ts)
+        actions.align.setCursor(start_ts)
+        break
+      case 83: // ctrl-S
+        e.preventDefault()
+        this.handleSubmit()
+      default:
+        break
     }
   }
   handleChange(e) {
@@ -48,62 +54,57 @@ class AnnotationForm extends Component {
     this.handleSelect(name, value)
   }
   handleSelect(name, value) {
-    this.setState({
-      data: {
-        ...this.state.data,
-        [name]: value,
-      }
-    })
+    actions.align.updateAnnotationForm(name, value)
   }
   handleSubmit() {
-    const { data } = this.state
-    if (data.id === 'new') {
-      delete data.id
-      actions.graph.create(data)
+    const { annotation } = this.props
+    if (annotation.id === 'new') {
+      delete annotation.id
+      actions.annotation.create(annotation)
         .then(response => {
           console.log(response)
-          actions.align.hideTimestampForm()
+          actions.align.hideAnnotationForm()
         })
     } else {
-      actions.graph.update(data)
+      actions.annotation.update(annotation)
         .then(response => {
           console.log(response)
-          actions.align.hideTimestampForm()
+          actions.align.hideAnnotationForm()
         })
     }
   }
   render() {
-    const { timeline } = this.props
-    const { data } = this.state
-    if (!data.start_ts) return <div></div>
+    const { timeline, annotation } = this.props
+    if (!annotation.start_ts) return <div></div>
     return (
       <div
         className='annotationForm'
         style={{
-          top: timeToPosition(data.start_ts, timeline),
+          top: timeToPosition(annotation.start_ts, timeline),
         }}
       >
-        {data.type === 'sentence' && this.renderTextarea()}
-        {data.type === 'header' && this.renderTextarea()}
+        {annotation.type === 'sentence' && this.renderTextarea()}
+        {annotation.type === 'header' && this.renderTextarea()}
         <div className='row'>
           <Select
             name='type'
-            selected={data.type}
-            options={TIMESTAMP_TYPES}
+            selected={annotation.type}
+            options={ANNOTATION_TYPES}
             defaultOption='text'
             onChange={this.handleSelect}
           />
-          <button>Save</button>
+          <button onClick={this.handleSubmit}>Save</button>
         </div>
       </div>
     )
   }
   renderTextarea() {
-    const { data } = this.state
+    const { annotation } = this.props
     return (
       <div>
         <textarea
-          value={data.text}
+          name='text'
+          value={annotation.text}
           onKeyDown={this.handleKeyDown}
           onChange={this.handleChange}
         />
@@ -112,12 +113,6 @@ class AnnotationForm extends Component {
   }
 }
 
-
-/*
-- get the first sentence from the text
-- display the form at that point
-*/
-
 const mapStateToProps = state => ({
   annotation: state.align.annotation,
   timeline: state.align.timeline,
-- 
cgit v1.2.3-70-g09d2