3 files changed, 66 insertions, 0 deletions
diff --git a/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.image.js
new file mode 100644
index 0000000..e2df98b
--- /dev/null
+++ b/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+
+import { Select } from '../../../../../common'
+
+export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect }) => {
+  if (!media.lookup) return <div />
+  const { lookup, order } = media
+  const image_list_items = order.filter(id => lookup[id].type === 'image').map(id => {
+    const image = lookup[id]
+    return {
+      name: image.id,
+      label: image.author + ' - ' + image.title
+    }
+  })
+  return (
+    <div>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose an image'
+        onChange={handleSettingsSelect}
+      />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.video.js
new file mode 100644
index 0000000..9302ba4
--- /dev/null
+++ b/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+
+import { Select } from '../../../../../common'
+
+export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect }) => {
+  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={handleSettingsSelect}
+      />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/views/align/components/annotations/annotationForms/index.js
new file mode 100644
index 0000000..1411efc
--- /dev/null
+++ b/animism-align/frontend/views/align/components/annotations/annotationForms/index.js
@@ -0,0 +1,12 @@
+import {
+  AnnotationFormVideo,
+} from './annotationForm.video'
+
+import {
+  AnnotationFormImage,
+} from './annotationForm.image'
+
+export {
+  AnnotationFormImage,
+  AnnotationFormVideo,
+}