From 2aad507650fa3263ef81be759ab0531b43e5b7cc Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 27 Jul 2020 15:44:29 +0200
Subject: annotation form for curtain events. refactor utilities

---
 animism-align/frontend/app/actions.js              |   2 +
 .../frontend/app/common/form.component.js          |   2 +-
 animism-align/frontend/app/constants.js            |  13 +++
 animism-align/frontend/app/types.js                |   4 +-
 animism-align/frontend/app/utils/align.utils.js    |  60 ++++++++++++
 .../frontend/app/utils/annotation.utils.js         |   0
 animism-align/frontend/app/utils/index.js          |  11 +++
 .../frontend/app/views/align/align.actions.js      |   2 +-
 .../frontend/app/views/align/align.container.js    |   2 +
 animism-align/frontend/app/views/align/align.css   | 108 +--------------------
 .../frontend/app/views/align/align.util.js         |  65 -------------
 .../components/annotations/annotation.form.css     |  55 +++++++++++
 .../components/annotations/annotation.form.js      |  37 ++++---
 .../components/annotations/annotation.index.css    |  76 +++++++++++++++
 .../components/annotations/annotation.index.js     |   6 +-
 .../annotationForms/annotationForm.utility.js      |  80 +++++++++++++++
 .../annotations/annotationForms/index.js           |  11 ++-
 .../annotationTypes/annotationTypes.image.js       |   4 +-
 .../annotationTypes/annotationTypes.util.js        |  28 ------
 .../annotationTypes/annotationTypes.utility.js     |  42 ++++++++
 .../annotationTypes/annotationTypes.video.js       |   4 +-
 .../annotations/annotationTypes/index.js           |   5 +
 .../align/containers/annotations.container.js      |   3 +-
 .../views/align/containers/timeline.container.js   |   3 +-
 .../app/views/annotation/annotation.util.js        |  26 +++++
 .../app/views/media/containers/media.index.js      |   2 +-
 .../views/paragraph/components/paragraph.list.js   |  84 +---------------
 .../containers/paragraphEditor.container.js        |  21 ++--
 .../app/views/paragraph/paragraph.reducer.js       |   6 ++
 .../app/views/paragraph/transcript.actions.js      |  69 +++++++++++++
 .../views/viewer/checklist/checklist.content.js    |   2 +-
 .../app/views/viewer/sections/viewer.sections.js   |   2 +-
 .../viewer/transcript/transcript.container.js      |  12 ++-
 33 files changed, 527 insertions(+), 320 deletions(-)
 create mode 100644 animism-align/frontend/app/utils/align.utils.js
 create mode 100644 animism-align/frontend/app/utils/annotation.utils.js
 delete mode 100644 animism-align/frontend/app/views/align/align.util.js
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotation.form.css
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotation.index.css
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
 delete mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.util.js
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js
 create mode 100644 animism-align/frontend/app/views/annotation/annotation.util.js
 create mode 100644 animism-align/frontend/app/views/paragraph/transcript.actions.js

(limited to 'animism-align')

diff --git a/animism-align/frontend/app/actions.js b/animism-align/frontend/app/actions.js
index 54c5dc2..270c9a7 100644
--- a/animism-align/frontend/app/actions.js
+++ b/animism-align/frontend/app/actions.js
@@ -2,6 +2,7 @@ import { bindActionCreators } from 'redux'
 import { crud_actions } from 'app/api/crud.actions'
 
 import * as viewerActions from 'app/views/viewer/viewer.actions'
+import * as transcriptActions from 'app/views/paragraph/transcript.actions'
 import * as audioActions from 'app/views/audio/audio.actions'
 import * as alignActions from 'app/views/align/align.actions'
 import * as siteActions from 'app/views/site/site.actions'
@@ -23,6 +24,7 @@ export default
             ['align', alignActions],
             ['audio', audioActions],
             ['viewer', viewerActions],
+            ['transcript', transcriptActions],
           ])
           .map(p => [p[0], bindActionCreators(p[1], store.dispatch)])
           .concat([
diff --git a/animism-align/frontend/app/common/form.component.js b/animism-align/frontend/app/common/form.component.js
index c727544..3b55162 100644
--- a/animism-align/frontend/app/common/form.component.js
+++ b/animism-align/frontend/app/common/form.component.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { courtesyS } from 'app/utils'
 
 export const TextInput = props => (
-  <label className={props.error ? 'error' : 'text'}>
+  <label className={(props.error ? 'error' : 'text') + (props.className ? ' ' + props.className : '')}>
     {props.title && <span>{props.title}</span>}
     <input
       type="text"
diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index fc7e591..b7757d0 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -42,3 +42,16 @@ export const MEDIA_TYPES = new Set([
   'image', 'gallery', 'vitrine',
   'video',
 ])
+
+export const CURTAIN_COLORS = [
+  { label: 'white', backgroundColor: '#ffffff', textColor: '#000000' },
+  { label: 'dark blue', backgroundColor: '#1a1f33', textColor: '#ffffff' },
+  { label: 'dark gray', backgroundColor: '#222222', textColor: '#ffffff' },
+  { label: 'black', backgroundColor: '#000000', textColor: '#ffffff' },
+]
+
+export const CURTAIN_COLOR_SELECT_OPTIONS = CURTAIN_COLORS.map(color => ({
+  label: color.label,
+  name: color.label,
+}))
+
diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index 80db842..4ccf483 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -7,7 +7,9 @@ export const media = crud_type('media', [])
 export const peaks = crud_type('peaks', [])
 export const text = crud_type('text', [])
 export const annotation = crud_type('annotation', [])
-export const paragraph = crud_type('paragraph', [])
+export const paragraph = crud_type('paragraph', [
+  'update_transcript',
+])
 export const vimeo = crud_type('vimeo', [])
 export const align = crud_type('align', [
   'set_display_setting',
diff --git a/animism-align/frontend/app/utils/align.utils.js b/animism-align/frontend/app/utils/align.utils.js
new file mode 100644
index 0000000..f64c5c8
--- /dev/null
+++ b/animism-align/frontend/app/utils/align.utils.js
@@ -0,0 +1,60 @@
+import { ZOOM_STEPS } from 'app/constants'
+import { clamp } from 'app/utils'
+import actions from 'app/actions'
+
+import { HEADER_MARGIN, INNER_HEIGHT } from 'app/constants'
+
+export const positionToTime = (y, { start_ts, zoom, duration }) => {
+  y -= HEADER_MARGIN
+  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
+  const widthTimeDuration = INNER_HEIGHT * secondsPerPixel
+  const timeMin = start_ts
+  const timeMax = Math.min(start_ts + widthTimeDuration, duration)
+  const timeWidth = timeMax - timeMin
+  return clamp(y * secondsPerPixel + start_ts, 0, timeMax)
+}
+
+export const timeToPosition = (ts, { start_ts, zoom, duration }) => {
+  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
+  const widthTimeDuration = INNER_HEIGHT * secondsPerPixel
+  const timeMin = start_ts
+  const timeMax = Math.min(start_ts + widthTimeDuration, duration)
+  const timeWidth = timeMax - timeMin
+  const timeHalfHeight = INNER_HEIGHT * secondsPerPixel / 2
+  if (ts < timeMin - timeHalfHeight) {
+    return -9999
+  }
+  if (ts > timeMax) {
+    return -9999
+  }
+  return (ts - timeMin) / timeWidth * INNER_HEIGHT
+}
+
+export const getFirstPunctuationMarkIndex = text => {
+  const indexes = [
+    text.indexOf('. '),
+    text.indexOf('? '),
+    text.indexOf('! '),
+    text.indexOf('." '),
+    text.indexOf('?" '),
+    text.indexOf('!" '),
+    text.indexOf('.” '),
+    text.indexOf('?” '),
+    text.indexOf('!” '),
+  ]
+
+  return indexes.reduce((a, b) => {
+    if (b < 0) return a
+    return Math.min(a, b)
+  }, Infinity) + 1
+}
+
+export const cutFirstSentence = text => {
+  const textToCrop = text.trim().replace("\n", " ").split("\n")[0]
+  let cropIndex = getFirstPunctuationMarkIndex(textToCrop)
+  if (!cropIndex) cropIndex = textToCrop.length
+  const croppedText = textToCrop.substr(0, cropIndex).trim()
+  const updatedText = text.trim().replace(croppedText, '').trim()
+  actions.site.updateText(updatedText)
+  return croppedText
+}
diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js
new file mode 100644
index 0000000..e69de29
diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js
index c2dd464..273c0ef 100644
--- a/animism-align/frontend/app/utils/index.js
+++ b/animism-align/frontend/app/utils/index.js
@@ -70,6 +70,17 @@ export const timestamp = (n = 0, fps = 1, ms = false) => {
   return (n % 60) + ':' + s
 }
 
+export const timestampToSeconds = time_str => {
+  const time_str_parts = time_str.trim().split(":").map(s => parseFloat(s))
+  if (time_str_parts.length === 3) {
+    return (time_str_parts[0] * 60 + time_str_parts[1]) * 60 + time_str_parts[2]
+  }
+  if (time_str_parts.length === 2) {
+    return time_str_parts[0] * 60 + time_str_parts[1]
+  }
+  return time_str_parts[0]
+}
+
 export const percent = n => (n * 100).toFixed(1) + '%'
 
 export const px = (n, w) => Math.round(n * w) + 'px'
diff --git a/animism-align/frontend/app/views/align/align.actions.js b/animism-align/frontend/app/views/align/align.actions.js
index 90c9593..6074b34 100644
--- a/animism-align/frontend/app/views/align/align.actions.js
+++ b/animism-align/frontend/app/views/align/align.actions.js
@@ -7,7 +7,7 @@ import throttle from 'lodash.throttle'
 import debounce from 'lodash.debounce'
 
 import { ZOOM_STEPS } from 'app/constants'
-import { getFirstPunctuationMarkIndex, cutFirstSentence } from 'app/views/align/align.util'
+import { getFirstPunctuationMarkIndex, cutFirstSentence } from 'app/utils/align.utils'
 
 export const setScrollPosition = start_ts => dispatch => (
   dispatch({ type: types.align.set_display_setting, key: 'start_ts', value: start_ts })
diff --git a/animism-align/frontend/app/views/align/align.container.js b/animism-align/frontend/app/views/align/align.container.js
index a659fdd..7b19536 100644
--- a/animism-align/frontend/app/views/align/align.container.js
+++ b/animism-align/frontend/app/views/align/align.container.js
@@ -4,6 +4,8 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import './align.css'
+import './components/annotations/annotation.form.css'
+import './components/annotations/annotation.index.css'
 
 import Timeline from 'app/views/align/containers/timeline.container.js'
 import Script from 'app/views/align/containers/script.container.js'
diff --git a/animism-align/frontend/app/views/align/align.css b/animism-align/frontend/app/views/align/align.css
index bbf3bc2..ff07162 100644
--- a/animism-align/frontend/app/views/align/align.css
+++ b/animism-align/frontend/app/views/align/align.css
@@ -39,8 +39,10 @@ canvas {
   width: 4px;
   height: 1px;
   background: #ddd;
+  pointer-events: none;
 }
 .ticks .tickLabel {
+  pointer-events: none;
   position: absolute;
   right: 6px;
   font-size: 12px;
@@ -107,109 +109,3 @@ canvas {
   position: relative;
   width: 450px;
 }
-
-/* Annotation form */
-
-.annotationForm {
-  width: 401px;
-  padding: 0.5rem;
-  position: absolute;
-  left: 0.25rem;
-  background: #448;
-  box-shadow: 0 0 2px #000, 0 0 4px #000;
-  z-index: 10;
-}
-.annotationForm textarea {
-  width: 100%;
-}
-.annotationForm .row {
-  justify-content: space-between;
-  align-items: center;
-}
-.annotationForm .row > div {
-  display: flex;
-  align-items: center;
-}
-.annotationForm .buttons {
-  margin-bottom: 0.5rem;
-}
-.annotationForm .ts {
-  color: #fff;
-}
-.annotationForm .select.media_id {
-  width: 100%;
-  margin-right: 0;
-}
-
-/* Annotation index */
-
-.annotationIndex {
-  width: 800px;
-}
-.annotationIndex .annotation {
-  position: absolute;
-  left: 5px;
-  max-width: 400px;
-  padding: 0.25rem 0.375rem;
-  box-shadow: 0px 0px 3px rgba(0,0,0,1.0);
-  border: 1px solid transparent;
-  border-radius: 2px;
-  font-size: 12px;
-  cursor: pointer;
-  user-select: none;
-  background-color: #768;
-}
-.annotation.selected {
-  border-color: #bbf;
-  box-shadow: 0px 0px 4px rgba(0,0,0,1.0), 0px 0px 2px rgba(0,0,0,1.0);
-  z-index: 1;
-  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4));
-}
-.annotationIndex .annotation.media {
-  left: calc(405px + 0.5rem);
-}
-.annotation.sentence.even {
-  background-color: #83b;
-}
-.annotation.sentence.odd {
-  background-color: #537;
-}
-.annotation.header {
-  background-color: #838;
-}
-.annotation.paragraph_end {
-  background-color: #003;
-  border-top: 1px solid #888;
-  width: 100%;
-  padding: 1px;
-}
-
-/* Condensed layout (first lines) */
-
-.annotationIndex.condensed .annotation.sentence {
-  z-index: 0;
-  white-space: pre;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.annotationIndex.condensed .annotation.header {
-  z-index: 1;
-}
-.annotationIndex.condensed .annotation.paragraph_end {
-  border-top-color: #888;
-}
-
-/* Collapsed layout (borders) */
-
-.annotationIndex.collapsed .annotation.sentence {
-  height: 2px; overflow: hidden; padding: 0; z-index: 0;
-}
-.annotationIndex.collapsed .annotation.sentence.selected {
-  z-index: 1;
-}
-.annotationIndex.collapsed .annotation.header {
-  z-index: 2;
-}
-.annotationIndex.collapsed .annotation.paragraph_end {
-  border-top-color: #333;
-}
diff --git a/animism-align/frontend/app/views/align/align.util.js b/animism-align/frontend/app/views/align/align.util.js
deleted file mode 100644
index e873bbf..0000000
--- a/animism-align/frontend/app/views/align/align.util.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { ZOOM_STEPS } from 'app/constants'
-import { clamp } from 'app/utils'
-import actions from 'app/actions'
-
-import { HEADER_MARGIN, INNER_HEIGHT } from 'app/constants'
-
-export const positionToTime = (y, { start_ts, zoom, duration }) => {
-  y -= HEADER_MARGIN
-  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
-  const widthTimeDuration = INNER_HEIGHT * secondsPerPixel
-  const timeMin = start_ts
-  const timeMax = Math.min(start_ts + widthTimeDuration, duration)
-  const timeWidth = timeMax - timeMin
-  return clamp(y * secondsPerPixel + start_ts, 0, timeMax)
-}
-
-export const timeToPosition = (ts, { start_ts, zoom, duration }) => {
-  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
-  const widthTimeDuration = INNER_HEIGHT * secondsPerPixel
-  const timeMin = start_ts
-  const timeMax = Math.min(start_ts + widthTimeDuration, duration)
-  const timeWidth = timeMax - timeMin
-  const timeHalfHeight = INNER_HEIGHT * secondsPerPixel / 2
-  if (ts < timeMin - timeHalfHeight) {
-    return -9999
-  }
-  if (ts > timeMax) {
-    return -9999
-  }
-  return (ts - timeMin) / timeWidth * INNER_HEIGHT
-}
-
-export const getFirstPunctuationMarkIndex = text => {
-  const indexes = [
-    text.indexOf('. '),
-    text.indexOf('? '),
-    text.indexOf('! '),
-    text.indexOf('." '),
-    text.indexOf('?" '),
-    text.indexOf('!" '),
-    text.indexOf('.” '),
-    text.indexOf('?” '),
-    text.indexOf('!” '),
-  ]
-
-  return indexes.reduce((a, b) => {
-    if (b < 0) return a
-    return Math.min(a, b)
-  }, Infinity) + 1
-}
-
-export const cutFirstSentence = text => {
-  const textToCrop = text.trim().replace("\n", " ").split("\n")[0]
-  let cropIndex = getFirstPunctuationMarkIndex(textToCrop)
-  if (!cropIndex) cropIndex = textToCrop.length
-  const croppedText = textToCrop.substr(0, cropIndex).trim()
-  const updatedText = text.trim().replace(croppedText, '').trim()
-  actions.site.updateText(updatedText)
-  return croppedText
-}
-
-export const thumbnailURL = data => {
-  if (data.type === 'video') return data.settings.video.thumbnail_url
-  if (data.type === 'image') return data.settings.thumbnail.url
-}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.css b/animism-align/frontend/app/views/align/components/annotations/annotation.form.css
new file mode 100644
index 0000000..fdb4abe
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.css
@@ -0,0 +1,55 @@
+/* Annotation form */
+
+.annotationForm {
+  width: 401px;
+  padding: 0.5rem;
+  position: absolute;
+  left: 0.25rem;
+  background: #448;
+  box-shadow: 0 0 2px #000, 0 0 4px #000;
+  z-index: 10;
+}
+.annotationForm textarea {
+  width: 100%;
+}
+.annotationForm .row {
+  justify-content: space-between;
+  align-items: center;
+}
+.annotationForm .row > div {
+  display: flex;
+  align-items: center;
+}
+.annotationForm .buttons {
+  margin-bottom: 0.5rem;
+}
+.annotationForm .ts {
+  color: #fff;
+}
+.annotationForm .select.media_id {
+  width: 100%;
+  margin-right: 0;
+}
+.annotationForm .options label span:first-child {
+  display: inline-block;
+  width: 6rem;
+}
+.annotationForm .options .description {
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+.annotationForm .color input[type="text"].number {
+  width: 8rem;
+}
+.annotationForm .color input[type="text"] {
+  width: 8rem;
+}
+.annotationForm .color input[type="color"] {
+  background: transparent;
+  border: 0;
+  height: 1.7rem;
+  padding: 0;
+  margin: 0 0.5rem 0 0;
+  width: 1.4rem;
+}
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 f4620bc..7882884 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
@@ -7,18 +7,16 @@ import actions from 'app/actions'
 
 import { ZOOM_STEPS } from 'app/constants'
 import { clamp, timestamp, capitalize } from 'app/utils'
-import { timeToPosition } from 'app/views/align/align.util'
+import { timeToPosition } from 'app/utils/align.utils'
 import { Select } from 'app/common'
 
-import {
-  AnnotationFormVideo,
-  AnnotationFormImage,
-} from './annotationForms'
+import { annotationFormLookup } from './annotationForms'
 
 const ANNOTATION_TYPES = [
   'sentence', 'header', 'paragraph_end',
   'video',
   'image', 'image_carousel',
+  'curtain',
 ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
 
 class AnnotationForm extends Component {
@@ -26,6 +24,7 @@ class AnnotationForm extends Component {
     super(props)
     this.handleChange = this.handleChange.bind(this)
     this.handleSelect = this.handleSelect.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
     this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
     this.handleKeyDown = this.handleKeyDown.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
@@ -74,6 +73,10 @@ class AnnotationForm extends Component {
   handleSelect(name, value) {
     actions.align.updateAnnotationForm(name, value)
   }
+  handleSettingsChange(e) {
+    const { name, value } = e.target
+    this.handleSettingsSelect(name, value)
+  }
   handleSettingsSelect(name, value) {
     if (name.indexOf('_id') !== -1) value = parseInt(value) || 0
     actions.align.updateAnnotationSettings(name, value)
@@ -111,7 +114,7 @@ class AnnotationForm extends Component {
     }
   }
   render() {
-    const { timeline, annotation, media } = this.props
+    const { timeline, annotation } = this.props
     return (
       <div
         className='annotationForm'
@@ -122,15 +125,7 @@ class AnnotationForm extends Component {
         {this.renderButtons()}
         {annotation.type === 'sentence' && this.renderTextarea()}
         {annotation.type === 'header' && this.renderTextarea()}
-        {annotation.type === 'video' &&
-          <AnnotationFormVideo annotation={annotation} media={media} handleSettingsSelect={this.handleSettingsSelect} />
-        }
-        {annotation.type === 'image' &&
-          <AnnotationFormImage annotation={annotation} media={media} handleSettingsSelect={this.handleSettingsSelect} />
-        }
-        {annotation.type === 'image_carousel' &&
-          <AnnotationFormImageCarousel annotation={annotation} media={media} handleSettingsSelect={this.handleSettingsSelect} />
-        }
+        {(annotation.type in annotationFormLookup) && this.renderElementForm()}
       </div>
     )
   }
@@ -169,6 +164,18 @@ class AnnotationForm extends Component {
       </div>
     )
   }
+  renderElementForm() {
+    const { annotation, media } = this.props
+    const AnnotationFormElement = annotationFormLookup[annotation.type]
+    return (
+      <AnnotationFormElement
+        annotation={annotation}
+        media={media}
+        handleSettingsChange={this.handleSettingsChange}
+        handleSettingsSelect={this.handleSettingsSelect}
+      />
+    )
+  }
 }
 
 const mapStateToProps = state => ({
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
new file mode 100644
index 0000000..d39e5de
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.css
@@ -0,0 +1,76 @@
+/* Annotation index */
+
+.annotationIndex {
+  width: 800px;
+}
+.annotationIndex .annotation {
+  position: absolute;
+  left: 5px;
+  max-width: 400px;
+  padding: 0.25rem 0.375rem;
+  box-shadow: 0px 0px 3px rgba(0,0,0,1.0);
+  border: 1px solid transparent;
+  border-radius: 2px;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  background-color: #768;
+}
+.annotation.selected {
+  border-color: #bbf;
+  box-shadow: 0px 0px 4px rgba(0,0,0,1.0), 0px 0px 2px rgba(0,0,0,1.0);
+  z-index: 1;
+  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4));
+}
+.annotationIndex .annotation.media {
+  left: calc(405px + 0.5rem);
+}
+.annotation.sentence.even {
+  background-color: #83b;
+}
+.annotation.sentence.odd {
+  background-color: #537;
+}
+.annotation.header {
+  background-color: #838;
+}
+.annotation.paragraph_end {
+  background-color: #003;
+  border-top: 1px solid #888;
+  width: 100%;
+  padding: 1px;
+}
+.annotationIndex .annotation.utility {
+  left: calc(405px + 0.5rem);
+}
+
+
+/* Condensed layout (first lines) */
+
+.annotationIndex.condensed .annotation.sentence {
+  z-index: 0;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.annotationIndex.condensed .annotation.header {
+  z-index: 1;
+}
+.annotationIndex.condensed .annotation.paragraph_end {
+  border-top-color: #888;
+}
+
+/* Collapsed layout (borders) */
+
+.annotationIndex.collapsed .annotation.sentence {
+  height: 2px; overflow: hidden; padding: 0; z-index: 0;
+}
+.annotationIndex.collapsed .annotation.sentence.selected {
+  z-index: 1;
+}
+.annotationIndex.collapsed .annotation.header {
+  z-index: 2;
+}
+.annotationIndex.collapsed .annotation.paragraph_end {
+  border-top-color: #333;
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.index.js b/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
index aa31268..da1038f 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
@@ -6,11 +6,11 @@ import actions from 'app/actions'
 
 import { ZOOM_STEPS, INNER_HEIGHT } from 'app/constants'
 import { clamp } from 'app/utils'
-import { positionToTime, timeToPosition } from 'app/views/align/align.util'
+import { positionToTime, timeToPosition } from 'app/utils/align.utils'
 
 import { AnnotationElementLookup } from './annotationTypes'
 
-class AnnotationIndex extends Component {
+class AnnotationIndex extends PureComponent {
   state = {
     items: [],
   }
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
new file mode 100644
index 0000000..2b6f868
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
@@ -0,0 +1,80 @@
+import React, { Component } from 'react'
+
+import { timestamp } from 'app/utils'
+import { TextInput, LabelDescription, Select } from 'app/common'
+import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
+import { curtainTimings } from 'app/utils/annotation.utils'
+
+export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
+  const {
+    fadeInDurationInSeconds, fadeOutDurationInSeconds, durationInSeconds,
+    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
+  } = curtainTimings(annotations)
+
+  return (
+    <div className='options'>
+      <TextInput
+        title="Total duration"
+        name="duration"
+        className="number"
+        placeholder="0:00"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      <LabelDescription>
+        {durationInSeconds}
+        {' seconds, ends at '}
+        {timestamp(end_ts)}
+      </LabelDescription>
+
+      <TextInput
+        title="Fade in duration"
+        name="fade_in_duration"
+        className="number"
+        placeholder="0:00"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      <LabelDescription>
+        {fadeInDurationInSeconds}
+        {' seconds, ends at '}
+        {timestamp(fade_in_end_ts)}
+      </LabelDescription>
+
+      <TextInput
+        title="Fade out duration"
+        name="fade_out_duration"
+        className="number"
+        placeholder="0:00"
+        data={annotation.settings}
+        onChange={handleSettingsChange}
+        autoComplete="off"
+      />
+      <LabelDescription>
+        {fadeOutDurationInSeconds}
+        {' 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>
+  )
+}
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 1411efc..29f9def 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
@@ -6,7 +6,12 @@ import {
   AnnotationFormImage,
 } from './annotationForm.image'
 
-export {
-  AnnotationFormImage,
-  AnnotationFormVideo,
+import {
+  AnnotationFormCurtain,
+} from './annotationForm.utility'
+
+export const annotationFormLookup = {
+  image: AnnotationFormImage,
+  video: AnnotationFormVideo,
+  curtain: AnnotationFormCurtain,
 }
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 ec4d25e..00c653a 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,8 +1,8 @@
 import React, { Component } from 'react'
 
-import { thumbnailURL } from 'app/views/align/align.util'
+import { thumbnailURL } from 'app/utils/annotation.utils'
 
-import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.util'
+import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility'
 
 export const AnnotationImage = ({ y, annotation, media, selected, onClick, onDoubleClick }) => {
   const { start_ts, text } = annotation
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.util.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.util.js
deleted file mode 100644
index 17abebd..0000000
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.util.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { Component } from 'react'
-
-export const checkAnnotationMediaNotReady = (annotation, media) => {
-  return (!media) || (!(annotation.settings.media_id in media))
-}
-
-export const AnnotationMediaLoading = ({ y, className, onClick, onDoubleClick }) => {
-  if (!media) {
-    return (
-      <div
-        className={className}
-        style={{ top: y }}
-        onClick={e => onClick(e, annotation)}
-        onDoubleClick={e => onDoubleClick(e, annotation)}
-      >LOADING...</div>
-    )
-  }
-  if (!(annotation.settings.media_id in media)) {
-    return (
-      <div
-        className={className}
-        style={{ top: y }}
-        onClick={e => onClick(e, annotation)}
-        onDoubleClick={e => onDoubleClick(e, annotation)}
-      >MEDIA NOT FOUND</div>
-    )
-  }
-}
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
new file mode 100644
index 0000000..8bd0b9d
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.utility.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+
+export const AnnotationCurtain = ({ y, annotation, selected, onClick, onDoubleClick }) => {
+  const className = selected ? 'annotation utility curtain selected' : 'annotation utility curtain'
+  return (
+    <div
+      className={className}
+      style={{ top: y }}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+    >
+      CURTAIN
+    </div>
+  )
+}
+
+export const checkAnnotationMediaNotReady = (annotation, media) => {
+  return (!media) || (!(annotation.settings.media_id in media))
+}
+
+export const AnnotationMediaLoading = ({ y, className, onClick, onDoubleClick }) => {
+  if (!media) {
+    return (
+      <div
+        className={className}
+        style={{ top: y }}
+        onClick={e => onClick(e, annotation)}
+        onDoubleClick={e => onDoubleClick(e, annotation)}
+      >LOADING...</div>
+    )
+  }
+  if (!(annotation.settings.media_id in media)) {
+    return (
+      <div
+        className={className}
+        style={{ top: y }}
+        onClick={e => onClick(e, annotation)}
+        onDoubleClick={e => onDoubleClick(e, annotation)}
+      >MEDIA NOT FOUND</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 f51ac71..d2fc4e5 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
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 
-import { thumbnailURL } from 'app/views/align/align.util'
-import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.util'
+import { thumbnailURL } from 'app/utils/annotation.utils'
+import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility'
 
 export const AnnotationVideo = ({ y, annotation, media, selected, onClick, onDoubleClick }) => {
   const { start_ts, text } = annotation
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 560063b..ee30167 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
@@ -13,10 +13,15 @@ import {
   AnnotationImage,
 } from './annotationTypes.image'
 
+import {
+  AnnotationCurtain,
+} from './annotationTypes.utility'
+
 export const AnnotationElementLookup = {
   sentence: React.memo(AnnotationSentence),
   header: React.memo(AnnotationHeader),
   paragraph_end: React.memo(AnnotationParagraphEnd),
   video: React.memo(AnnotationVideo),
   image: React.memo(AnnotationImage),
+  curtain: React.memo(AnnotationCurtain),
 }
diff --git a/animism-align/frontend/app/views/align/containers/annotations.container.js b/animism-align/frontend/app/views/align/containers/annotations.container.js
index 9c12f9a..7a2cf79 100644
--- a/animism-align/frontend/app/views/align/containers/annotations.container.js
+++ b/animism-align/frontend/app/views/align/containers/annotations.container.js
@@ -8,7 +8,7 @@ import actions from 'app/actions'
 
 import { ZOOM_STEPS } from 'app/constants'
 import { clamp } from 'app/utils'
-import { positionToTime } from 'app/views/align/align.util'
+import { positionToTime } from 'app/utils/align.utils'
 
 import AnnotationForm from 'app/views/align/components/annotations/annotation.form'
 import AnnotationIndex from 'app/views/align/components/annotations/annotation.index'
@@ -18,7 +18,6 @@ class Annotations extends Component {
     super(props)
   }
   render() {
-    console.log(this.props.annotation)
     return (
       <div className='annotations'>
         <AnnotationIndex />
diff --git a/animism-align/frontend/app/views/align/containers/timeline.container.js b/animism-align/frontend/app/views/align/containers/timeline.container.js
index c208e08..3d3cc33 100644
--- a/animism-align/frontend/app/views/align/containers/timeline.container.js
+++ b/animism-align/frontend/app/views/align/containers/timeline.container.js
@@ -4,7 +4,6 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import actions from 'app/actions'
-// import * as alignActions from '../align.actions'
 
 import Annotations from 'app/views/align/containers/annotations.container'
 import Waveform from 'app/views/align/components/timeline/waveform.component'
@@ -15,7 +14,7 @@ import PlayCursor from 'app/views/align/components/timeline/playCursor.component
 
 import { WAVEFORM_SIZE, ZOOM_STEPS, INNER_HEIGHT } from 'app/constants'
 import { clamp } from 'app/utils'
-import { positionToTime } from 'app/views/align/align.util'
+import { positionToTime } from 'app/utils/align.utils'
 
 class Timeline extends Component {
   constructor(props){
diff --git a/animism-align/frontend/app/views/annotation/annotation.util.js b/animism-align/frontend/app/views/annotation/annotation.util.js
new file mode 100644
index 0000000..82edd9a
--- /dev/null
+++ b/animism-align/frontend/app/views/annotation/annotation.util.js
@@ -0,0 +1,26 @@
+import { timestampToSeconds } from 'app/utils'
+
+export const thumbnailURL = data => {
+  switch (data.type) {
+    case 'video': return data.settings.video.thumbnail_url
+    case 'image': return data.settings.thumbnail.url
+    default:      return null
+  }
+}
+
+export const curtainTimings = 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')
+
+  const start_ts = annotation.start_ts
+  const end_ts = start_ts + durationInSeconds
+  const fade_in_end_ts = start_ts + fadeInDurationInSeconds
+  const fade_out_start_ts = end_ts - fadeOutDurationInSeconds
+
+  return {
+    fadeInDurationInSeconds, fadeOutDurationInSeconds, durationInSeconds,
+    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
+  }
+}
+
diff --git a/animism-align/frontend/app/views/media/containers/media.index.js b/animism-align/frontend/app/views/media/containers/media.index.js
index eaf9db2..ef6e3be 100644
--- a/animism-align/frontend/app/views/media/containers/media.index.js
+++ b/animism-align/frontend/app/views/media/containers/media.index.js
@@ -7,7 +7,7 @@ import { formatDateTime } from 'app/utils'
 import { MenuButton, SmallMenuButton, Loader } from 'app/common'
 import actions from 'app/actions'
 
-import { thumbnailURL } from 'app/views/align/align.util'
+import { thumbnailURL } from 'app/utils/annotation.utils'
 
 import MediaIndexOptions from '../components/media.indexOptions'
 import MediaMenu from '../components/media.menu'
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index e1e7970..3492d7f 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -4,32 +4,23 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import { floatLT, floatLTE } from 'app/utils'
-import actions from 'app/actions'
 import ParagraphForm from '../components/paragraph.form'
 import { MEDIA_TYPES } from 'app/constants'
 
 class ParagraphList extends Component {
   state = {
-    paragraphs: [],
     currentParagraph: -1,
     currentAnnotation: -1,
   }
   
-  componentDidMount() {
-    this.build()
-  }
-
   componentDidUpdate(prevProps) {
-    if (this.props.paragraph !== prevProps.paragraph) {
-      this.build()
-    }
     if (this.props.audio.play_ts === prevProps.audio.play_ts) return
     this.setCurrentParagraph()
   }
 
   setCurrentParagraph() {
     const { play_ts } = this.props.audio
-    const insideParagraph = this.state.paragraphs.some(paragraph => {
+    const insideParagraph = this.props.paragraphs.some(paragraph => {
       if (floatLTE(paragraph.start_ts, play_ts) && floatLT(play_ts, paragraph.end_ts)) {
         this.setCurrentAnnotation(paragraph, play_ts)
         return true
@@ -62,66 +53,13 @@ class ParagraphList extends Component {
     this.setState({ currentParagraph, currentAnnotation })
   }
 
-  build() {
-    const { order: annotationOrder, lookup: annotationLookup } = this.props.annotation
-    const { lookup: paragraphLookup } = this.props.paragraph
-    let currentParagraph = {}
-    let sectionCount = 0
-    const paragraphs = []
-    // loop over the annotations in time order
-    annotationOrder.forEach((annotation_id, i) => {
-      const annotation = annotationLookup[annotation_id]
-      const paragraph = paragraphLookup[annotation.paragraph_id]
-      // if this annotation is media, insert it after the current paragraph
-      if (MEDIA_TYPES.has(annotation.type)) {
-        paragraphs.push({
-          id: ('index_' + i),
-          type: annotation.type,
-          start_ts: annotation.start_ts,
-          end_ts: 0,
-          annotations: [annotation],
-        })
-        return
-      }
-      // if this annotation is from a different paragraph, make a new paragraph
-      if (annotation.type === 'header' || annotation.paragraph_id !== currentParagraph.id) {
-        const paragraph_type = getParagraphType(annotation, paragraph)
-        currentParagraph = {
-          id: annotation.paragraph_id || ('index_' + i),
-          type: paragraph_type,
-          start_ts: annotation.start_ts,
-          end_ts: 0,
-          annotations: [],
-        }
-        if (annotation.type === 'header') {
-          currentParagraph.sectionIndex = sectionCount++
-          currentParagraph.id = 'section_' + currentParagraph.sectionIndex
-        }
-        paragraphs.push(currentParagraph)
-      }
-      // 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
-      else {
-        currentParagraph.annotations.push(annotation)
-      }
-    })
-    for (let i = 0; i < (paragraphs.length - 1); i++) {
-      if (!paragraphs[i].end_ts) {
-        paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1
-      }
-    }
-    this.setState({ paragraphs })
-  }
-
   render() {
     const {
-      media, paragraphElementLookup, selectedParagraph,
-      onAnnotationClick, onParagraphDoubleClick
+      paragraphs, media,
+      paragraphElementLookup, selectedParagraph,
+      onAnnotationClick, onParagraphDoubleClick,
     } = this.props
-    const { paragraphs, currentParagraph, currentAnnotation } = this.state
+    const { currentParagraph, currentAnnotation } = this.state
     return paragraphs.map(paragraph => {
       if (selectedParagraph && selectedParagraph.id === paragraph.id) {
         paragraph = selectedParagraph
@@ -146,19 +84,7 @@ class ParagraphList extends Component {
   }
 }
 
-const getParagraphType = (annotation, paragraph) => {
-  if (annotation.type === 'header') {
-    return annotation.type
-  }
-  if (!paragraph) {
-    return annotation.type
-  }
-  return paragraph.type
-}
-
 const mapStateToProps = state => ({
-  paragraph: state.paragraph.index,
-  annotation: state.annotation.index,
   audio: state.audio,
   media: state.media.index,
 })
diff --git a/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js b/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
index c031d8a..aba9cca 100644
--- a/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
+++ b/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
@@ -21,6 +21,16 @@ class ParagraphEditor extends Component {
     this.handleCloseParagraphForm = this.handleCloseParagraphForm.bind(this)
     this.updateSelectedParagraph = this.updateSelectedParagraph.bind(this)
   }
+
+  componentDidMount() {
+    actions.transcript.buildParagraphs()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.paragraph !== prevProps.paragraph) {
+      actions.transcript.buildParagraphs()
+    }
+  }
   
   handleAnnotationClick(e, paragraph, annotation){
     actions.audio.seek(annotation.start_ts)
@@ -46,12 +56,13 @@ class ParagraphEditor extends Component {
   }
 
   render() {
-    // const { media } = this.props
-    const { paragraphs, selectedParagraph, selectedParagraphOffset } = this.state
+    const { paragraphs } = this.props
+    const { selectedParagraph, selectedParagraphOffset } = this.state
     return (
       <div className='paragraphs'>
         <div className='content'>
           <ParagraphList
+            paragraphs={paragraphs}
             paragraphElementLookup={paragraphElementLookup}
             selectedParagraph={selectedParagraph}
             onAnnotationClick={this.handleAnnotationClick}
@@ -72,10 +83,8 @@ class ParagraphEditor extends Component {
 }
 
 const mapStateToProps = state => ({
-  // paragraph: state.paragraph.index,
-  // annotation: state.annotation.index,
-  // audio: state.audio,
-  // media: state.media.index,
+  paragraph: state.paragraph.index,
+  paragraphs: state.paragraph.paragraphs,
 })
 
 const mapDispatchToProps = dispatch => ({
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.reducer.js b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
index c3babc8..5695ab3 100644
--- a/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
+++ b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
@@ -4,6 +4,7 @@ import { session, getDefault, getDefaultInt } from 'app/session'
 import { crudState, crudReducer } from 'app/api/crud.reducer'
 
 const initialState = crudState('paragraph', {
+  paragraphs: [],
   options: {
   }
 })
@@ -14,6 +15,11 @@ export default function paragraphReducer(state = initialState, action) {
   // console.log(action.type, action)
   state = reducer(state, action)
   switch (action.type) {
+    case types.paragraph.update_transcript:
+      return {
+        ...state,
+        paragraphs: action.paragraphs,
+      }
     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
new file mode 100644
index 0000000..3d2b045
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/transcript.actions.js
@@ -0,0 +1,69 @@
+import * as types from 'app/types'
+import { store, history, dispatch } from 'app/store'
+import { MEDIA_TYPES } from 'app/constants'
+
+export const buildParagraphs = () => dispatch => {
+  const state = store.getState()
+  const { order: annotationOrder, lookup: annotationLookup } = state.annotation.index
+  const { lookup: paragraphLookup } = state.paragraph.index
+  let currentParagraph = {}
+  let sectionCount = 0
+  const paragraphs = []
+  // loop over the annotations in time order
+  annotationOrder.forEach((annotation_id, i) => {
+    const annotation = annotationLookup[annotation_id]
+    const paragraph = paragraphLookup[annotation.paragraph_id]
+    // if this annotation is media, insert it after the current paragraph
+    if (MEDIA_TYPES.has(annotation.type)) {
+      paragraphs.push({
+        id: ('index_' + i),
+        type: annotation.type,
+        start_ts: annotation.start_ts,
+        end_ts: 0,
+        annotations: [annotation],
+      })
+      return
+    }
+    // if this annotation is from a different paragraph, make a new paragraph
+    if (annotation.type === 'header' || annotation.paragraph_id !== currentParagraph.id) {
+      const paragraph_type = getParagraphType(annotation, paragraph)
+      currentParagraph = {
+        id: annotation.paragraph_id || ('index_' + i),
+        type: paragraph_type,
+        start_ts: annotation.start_ts,
+        end_ts: 0,
+        annotations: [],
+      }
+      if (annotation.type === 'header') {
+        currentParagraph.sectionIndex = sectionCount++
+        currentParagraph.id = 'section_' + currentParagraph.sectionIndex
+      }
+      paragraphs.push(currentParagraph)
+    }
+    // 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
+    else {
+      currentParagraph.annotations.push(annotation)
+    }
+  })
+  for (let i = 0; i < (paragraphs.length - 1); i++) {
+    if (!paragraphs[i].end_ts) {
+      paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1
+    }
+  }
+  dispatch({ type: types.paragraph.update_transcript, paragraphs })
+}
+
+const getParagraphType = (annotation, paragraph) => {
+  if (annotation.type === 'header') {
+    return annotation.type
+  }
+  if (!paragraph) {
+    return annotation.type
+  }
+  return paragraph.type
+}
+
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
index 842947f..e4e47ec 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import actions from 'app/actions'
 import { ROMAN_NUMERALS } from 'app/constants'
 import { pad } from 'app/utils'
-import { thumbnailURL } from 'app/views/align/align.util'
+import { thumbnailURL } from 'app/utils/annotation.utils'
 import { PlayIcon } from '../nav/viewer.icons'
 
 class ChecklistContent extends Component {
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
index 5cf40eb..cd5b4f0 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import actions from 'app/actions'
 import ViewerSectionsNav from './viewer.sections.nav'
 import { ROMAN_NUMERALS } from 'app/constants'
-import { thumbnailURL } from 'app/views/align/align.util'
+import { thumbnailURL } from 'app/utils/annotation.utils'
 
 class ViewerSections extends Component {
   componentDidMount() {
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
index d3d3e9f..c48af47 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js
@@ -15,21 +15,30 @@ class Transcript extends Component {
     this.handleAnnotationClick = this.handleAnnotationClick.bind(this)
     this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this)
   }
+
+  componentDidMount() {
+    actions.transcript.buildParagraphs()
+  }
+
   handleAnnotationClick(e, annotation) {
     console.log(annotation)
   }
+  
   handleParagraphDoubleClick(e, paragraph) {
     return
   }
+  
   handleClose() {
     actions.viewer.hideSection('transcript')
   }
+
   render() {
-    const { viewer } = this.props
+    const { viewer, paragraphs } = this.props
     return (
       <div className="transcript">
         <div className='content'>
           <ParagraphList
+            paragraphs={paragraphs}
             paragraphElementLookup={transcriptElementLookup}
             onAnnotationClick={this.handleAnnotationClick}
             onParagraphDoubleClick={this.handleParagraphDoubleClick}
@@ -49,6 +58,7 @@ class Transcript extends Component {
 
 const mapStateToProps = state => ({
   viewer: state.viewer,
+  paragraphs: state.paragraph.paragraphs,
 })
 
 const mapDispatchToProps = dispatch => ({
-- 
cgit v1.2.3-70-g09d2