From 1600ab3446f533a6824512d616131c7d02a037c7 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 20 Oct 2020 19:25:35 +0200
Subject: add footnote type and text plate type. keep track of footnotes when
 accumulating paragraphs.

---
 animism-align/frontend/app/constants.js            |  3 +-
 .../frontend/app/utils/transcript.utils.js         | 16 ++++++---
 .../components/annotations/annotation.form.js      | 11 ++++---
 .../components/annotations/annotation.index.css    |  7 ++++
 .../annotationForms/annotationForm.text.js         | 24 +++++++++++++-
 .../annotations/annotationForms/index.js           |  2 ++
 .../annotationTypes/annotationTypes.text.js        | 38 ++++++++++++++++++++++
 .../annotations/annotationTypes/index.js           |  4 +++
 .../paragraphTypes/paragraphTypes.video.js         |  3 --
 .../app/views/paragraph/paragraph.reducer.js       |  1 +
 .../app/views/paragraph/transcript.actions.js      |  4 +--
 .../frontend/app/views/viewer/viewer.actions.js    | 12 +++++--
 .../frontend/app/views/viewer/viewer.reducer.js    |  2 ++
 13 files changed, 108 insertions(+), 19 deletions(-)

(limited to 'animism-align/frontend/app')

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:
-- 
cgit v1.2.3-70-g09d2