diff options
Diffstat (limited to 'animism-align/frontend/app/views/align')
5 files changed, 87 insertions, 1 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 5842aab..80a960f 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 @@ -16,7 +16,7 @@ const ANNOTATION_TYPES = [ 'sentence', 'section_heading', 'heading_text', 'paragraph_end', 'video', 'image', 'image_carousel', - 'curtain', + 'curtain', 'intro', ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) })) class AnnotationForm extends Component { 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 6c835c5..750c3a7 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 @@ -5,6 +5,54 @@ import { TextInput, LabelDescription, Select, Checkbox } from 'app/common' import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants' import { annotationFadeTimings } 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 + } + }) + return ( + <div className='options'> + <Select + name='media_id' + className="media_id" + selected={annotation.settings.media_id} + options={image_list_items} + defaultOption='Choose a file' + onChange={handleSettingsSelect} + /> + + <TextInput + title="Title" + name="title" + placeholder="Enter title or leave blank" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + + <TextInput + title="Subtitle" + name="subtitle" + placeholder="Enter subtitle or leave blank" + data={annotation.settings} + onChange={handleSettingsChange} + autoComplete="off" + /> + + <AnnotationFormFullscreen + annotation={annotation} + handleSettingsChange={handleSettingsChange} + handleSettingsSelect={handleSettingsSelect} + /> + </div> + ) +} + export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => { return ( <div className='options'> 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 0b36d9a..dd601bc 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,11 +12,13 @@ import { import { AnnotationFormCurtain, + AnnotationFormIntro, } from './annotationForm.utility' export const annotationFormLookup = { section_heading: AnnotationFormSectionHeading, image: AnnotationFormImage, video: AnnotationFormVideo, + intro: AnnotationFormIntro, curtain: AnnotationFormCurtain, } 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 8b59e18..296e5bc 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 @@ -3,6 +3,40 @@ import React, { Component } from 'react' import { annotationFadeTimings } from 'app/utils/annotation.utils' import { durationToHeight } from 'app/utils/align.utils' +export const AnnotationIntro = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => { + const className = selected ? 'annotation utility intro selected' : 'annotation utility intro' + const { + fadeInDuration, fadeOutDuration, duration, + start_ts, end_ts, fade_in_end_ts, fade_out_start_ts, + } = annotationFadeTimings(annotation) + const durationHeight = durationToHeight(duration, timeline) + const fadeInHeight = durationToHeight(fadeInDuration, timeline) + const fadeOutHeight = durationToHeight(fadeOutDuration, timeline) + let style = { + top: y, + } + if (annotation.settings.fullscreen) { + style.height = durationHeight + } + return ( + <div + className={className} + style={style} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + > + <div style={{ height: fadeInHeight }} className='fadeIn' /> + <div style={{ height: fadeOutHeight }} className='fadeOut' /> + <span style={{ top: fadeInHeight }}> + Intro:<br/> + {annotation.settings.title}<br /> + {annotation.settings.subtitle}<br /> + </span> + </div> + ) +} + + export const AnnotationCurtain = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => { const className = selected ? 'annotation utility curtain selected' : 'annotation utility curtain' const { 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 1a1c5ec..5b13496 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 { AnnotationCurtain, + AnnotationIntro, } from './annotationTypes.utility' export const AnnotationElementLookup = { @@ -26,5 +27,6 @@ export const AnnotationElementLookup = { paragraph_end: React.memo(AnnotationParagraphEnd), video: React.memo(AnnotationVideo), image: React.memo(AnnotationImage), + intro: React.memo(AnnotationIntro), curtain: React.memo(AnnotationCurtain), } |