diff options
Diffstat (limited to 'animism-align/frontend/app/views/align/components/annotations')
7 files changed, 111 insertions, 4 deletions
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), |