1 files changed, 50 insertions, 13 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 226bb45..0a71233 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -12,7 +12,7 @@ import { timeToPosition } from '../../align.util'
 import { Select } from '../../../../common'
 
 const ANNOTATION_TYPES = [
-  'sentence', 'header', 'paragraph_end'
+  'sentence', 'header', 'paragraph_end', 'video',
 ].map(name => ({ name, label: name }))
 
 class AnnotationForm extends Component {
@@ -20,6 +20,7 @@ class AnnotationForm extends Component {
     super(props)
     this.handleChange = this.handleChange.bind(this)
     this.handleSelect = this.handleSelect.bind(this)
+    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
     this.handleKeyDown = this.handleKeyDown.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
     this.textareaRef = React.createRef()
@@ -66,6 +67,10 @@ class AnnotationForm extends Component {
   handleSelect(name, value) {
     actions.align.updateAnnotationForm(name, value)
   }
+  handleSettingsSelect(name, value) {
+    if (name.indexOf('_id') !== -1) value = parseInt(value) || 0
+    actions.align.updateAnnotationSettings(name, value)
+  }
   handleSubmit() {
     const { annotation } = this.props
     if (annotation.type === 'paragraph_end') {
@@ -96,21 +101,28 @@ class AnnotationForm extends Component {
           top: timeToPosition(annotation.start_ts, timeline),
         }}
       >
+        {this.renderButtons()}
         {annotation.type === 'sentence' && this.renderTextarea()}
         {annotation.type === 'header' && this.renderTextarea()}
-        <div className='row buttons'>
-          <div>
-            <Select
-              name='type'
-              selected={annotation.type}
-              options={ANNOTATION_TYPES}
-              defaultOption='text'
-              onChange={this.handleSelect}
-            />
-            <div className='ts'>{timestamp(annotation.start_ts, 1, true)}</div>
-          </div>
-          <button onClick={this.handleSubmit}>Save</button>
+        {annotation.type === 'video' && this.renderVideo()}
+      </div>
+    )
+  }
+  renderButtons() {
+    const { annotation } = this.props
+    return (
+      <div className='row buttons'>
+        <div>
+          <Select
+            name='type'
+            selected={annotation.type}
+            options={ANNOTATION_TYPES}
+            defaultOption='text'
+            onChange={this.handleSelect}
+          />
+          <div className='ts'>{timestamp(annotation.start_ts, 1, true)}</div>
         </div>
+        <button onClick={this.handleSubmit}>Save</button>
       </div>
     )
   }
@@ -128,11 +140,36 @@ class AnnotationForm extends Component {
       </div>
     )
   }
+  renderVideo() {
+    const { annotation, media } = this.props
+    if (!media.lookup) return <div />
+    const { lookup, order } = media
+    const video_list_items = order.filter(id => lookup[id].type === 'video').map(id => {
+      const video = lookup[id]
+      return {
+        name: video.id,
+        label: video.author + ' - ' + video.title
+      }
+    })
+    return (
+      <div>
+        <Select
+          name='media_id'
+          className="media_id"
+          selected={annotation.settings.media_id}
+          options={video_list_items}
+          defaultOption='Choose a video'
+          onChange={this.handleSettingsSelect}
+        />
+      </div>
+    )
+  }
 }
 
 const mapStateToProps = state => ({
   annotation: state.align.annotation,
   timeline: state.align.timeline,
+  media: state.media.index,
 })
 
 const mapDispatchToProps = dispatch => ({