diff options
11 files changed, 182 insertions, 7 deletions
diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js index 2ed5563..1acdf5b 100644 --- a/animism-align/frontend/app/constants.js +++ b/animism-align/frontend/app/constants.js @@ -56,7 +56,11 @@ export const MEDIA_LABEL_TYPES = { vitrine: 'Vitrine', } -export const UTILITY_ANNOTATION_TYPES = new Set([ +export const INLINE_UTILITY_ANNOTATION_TYPES = new Set([ + 'intro', +]) + +export const FULLSCREEN_UTILITY_ANNOTATION_TYPES = new Set([ 'curtain', ]) diff --git a/animism-align/frontend/app/utils/transcript.utils.js b/animism-align/frontend/app/utils/transcript.utils.js index 6400394..f6ab7a8 100644 --- a/animism-align/frontend/app/utils/transcript.utils.js +++ b/animism-align/frontend/app/utils/transcript.utils.js @@ -2,7 +2,8 @@ import { store, history, dispatch } from 'app/store' import { TEXT_ANNOTATION_TYPES, MEDIA_ANNOTATION_TYPES, - UTILITY_ANNOTATION_TYPES, + INLINE_UTILITY_ANNOTATION_TYPES, + FULLSCREEN_UTILITY_ANNOTATION_TYPES, } from 'app/constants' export const buildParagraphs = (annotationOrder, sectionCount) => { @@ -21,7 +22,26 @@ export const buildParagraphs = (annotationOrder, sectionCount) => { const paragraph = paragraphLookup[annotation.paragraph_id] // if this annotation is a utility (curtain, gallery instructions), then skip it - if (UTILITY_ANNOTATION_TYPES.has(annotation.type)) { + if (FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type)) { + return + } + + // if this annotation is an inline utility (intro div) don't skip it + if (INLINE_UTILITY_ANNOTATION_TYPES.has(annotation.type)) { + if (!annotation.settings.hideCitation) { + const item = { + id: ('index_' + annotation.id), + type: annotation.type, + start_ts: annotation.start_ts, + end_ts: 0, + annotations: [annotation], + } + if (annotation.type === 'intro') { + paragraphs.unshift(item) + } else { + paragraphs.push(item) + } + } return } 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), } diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js index e46751e..781378e 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js @@ -12,6 +12,10 @@ import { MediaImage } from './inline.image' +import { + Intro +} from './inline.utility' + export const inlineComponents = { paragraph: React.memo(Paragraph), intro_paragraph: React.memo(Paragraph), @@ -22,4 +26,5 @@ export const inlineComponents = { header: React.memo(ParagraphHeading), video: React.memo(MediaVideo), image: React.memo(MediaImage), + intro: React.memo(Intro), } diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js new file mode 100644 index 0000000..dd4dbfe --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react' + +export const Intro = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => { + let className = 'site-intro' + const annotation = paragraph.annotations[0] + const item = media.lookup[annotation.settings.media_id] + console.log(item) + const style = { + backgroundImage: 'url(' + item.settings.file.url + ')', + } + return ( + <div + className={className} + style={style} + > + <div className='inner'> + {annotation.settings.title && <span dangerouslySetInnerHTML={{ __html: annotation.settings.title }} />} + {annotation.settings.subtitle && <span dangerouslySetInnerHTML={{ __html: annotation.settings.subtitle }} />} + </div> + </div> + ) +} diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css index 8862587..fa7e3d7 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -136,3 +136,34 @@ font-family: "Neue Haas Unica"; color: #888; } + +/* intro */ + +.site-intro { + position: relative; + width: 100vw; + height: 100vh; + overflow: hidden; + background: black; + background-size: cover; + background-position: center center; + background-repeat: no-repeat; +} +.site-intro .inner { + position: absolute; + top: 0; left: 50%; + transform: translateZ(0) translateX(-50%); + width: 100%; + height: 100%; + padding-bottom: 3rem; + max-width: 90%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: white; + font-family: "Freight Text", serif; + font-size: 12vh; + line-height: 1; + text-align: center; +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index f03b16d..8c03a10 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -2,7 +2,9 @@ import * as types from 'app/types' import { store, history, dispatch } from 'app/store' import { MEDIA_ANNOTATION_TYPES, MEDIA_LABEL_TYPES, - TEXT_ANNOTATION_TYPES, UTILITY_ANNOTATION_TYPES, + TEXT_ANNOTATION_TYPES, + INLINE_UTILITY_ANNOTATION_TYPES, + FULLSCREEN_UTILITY_ANNOTATION_TYPES, CURTAIN_COLOR_LOOKUP, } from 'app/constants' import { buildParagraphs } from 'app/utils/transcript.utils' @@ -96,8 +98,13 @@ export const loadSections = () => dispatch => { } } + // build timeline of special inline items + if (INLINE_UTILITY_ANNOTATION_TYPES.has(annotation.type)) { + sectionTextAnnotationOrder.push(annotation.id) + } + // build timeline of fullscreen events - if (UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) { + if (FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) { const event = makeFullscreenEvent(eventIndex++, annotation) fullscreenTimeline.push(event) } @@ -123,7 +130,7 @@ export const loadSections = () => dispatch => { } } - // console.log(sections) + console.log(sections) // console.log(fullscreenTimeline) dispatch({ type: types.viewer.load_sections, sections, fullscreenTimeline }) } |