refactor annotation and paragraph types

1 files changed, 16 insertions, 27 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 53f640f..01b1663 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -11,8 +11,13 @@ import { clamp, timestamp, capitalize } from '../../../../util'
 import { timeToPosition } from '../../align.util'
 import { Select } from '../../../../common'
 
+import {
+  AnnotationFormVideo,
+  AnnotationFormImage,
+} from './annotationForms'
+
 const ANNOTATION_TYPES = [
-  'sentence', 'header', 'paragraph_end', 'video',
+  'sentence', 'header', 'paragraph_end', 'video', 'image', 'image_carousel',
 ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
 
 class AnnotationForm extends Component {
@@ -105,7 +110,7 @@ class AnnotationForm extends Component {
     }
   }
   render() {
-    const { timeline, annotation } = this.props
+    const { timeline, annotation, media } = this.props
     if (!annotation.start_ts) return <div></div>
     return (
       <div
@@ -117,7 +122,15 @@ class AnnotationForm extends Component {
         {this.renderButtons()}
         {annotation.type === 'sentence' && this.renderTextarea()}
         {annotation.type === 'header' && this.renderTextarea()}
-        {annotation.type === 'video' && this.renderVideo()}
+        {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} />
+        }
       </div>
     )
   }
@@ -156,30 +169,6 @@ 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 => ({