starting to add subtitles. fix carousels not showing up in transcript

8 files changed, 48 insertions, 4 deletions

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index af0e08c..c113f3c 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -46,7 +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',
+  'footnote', 'text_plate', 'subtitle',
 ])
 
 export const MEDIA_ANNOTATION_TYPES = new Set([
@@ -69,7 +69,7 @@ export const INLINE_UTILITY_ANNOTATION_TYPES = new Set([
 ])
 
 export const FULLSCREEN_UTILITY_ANNOTATION_TYPES = new Set([
-  'curtain', 'text_plate',
+  'curtain', 'text_plate', 'subtitle',
 ])
 
 export const GALLERY_UTILITY_ANNOTATION_TYPES = new Set([
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 b1bc052..e0a66e4 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', 'pullquote_credit', 'paragraph_end',
   'footnote',
   'text_plate',
-  'video',
+  'video', 'subtitle',
   'image',
   'gallery', 'carousel', 'grid', 'vitrine',
   'gallery_advance',
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 82a0d6e..cc7cc41 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
@@ -84,6 +84,26 @@ export const AnnotationFormTextPlate = ({ annotation, handleSettingsSelect, hand
   )
 }
 
+export const AnnotationFormSubtitle = ({ 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>
+  )
+}
 
 export const AnnotationFormFootnote = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
   return (
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 9a3b386..7b95332 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
@@ -2,6 +2,7 @@ import {
   AnnotationFormSectionHeading,
   AnnotationFormTextPlate,
   AnnotationFormFootnote,
+  AnnotationFormSubtitle,
 } from './annotationForm.text'
 
 import {
@@ -26,6 +27,7 @@ export const annotationFormLookup = {
   section_heading: AnnotationFormSectionHeading,
   text_plate: AnnotationFormTextPlate,
   footnote: AnnotationFormFootnote,
+  subtitle: AnnotationFormSubtitle,
 
   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 75667fa..ea65610 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
@@ -100,3 +100,22 @@ export const AnnotationTextPlate = ({ y, annotation, selected, onClick, onDouble
     />
   )
 }
+
+export const AnnotationSubtitle = ({ y, annotation, selected, onClick, onDoubleClick }) => {
+  const { start_ts, text, paragraph_id } = annotation
+  let className = !paragraph_id
+    ? 'annotation subtitle'
+    : (paragraph_id % 2)
+      ? 'annotation subtitle odd'
+      : 'annotation subtitle 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 4bcb3ce..8fddee3 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
@@ -7,6 +7,7 @@ import {
   AnnotationParagraphEnd,
   AnnotationFootnote,
   AnnotationTextPlate,
+  AnnotationSubtitle,
 } from './annotationTypes.text'
 
 import {
@@ -36,6 +37,7 @@ export const AnnotationElementLookup = {
   paragraph_end: React.memo(AnnotationParagraphEnd),
   footnote: React.memo(AnnotationFootnote),
   text_plate: React.memo(AnnotationTextPlate),
+  subtitle: React.memo(AnnotationSubtitle),
 
   video: React.memo(AnnotationVideo),
 
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/index.js b/animism-align/frontend/app/views/viewer/transcript/components/index.js
index 35084e7..0661923 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/index.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/index.js
@@ -33,6 +33,7 @@ export const transcriptElementLookup = {
 
   video: React.memo(MediaVideo),
   image: React.memo(MediaImage),
+  carousel: React.memo(MediaGallery),
   gallery: React.memo(MediaGallery),
   grid: React.memo(MediaGallery),
   vitrine: React.memo(MediaGallery),
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 86c8d2d..d0e0b3a 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -190,7 +190,7 @@ export const loadSections = () => dispatch => {
     section.inlineParagraphCount = section.paragraphs.filter(p => !p.hidden).length
     // console.log(i, section.inlineParagraphCount)
   })
-  // console.log(sections)
+  console.log(sections)
   // console.log(footnoteList)
   // console.log(fullscreenTimeline)
   dispatch({ type: types.viewer.load_sections, sections, footnoteList })