keep track of carousel advance instructions

10 files changed, 128 insertions, 8 deletions

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index c244a60..b3371ee 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -65,6 +65,10 @@ export const FULLSCREEN_UTILITY_ANNOTATION_TYPES = new Set([
   'curtain',
 ])
 
+export const GALLERY_UTILITY_ANNOTATION_TYPES = new Set([
+  'gallery_advance',
+])
+
 export const CURTAIN_COLORS = [
   { label: 'white', backgroundColor: '#ffffff', textColor: '#000000' },
   { label: 'light gray', backgroundColor: '#eeeeee', textColor: '#000000' },
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 f20e70a..985e592 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
@@ -17,6 +17,7 @@ const ANNOTATION_TYPES = [
   'video',
   'image',
   'gallery', 'carousel', 'grid', 'vitrine',
+  'gallery_advance',
   'curtain', 'intro', 'schedule',
 ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
 
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.index.js b/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
index 0f9ee30..44b27d7 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
@@ -38,7 +38,7 @@ class AnnotationIndex extends PureComponent {
     const items = order.filter(id => {
       const { start_ts: ts } = lookup[id]
       return (timeMin < ts && ts < timeMax)
-    }).map(id => lookup[id]).reverse()
+    }).map(id => lookup[id])
     this.setState({ items })
   }
   handleClick(e, annotation) {
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 5fb8958..c43d8d5 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
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 
 import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
-import { TextInput, Select, Checkbox } from 'app/common'
+import { TextInput, Select, Checkbox, LabelDescription } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
 
 export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
@@ -21,7 +21,7 @@ export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect,
         className="media_id"
         selected={annotation.settings.media_id}
         options={image_list_items}
-        defaultOption='Choose an image'
+        defaultOption='Choose a gallery'
         onChange={handleSettingsSelect}
       />
 
@@ -74,3 +74,78 @@ export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect,
     </div>
   )
 }
+
+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]
+    }
+  }
+  return (
+    <div className='options'>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose a gallery'
+        onChange={handleSettingsSelect}
+      />
+
+      {item && (
+        <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="Advance half a frame forward to fit two images in view"
+        name="half_frame"
+        checked={annotation.settings.half_frame}
+        onChange={handleSettingsSelect}
+      />
+
+      <Checkbox
+        label="Hide in transcript"
+        name="hide_in_transcript"
+        checked={annotation.settings.hide_in_transcript}
+        onChange={handleSettingsSelect}
+      />
+
+      <Checkbox
+        label="Show in checklist"
+        name="show_in_checklist"
+        checked={annotation.settings.show_in_checklist}
+        onChange={handleSettingsSelect}
+      />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
index a4ad015..5cbe773 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
@@ -12,6 +12,7 @@ import {
 
 import {
   AnnotationFormGallery,
+  AnnotationFormGalleryAdvance,
 } from './annotationForm.gallery'
 
 import {
@@ -30,6 +31,8 @@ export const annotationFormLookup = {
   grid: AnnotationFormGallery,
   vitrine: AnnotationFormGallery,
 
+  gallery_advance: AnnotationFormGalleryAdvance,
+
   intro: AnnotationFormIntro,
   curtain: AnnotationFormCurtain,
 }
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js
index e25f78e..61d24e3 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js
@@ -48,3 +48,28 @@ export const AnnotationGallery = ({ y, annotation, media, timeline, selected, on
   )
 }
 
+
+export const AnnotationGalleryAdvance = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => {
+  const className = selected ? 'annotation media gallery_advance selected' : 'annotation media gallery_advance'
+  const style = {
+    top: y,
+  }
+  let index = parseInt(annotation.settings.frame_index) + 1
+  if (annotation.settings.half_frame) {
+    index += 0.5
+  }
+  return (
+    <div
+      className={className}
+      style={style}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+    >
+      <div className='meta center'>
+        <div>
+          Advance gallery to frame {index}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js
index 55257ef..07c986c 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js
@@ -83,7 +83,7 @@ export const checkAnnotationMediaNotReady = (annotation, media) => {
   return (!media) || (!(annotation.settings.media_id in media))
 }
 
-export const AnnotationMediaLoading = ({ y, media, className, onClick, onDoubleClick }) => {
+export const AnnotationMediaLoading = ({ y, annotation, media, className, onClick, onDoubleClick }) => {
   if (!media) {
     return (
       <div
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
index a0da2f2..64e351d 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
@@ -17,6 +17,7 @@ import {
 
 import {
   AnnotationGallery,
+  AnnotationGalleryAdvance,
 } from './annotationTypes.gallery'
 
 import {
@@ -39,6 +40,8 @@ export const AnnotationElementLookup = {
   grid: React.memo(AnnotationGallery),
   vitrine: React.memo(AnnotationGallery),
 
+  gallery_advance: React.memo(AnnotationGalleryAdvance),
+
   intro: React.memo(AnnotationIntro),
   schedule: React.memo(AnnotationSchedule),
   curtain: React.memo(AnnotationCurtain),
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index 3b3baaf..94f4585 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -59,7 +59,7 @@ class ParagraphList extends Component {
       onAnnotationClick, onParagraphDoubleClick,
     } = this.props
     const { currentParagraph, currentAnnotation } = this.state
-    return paragraphs.map(paragraph => {
+    return paragraphs.map((paragraph, i) => {
       if (selectedParagraph && selectedParagraph.id === paragraph.id) {
         paragraph = selectedParagraph
       }
@@ -67,7 +67,7 @@ class ParagraphList extends Component {
         const ParagraphElement = paragraphElementLookup[paragraph.type]
         return (
           <ParagraphElement
-            key={paragraph.id}
+            key={paragraph.id + "_" + i}
             paragraph={paragraph}
             media={media}
             currentParagraph={paragraph.id === currentParagraph}
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 5d10f2a..2771957 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -6,7 +6,9 @@ import {
   TEXT_ANNOTATION_TYPES,
   INLINE_UTILITY_ANNOTATION_TYPES,
   FULLSCREEN_UTILITY_ANNOTATION_TYPES,
-  CURTAIN_COLOR_LOOKUP, GROWL,
+  GALLERY_UTILITY_ANNOTATION_TYPES,
+  CURTAIN_COLOR_LOOKUP,
+  GROWL,
 } from 'app/constants'
 import { floatInRange } from 'app/utils'
 import { buildParagraphs } from 'app/utils/transcript.utils'
@@ -89,7 +91,7 @@ export const loadSections = () => dispatch => {
       if (!media.settings.hide_in_bibliography && !(media.id in seenMedia)) {
         currentSection.media.push({
           start_ts: annotation.start_ts,
-          media
+          media,
         })
         seenMedia[media.id] = true
       }
@@ -109,6 +111,13 @@ export const loadSections = () => dispatch => {
       }
     }
 
+    // build timeline of gallery / carousel advance instructions
+    if (GALLERY_UTILITY_ANNOTATION_TYPES.has(annotation.type) && currentSection.fullscreenTimeline.length) {
+      const lastTimelineEvent = currentSection.fullscreenTimeline[currentSection.fullscreenTimeline.length - 1]
+      if (!lastTimelineEvent.timeline) lastTimelineEvent.timeline = []
+      lastTimelineEvent.timeline.push(annotation)
+    }
+
     // build timeline of special inline items
     if (INLINE_UTILITY_ANNOTATION_TYPES.has(annotation.type)) {
       sectionTextAnnotationOrder.push(annotation.id)