diff options
Diffstat (limited to 'animism-align/frontend/app/views/align/components/annotations')
8 files changed, 176 insertions, 10 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 80a960f..caf64be 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 @@ -15,7 +15,8 @@ import { annotationFormLookup } from './annotationForms' const ANNOTATION_TYPES = [ 'sentence', 'section_heading', 'heading_text', 'paragraph_end', 'video', - 'image', 'image_carousel', + 'image', + 'gallery', 'grid', 'vitrine', 'curtain', 'intro', ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) })) 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 new file mode 100644 index 0000000..e85c6f3 --- /dev/null +++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.gallery.js @@ -0,0 +1,69 @@ +import React, { Component } from 'react' + +import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants' +import { TextInput, Select, Checkbox } from 'app/common' +import { AnnotationFormFullscreen } from './annotationForm.utility' + +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 + } + }) + return ( + <div className='options'> + <Select + name='media_id' + className="media_id" + selected={annotation.settings.media_id} + options={image_list_items} + defaultOption='Choose an image' + onChange={handleSettingsSelect} + /> + + <TextInput + title="Title" + name="title" + placeholder="Enter title or leave blank" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + + <Checkbox + label="Fullscreen" + name="fullscreen" + checked={annotation.settings.fullscreen} + onChange={handleSettingsSelect} + /> + + <Checkbox + label="Inline" + name="inline" + checked={annotation.settings.inline} + onChange={handleSettingsSelect} + /> + + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + + {(annotation.settings.fullscreen && !annotation.settings.inline) && ( + <AnnotationFormFullscreen + annotation={annotation} + handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} + /> + )} + </div> + ) +} 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 9ca5295..285dbcc 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 @@ -1,5 +1,6 @@ import React, { Component } from 'react' +import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants' import { Select, Checkbox } from 'app/common' import { AnnotationFormFullscreen } from './annotationForm.utility' @@ -23,18 +24,30 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h defaultOption='Choose an image' onChange={handleSettingsSelect} /> + <Checkbox label="Fullscreen" name="fullscreen" checked={annotation.settings.fullscreen} onChange={handleSettingsSelect} /> + <Checkbox label="Inline" name="inline" checked={annotation.settings.inline} onChange={handleSettingsSelect} /> + + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + {(annotation.settings.fullscreen && !annotation.settings.inline) && ( <AnnotationFormFullscreen annotation={annotation} 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 750c3a7..4220eff 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 @@ -44,6 +44,15 @@ export const AnnotationFormIntro = ({ annotation, media, handleSettingsChange, h autoComplete="off" /> + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + <AnnotationFormFullscreen annotation={annotation} handleSettingsChange={handleSettingsChange} @@ -65,6 +74,15 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle autoComplete="off" /> + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + <AnnotationFormFullscreen alwaysAccessible annotation={annotation} @@ -82,15 +100,6 @@ export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange, han } = annotationFadeTimings(annotation) return ( <div> - <Select - title='Color' - name='color' - selected={annotation.settings.color} - options={CURTAIN_COLOR_SELECT_OPTIONS} - defaultOption='Pick a color' - onChange={handleSettingsSelect} - /> - <TextInput title="Total duration" name="duration" 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 6f58d60..9d15b44 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 @@ -1,5 +1,6 @@ import React, { Component } from 'react' +import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants' import { Select, Checkbox } from 'app/common' import { AnnotationFormFullscreen } from './annotationForm.utility' @@ -41,6 +42,15 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h checked={annotation.settings.inline} onChange={handleSettingsSelect} /> + <Select + title='Color' + name='color' + selected={annotation.settings.color} + options={CURTAIN_COLOR_SELECT_OPTIONS} + defaultOption='Pick a color' + onChange={handleSettingsSelect} + /> + {(annotation.settings.fullscreen && !annotation.settings.inline) && ( <AnnotationFormFullscreen annotation={annotation} 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 dd601bc..f8b3698 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 @@ -11,6 +11,10 @@ import { } from './annotationForm.image' import { + AnnotationFormGallery, +} from './annotationForm.gallery' + +import { AnnotationFormCurtain, AnnotationFormIntro, } from './annotationForm.utility' @@ -21,4 +25,7 @@ export const annotationFormLookup = { video: AnnotationFormVideo, intro: AnnotationFormIntro, curtain: AnnotationFormCurtain, + gallery: AnnotationFormGallery, + grid: AnnotationFormGallery, + vitrine: AnnotationFormGallery, } 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 new file mode 100644 index 0000000..e25f78e --- /dev/null +++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.gallery.js @@ -0,0 +1,50 @@ +import React, { Component } from 'react' + +import { durationToHeight } from 'app/utils/align.utils' +import { capitalize } from 'app/utils' +import { annotationFadeTimings, thumbnailURL } from 'app/utils/annotation.utils' + +import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility' + +export const AnnotationGallery = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => { + const { text } = annotation + const className = selected ? 'annotation media gallery selected' : 'annotation media gallery' + if (checkAnnotationMediaNotReady(annotation, media)) { + return <AnnotationMediaLoading y={y} className={className} onClick={onClick} onDoubleClick={onDoubleClick} /> + } + const mediaItem = media[annotation.settings.media_id] + + const { + fadeInDuration, fadeOutDuration, duration, + start_ts, end_ts, fade_in_end_ts, fade_out_start_ts, + } = annotationFadeTimings(annotation) + const durationHeight = annotation.settings.fullscreen ? durationToHeight(duration, timeline) : 'auto' + const fadeInHeight = durationToHeight(fadeInDuration, timeline) + const fadeOutHeight = durationToHeight(fadeOutDuration, timeline) + + const style = { + top: y, + } + if (annotation.settings.fullscreen && !annotation.settings.inline) { + style.height = durationHeight + } + + return ( + <div + className={className} + style={style} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + <div className='meta center'> + <div> + {capitalize(annotation.type)}<br/> + <i>{mediaItem.title}</i><br /> + {mediaItem.author}<br /> + {mediaItem.date} + </div> + </div> + </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 5b13496..512ce6d 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 @@ -16,6 +16,10 @@ import { } from './annotationTypes.image' import { + AnnotationGallery, +} from './annotationTypes.gallery' + +import { AnnotationCurtain, AnnotationIntro, } from './annotationTypes.utility' @@ -27,6 +31,9 @@ export const AnnotationElementLookup = { paragraph_end: React.memo(AnnotationParagraphEnd), video: React.memo(AnnotationVideo), image: React.memo(AnnotationImage), + gallery: React.memo(AnnotationGallery), + grid: React.memo(AnnotationGallery), + vitrine: React.memo(AnnotationGallery), intro: React.memo(AnnotationIntro), curtain: React.memo(AnnotationCurtain), } |