diff options
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) |