diff options
Diffstat (limited to 'animism-align/frontend')
13 files changed, 108 insertions, 19 deletions
diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js index 1cf26cd..5abe350 100644 --- a/animism-align/frontend/app/constants.js +++ b/animism-align/frontend/app/constants.js @@ -46,6 +46,7 @@ export const ROMAN_NUMERALS = [ export const TEXT_ANNOTATION_TYPES = new Set([ 'section_heading', 'heading_text', 'sentence', 'paragraph_end', 'pullquote_credit', + 'footnote', 'text_plate', ]) export const MEDIA_ANNOTATION_TYPES = new Set([ @@ -68,7 +69,7 @@ export const INLINE_UTILITY_ANNOTATION_TYPES = new Set([ ]) export const FULLSCREEN_UTILITY_ANNOTATION_TYPES = new Set([ - 'curtain', + 'curtain', 'text_plate', ]) export const GALLERY_UTILITY_ANNOTATION_TYPES = new Set([ diff --git a/animism-align/frontend/app/utils/transcript.utils.js b/animism-align/frontend/app/utils/transcript.utils.js index f343d76..dc351c0 100644 --- a/animism-align/frontend/app/utils/transcript.utils.js +++ b/animism-align/frontend/app/utils/transcript.utils.js @@ -6,14 +6,16 @@ import { FULLSCREEN_UTILITY_ANNOTATION_TYPES, } from 'app/constants' -export const buildParagraphs = (annotationOrder, sectionCount) => { +export const buildParagraphs = (annotationOrder, sectionCount, footnoteCount) => { const state = store.getState() const { lookup: annotationLookup } = state.annotation.index const { lookup: paragraphLookup } = state.paragraph.index let currentParagraph = {} const paragraphs = [] + const footnotes = [] sectionCount = (sectionCount || 0) + footnoteCount = (footnoteCount || 0) // loop over the annotations in time order annotationOrder.forEach((annotation_id, i) => { @@ -85,12 +87,16 @@ export const buildParagraphs = (annotationOrder, sectionCount) => { paragraphs.push(currentParagraph) } + if (annotation.type === 'footnote') { + footnoteCount += 1 + annotation.footnote_id = footnoteCount + footnotes.push(annotation) + } + // if this annotation is a paragraph_end, set the end timestamp if (annotation.type === 'paragraph_end') { currentParagraph.end_ts = annotation.start_ts - } - - // otherwise, just append this annotation to the paragraph + } // otherwise, just append this annotation to the paragraph else { currentParagraph.annotations.push(annotation) } @@ -107,7 +113,7 @@ export const buildParagraphs = (annotationOrder, sectionCount) => { paragraphs[i].start_ts = paragraphs[i+1].start_ts - 0.01 } } - return paragraphs + return { paragraphs, footnotes } } const getParagraphType = (annotation, paragraph) => { 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 8ca3c3f..92b5a5f 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 @@ -14,6 +14,8 @@ import { annotationFormLookup } from './annotationForms' const ANNOTATION_TYPES = [ 'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'paragraph_end', + 'footnote', + 'text_plate', 'video', 'image', 'gallery', 'carousel', 'grid', 'vitrine', @@ -21,6 +23,10 @@ const ANNOTATION_TYPES = [ 'curtain', 'intro', 'schedule', ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) })) +const annotationTextTypes = new Set([ + 'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'footnote', 'text_plate', +]) + class AnnotationForm extends Component { constructor(props){ super(props) @@ -129,10 +135,7 @@ class AnnotationForm extends Component { }} > {this.renderButtons()} - {annotation.type === 'sentence' && this.renderTextarea()} - {annotation.type === 'section_heading' && this.renderTextarea()} - {annotation.type === 'heading_text' && this.renderTextarea()} - {annotation.type === 'pullquote_credit' && this.renderTextarea()} + {annotationTextTypes.has(annotation.type) && this.renderTextarea()} {(annotation.type in annotationFormLookup) && this.renderElementForm()} </div> ) diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.index.css b/animism-align/frontend/app/views/align/components/annotations/annotation.index.css index 7c28b43..5547408 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotation.index.css +++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.css @@ -47,6 +47,13 @@ .annotationIndex .annotation.utility { left: calc(405px + 0.5rem); } +.annotationIndex .annotation.footnote { + left: calc(405px + 0.5rem); + width: 200px; +} +.annotationIndex .annotation.text_plate { + left: calc(405px + 0.5rem); +} .annotation.curtain { background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0)); width: 8rem; diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js index 07a79a3..aeebc55 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js @@ -1,7 +1,8 @@ import React, { Component } from 'react' import { CURTAIN_COLOR_SELECT_OPTIONS, BLACK_WHITE_SELECT_OPTIONS } from 'app/constants' -import { Select, Checkbox, LabelDescription } from 'app/common' +import { Select, Checkbox, TextInput, LabelDescription } from 'app/common' +import { AnnotationFormFullscreen } from './annotationForm.utility' export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect, handleSettingsChange }) => { return ( @@ -61,3 +62,24 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect, </div> ) } + +export const AnnotationFormTextPlate = ({ annotation, handleSettingsSelect, handleSettingsChange }) => { + return ( + <div className='options'> + <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} + handleSettingsSelect={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 5cbe773..4f91354 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 @@ -1,5 +1,6 @@ import { AnnotationFormSectionHeading, + AnnotationFormTextPlate, } from './annotationForm.text' import { @@ -22,6 +23,7 @@ import { export const annotationFormLookup = { section_heading: AnnotationFormSectionHeading, + text_plate: AnnotationFormTextPlate, image: AnnotationFormImage, video: AnnotationFormVideo, diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js index 19e0eaa..75667fa 100644 --- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js +++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js @@ -62,3 +62,41 @@ export const AnnotationParagraphEnd = ({ y, annotation, selected, onClick, onDou </div> ) } + +export const AnnotationFootnote = ({ y, annotation, selected, onClick, onDoubleClick }) => { + const { start_ts, text, paragraph_id } = annotation + let className = !paragraph_id + ? 'annotation sentence footnote' + : (paragraph_id % 2) + ? 'annotation sentence footnote odd' + : 'annotation sentence footnote even' + if (selected) className += ' selected' + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + dangerouslySetInnerHTML={{ __html: text }} + /> + ) +} + +export const AnnotationTextPlate = ({ y, annotation, selected, onClick, onDoubleClick }) => { + const { start_ts, text, paragraph_id } = annotation + let className = !paragraph_id + ? 'annotation text_plate' + : (paragraph_id % 2) + ? 'annotation text_plate odd' + : 'annotation text_plate even' + if (selected) className += ' selected' + return ( + <div + className={className} + style={{ top: y }} + onClick={e => onClick(e, annotation)} + onDoubleClick={e => onDoubleClick(e, annotation)} + dangerouslySetInnerHTML={{ __html: text }} + /> + ) +} 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 bd0bec1..4bcb3ce 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 @@ -5,6 +5,8 @@ import { AnnotationHeadingText, AnnotationSectionHeading, AnnotationParagraphEnd, + AnnotationFootnote, + AnnotationTextPlate, } from './annotationTypes.text' import { @@ -32,6 +34,8 @@ export const AnnotationElementLookup = { heading_text: React.memo(AnnotationHeadingText), section_heading: React.memo(AnnotationSectionHeading), paragraph_end: React.memo(AnnotationParagraphEnd), + footnote: React.memo(AnnotationFootnote), + text_plate: React.memo(AnnotationTextPlate), video: React.memo(AnnotationVideo), diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.video.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.video.js index 423864b..ba7a996 100644 --- a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.video.js +++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.video.js @@ -1,7 +1,5 @@ import React, { Component } from 'react' -import VimeoPlayer from '@u-wave/react-vimeo' - export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { if (!media.lookup) return <div /> const className = currentParagraph ? 'media current' : 'media' @@ -13,7 +11,6 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotati className={className} onDoubleClick={e => onDoubleClick(e, paragraph)} > - <VimeoPlayer video={item.url} muted width="650" /> </div> ) } diff --git a/animism-align/frontend/app/views/paragraph/paragraph.reducer.js b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js index 5695ab3..911c150 100644 --- a/animism-align/frontend/app/views/paragraph/paragraph.reducer.js +++ b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js @@ -19,6 +19,7 @@ export default function paragraphReducer(state = initialState, action) { return { ...state, paragraphs: action.paragraphs, + footnotes: action.footnotes, } default: return state diff --git a/animism-align/frontend/app/views/paragraph/transcript.actions.js b/animism-align/frontend/app/views/paragraph/transcript.actions.js index b1038ea..336a79d 100644 --- a/animism-align/frontend/app/views/paragraph/transcript.actions.js +++ b/animism-align/frontend/app/views/paragraph/transcript.actions.js @@ -5,6 +5,6 @@ import { buildParagraphs } from 'app/utils/transcript.utils' export const buildAllParagraphs = () => dispatch => { const state = store.getState() const annotationOrder = state.annotation.index.order - const paragraphs = buildParagraphs(annotationOrder) - dispatch({ type: types.paragraph.update_transcript, paragraphs }) + const { paragraphs, footnotes } = buildParagraphs(annotationOrder) + dispatch({ type: types.paragraph.update_transcript, paragraphs, footnotes }) } diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index 6894b3a..d5ad61a 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -35,6 +35,7 @@ export const loadSections = () => dispatch => { // keep track of all annotations that constitute the "text" of the essay // these include sentences, headings, and inline media. used to build paragraphs, then reset. let sectionTextAnnotationOrder = [] + let footnoteList = [] // keep track of all annotations that constitute fullscreen events. // these include curtains, title cards, and fullscreen media. @@ -56,7 +57,9 @@ export const loadSections = () => dispatch => { // finish off the previous section. if (currentSection) { currentSection.mediaLabels = Object.keys(currentMediaLabels).sort().join(', ') - currentSection.paragraphs = buildParagraphs(sectionTextAnnotationOrder, currentSection.index) + let { paragraphs, footnotes } = buildParagraphs(sectionTextAnnotationOrder, currentSection.index, footnoteList.length) + currentSection.paragraphs = paragraphs + footnoteList = footnoteList.concat(footnotes) currentSection.end_ts = currentSection.paragraphs[currentSection.paragraphs.length - 1].end_ts } // create a new section and reset state variables @@ -136,7 +139,9 @@ export const loadSections = () => dispatch => { // finished processing all annotations. finish off the last section. if (currentSection) { currentSection.mediaLabels = Object.keys(currentMediaLabels).sort().join(', ') - currentSection.paragraphs = buildParagraphs(sectionTextAnnotationOrder, currentSection.index) + let { paragraphs, footnotes } = buildParagraphs(sectionTextAnnotationOrder, currentSection.index) + currentSection.paragraphs = paragraphs + footnoteList = footnoteList.concat(footnotes) currentSection.end_ts = timeline.duration } @@ -178,8 +183,9 @@ export const loadSections = () => dispatch => { } console.log(sections) + console.log(footnoteList) // console.log(fullscreenTimeline) - dispatch({ type: types.viewer.load_sections, sections }) + dispatch({ type: types.viewer.load_sections, sections, footnoteList }) } const newSection = (annotation, index, mediaIndex) => ({ diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js index d8ffd34..29868aa 100644 --- a/animism-align/frontend/app/views/viewer/viewer.reducer.js +++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js @@ -18,6 +18,7 @@ const initialState = { /* section look and navigation */ sections: { loading: true }, + footnoteList: [], currentSection: null, nextSection: null, autoAdvance: false, @@ -82,6 +83,7 @@ export default function viewerReducer(state = initialState, action) { return { ...state, sections: action.sections, + footnoteList: action.footnoteList, } case types.viewer.set_current_section: |