refactor annotation forms out of the directory nest

16 files changed, 0 insertions, 1752 deletions

diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.css b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.css
deleted file mode 100644
index fa663c7..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.css
+++ /dev/null
@@ -1,67 +0,0 @@
-/* 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 div.textarea {
-  margin-bottom: 0.5rem;
-}
-.annotationForm img {
-  max-width: 100%;
-  max-height: 6rem;
-}
-
-.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;
-}
-.annotationForm .checkbox {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.js
deleted file mode 100644
index 6804cdd..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.form.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-
-import { ANNOTATION_SELECT_OPTIONS, MEDIA_ANNOTATION_TYPES } from 'app/constants'
-import { timestamp } from 'app/utils'
-import { timeToPosition } from 'app/utils/align.utils'
-import { Select } from 'app/common'
-
-import { annotationFormLookup } from './annotationForms'
-
-const annotationTextTypes = new Set([
-  'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'footnote', 'text_plate',
-])
-
-class AnnotationForm extends Component {
-  constructor(props){
-    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)
-    this.handleDestroy = this.handleDestroy.bind(this)
-    this.textareaRef = React.createRef()
-  }
-  componentDidMount() {
-    if (this.textareaRef && this.textareaRef.current) {
-      this.textareaRef.current.focus()
-    }
-  }
-  handleKeyDown(e) {
-    if (e.keyCode === 27) { // escape
-      actions.align.hideAnnotationForm()
-      return      
-    }
-    // console.log(e.keyCode)
-    if (!e.metaKey && !e.ctrlKey) return
-    let { start_ts } = this.props.annotation
-    switch (e.keyCode) {
-      case 38: // up
-        e.preventDefault()
-        start_ts -= 0.1
-        actions.align.updateAnnotationForm('start_ts', Math.max(0, start_ts))
-        actions.audio.seek(start_ts)
-        actions.align.setCursor(start_ts)
-        break
-      case 40: // down
-        e.preventDefault()
-        start_ts += 0.1
-        actions.align.updateAnnotationForm('start_ts', Math.max(0, start_ts))
-        actions.audio.seek(start_ts)
-        actions.align.setCursor(start_ts)
-        break
-      case 83: // ctrl-S
-        e.preventDefault()
-        this.handleSubmit()
-      default:
-        break
-    }
-  }
-  handleChange(e) {
-    const { name, value } = e.target
-    this.handleSelect(name, value)
-  }
-  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)
-  }
-  handleSubmit() {
-    const { annotation } = this.props
-    if (annotation.type === 'paragraph_end') {
-      annotation.text = ''
-    }
-    if (annotation.type in MEDIA_ANNOTATION_TYPES) {
-      if (!annotation.settings.media_id) return
-      annotation.text = ''
-    }
-    if (annotation.id === 'new') {
-      delete annotation.id
-      actions.annotation.create(annotation)
-        .then(response => {
-          console.log(response)
-          actions.align.hideAnnotationForm()
-        })
-    } else {
-      actions.annotation.update(annotation)
-        .then(response => {
-          console.log(response)
-          actions.align.hideAnnotationForm()
-        })
-    }
-  }
-  handleDestroy() {
-    const { annotation } = this.props
-    if (annotation.id === 'new') {
-      actions.align.hideAnnotationForm()
-    } else {
-      actions.annotation.destroy(annotation)
-        .then(response => {
-          console.log(response)
-          actions.align.hideAnnotationForm()
-        })
-    }
-  }
-  render() {
-    const { timeline, annotation } = this.props
-    return (
-      <div
-        className='annotationForm'
-        style={{
-          top: timeToPosition(annotation.start_ts, timeline),
-        }}
-      >
-        {this.renderButtons()}
-        {annotationTextTypes.has(annotation.type) && this.renderTextarea()}
-        {(annotation.type in annotationFormLookup) && this.renderElementForm()}
-      </div>
-    )
-  }
-  renderButtons() {
-    const { annotation } = this.props
-    return (
-      <div className='row buttons'>
-        <div>
-          <Select
-            name='type'
-            selected={annotation.type}
-            options={ANNOTATION_SELECT_OPTIONS}
-            defaultOption='text'
-            onChange={this.handleSelect}
-          />
-          <div className='ts'>{timestamp(annotation.start_ts, 1, true)}</div>
-        </div>
-        <div>
-          {annotation.id !== 'new' && <button onClick={this.handleDestroy}>Delete</button>}
-          <button onClick={this.handleSubmit}>Save</button>
-        </div>
-      </div>
-    )
-  }
-  renderTextarea() {
-    const { annotation } = this.props
-    return (
-      <div className='textarea'>
-        <textarea
-          name='text'
-          value={annotation.text}
-          onKeyDown={this.handleKeyDown}
-          onChange={this.handleChange}
-          ref={this.textareaRef}
-        />
-      </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 => ({
-  annotation: state.align.annotation,
-  timeline: state.align.timeline,
-  media: state.media.index,
-})
-
-export default connect(mapStateToProps)(AnnotationForm)
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.css b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.css
deleted file mode 100644
index afedbde..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.css
+++ /dev/null
@@ -1,125 +0,0 @@
-/* Annotation index */
-
-.annotationIndex {
-  width: 800px;
-}
-.annotationIndex .annotation {
-  position: absolute;
-  left: 5px;
-  max-width: 300px;
-  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: 2;
-  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.4));
-}
-.annotationIndex .annotation.media {
-  width: 300px;
-  left: calc(405px + 0.5rem);
-}
-.annotationIndex .annotation.sentence.even {
-  background-color: #83b;
-}
-.annotationIndex .annotation.sentence.odd {
-  background-color: #537;
-}
-.annotationIndex .annotation.section_heading {
-  background-color: #983;
-  z-index: 1;
-}
-.annotationIndex .annotation.heading_text {
-  background-color: #838;
-}
-.annotationIndex .annotation.paragraph_end {
-  background-color: #003;
-  border-top: 1px solid #888;
-  width: 300px;
-  padding: 1px;
-}
-.annotationIndex .annotation.utility {
-  left: calc(505px + 0.5rem);
-  width: 200px;
-}
-.annotationIndex .annotation.footnote {
-  left: calc(605px + 0.5rem);
-  width: 200px;
-}
-.annotationIndex .annotation.text_plate {
-  left: calc(605px + 0.5rem);
-  width: 250px;
-}
-.annotationIndex .annotation.utility.curtain {
-  background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0));
-  width: 15rem;
-  padding: 0;
-  overflow: hidden;
-}
-.annotationIndex .annotation.utility.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;
-}
-.annotationIndex .annotation.utility.curtain .fadeIn {
-  z-index: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  background-image: linear-gradient(rgba(0,0,0,1.0), rgba(255,255,255,1.0));
-  background-size: cover;
-}
-.annotationIndex .annotation.utility.curtain .fadeOut {
-  z-index: 0;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  background-image: linear-gradient(rgba(255,255,255,1.0), rgba(0,0,0,1.0));
-  background-size: cover;
-}
-
-/* Condensed layout (first lines) */
-
-.annotationIndex.condensed .annotation.sentence {
-  z-index: 0;
-  white-space: pre;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.annotationIndex.condensed .annotation.section_heading {
-  z-index: 2;
-}
-.annotationIndex.condensed .annotation.heading_text {
-  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: 4;
-}
-.annotationIndex.collapsed .annotation.section_heading {
-  z-index: 3;
-}
-.annotationIndex.collapsed .annotation.heading_text {
-  z-index: 2;
-}
-.annotationIndex.collapsed .annotation.paragraph_end {
-  border-top-color: #333;
-}
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.js
deleted file mode 100644
index e2c7a51..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotation.index.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { PureComponent } from 'react'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-
-import { ZOOM_STEPS, INNER_HEIGHT } from 'app/constants'
-import { clamp } from 'app/utils'
-import { positionToTime, timeToPosition } from 'app/utils/align.utils'
-
-import { AnnotationElementLookup } from './annotationTypes'
-
-class AnnotationIndex extends PureComponent {
-  state = {
-    items: [],
-  }
-  constructor(props){
-    super(props)
-    this.handleClick = this.handleClick.bind(this)
-  }
-  componentDidUpdate(prevProps) {
-    if (this.props.index.loading) return
-    if (prevProps.timeline !== this.props.timeline || prevProps.index !== this.props.index) {
-      this.update()
-    }
-  }
-  update() {
-    let { timeline, index } = this.props
-    let { start_ts, zoom, duration } = this.props.timeline
-    const { order, lookup } = index
-
-    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
-    let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel
-
-    let timeMin = start_ts - 60.0
-    let timeMax = Math.min(start_ts + widthTimeDuration, duration)
-
-    const items = order.filter(id => {
-      const { start_ts: ts } = lookup[id]
-      return (timeMin < ts && ts < timeMax)
-    }).map(id => lookup[id])
-    this.setState({ items })
-  }
-  handleClick(e, annotation) {
-    e.stopPropagation()
-    if (!annotation) return
-    if (e.shiftKey) {
-      e.preventDefault()
-      this.handleParagraphSelection(annotation, e.metaKey)
-    }
-    actions.audio.seek(annotation.start_ts)
-    actions.align.setSelectedAnnotation(annotation)
-  }
-  handleParagraphSelection(annotation, shouldClear) {
-    const { selected_paragraph_id } = this.props.timeline
-    if (!selected_paragraph_id || selected_paragraph_id === -1 || shouldClear) {
-      if (annotation.paragraph_id && !shouldClear) {
-        actions.align.setSelectedParagraph(annotation.paragraph_id)
-      } else {
-        actions.paragraph.create({
-          type: 'paragraph',
-          episode_id: this.props.episode_id,
-          start_ts: annotation.start_ts,
-        }).then(data => {
-          actions.align.setSelectedParagraph(data.res.id)
-          annotation.paragraph_id = data.res.id
-          actions.annotation.update(annotation)
-        })
-      }
-    } else if (selected_paragraph_id !== annotation.paragraph_id) {
-      annotation.paragraph_id = selected_paragraph_id
-      actions.annotation.update(annotation)
-    }
-  }
-  handleDoubleClick(e, annotation) {
-    e.stopPropagation()
-    actions.align.showEditAnnotationForm(annotation)
-  }
-  render() {
-    const { timeline, media, annotationInForm, selectedAnnotation } = this.props
-    const { start_ts, zoom, selected_annotation_id } = timeline
-    const { items } = this.state
-    const className = (zoom < 2)
-      ? 'annotationIndex'
-      : (zoom < 3)
-      ? 'annotationIndex condensed'
-      : 'annotationIndex collapsed'
-    return (
-      <div className={className}>
-        {items.map(annotation => {
-          if (annotationInForm && annotation.id === annotationInForm.id) {
-            return null
-          }
-          if (annotation.id === selected_annotation_id) {
-            annotation = selectedAnnotation
-          }
-          const { id, type, start_ts } = annotation
-          const AnnotationElement = AnnotationElementLookup[type]
-          const y = timeToPosition(start_ts, timeline)
-          return (
-            <AnnotationElement
-              key={id}
-              y={y}
-              selected={annotation.id === selected_annotation_id}
-              annotation={annotation}
-              media={media}
-              timeline={timeline}
-              onClick={this.handleClick}
-              onDoubleClick={this.handleDoubleClick}
-            />
-          )
-        })}
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  timeline: state.align.timeline,
-  annotationInForm: state.align.annotation,
-  selectedAnnotation: state.align.selectedAnnotation,
-  index: state.annotation.index,
-  media: state.media.index.lookup,
-  episode_id: state.site.episode.id,
-})
-
-export default connect(mapStateToProps)(AnnotationIndex)
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.gallery.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.gallery.js
deleted file mode 100644
index 0a8b3fb..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.gallery.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React, { Component } from 'react'
-
-import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
-import { TextInput, Select, Checkbox, LabelDescription } from 'app/common'
-import { AnnotationFormFullscreen } from './annotationForm.utility'
-import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils'
-
-export const AnnotationFormGallery = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
-  if (!media.lookup) return <div />
-  const image_list_items = makeMediaItems(media, ['gallery'])
-  return (
-    <div className='options'>
-      <Select
-        name='media_id'
-        className="media_id"
-        selected={annotation.settings.media_id}
-        options={image_list_items}
-        defaultOption='Choose a gallery'
-        onChange={handleSettingsSelect}
-      />
-
-      <TextInput
-        title="Title"
-        name="title"
-        placeholder="Enter title or leave blank"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
-      
-      <Checkbox
-        label="Fullscreen"
-        name="fullscreen"
-        checked={annotation.settings.fullscreen}
-        onChange={handleSettingsSelect}
-      />
-
-      <Checkbox
-        label="Inline"
-        name="inline"
-        checked={annotation.settings.inline}
-        onChange={handleSettingsSelect}
-      />
-
-      <Checkbox
-        label="Hide in transcript"
-        name="hide_in_transcript"
-        checked={annotation.settings.hide_in_transcript}
-        onChange={handleSettingsSelect}
-      />
-
-      <Select
-        title='Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-
-      <Select
-        title='Arrow Color'
-        name='arrow_color'
-        selected={annotation.settings.arrow_color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Color of UI arrows'
-        onChange={handleSettingsSelect}
-      />
-
-      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
-        <AnnotationFormFullscreen
-          annotation={annotation}
-          handleSettingsChange={handleSettingsChange}
-          handleSettingsSelect={handleSettingsSelect}
-        />
-      )}
-    </div>
-  )
-}
-
-export const AnnotationFormGalleryAdvance = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
-  if (!media.lookup) return <div />
-  const image_list_items = makeMediaItems(media, ['gallery'])
-  const { gallery_items, thumbnail } = makeGalleryItems(annotation, media)
-  return (
-    <div className='options'>
-      <Select
-        name='media_id'
-        className="media_id"
-        selected={annotation.settings.media_id}
-        options={image_list_items}
-        defaultOption='Choose a gallery'
-        onChange={handleSettingsSelect}
-      />
-
-      {gallery_items && (
-        <Select
-          name='frame_index'
-          selected={annotation.settings.frame_index}
-          options={gallery_items}
-          defaultOption='Choose an image'
-          onChange={handleSettingsSelect}
-        />
-      )}
-
-      {thumbnail && (
-        <img src={thumbnail.url} />
-      )}
-
-      <Checkbox
-        label="Advance half a frame forward to fit two images in view"
-        name="half_frame"
-        checked={annotation.settings.half_frame}
-        onChange={handleSettingsSelect}
-      />
-
-      <Checkbox
-        label="Hide in transcript"
-        name="hide_in_transcript"
-        checked={annotation.settings.hide_in_transcript}
-        onChange={handleSettingsSelect}
-      />
-
-      <Checkbox
-        label="Show in checklist"
-        name="show_in_checklist"
-        checked={annotation.settings.show_in_checklist}
-        onChange={handleSettingsSelect}
-      />
-    </div>
-  )
-}
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.image.js
deleted file mode 100644
index 3de2ac5..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.image.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import React, { Component } from 'react'
-
-import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_INLINE_SIZE_OPTIONS } from 'app/constants'
-import { Select, Checkbox, TextInput } from 'app/common'
-import { AnnotationFormFullscreen } from './annotationForm.utility'
-import { makeMediaItems, makeGalleryItems } from 'app/utils/annotation.utils'
-
-export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
-  if (!media.lookup) return <div />
-  const image_list_items = makeMediaItems(media, ['image', 'gallery'])
-  const { gallery_items, thumbnail } = makeGalleryItems(annotation, media)
-  console.log(annotation)
-  return (
-    <div className='options'>
-      <Select
-        name='media_id'
-        className="media_id"
-        selected={annotation.settings.media_id}
-        options={image_list_items}
-        defaultOption='Choose an image'
-        onChange={handleSettingsSelect}
-      />
-
-      {gallery_items && (
-        <Select
-          name='frame_index'
-          selected={annotation.settings.frame_index}
-          options={gallery_items}
-          defaultOption='Choose an image'
-          onChange={handleSettingsSelect}
-        />
-      )}
-
-      {thumbnail && (
-        <img src={thumbnail.url} />
-      )}
-
-      <Checkbox
-        label="Fullscreen"
-        name="fullscreen"
-        checked={annotation.settings.fullscreen}
-        onChange={handleSettingsSelect}
-      />
-
-      <Select
-        title='Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-
-      {(annotation.settings.fullscreen) && (
-        <div>
-          <Checkbox
-            label="Hide inline image"
-            name="hide_poster_inline"
-            checked={annotation.settings.hide_poster_inline}
-            onChange={handleSettingsSelect}
-          />
-          <Select
-            title='Inline size'
-            name='inline_size'
-            selected={annotation.settings.inline_size}
-            options={IMAGE_INLINE_SIZE_OPTIONS}
-            defaultOption='Pick a size'
-            onChange={handleSettingsSelect}
-          />
-          <Checkbox
-            label="Hide speaker icon"
-            name="hide_speaker_icon"
-            checked={annotation.settings.hide_speaker_icon}
-            onChange={handleSettingsSelect}
-          />
-          <Select
-            title='Inline background color'
-            name='inline_color'
-            selected={annotation.settings.inline_color}
-            options={CURTAIN_COLOR_SELECT_OPTIONS}
-            defaultOption='Pick a color'
-            onChange={handleSettingsSelect}
-          />
-        </div>
-      )}
-
-      <Checkbox
-        label="Hide caption"
-        name="hide_caption"
-        checked={annotation.settings.hide_caption}
-        onChange={handleSettingsSelect}
-      />
-
-      <Checkbox
-        label="Hide in transcript"
-        name="hide_in_transcript"
-        checked={annotation.settings.hide_in_transcript}
-        onChange={handleSettingsSelect}
-      />
-
-      <TextInput
-        title="Override start time"
-        name="override_start_ts"
-        className="number"
-        placeholder="0:00"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
-
-      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
-        <AnnotationFormFullscreen
-          annotation={annotation}
-          handleSettingsChange={handleSettingsChange}
-          handleSettingsSelect={handleSettingsSelect}
-        />
-      )}
-    </div>
-  )
-}
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.text.js
deleted file mode 100644
index 8bc7675..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.text.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { Component } from 'react'
-
-import {
-  CURTAIN_COLOR_SELECT_OPTIONS,
-  CURTAIN_STYLE_SELECT_OPTIONS,
-  BLACK_WHITE_SELECT_OPTIONS,
-  IMAGE_BACKGROUND_SIZE_OPTIONS,
-} from 'app/constants'
-import { Select, Checkbox, TextInput, LabelDescription } from 'app/common'
-import { AnnotationFormFullscreen } from './annotationForm.utility'
-import { makeMediaItems } from 'app/utils/annotation.utils'
-
-export const AnnotationFormSectionHeading = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
-  const image_list_items = makeMediaItems(media, ['image', 'video', 'gallery'])
-  return (
-    <div className='options'>
-      <Checkbox
-        label="Hidden"
-        name="hidden"
-        checked={annotation.settings.hidden}
-        onChange={handleSettingsSelect}
-      />
-      <Select
-        title='Background Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={BLACK_WHITE_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-      <Select
-        title='Cover image'
-        name='media_id'
-        className="media_id"
-        selected={annotation.settings.media_id}
-        options={image_list_items}
-        defaultOption='Choose an image'
-        onChange={handleSettingsSelect}
-      />
-      <Select
-        title='Cover style'
-        name='cover_style'
-        className="cover_style"
-        selected={annotation.settings.cover_style}
-        options={IMAGE_BACKGROUND_SIZE_OPTIONS}
-        defaultOption='Cover image caption style'
-        onChange={handleSettingsSelect}
-      />
-      <LabelDescription>
-        {'Background color for section'}
-      </LabelDescription>
-      <Select
-        title='Transition Color'
-        name='transition_color'
-        selected={annotation.settings.transition_color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-      <LabelDescription>
-        {'Player will fade from this color when section begins'}
-      </LabelDescription>
-      {!annotation.settings.no_audio &&
-        <div>
-          <Select
-            title='Section Nav Color'
-            name='section_nav_color'
-            selected={annotation.settings.section_nav_color}
-            options={BLACK_WHITE_SELECT_OPTIONS}
-            defaultOption='Pick a color'
-            onChange={handleSettingsSelect}
-          />
-          <LabelDescription>
-            {'Section nav thumbnail icon color'}
-          </LabelDescription>
-        </div>
-      }
-      <Checkbox
-        label="Section does not have audio"
-        name="no_audio"
-        checked={annotation.settings.no_audio}
-        onChange={handleSettingsSelect}
-      />
-      <LabelDescription>
-        {'Check if this is a text-only section'}
-      </LabelDescription>
-    </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}
-      />
-      <Select
-        title='Curtain style'
-        name='transition_color'
-        selected={annotation.settings.transition_color}
-        options={CURTAIN_STYLE_SELECT_OPTIONS}
-        defaultOption='Pick a style'
-        onChange={handleSettingsSelect}
-      />
-      <AnnotationFormFullscreen
-        annotation={annotation}
-        handleSettingsChange={handleSettingsChange}
-        handleSettingsSelect={handleSettingsSelect}
-      />
-    </div>
-  )
-}
-
-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 (
-    <div className='options'>
-      <TextInput
-        title="Actual Timestamp"
-        name="actual_ts"
-        placeholder="0:00"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
-    </div>
-  )
-}
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.utility.js
deleted file mode 100644
index 7e823cc..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.utility.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import React, { Component } from 'react'
-
-import { timestamp } from 'app/utils'
-import { TextInput, LabelDescription, Select, Checkbox } from 'app/common'
-import { CURTAIN_COLOR_SELECT_OPTIONS, CURTAIN_STYLE_SELECT_OPTIONS } from 'app/constants'
-import { annotationFadeTimings } from 'app/utils/annotation.utils'
-import { makeMediaItems } from 'app/utils/annotation.utils'
-
-export const AnnotationFormIntro = ({ annotation, media, handleSettingsChange, handleSettingsSelect }) => {
-  if (!media.lookup) return <div />
-  const image_list_items = makeMediaItems(media, 'file')
-  return (
-    <div className='options'>
-      <Select
-        name='media_id'
-        className="media_id"
-        selected={annotation.settings.media_id}
-        options={image_list_items}
-        defaultOption='Choose a file'
-        onChange={handleSettingsSelect}
-      />
-
-      <TextInput
-        title="Title"
-        name="title"
-        placeholder="Enter title or leave blank"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
-
-      <TextInput
-        title="Subtitle"
-        name="subtitle"
-        placeholder="Enter subtitle or leave blank"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
-
-      <Select
-        title='Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-
-      <TextInput
-        title="Actual start time"
-        name="intro_start_ts"
-        placeholder="0:00"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
-
-      <LabelDescription>
-        {'Timestamp where voiceover starts, after any intro sound effect.'}
-      </LabelDescription>
-
-      <AnnotationFormFullscreen
-        annotation={annotation}
-        handleSettingsChange={handleSettingsChange}
-        handleSettingsSelect={handleSettingsSelect}
-      />
-    </div>
-  )
-}
-
-export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
-  return (
-    <div className='options'>
-      <TextInput
-        title="Curtain text"
-        name="curtain_text"
-        placeholder="Enter text or leave blank"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
-
-      <Select
-        title='Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-
-      <Select
-        title='Style'
-        name='curtain_style'
-        selected={annotation.settings.curtain_style}
-        options={CURTAIN_STYLE_SELECT_OPTIONS}
-        defaultOption='Pick a style'
-        onChange={handleSettingsSelect}
-      />
-
-      <Checkbox
-        label="Contains flashing light"
-        name="flashing_light_warning"
-        checked={annotation.settings.flashing_light_warning}
-        onChange={handleSettingsSelect}
-      />
-
-      <AnnotationFormFullscreen
-        alwaysAccessible
-        annotation={annotation}
-        handleSettingsChange={handleSettingsChange}
-        handleSettingsSelect={handleSettingsSelect}
-      />
-    </div>
-  )
-}
-
-export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
-  const {
-    fadeInDuration, fadeOutDuration, duration,
-    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
-  } = annotationFadeTimings(annotation)
-  return (
-    <div>
-      <TextInput
-        title="Total duration"
-        name="duration"
-        className="number"
-        placeholder="0:00"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
-      <LabelDescription>
-        {duration}
-        {' 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>
-        {fadeInDuration}
-        {' 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>
-        {fadeOutDuration}
-        {' seconds, starts at '}
-        {timestamp(fade_out_start_ts)}
-      </LabelDescription>
-    </div>
-  )
-}
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.video.js
deleted file mode 100644
index dd5f640..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/annotationForm.video.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import React, { Component } from 'react'
-
-import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_BACKGROUND_SIZE_OPTIONS } from 'app/constants'
-import { Select, Checkbox, TextInput, LabelDescription } from 'app/common'
-import { AnnotationFormFullscreen } from './annotationForm.utility'
-import { makeMediaItems } from 'app/utils/annotation.utils'
-
-export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
-  if (!media.lookup) return <div />
-  const video_list_items = makeMediaItems(media, ['video'])
-  return (
-    <div className='options'>
-      <Select
-        name='media_id'
-        className="media_id"
-        selected={annotation.settings.media_id}
-        options={video_list_items}
-        defaultOption='Choose a video'
-        onChange={handleSettingsSelect}
-      />
-      <Checkbox
-        label="Autoplay"
-        name="autoplay"
-        checked={annotation.settings.autoplay}
-        onChange={handleSettingsSelect}
-      />
-      <Checkbox
-        label="Fullscreen"
-        name="fullscreen"
-        checked={annotation.settings.fullscreen}
-        onChange={handleSettingsSelect}
-      />
-      <Checkbox
-        label="Inline"
-        name="inline"
-        checked={annotation.settings.inline}
-        onChange={handleSettingsSelect}
-      />
-      <Checkbox
-        label="Loop"
-        name="loop"
-        checked={annotation.settings.loop}
-        onChange={handleSettingsSelect}
-      />
-      <Checkbox
-        label="Unmute"
-        name="unmuted"
-        checked={annotation.settings.unmuted}
-        onChange={handleSettingsSelect}
-      />
-      {annotation.settings.inline && (
-        <Checkbox
-          label="Hide Controls"
-          name="hide_controls"
-          checked={annotation.settings.hide_controls}
-          onChange={handleSettingsSelect}
-        />
-      )}
-      {annotation.settings.inline && (
-        <Checkbox
-          label="Show poster image"
-          name="poster"
-          checked={annotation.settings.poster}
-          onChange={handleSettingsSelect}
-        />
-      )}
-      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
-        <Checkbox
-          label="Hide inline video poster"
-          name="hide_poster_inline"
-          checked={annotation.settings.hide_poster_inline}
-          onChange={handleSettingsSelect}
-        />
-      )}
-      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
-        <Checkbox
-          label="Can play full video at end of section"
-          name="can_play_full_video"
-          checked={annotation.settings.can_play_full_video}
-          onChange={handleSettingsSelect}
-        />
-      )}
-      <Checkbox
-        label="Hide in transcript"
-        name="hide_in_transcript"
-        checked={annotation.settings.hide_in_transcript}
-        onChange={handleSettingsSelect}
-      />
-      <Select
-        title='Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-      <Select
-        title='Poster Size'
-        name='poster_size'
-        selected={annotation.settings.poster_size}
-        options={IMAGE_BACKGROUND_SIZE_OPTIONS}
-        defaultOption='Select size'
-        onChange={handleSettingsSelect}
-      />
-      <Select
-        title='Poster background color'
-        name='poster_background_color'
-        selected={annotation.settings.poster_background_color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-      <TextInput
-        title="Video start time"
-        name="video_start_ts"
-        className="number"
-        placeholder="0:00"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
-      <LabelDescription>
-        {'Auto-advances the video to this point when starting'}
-      </LabelDescription>
-
-      {(annotation.settings.fullscreen && !annotation.settings.inline) && (
-        <AnnotationFormFullscreen
-          annotation={annotation}
-          handleSettingsChange={handleSettingsChange}
-          handleSettingsSelect={handleSettingsSelect}
-        />
-      )}
-    </div>
-  )
-}
-
-export const AnnotationFormVideoSetVolume = ({ annotation, handleSettingsChange }) => {
-  return (
-    <div className='options'>
-      <TextInput
-        title="Volume"
-        name="volume"
-        className="number"
-        placeholder="1.0"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
-      <TextInput
-        title="Fade Time"
-        name="duration"
-        className="number"
-        placeholder="0:01"
-        data={annotation.settings}
-        onChange={handleSettingsChange}
-        autoComplete="off"
-      />
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/index.js
deleted file mode 100644
index 8a1be48..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationForms/index.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import {
-  AnnotationFormSectionHeading,
-  AnnotationFormTextPlate,
-  AnnotationFormFootnote,
-  AnnotationFormSubtitle,
-} from './annotationForm.text'
-
-import {
-  AnnotationFormVideo,
-  AnnotationFormVideoSetVolume,
-} from './annotationForm.video'
-
-import {
-  AnnotationFormImage,
-} from './annotationForm.image'
-
-import {
-  AnnotationFormGallery,
-  AnnotationFormGalleryAdvance,
-} from './annotationForm.gallery'
-
-import {
-  AnnotationFormCurtain,
-  AnnotationFormIntro,
-} from './annotationForm.utility'
-
-export const annotationFormLookup = {
-  section_heading: AnnotationFormSectionHeading,
-  text_plate: AnnotationFormTextPlate,
-  footnote: AnnotationFormFootnote,
-  subtitle: AnnotationFormSubtitle,
-
-  image: AnnotationFormImage,
-  video: AnnotationFormVideo,
-  video_set_volume: AnnotationFormVideoSetVolume,
-
-  gallery: AnnotationFormGallery,
-  carousel: AnnotationFormGallery,
-  grid: AnnotationFormGallery,
-  vitrine: AnnotationFormGallery,
-
-  gallery_advance: AnnotationFormGalleryAdvance,
-
-  intro: AnnotationFormIntro,
-  curtain: AnnotationFormCurtain,
-}
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.gallery.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.gallery.js
deleted file mode 100644
index c7df7f8..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.gallery.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { Component } from 'react'
-
-import { durationToHeight } from 'app/utils/align.utils'
-import { capitalize } from 'app/utils'
-import { annotationFadeTimings } from 'app/utils/annotation.utils'
-
-import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility'
-
-export const AnnotationGallery = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => {
-  const { text } = annotation
-  const className = selected ? 'annotation media gallery selected' : 'annotation media gallery'
-  if (checkAnnotationMediaNotReady(annotation, media)) {
-    return <AnnotationMediaLoading y={y} annotation={annotation} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
-  }
-  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)
-
-  const style = {
-    top: y,
-  }
-  if (annotation.settings.fullscreen && !annotation.settings.inline) {
-    style.height = durationHeight
-  }
-
-  return (
-    <div
-      className={className}
-      style={style}
-      onClick={e => onClick(e, annotation)}
-      onDoubleClick={e => onDoubleClick(e, annotation)}
-    >
-      <div className='meta center'>
-        <div>
-          {capitalize(annotation.type)}<br/>
-          <i>{mediaItem.title}</i><br />
-          {mediaItem.author}<br />
-          {mediaItem.date}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-
-export const AnnotationGalleryAdvance = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => {
-  const className = selected ? 'annotation media gallery_advance selected' : 'annotation media gallery_advance'
-  const style = {
-    top: y,
-  }
-  let index = parseInt(annotation.settings.frame_index) + 1
-  if (annotation.settings.half_frame) {
-    index += 0.5
-  }
-  return (
-    <div
-      className={className}
-      style={style}
-      onClick={e => onClick(e, annotation)}
-      onDoubleClick={e => onDoubleClick(e, annotation)}
-    >
-      <div className='meta center'>
-        <div>
-          Advance gallery to frame {index}
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.image.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.image.js
deleted file mode 100644
index d0a573e..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.image.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { Component } from 'react'
-
-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, 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} annotation={annotation} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
-  }
-  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)
-
-  const style = {
-    top: y,
-  }
-  if (annotation.settings.fullscreen && !annotation.settings.inline) {
-    style.height = durationHeight
-  }
-
-  return (
-    <div
-      className={className}
-      style={style}
-      onClick={e => onClick(e, annotation)}
-      onDoubleClick={e => onDoubleClick(e, annotation)}
-    >
-      <div className='meta center'>
-        <div>
-          <i>{mediaItem.title}</i>{' - '}{mediaItem.author}
-          {mediaItem.type === 'gallery' && (
-            ' [Frame ' + (1 + parseInt(annotation.settings.frame_index)) + ']'
-          )}
-        </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/editor/align/components/annotations/annotationTypes/annotationTypes.text.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.text.js
deleted file mode 100644
index ea65610..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.text.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, { Component } from 'react'
-
-export const AnnotationSentence = ({ y, annotation, selected, onClick, onDoubleClick }) => {
-  const { start_ts, text, paragraph_id } = annotation
-  let className = !paragraph_id
-    ? 'annotation sentence'
-    : (paragraph_id % 2)
-      ? 'annotation sentence odd'
-      : 'annotation sentence 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 AnnotationHeadingText = ({ y, annotation, selected, onClick, onDoubleClick }) => {
-  const { start_ts, text } = annotation
-  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}
-      style={{ top: y }}
-      onClick={e => onClick(e, annotation)}
-      onDoubleClick={e => onDoubleClick(e, annotation)}
-    >
-      {text}
-    </div>
-  )
-}
-
-export const AnnotationParagraphEnd = ({ y, annotation, selected, onClick, onDoubleClick }) => {
-  const { start_ts, text } = annotation
-  const className = selected ? 'annotation paragraph_end selected' : 'annotation paragraph_end'
-  return (
-    <div
-      className={className}
-      style={{ top: y }}
-      onClick={e => onClick(e, annotation)}
-      onDoubleClick={e => onDoubleClick(e, annotation)}
-    >
-    </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 }}
-    />
-  )
-}
-
-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/editor/align/components/annotations/annotationTypes/annotationTypes.utility.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.utility.js
deleted file mode 100644
index 1238163..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.utility.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { Component } from 'react'
-
-import { annotationFadeTimings } from 'app/utils/annotation.utils'
-import { durationToHeight } from 'app/utils/align.utils'
-
-export const AnnotationIntro = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => {
-  const className = selected ? 'annotation utility intro selected' : 'annotation utility intro'
-  const {
-    fadeInDuration, fadeOutDuration, duration,
-    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
-  } = annotationFadeTimings(annotation)
-  const durationHeight = durationToHeight(duration, timeline)
-  const fadeInHeight = durationToHeight(fadeInDuration, timeline)
-  const fadeOutHeight = durationToHeight(fadeOutDuration, timeline)
-  let style = {
-    top: y,
-  }
-  if (annotation.settings.fullscreen) {
-    style.height = durationHeight
-  }
-  return (
-    <div
-      className={className}
-      style={style}
-      onClick={e => onClick(e, annotation)}
-      onDoubleClick={e => onDoubleClick(e, annotation)}
-    > 
-      <div style={{ height: fadeInHeight }} className='fadeIn' />
-      <div style={{ height: fadeOutHeight }} className='fadeOut' />
-      <span style={{ top: fadeInHeight }}>
-        Intro:<br/>
-        {annotation.settings.title}<br />
-        {annotation.settings.subtitle}<br />
-      </span>
-    </div>
-  )
-}
-
-export const AnnotationSchedule = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => {
-  const className = selected ? 'annotation utility schedule selected' : 'annotation utility schedule'
-  let style = {
-    top: y,
-  }
-  return (
-    <div
-      className={className}
-      style={style}
-      onClick={e => onClick(e, annotation)}
-      onDoubleClick={e => onDoubleClick(e, annotation)}
-    > 
-      Schedule
-    </div>
-  )
-}
-
-export const AnnotationCurtain = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => {
-  const className = selected ? 'annotation utility curtain selected' : 'annotation utility curtain'
-  const {
-    fadeInDuration, fadeOutDuration, duration,
-    start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
-  } = annotationFadeTimings(annotation)
-  const durationHeight = durationToHeight(duration, timeline)
-  const fadeInHeight = durationToHeight(fadeInDuration, timeline)
-  const fadeOutHeight = durationToHeight(fadeOutDuration, timeline)
-  return (
-    <div
-      className={className}
-      style={{ top: y, height: durationHeight }}
-      onClick={e => onClick(e, annotation)}
-      onDoubleClick={e => onDoubleClick(e, annotation)}
-    > 
-      <div style={{ height: fadeInHeight }} className='fadeIn' />
-      <div style={{ height: fadeOutHeight }} className='fadeOut' />
-      <span style={{ top: fadeInHeight }}>
-        Curtain: {annotation.settings.color}.
-        {annotation.settings.curtain_text}
-      </span>
-    </div>
-  )
-}
-
-export const checkAnnotationMediaNotReady = (annotation, media) => {
-  return (!media) || (!(annotation.settings.media_id in media))
-}
-
-export const AnnotationMediaLoading = ({ y, annotation, media, className, onClick, onDoubleClick }) => {
-  if (!media) {
-    return (
-      <div
-        className={className}
-        style={{ top: y }}
-        onClick={e => onClick(e, annotation)}
-        onDoubleClick={e => onDoubleClick(e, annotation)}
-      >MEDIA NOT SET</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/editor/align/components/annotations/annotationTypes/annotationTypes.video.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.video.js
deleted file mode 100644
index 4ea9595..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/annotationTypes.video.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { Component } from 'react'
-
-import { annotationFadeTimings } from 'app/utils/annotation.utils'
-import { durationToHeight } from 'app/utils/align.utils'
-import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.utility'
-
-export const AnnotationVideo = ({ y, annotation, media, timeline, selected, onClick, onDoubleClick }) => {
-  const { start_ts, text } = annotation
-  const className = selected ? 'annotation media video selected' : 'annotation media video'
-  if (checkAnnotationMediaNotReady(annotation, media)) {
-    return <AnnotationMediaLoading y={y} annotation={annotation} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
-  }
-  const data = media[annotation.settings.media_id]
-  const {
-    fadeInDuration, fadeOutDuration, duration,
-  } = annotationFadeTimings(annotation)
-  const durationHeight = annotation.settings.fullscreen ? durationToHeight(duration, timeline) : 'auto'
-  return (
-    <div
-      className={className}
-      style={{ top: y, height: durationHeight }}
-      onClick={e => onClick(e, annotation)}
-      onDoubleClick={e => onDoubleClick(e, annotation)}
-    >
-      <div className='meta center'>
-        <div>
-          <i>{data.title}</i><br />
-          {data.author}<br />
-          {data.date}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const AnnotationVideoSetVolume = ({ y, annotation, timeline, selected, onClick, onDoubleClick }) => {
-  const className = selected ? 'annotation utility video_set_volume selected' : 'annotation utility video_set_volume'
-  let style = {
-    top: y,
-  }
-  return (
-    <div
-      className={className}
-      style={style}
-      onClick={e => onClick(e, annotation)}
-      onDoubleClick={e => onDoubleClick(e, annotation)}
-    > 
-      Set volume to {annotation.settings.volume}
-    </div>
-  )
-}
diff --git a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/index.js
deleted file mode 100644
index 1a89dbd..0000000
--- a/animism-align/frontend/app/views/editor/align/components/annotations/annotationTypes/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react'
-
-import {
-  AnnotationSentence,
-  AnnotationHeadingText,
-  AnnotationSectionHeading,
-  AnnotationParagraphEnd,
-  AnnotationFootnote,
-  AnnotationTextPlate,
-  AnnotationSubtitle,
-} from './annotationTypes.text'
-
-import {
-  AnnotationVideo,
-  AnnotationVideoSetVolume,
-} from './annotationTypes.video'
-
-import {
-  AnnotationImage,
-} from './annotationTypes.image'
-
-import {
-  AnnotationGallery,
-  AnnotationGalleryAdvance,
-} from './annotationTypes.gallery'
-
-import {
-  AnnotationCurtain,
-  AnnotationIntro,
-  AnnotationSchedule,
-} from './annotationTypes.utility'
-
-export const AnnotationElementLookup = {
-  sentence: React.memo(AnnotationSentence),
-  pullquote_credit: React.memo(AnnotationSentence),
-  heading_text: React.memo(AnnotationHeadingText),
-  section_heading: React.memo(AnnotationSectionHeading),
-  paragraph_end: React.memo(AnnotationParagraphEnd),
-  footnote: React.memo(AnnotationFootnote),
-  text_plate: React.memo(AnnotationTextPlate),
-  subtitle: React.memo(AnnotationSubtitle),
-
-  video: React.memo(AnnotationVideo),
-  video_set_volume: React.memo(AnnotationVideoSetVolume),
-
-  image: React.memo(AnnotationImage),
-  gallery: React.memo(AnnotationGallery),
-  carousel: React.memo(AnnotationGallery),
-  grid: React.memo(AnnotationGallery),
-  vitrine: React.memo(AnnotationGallery),
-
-  gallery_advance: React.memo(AnnotationGalleryAdvance),
-
-  intro: React.memo(AnnotationIntro),
-  schedule: React.memo(AnnotationSchedule),
-  curtain: React.memo(AnnotationCurtain),
-}