From a43615e0c0d4edc34a0f4a14172e559f00be298a Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 27 Jul 2020 19:21:55 +0200
Subject: break out fullscreen form. refactor heading

---
 animism-align/frontend/app/constants.js            |  2 +-
 .../frontend/app/utils/annotation.utils.js         |  8 +--
 .../components/annotations/annotation.form.js      |  5 +-
 .../components/annotations/annotation.index.css    | 21 ++++--
 .../annotationForms/annotationForm.image.js        | 10 ++-
 .../annotationForms/annotationForm.utility.js      | 78 +++++++++++++++-------
 .../annotationForms/annotationForm.video.js        |  2 +-
 .../annotationTypes/annotationTypes.image.js       | 35 +++++++---
 .../annotationTypes/annotationTypes.text.js        | 19 +++++-
 .../annotationTypes/annotationTypes.utility.js     |  9 ++-
 .../annotationTypes/annotationTypes.video.js       |  8 ++-
 .../annotations/annotationTypes/index.js           |  7 +-
 .../app/views/annotation/annotation.util.js        |  2 +-
 .../app/views/media/components/media.form.js       |  1 -
 .../paragraph/components/paragraphTypes/index.js   |  5 +-
 .../paragraphTypes/paragraphTypes.text.js          |  2 +-
 .../frontend/app/views/paragraph/paragraph.css     |  6 +-
 .../app/views/paragraph/transcript.actions.js      |  9 ++-
 .../transcript/components/elementTypes.text.js     |  2 +-
 .../views/viewer/transcript/components/index.js    |  6 +-
 .../frontend/app/views/viewer/viewer.actions.js    |  2 +-
 21 files changed, 167 insertions(+), 72 deletions(-)

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index 9b5396e..db710a5 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -39,7 +39,7 @@ export const ROMAN_NUMERALS = [
 ]
 
 export const TEXT_ANNOTATION_TYPES = new Set([
-  'header', 'sentence', 'paragraph_end',
+  'section_heading', 'heading_text', 'sentence', 'paragraph_end',
 ])
 
 export const MEDIA_ANNOTATION_TYPES = new Set([
diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js
index 9622f80..0884f62 100644
--- a/animism-align/frontend/app/utils/annotation.utils.js
+++ b/animism-align/frontend/app/utils/annotation.utils.js
@@ -1,9 +1,9 @@
 import { timestampToSeconds } from 'app/utils'
 
-export const curtainTimings = annotation => {
-  const fadeInDuration = timestampToSeconds(annotation.settings.fade_in_duration)
-  const fadeOutDuration = timestampToSeconds(annotation.settings.fade_out_duration)
-  const duration = timestampToSeconds(annotation.settings.duration)
+export const annotationFadeTimings = annotation => {
+  const fadeInDuration = timestampToSeconds(annotation.settings.fade_in_duration || '0')
+  const fadeOutDuration = timestampToSeconds(annotation.settings.fade_out_duration || '0')
+  const duration = timestampToSeconds(annotation.settings.duration || '0')
 
   const start_ts = annotation.start_ts
   const end_ts = start_ts + duration
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 7882884..5842aab 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
@@ -13,7 +13,7 @@ import { Select } from 'app/common'
 import { annotationFormLookup } from './annotationForms'
 
 const ANNOTATION_TYPES = [
-  'sentence', 'header', 'paragraph_end',
+  'sentence', 'section_heading', 'heading_text', 'paragraph_end',
   'video',
   'image', 'image_carousel',
   'curtain',
@@ -124,7 +124,8 @@ class AnnotationForm extends Component {
       >
         {this.renderButtons()}
         {annotation.type === 'sentence' && this.renderTextarea()}
-        {annotation.type === 'header' && this.renderTextarea()}
+        {annotation.type === 'section_heading' && this.renderTextarea()}
+        {annotation.type === 'text_heading' && 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 322f9e1..7c28b43 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
@@ -23,6 +23,7 @@
   background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4));
 }
 .annotationIndex .annotation.media {
+  min-width: 300px;
   left: calc(405px + 0.5rem);
 }
 .annotation.sentence.even {
@@ -31,7 +32,10 @@
 .annotation.sentence.odd {
   background-color: #537;
 }
-.annotation.header {
+.annotation.section_heading {
+  background-color: #983;
+}
+.annotation.heading_text {
   background-color: #838;
 }
 .annotation.paragraph_end {
@@ -49,8 +53,11 @@
   padding: 0;
 }
 .annotation.curtain span {
+  position: absolute;
+  top: 0; left: 0;
   z-index: 1;
   color: black;
+  text-shadow: 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff;
   padding: 0.25rem;
 }
 .annotation.curtain .fadeIn {
@@ -78,7 +85,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.annotationIndex.condensed .annotation.header {
+.annotationIndex.condensed .annotation.section_heading {
+  z-index: 2;
+}
+.annotationIndex.condensed .annotation.heading_text {
   z-index: 1;
 }
 .annotationIndex.condensed .annotation.paragraph_end {
@@ -91,9 +101,12 @@
   height: 2px; overflow: hidden; padding: 0; z-index: 0;
 }
 .annotationIndex.collapsed .annotation.sentence.selected {
-  z-index: 1;
+  z-index: 4;
+}
+.annotationIndex.collapsed .annotation.section_heading {
+  z-index: 3;
 }
-.annotationIndex.collapsed .annotation.header {
+.annotationIndex.collapsed .annotation.heading_text {
   z-index: 2;
 }
 .annotationIndex.collapsed .annotation.paragraph_end {
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
index 8457b68..490c822 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
 
 import { Select } from 'app/common'
+import { AnnotationFormFullscreen } from './annotationForm.utility'
 
-export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect }) => {
+export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
   if (!media.lookup) return <div />
   const { lookup, order } = media
   const image_list_items = order.filter(id => lookup[id].type === 'image').map(id => {
@@ -13,7 +14,7 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect })
     }
   })
   return (
-    <div>
+    <div className='options'>
       <Select
         name='media_id'
         className="media_id"
@@ -22,6 +23,11 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect })
         defaultOption='Choose an image'
         onChange={handleSettingsSelect}
       />
+      <AnnotationFormFullscreen
+        annotation={annotation}
+        handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
+      />
     </div>
   )
 }
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 887aaf5..4abb50e 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
@@ -1,18 +1,66 @@
 import React, { Component } from 'react'
 
 import { timestamp } from 'app/utils'
-import { TextInput, LabelDescription, Select } from 'app/common'
+import { TextInput, LabelDescription, Select, Checkbox } from 'app/common'
 import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
-import { curtainTimings } from 'app/utils/annotation.utils'
+import { annotationFadeTimings } from 'app/utils/annotation.utils'
 
 export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
+  return (
+    <div className='options'>
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
+      <TextInput
+        title="Curtain text"
+        name="curtain_text"
+        placeholder="Enter text or leave blank"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+
+      <AnnotationFormFullscreen
+        alwaysAccessible
+        annotation={annotation}
+        handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
+      />
+    </div>
+  )
+}
+
+export const AnnotationFormFullscreen = ({ annotation, alwaysAccessible, handleSettingsChange, handleSettingsSelect }) => {
+  if (!alwaysAccessible && !annotation.settings.fullscreen) {
+    return (
+      <Checkbox
+        label="Fullscreen"
+        name="fullscreen"
+        checked={annotation.settings.fullscreen}
+        onChange={handleSettingsSelect}
+      />
+    )
+  }
   const {
     fadeInDuration, fadeOutDuration, duration,
     start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
-  } = curtainTimings(annotation)
-
+  } = annotationFadeTimings(annotation)
   return (
-    <div className='options'>
+    <div>
+      {!alwaysAccessible && (
+        <Checkbox
+          label="Fullscreen"
+          name="fullscreen"
+          checked={annotation.settings.fullscreen}
+          onChange={handleSettingsSelect}
+        />
+      )}
       <TextInput
         title="Total duration"
         name="duration"
@@ -57,24 +105,6 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle
         {' seconds, starts at '}
         {timestamp(fade_out_start_ts)}
       </LabelDescription>
-
-      <Select
-        title='Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-
-      <TextInput
-        title="Curtain text"
-        name="curtain_text"
-        placeholder="Enter text or leave blank"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index 1fb552b..655efdc 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -13,7 +13,7 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect })
     }
   })
   return (
-    <div>
+    <div className='options'>
       <Select
         name='media_id'
         className="media_id"
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
index 00c653a..70127b8 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
@@ -1,33 +1,46 @@
 import React, { Component } from 'react'
 
-import { thumbnailURL } from 'app/utils/annotation.utils'
+import { durationToHeight } from 'app/utils/align.utils'
+import { annotationFadeTimings, thumbnailURL } from 'app/utils/annotation.utils'
 
 import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility'
 
-export const AnnotationImage = ({ y, annotation, media, selected, onClick, onDoubleClick }) => {
-  const { start_ts, text } = annotation
+export const AnnotationImage = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => {
+  const { text } = annotation
   const className = selected ? 'annotation media image selected' : 'annotation media image'
   if (checkAnnotationMediaNotReady(annotation, media)) {
     return <AnnotationMediaLoading y={y} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
   }
-  const data = media[annotation.settings.media_id]
+  const mediaItem = media[annotation.settings.media_id]
+
+  const {
+    fadeInDuration, fadeOutDuration, duration,
+    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
+  } = annotationFadeTimings(annotation)
+  const durationHeight = annotation.settings.fullscreen ? durationToHeight(duration, timeline) : 'auto'
+  const fadeInHeight = durationToHeight(fadeInDuration, timeline)
+  const fadeOutHeight = durationToHeight(fadeOutDuration, timeline)
+
   return (
     <div
       className={className}
-      style={{ top: y }}
+      style={{ top: y, height: durationHeight }}
       onClick={e => onClick(e, annotation)}
       onDoubleClick={e => onDoubleClick(e, annotation)}
     >
-      <div className='img'>
-        <img src={thumbnailURL(data)} alt={data.title} />
-      </div>
       <div className='meta center'>
         <div>
-          <i>{data.title}</i><br />
-          {data.author}<br />
-          {data.date}
+          <i>{mediaItem.title}</i><br />
+          {mediaItem.author}<br />
+          {mediaItem.date}
         </div>
       </div>
     </div>
   )
 }
+
+/*
+      <div className='img'>
+        <img src={thumbnailURL(mediaItem)} alt={mediaItem.title} />
+      </div>
+*/
\ No newline at end of file
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 be4674f..19e0eaa 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
@@ -19,9 +19,24 @@ export const AnnotationSentence = ({ y, annotation, selected, onClick, onDoubleC
   )
 }
 
-export const AnnotationHeader = ({ y, annotation, selected, onClick, onDoubleClick }) => {
+export const AnnotationHeadingText = ({ y, annotation, selected, onClick, onDoubleClick }) => {
   const { start_ts, text } = annotation
-  const className = selected ? 'annotation header selected' : 'annotation header'
+  const className = selected ? 'annotation heading_text selected' : 'annotation heading_text'
+  return (
+    <div
+      className={className}
+      style={{ top: y }}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+    >
+      {text}
+    </div>
+  )
+}
+
+export const AnnotationSectionHeading = ({ y, annotation, selected, onClick, onDoubleClick }) => {
+  const { start_ts, text } = annotation
+  const className = selected ? 'annotation section_heading selected' : 'annotation section_heading'
   return (
     <div
       className={className}
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 38aa7ef..a3c35d4 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
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { curtainTimings } from 'app/utils/annotation.utils'
+import { annotationFadeTimings } from 'app/utils/annotation.utils'
 import { durationToHeight } from 'app/utils/align.utils'
 
 export const AnnotationCurtain = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => {
@@ -8,7 +8,7 @@ export const AnnotationCurtain = ({ y, annotation, timeline, selected, onClick,
   const {
     fadeInDuration, fadeOutDuration, duration,
     start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
-  } = curtainTimings(annotation)
+  } = annotationFadeTimings(annotation)
   const durationHeight = durationToHeight(duration, timeline)
   const fadeInHeight = durationToHeight(fadeInDuration, timeline)
   const fadeOutHeight = durationToHeight(fadeOutDuration, timeline)
@@ -21,7 +21,10 @@ export const AnnotationCurtain = ({ y, annotation, timeline, selected, onClick,
     > 
       <div style={{ height: fadeInHeight }} className='fadeIn' />
       <div style={{ height: fadeOutHeight }} className='fadeOut' />
-      <span>Curtain: {annotation.settings.color}. {annotation.settings.curtain_text}</span>
+      <span style={{ top: fadeInHeight }}>
+        Curtain: {annotation.settings.color}.
+        {annotation.settings.curtain_text}
+      </span>
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
index d2fc4e5..1ebc804 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
@@ -17,9 +17,6 @@ export const AnnotationVideo = ({ y, annotation, media, selected, onClick, onDou
       onClick={e => onClick(e, annotation)}
       onDoubleClick={e => onDoubleClick(e, annotation)}
     >
-      <div className='img'>
-        <img src={thumbnailURL(data)} alt={data.title} />
-      </div>
       <div className='meta center'>
         <div>
           <i>{data.title}</i><br />
@@ -31,3 +28,8 @@ export const AnnotationVideo = ({ y, annotation, media, selected, onClick, onDou
   )
 }
 
+/*
+      <div className='img'>
+        <img src={thumbnailURL(data)} alt={data.title} />
+      </div>
+*/
\ No newline at end of file
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 ee30167..1a1c5ec 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
@@ -1,7 +1,9 @@
 import React from 'react'
 
 import {
-  AnnotationSentence, AnnotationHeader,
+  AnnotationSentence,
+  AnnotationHeadingText,
+  AnnotationSectionHeading,
   AnnotationParagraphEnd,
 } from './annotationTypes.text'
 
@@ -19,7 +21,8 @@ import {
 
 export const AnnotationElementLookup = {
   sentence: React.memo(AnnotationSentence),
-  header: React.memo(AnnotationHeader),
+  heading_text: React.memo(AnnotationHeadingText),
+  section_heading: React.memo(AnnotationSectionHeading),
   paragraph_end: React.memo(AnnotationParagraphEnd),
   video: React.memo(AnnotationVideo),
   image: React.memo(AnnotationImage),
diff --git a/animism-align/frontend/app/views/annotation/annotation.util.js b/animism-align/frontend/app/views/annotation/annotation.util.js
index 82edd9a..680de5e 100644
--- a/animism-align/frontend/app/views/annotation/annotation.util.js
+++ b/animism-align/frontend/app/views/annotation/annotation.util.js
@@ -8,7 +8,7 @@ export const thumbnailURL = data => {
   }
 }
 
-export const curtainTimings = annotation => {
+export const annotationFadeTimings = annotation => {
   const fadeInDurationInSeconds = timestampToSeconds(annotation.settings.fade_in_duration || '0')
   const fadeOutDurationInSeconds = timestampToSeconds(annotation.settings.fade_out_duration || '0')
   const durationInSeconds = timestampToSeconds(annotation.settings.duration || '0')
diff --git a/animism-align/frontend/app/views/media/components/media.form.js b/animism-align/frontend/app/views/media/components/media.form.js
index 9dbc130..a646e8e 100644
--- a/animism-align/frontend/app/views/media/components/media.form.js
+++ b/animism-align/frontend/app/views/media/components/media.form.js
@@ -245,7 +245,6 @@ export default class MediaForm extends Component {
             name="hide_in_bibliography"
             checked={data.settings.hide_in_bibliography}
             onChange={this.handleSettingsChange}
-            autoComplete="off"
           />
           <TextArea
             title="Description"
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
index 62b4a49..038820f 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import {
-  Paragraph, ParagraphHeader
+  Paragraph, ParagraphHeading
 } from './paragraphTypes.text'
 
 import {
@@ -16,7 +16,8 @@ export const paragraphElementLookup = {
   paragraph: React.memo(Paragraph),
   hidden: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
-  header: React.memo(ParagraphHeader),
+  section_heading: React.memo(ParagraphHeading),
+  heading_text: React.memo(ParagraphHeading),
   video: React.memo(MediaVideo),
   image: React.memo(MediaImage),
 }
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
index be5818a..8825479 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
@@ -23,7 +23,7 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
   )
 }
 
-export const ParagraphHeader = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   let className = currentParagraph ? 'header current' : 'header'
   const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
   return (
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.css b/animism-align/frontend/app/views/paragraph/paragraph.css
index 8cd502c..1263ee8 100644
--- a/animism-align/frontend/app/views/paragraph/paragraph.css
+++ b/animism-align/frontend/app/views/paragraph/paragraph.css
@@ -23,7 +23,11 @@
 
 /* paragraph subtypes */
 
-.paragraphs .header {
+.paragraphs .section_heading {
+  font-size: 32px;
+}
+
+.paragraphs .heading_text {
   font-size: 32px;
 }
 
diff --git a/animism-align/frontend/app/views/paragraph/transcript.actions.js b/animism-align/frontend/app/views/paragraph/transcript.actions.js
index 7539343..5905cc5 100644
--- a/animism-align/frontend/app/views/paragraph/transcript.actions.js
+++ b/animism-align/frontend/app/views/paragraph/transcript.actions.js
@@ -36,7 +36,7 @@ export const buildParagraphs = () => dispatch => {
       return
     }
     // if this annotation is from a different paragraph, make a new paragraph
-    if (annotation.type === 'header' || annotation.paragraph_id !== currentParagraph.id) {
+    if (annotation.type === 'section_heading' || annotation.type === 'heading_text' || annotation.paragraph_id !== currentParagraph.id) {
       const paragraph_type = getParagraphType(annotation, paragraph)
       currentParagraph = {
         id: annotation.paragraph_id || ('index_' + i),
@@ -45,7 +45,7 @@ export const buildParagraphs = () => dispatch => {
         end_ts: 0,
         annotations: [],
       }
-      if (annotation.type === 'header') {
+      if (annotation.type === 'section_heading') {
         currentParagraph.sectionIndex = sectionCount++
         currentParagraph.id = 'section_' + currentParagraph.sectionIndex
       }
@@ -69,7 +69,10 @@ export const buildParagraphs = () => dispatch => {
 }
 
 const getParagraphType = (annotation, paragraph) => {
-  if (annotation.type === 'header') {
+  if (annotation.type === 'section_heading') {
+    return annotation.type
+  }
+  if (annotation.type === 'heading_text') {
     return annotation.type
   }
   if (!paragraph) {
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
index be5818a..8825479 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js
@@ -23,7 +23,7 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
   )
 }
 
-export const ParagraphHeader = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   let className = currentParagraph ? 'header current' : 'header'
   const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
   return (
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 45b7d41..ee65641 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/index.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import {
-  Paragraph, ParagraphHeader
+  Paragraph, ParagraphHeading
 } from './elementTypes.text'
 
 import {
@@ -16,7 +16,9 @@ export const transcriptElementLookup = {
   paragraph: React.memo(Paragraph),
   hidden: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
-  header: React.memo(ParagraphHeader),
+  section_heading: React.memo(ParagraphHeading),
+  heading_text: React.memo(ParagraphHeading),
+  header: React.memo(ParagraphHeading),
   video: React.memo(MediaVideo),
   image: React.memo(MediaImage),
 }
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index f8bc116..3d5fe49 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -21,7 +21,7 @@ export const loadSections = () => dispatch => {
   // loop over the annotations in time order. group the media found in each section.
   annotationOrder.forEach((annotation_id, i) => {
     const annotation = annotationLookup[annotation_id]
-    if (annotation.type === 'header') {
+    if (annotation.type === 'section_heading') {
       if (currentSection) {
         currentSection.mediaLabels = Object.keys(mediaLabels).join(', ')
         mediaLabels = {}
-- 
cgit v1.2.3-70-g09d2