images can include images from galleries. command to duplicate annotations

4 files changed, 27 insertions, 58 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js
index c43d8d5..55bdd86 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js
@@ -3,17 +3,11 @@ import React, { Component } from 'react'
 import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
 import { TextInput, Select, Checkbox, LabelDescription } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
+import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils'
 
 export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
   if (!media.lookup) return <div />
-  const { lookup, order } = media
-  const image_list_items = order.filter(id => lookup[id].type === 'gallery').map(id => {
-    const image = lookup[id]
-    return {
-      name: image.id,
-      label: image.author + ' - ' + image.title
-    }
-  })
+  const image_list_items = makeMediaItems(media, ['gallery'])
   return (
     <div className='options'>
       <Select
@@ -77,30 +71,8 @@ export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect,
 
 export const AnnotationFormGalleryAdvance = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
   if (!media.lookup) return <div />
-  const { lookup, order } = media
-  const image_list_items = order.filter(id => lookup[id].type === 'gallery').map(id => {
-    const image = lookup[id]
-    return {
-      name: image.id,
-      label: image.author + ' - ' + image.title
-    }
-  })
-  let item, gallery_items, frame_id, thumbnail
-  if (annotation.settings.media_id && lookup[annotation.settings.media_id]) {
-    item = lookup[annotation.settings.media_id]
-    gallery_items = item.settings.image_order.map((id, index) => {
-      const caption = item.settings.caption_lookup && item.settings.caption_lookup[id]
-      console.log(caption)
-      return {
-        name: index,
-        label: (index + 1) + ") " + (caption ? (caption.title || "") : "")
-      }
-    })
-    if (annotation.settings.frame_index) {
-      frame_id = item.settings.image_order[annotation.settings.frame_index]
-      thumbnail = item.settings.thumbnail_lookup[frame_id]
-    }
-  }
+  const image_list_items = makeMediaItems(media, ['gallery'])
+  const { gallery_items, thumbnail } = makeGalleryItems(annotation, media)
   return (
     <div className='options'>
       <Select
@@ -112,7 +84,7 @@ export const AnnotationFormGalleryAdvance = ({ annotation, media, handleSettings
         onChange={handleSettingsSelect}
       />
 
-      {item && (
+      {gallery_items && (
         <Select
           name='frame_index'
           selected={annotation.settings.frame_index}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
index 28f7e79..d3e981a 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -3,17 +3,12 @@ import React, { Component } from 'react'
 import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
 import { Select, Checkbox, TextInput } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
+import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils'
 
 export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
   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
-    }
-  })
+  const image_list_items = makeMediaItems(media, ['image', 'gallery'])
+  const { gallery_items, thumbnail } = makeGalleryItems(annotation, media)
   return (
     <div className='options'>
       <Select
@@ -24,7 +19,21 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h
         defaultOption='Choose an image'
         onChange={handleSettingsSelect}
       />
-      
+
+      {gallery_items && (
+        <Select
+          name='frame_index'
+          selected={annotation.settings.frame_index}
+          options={gallery_items}
+          defaultOption='Choose an image'
+          onChange={handleSettingsSelect}
+        />
+      )}
+
+      {thumbnail && (
+        <img src={thumbnail.url} />
+      )}
+
       <Checkbox
         label="Fullscreen"
         name="fullscreen"
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
index ff1de04..d83005e 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
@@ -4,17 +4,11 @@ import { timestamp } from 'app/utils'
 import { TextInput, LabelDescription, Select, Checkbox } from 'app/common'
 import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
 import { annotationFadeTimings } from 'app/utils/annotation.utils'
+import { makeMediaItems } from 'app/utils/annotation.utils'
 
 export const AnnotationFormIntro = ({ annotation, media, handleSettingsChange, handleSettingsSelect }) => {
   if (!media.lookup) return <div />
-  const { lookup, order } = media
-  const image_list_items = order.filter(id => lookup[id].type === 'file').map(id => {
-    const image = lookup[id]
-    return {
-      name: image.id,
-      label: image.title
-    }
-  })
+  const image_list_items = makeMediaItems(media, 'file')
   return (
     <div className='options'>
       <Select
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index f4cf4c5..f634faa 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -3,17 +3,11 @@ import React, { Component } from 'react'
 import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_BACKGROUND_SIZE_OPTIONS } from 'app/constants'
 import { Select, Checkbox, TextInput, LabelDescription } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
+import { makeMediaItems } from 'app/utils/annotation.utils'
 
 export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
   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
-    }
-  })
+  const video_list_items = makeMediaItems(media, ['video'])
   return (
     <div className='options'>
       <Select