From 8b962053f2af99ece482537b9ac7a1daff1400b9 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 7 Nov 2020 02:03:40 +0100
Subject: starting to add subtitles. fix carousels not showing up in transcript

---
 .../align/components/annotations/annotation.form.js  |  2 +-
 .../annotationForms/annotationForm.text.js           | 20 ++++++++++++++++++++
 .../components/annotations/annotationForms/index.js  |  2 ++
 .../annotationTypes/annotationTypes.text.js          | 19 +++++++++++++++++++
 .../components/annotations/annotationTypes/index.js  |  2 ++
 5 files changed, 44 insertions(+), 1 deletion(-)

(limited to 'animism-align/frontend/app/views/align/components/annotations')

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