1 files changed, 22 insertions, 15 deletions
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
index f4620bc..7882884 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -7,18 +7,16 @@ import actions from 'app/actions'
 
 import { ZOOM_STEPS } from 'app/constants'
 import { clamp, timestamp, capitalize } from 'app/utils'
-import { timeToPosition } from 'app/views/align/align.util'
+import { timeToPosition } from 'app/utils/align.utils'
 import { Select } from 'app/common'
 
-import {
-  AnnotationFormVideo,
-  AnnotationFormImage,
-} from './annotationForms'
+import { annotationFormLookup } from './annotationForms'
 
 const ANNOTATION_TYPES = [
   'sentence', 'header', 'paragraph_end',
   'video',
   'image', 'image_carousel',
+  'curtain',
 ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
 
 class AnnotationForm extends Component {
@@ -26,6 +24,7 @@ class AnnotationForm extends Component {
     super(props)
     this.handleChange = this.handleChange.bind(this)
     this.handleSelect = this.handleSelect.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
     this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
     this.handleKeyDown = this.handleKeyDown.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
@@ -74,6 +73,10 @@ class AnnotationForm extends Component {
   handleSelect(name, value) {
     actions.align.updateAnnotationForm(name, value)
   }
+  handleSettingsChange(e) {
+    const { name, value } = e.target
+    this.handleSettingsSelect(name, value)
+  }
   handleSettingsSelect(name, value) {
     if (name.indexOf('_id') !== -1) value = parseInt(value) || 0
     actions.align.updateAnnotationSettings(name, value)
@@ -111,7 +114,7 @@ class AnnotationForm extends Component {
     }
   }
   render() {
-    const { timeline, annotation, media } = this.props
+    const { timeline, annotation } = this.props
     return (
       <div
         className='annotationForm'
@@ -122,15 +125,7 @@ class AnnotationForm extends Component {
         {this.renderButtons()}
         {annotation.type === 'sentence' && this.renderTextarea()}
         {annotation.type === 'header' && this.renderTextarea()}
-        {annotation.type === 'video' &&
-          <AnnotationFormVideo annotation={annotation} media={media} handleSettingsSelect={this.handleSettingsSelect} />
-        }
-        {annotation.type === 'image' &&
-          <AnnotationFormImage annotation={annotation} media={media} handleSettingsSelect={this.handleSettingsSelect} />
-        }
-        {annotation.type === 'image_carousel' &&
-          <AnnotationFormImageCarousel annotation={annotation} media={media} handleSettingsSelect={this.handleSettingsSelect} />
-        }
+        {(annotation.type in annotationFormLookup) && this.renderElementForm()}
       </div>
     )
   }
@@ -169,6 +164,18 @@ class AnnotationForm extends Component {
       </div>
     )
   }
+  renderElementForm() {
+    const { annotation, media } = this.props
+    const AnnotationFormElement = annotationFormLookup[annotation.type]
+    return (
+      <AnnotationFormElement
+        annotation={annotation}
+        media={media}
+        handleSettingsChange={this.handleSettingsChange}
+        handleSettingsSelect={this.handleSettingsSelect}
+      />
+    )
+  }
 }
 
 const mapStateToProps = state => ({