From ef78bc6a084f92b4794e987b5832240d85b6479e Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 22 Jul 2020 14:05:15 +0200
Subject: refactor app using babel module-resolver

---
 .../frontend/app/views/align/align.actions.js      |  93 +++++++
 .../frontend/app/views/align/align.container.js    |  29 +++
 animism-align/frontend/app/views/align/align.css   | 215 ++++++++++++++++
 .../frontend/app/views/align/align.reducer.js      |  85 +++++++
 .../frontend/app/views/align/align.util.js         |  65 +++++
 .../components/annotations/annotation.form.js      | 182 ++++++++++++++
 .../components/annotations/annotation.index.js     | 126 ++++++++++
 .../annotationForms/annotationForm.image.js        |  27 +++
 .../annotationForms/annotationForm.video.js        |  27 +++
 .../annotations/annotationForms/index.js           |  12 +
 .../annotationTypes/annotationTypes.image.js       |  33 +++
 .../annotationTypes/annotationTypes.text.js        |  49 ++++
 .../annotationTypes/annotationTypes.util.js        |  28 +++
 .../annotationTypes/annotationTypes.video.js       |  33 +++
 .../annotations/annotationTypes/index.js           |  22 ++
 .../components/player/playButton.component.js      |  31 +++
 .../align/components/timeline/cursor.component.js  |  26 ++
 .../components/timeline/playCursor.component.js    |  36 +++
 .../align/components/timeline/ticks.component.js   |  88 +++++++
 .../components/timeline/waveform.component.js      | 101 ++++++++
 .../align/containers/annotations.container.js      |  40 +++
 .../app/views/align/containers/script.container.js |  33 +++
 .../views/align/containers/timeline.container.js   | 171 +++++++++++++
 .../app/views/annotation/annotation.reducer.js     |  20 ++
 .../frontend/app/views/audio/audio.actions.js      |  40 +++
 .../frontend/app/views/audio/audio.reducer.js      |  30 +++
 animism-align/frontend/app/views/index.js          |   4 +
 .../app/views/media/components/media.form.js       | 270 +++++++++++++++++++++
 .../app/views/media/components/media.formImage.js  | 172 +++++++++++++
 .../media/components/media.formImageSelection.js   | 213 ++++++++++++++++
 .../app/views/media/components/media.formVideo.js  | 111 +++++++++
 .../views/media/components/media.indexOptions.js   |  65 +++++
 .../app/views/media/components/media.menu.js       |  58 +++++
 .../app/views/media/containers/media.edit.js       |  57 +++++
 .../app/views/media/containers/media.index.js      | 115 +++++++++
 .../app/views/media/containers/media.new.js        |  81 +++++++
 .../frontend/app/views/media/media.actions.js      |   9 +
 .../frontend/app/views/media/media.container.js    |  38 +++
 animism-align/frontend/app/views/media/media.css   |  70 ++++++
 .../frontend/app/views/media/media.reducer.js      |  22 ++
 .../frontend/app/views/nav/header.component.js     |  42 ++++
 animism-align/frontend/app/views/nav/nav.css       |  73 ++++++
 .../views/paragraph/components/paragraph.form.js   |  87 +++++++
 .../views/paragraph/components/paragraph.list.js   | 165 +++++++++++++
 .../paragraph/components/paragraphTypes/index.js   |  22 ++
 .../paragraphTypes/paragraphTypes.image.js         |  17 ++
 .../paragraphTypes/paragraphTypes.text.js          |  35 +++
 .../paragraphTypes/paragraphTypes.video.js         |  19 ++
 .../containers/paragraphEditor.container.js        |  85 +++++++
 .../app/views/paragraph/paragraph.container.js     |  69 ++++++
 .../frontend/app/views/paragraph/paragraph.css     |  93 +++++++
 .../app/views/paragraph/paragraph.reducer.js       |  20 ++
 .../frontend/app/views/site/component.template.js  |  28 +++
 .../frontend/app/views/site/site.actions.js        |  14 ++
 .../frontend/app/views/site/site.reducer.js        |  24 ++
 .../app/views/upload/components/upload.form.js     |  16 ++
 .../app/views/upload/components/upload.index.js    |  98 ++++++++
 .../views/upload/components/upload.indexOptions.js |  61 +++++
 .../app/views/upload/components/upload.menu.js     |  18 ++
 .../app/views/upload/components/upload.show.js     |  69 ++++++
 .../frontend/app/views/upload/upload.actions.js    |  18 ++
 .../frontend/app/views/upload/upload.container.js  |  36 +++
 animism-align/frontend/app/views/upload/upload.css | 182 ++++++++++++++
 .../frontend/app/views/upload/upload.reducer.js    |  22 ++
 64 files changed, 4240 insertions(+)
 create mode 100644 animism-align/frontend/app/views/align/align.actions.js
 create mode 100644 animism-align/frontend/app/views/align/align.container.js
 create mode 100644 animism-align/frontend/app/views/align/align.css
 create mode 100644 animism-align/frontend/app/views/align/align.reducer.js
 create mode 100644 animism-align/frontend/app/views/align/align.util.js
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotation.form.js
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotation.index.js
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js
 create 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.video.js
 create mode 100644 animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
 create mode 100644 animism-align/frontend/app/views/align/components/player/playButton.component.js
 create mode 100644 animism-align/frontend/app/views/align/components/timeline/cursor.component.js
 create mode 100644 animism-align/frontend/app/views/align/components/timeline/playCursor.component.js
 create mode 100644 animism-align/frontend/app/views/align/components/timeline/ticks.component.js
 create mode 100644 animism-align/frontend/app/views/align/components/timeline/waveform.component.js
 create mode 100644 animism-align/frontend/app/views/align/containers/annotations.container.js
 create mode 100644 animism-align/frontend/app/views/align/containers/script.container.js
 create mode 100644 animism-align/frontend/app/views/align/containers/timeline.container.js
 create mode 100644 animism-align/frontend/app/views/annotation/annotation.reducer.js
 create mode 100644 animism-align/frontend/app/views/audio/audio.actions.js
 create mode 100644 animism-align/frontend/app/views/audio/audio.reducer.js
 create mode 100644 animism-align/frontend/app/views/index.js
 create mode 100644 animism-align/frontend/app/views/media/components/media.form.js
 create mode 100644 animism-align/frontend/app/views/media/components/media.formImage.js
 create mode 100644 animism-align/frontend/app/views/media/components/media.formImageSelection.js
 create mode 100644 animism-align/frontend/app/views/media/components/media.formVideo.js
 create mode 100644 animism-align/frontend/app/views/media/components/media.indexOptions.js
 create mode 100644 animism-align/frontend/app/views/media/components/media.menu.js
 create mode 100644 animism-align/frontend/app/views/media/containers/media.edit.js
 create mode 100644 animism-align/frontend/app/views/media/containers/media.index.js
 create mode 100644 animism-align/frontend/app/views/media/containers/media.new.js
 create mode 100644 animism-align/frontend/app/views/media/media.actions.js
 create mode 100644 animism-align/frontend/app/views/media/media.container.js
 create mode 100644 animism-align/frontend/app/views/media/media.css
 create mode 100644 animism-align/frontend/app/views/media/media.reducer.js
 create mode 100644 animism-align/frontend/app/views/nav/header.component.js
 create mode 100644 animism-align/frontend/app/views/nav/nav.css
 create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraph.form.js
 create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraph.list.js
 create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
 create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.image.js
 create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
 create mode 100644 animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.video.js
 create mode 100644 animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
 create mode 100644 animism-align/frontend/app/views/paragraph/paragraph.container.js
 create mode 100644 animism-align/frontend/app/views/paragraph/paragraph.css
 create mode 100644 animism-align/frontend/app/views/paragraph/paragraph.reducer.js
 create mode 100644 animism-align/frontend/app/views/site/component.template.js
 create mode 100644 animism-align/frontend/app/views/site/site.actions.js
 create mode 100644 animism-align/frontend/app/views/site/site.reducer.js
 create mode 100644 animism-align/frontend/app/views/upload/components/upload.form.js
 create mode 100644 animism-align/frontend/app/views/upload/components/upload.index.js
 create mode 100644 animism-align/frontend/app/views/upload/components/upload.indexOptions.js
 create mode 100644 animism-align/frontend/app/views/upload/components/upload.menu.js
 create mode 100644 animism-align/frontend/app/views/upload/components/upload.show.js
 create mode 100644 animism-align/frontend/app/views/upload/upload.actions.js
 create mode 100644 animism-align/frontend/app/views/upload/upload.container.js
 create mode 100644 animism-align/frontend/app/views/upload/upload.css
 create mode 100644 animism-align/frontend/app/views/upload/upload.reducer.js

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

diff --git a/animism-align/frontend/app/views/align/align.actions.js b/animism-align/frontend/app/views/align/align.actions.js
new file mode 100644
index 0000000..5176d81
--- /dev/null
+++ b/animism-align/frontend/app/views/align/align.actions.js
@@ -0,0 +1,93 @@
+import * as types from 'app/types'
+import { store, history, dispatch } from 'app/store'
+import { api, post, pad, preloadImage } from 'app/utils'
+import actions from 'app/actions'
+// import { session } from 'app/session'
+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'
+
+export const setScrollPosition = start_ts => dispatch => (
+  dispatch({ type: types.align.set_display_setting, key: 'start_ts', value: start_ts })
+)
+
+export const setZoom = zoom => dispatch => {
+  if (0 <= zoom && zoom < ZOOM_STEPS.length) {
+    dispatch({ type: types.align.set_display_setting, key: 'zoom', value: zoom })
+  }
+}
+export const throttledSetZoom = throttle(zoom => dispatch => {
+  setZoom(zoom)(dispatch)
+}, 250, { leading: true })
+
+export const setCursor = cursor_ts => dispatch => (
+  dispatch({ type: types.align.set_display_setting, key: 'cursor_ts', value: cursor_ts })
+)
+
+export const setSelectedAnnotation = annotation => dispatch => {
+  dispatch({ type: types.align.set_selected_annotation, data: annotation })
+  debouncedUpdateAnnotation.flush()
+}
+export const clearSelectedAnnotation = () => dispatch => {
+  dispatch({ type: types.align.clear_selected_annotation })
+  debouncedUpdateAnnotation.flush()
+}
+export const updateSelectedAnnotation = annotation => dispatch => {
+  dispatch({ type: types.align.set_selected_annotation, data: { ...annotation } })
+  debouncedUpdateAnnotation(annotation)
+}
+export const debouncedUpdateAnnotation = debounce(annotation => {
+  console.log('updating annotation', annotation)
+  actions.annotation.update(annotation)
+}, 2000, { leading: false, trailing: true })
+
+
+export const setSelectedParagraph = paragraph_id => dispatch => {
+  dispatch({ type: types.align.set_display_setting, key: 'selected_paragraph_id', value: paragraph_id })
+}
+export const clearSelectedParagraph = paragraph_id => dispatch => {
+  dispatch({ type: types.align.set_display_setting, key: 'selected_paragraph_id', value: -1 })
+}
+
+export const showNewAnnotationForm = (start_ts, text) => dispatch => {
+  let croppedText;
+  if (store.getState().align.annotation.start_ts) {
+    croppedText = store.getState().align.annotation.text
+  } else {
+    croppedText = cutFirstSentence(text)
+  }
+  // console.log(croppedText)
+  dispatch({
+    type: types.align.set_temporary_annotation,
+    data: {
+      id: 'new',
+      start_ts,
+      end_ts: 0.0,
+      text: croppedText,
+      type: 'sentence',
+      settings: {},
+    }
+  })
+}
+export const showEditAnnotationForm = (annotation) => dispatch => {
+  dispatch({
+    type: types.align.set_temporary_annotation,
+    data: annotation,
+  })
+}
+
+export const updateAnnotationForm = (key, value) => dispatch => {
+  dispatch({ type: types.align.update_temporary_annotation, key, value })
+}
+export const updateAnnotationSettings = (key, value) => dispatch => {
+  dispatch({ type: types.align.update_temporary_annotation_settings, key, value })
+}
+
+export const hideAnnotationForm = () => dispatch => {
+  dispatch({
+    type: types.align.set_temporary_annotation,
+    data: {}
+  })
+}
diff --git a/animism-align/frontend/app/views/align/align.container.js b/animism-align/frontend/app/views/align/align.container.js
new file mode 100644
index 0000000..a659fdd
--- /dev/null
+++ b/animism-align/frontend/app/views/align/align.container.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import './align.css'
+
+import Timeline from 'app/views/align/containers/timeline.container.js'
+import Script from 'app/views/align/containers/script.container.js'
+import actions from 'app/actions'
+
+class Container extends Component {
+  componentDidMount() {
+    document.body.scrollTo(0, 0)
+    document.body.parentNode.scrollTo(0, 0)
+  }
+  render() {
+    return (
+      <div className='body'>
+        <div className='row'>
+          <Timeline />
+        </div>
+        <Script />
+      </div>
+    )
+  }
+}
+
+export default Container
diff --git a/animism-align/frontend/app/views/align/align.css b/animism-align/frontend/app/views/align/align.css
new file mode 100644
index 0000000..bbf3bc2
--- /dev/null
+++ b/animism-align/frontend/app/views/align/align.css
@@ -0,0 +1,215 @@
+* {
+
+}
+.body.loading > div {
+  padding: 1rem;
+}
+.body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background: linear-gradient(
+      0deg,
+      rgba(0, 0, 64, 0.5),
+      rgba(64, 64, 128, 0.5)
+    );
+  padding: 0;
+}
+
+/* Timeline */
+
+canvas {
+  display: block;
+}
+.timeline {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  width: 300px;
+  cursor: crosshair;
+}
+.timelineColumn {
+  position: relative;
+}
+.ticks .tick {
+  position: absolute;
+  right: 0;
+  width: 4px;
+  height: 1px;
+  background: #ddd;
+}
+.ticks .tickLabel {
+  position: absolute;
+  right: 6px;
+  font-size: 12px;
+  width: 40px;
+  margin-top: -7px;
+  text-align: right;
+  text-shadow: 0 0 2px #00f;
+}
+.timeline .cursor {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  pointer-events: none;
+}
+.timeline .cursor .line {
+  width: 100%;
+  height: 1px;
+  background: #00f;
+}
+.timeline .cursor.playCursor .line {
+  background: #ddd;
+}
+.timeline .cursor .tickLabel {
+  position: absolute;
+  pointer-events: none;
+  right: 6px;
+  font-size: 12px;
+  width: 40px;
+  margin-top: -7px;
+  text-align: right;
+  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; 
+}
+
+/* Audio player */
+
+.playButton {
+  /*position: absolute;*/
+  /*top: 0; left: 0;*/
+  width: 3rem; height: 3rem;
+  padding: 1rem;
+  background: transparent;
+  cursor: pointer;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.playButton.playing {
+  background-image: url('/static/img/icons_pause_white.svg');
+}
+.playButton.paused {
+  background-image: url('/static/img/icons_play_white.svg');
+}
+
+/* Script */
+
+.script {
+  height: calc(100vh - 3.15rem);
+  z-index: 1;
+}
+
+/* Annotations */
+
+.annotations {
+  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.reducer.js b/animism-align/frontend/app/views/align/align.reducer.js
new file mode 100644
index 0000000..1f79180
--- /dev/null
+++ b/animism-align/frontend/app/views/align/align.reducer.js
@@ -0,0 +1,85 @@
+import * as types from 'app/types'
+import { session, getDefault, getDefaultInt } from 'app/session'
+
+const initialState = {
+  timeline: {
+    cursor_ts: -1,
+    start_ts: 0,
+    zoom: 1,
+    duration: 0,
+    selected_annotation_id: -1,
+    selected_paragraph_id: -1,
+  },
+  annotation: {},
+  selectedAnnotation: {},
+  options: {
+  }
+}
+
+export default function alignReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  switch (action.type) {
+    case types.peaks.loaded:
+      console.log('peaks duration:', action.data.length / 10)
+      return state
+
+    case types.align.set_display_setting:
+      return {
+        ...state,
+        timeline: {
+          ...state.timeline,
+          [action.key]: action.value,
+        }
+      }
+
+    case types.align.set_selected_annotation:
+      return {
+        ...state,
+        timeline: {
+          ...state.timeline,
+          selected_annotation_id: action.data.id,
+        },
+        selectedAnnotation: action.data,
+      }
+
+    case types.align.clear_selected_annotation:
+      return {
+        ...state,
+        timeline: {
+          ...state.timeline,
+          selected_annotation_id: -1,
+        },
+        selectedAnnotation: {},
+      }
+
+    case types.align.set_temporary_annotation:
+      return {
+        ...state,
+        annotation: action.data,
+      }
+
+    case types.align.update_temporary_annotation:
+      return {
+        ...state,
+        annotation: {
+          ...state.annotation,
+          [action.key]: action.value,
+        }
+      }
+
+    case types.align.update_temporary_annotation_settings:
+      return {
+        ...state,
+        annotation: {
+          ...state.annotation,
+          settings: {
+            ...state.annotation.settings,
+            [action.key]: action.value,
+          }
+        }
+      }
+
+    default:
+      return state
+  }
+}
diff --git a/animism-align/frontend/app/views/align/align.util.js b/animism-align/frontend/app/views/align/align.util.js
new file mode 100644
index 0000000..e873bbf
--- /dev/null
+++ b/animism-align/frontend/app/views/align/align.util.js
@@ -0,0 +1,65 @@
+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.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
new file mode 100644
index 0000000..7d66272
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -0,0 +1,182 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+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 { Select } from 'app/common'
+
+import {
+  AnnotationFormVideo,
+  AnnotationFormImage,
+} from './annotationForms'
+
+const ANNOTATION_TYPES = [
+  'sentence', 'header', 'paragraph_end', 'video', 'image', 'image_carousel',
+].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
+
+class AnnotationForm extends Component {
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.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)
+  }
+  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.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, media } = this.props
+    if (!annotation.start_ts) return <div></div>
+    return (
+      <div
+        className='annotationForm'
+        style={{
+          top: timeToPosition(annotation.start_ts, timeline),
+        }}
+      >
+        {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} />
+        }
+      </div>
+    )
+  }
+  renderButtons() {
+    const { annotation } = this.props
+    return (
+      <div className='row buttons'>
+        <div>
+          <Select
+            name='type'
+            selected={annotation.type}
+            options={ANNOTATION_TYPES}
+            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>
+        <textarea
+          name='text'
+          value={annotation.text}
+          onKeyDown={this.handleKeyDown}
+          onChange={this.handleChange}
+          ref={this.textareaRef}
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  annotation: state.align.annotation,
+  timeline: state.align.timeline,
+  media: state.media.index,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(AnnotationForm)
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
new file mode 100644
index 0000000..aa31268
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
@@ -0,0 +1,126 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+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/views/align/align.util'
+
+import { AnnotationElementLookup } from './annotationTypes'
+
+class AnnotationIndex extends Component {
+  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 - 50.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]).reverse()
+    this.setState({ items })
+  }
+  handleClick(e, annotation) {
+    e.stopPropagation()
+    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',
+          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}
+              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,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(AnnotationIndex)
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
new file mode 100644
index 0000000..8457b68
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+
+import { Select } from 'app/common'
+
+export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect }) => {
+  if (!media.lookup) return <div />
+  const { lookup, order } = media
+  const image_list_items = order.filter(id => lookup[id].type === 'image').map(id => {
+    const image = lookup[id]
+    return {
+      name: image.id,
+      label: image.author + ' - ' + image.title
+    }
+  })
+  return (
+    <div>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose an image'
+        onChange={handleSettingsSelect}
+      />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
new file mode 100644
index 0000000..1fb552b
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+
+import { Select } from 'app/common'
+
+export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect }) => {
+  if (!media.lookup) return <div />
+  const { lookup, order } = media
+  const video_list_items = order.filter(id => lookup[id].type === 'video').map(id => {
+    const video = lookup[id]
+    return {
+      name: video.id,
+      label: video.author + ' - ' + video.title
+    }
+  })
+  return (
+    <div>
+      <Select
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={video_list_items}
+        defaultOption='Choose a video'
+        onChange={handleSettingsSelect}
+      />
+    </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
new file mode 100644
index 0000000..1411efc
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
@@ -0,0 +1,12 @@
+import {
+  AnnotationFormVideo,
+} from './annotationForm.video'
+
+import {
+  AnnotationFormImage,
+} from './annotationForm.image'
+
+export {
+  AnnotationFormImage,
+  AnnotationFormVideo,
+}
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
new file mode 100644
index 0000000..ec4d25e
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+
+import { thumbnailURL } from 'app/views/align/align.util'
+
+import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.util'
+
+export const AnnotationImage = ({ y, annotation, media, selected, onClick, onDoubleClick }) => {
+  const { start_ts, text } = annotation
+  const className = selected ? 'annotation media image selected' : 'annotation media image'
+  if (checkAnnotationMediaNotReady(annotation, media)) {
+    return <AnnotationMediaLoading y={y} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
+  }
+  const data = media[annotation.settings.media_id]
+  return (
+    <div
+      className={className}
+      style={{ top: y }}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+    >
+      <div className='img'>
+        <img src={thumbnailURL(data)} alt={data.title} />
+      </div>
+      <div className='meta center'>
+        <div>
+          <i>{data.title}</i><br />
+          {data.author}<br />
+          {data.date}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js
new file mode 100644
index 0000000..be4674f
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js
@@ -0,0 +1,49 @@
+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 AnnotationHeader = ({ y, annotation, selected, onClick, onDoubleClick }) => {
+  const { start_ts, text } = annotation
+  const className = selected ? 'annotation header selected' : 'annotation header'
+  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>
+  )
+}
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
new file mode 100644
index 0000000..17abebd
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.util.js
@@ -0,0 +1,28 @@
+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.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
new file mode 100644
index 0000000..f51ac71
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+
+import { thumbnailURL } from 'app/views/align/align.util'
+import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.util'
+
+export const AnnotationVideo = ({ y, annotation, media, 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} className={className} onClick={onClick} onDoubleClick={onDoubleClick} />
+  }
+  const data = media[annotation.settings.media_id]
+  return (
+    <div
+      className={className}
+      style={{ top: y }}
+      onClick={e => onClick(e, annotation)}
+      onDoubleClick={e => onDoubleClick(e, annotation)}
+    >
+      <div className='img'>
+        <img src={thumbnailURL(data)} alt={data.title} />
+      </div>
+      <div className='meta center'>
+        <div>
+          <i>{data.title}</i><br />
+          {data.author}<br />
+          {data.date}
+        </div>
+      </div>
+    </div>
+  )
+}
+
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
new file mode 100644
index 0000000..560063b
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
@@ -0,0 +1,22 @@
+import React from 'react'
+
+import {
+  AnnotationSentence, AnnotationHeader,
+  AnnotationParagraphEnd,
+} from './annotationTypes.text'
+
+import {
+  AnnotationVideo,
+} from './annotationTypes.video'
+
+import {
+  AnnotationImage,
+} from './annotationTypes.image'
+
+export const AnnotationElementLookup = {
+  sentence: React.memo(AnnotationSentence),
+  header: React.memo(AnnotationHeader),
+  paragraph_end: React.memo(AnnotationParagraphEnd),
+  video: React.memo(AnnotationVideo),
+  image: React.memo(AnnotationImage),
+}
diff --git a/animism-align/frontend/app/views/align/components/player/playButton.component.js b/animism-align/frontend/app/views/align/components/player/playButton.component.js
new file mode 100644
index 0000000..c6a8487
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/player/playButton.component.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+// import * as alignActions from '../align.actions'
+
+import { ZOOM_STEPS } from 'app/constants'
+import { clamp } from 'app/utils'
+
+const PlayButton = ({ audio }) => {
+  return (
+    <div
+      className={audio.playing ? 'playButton playing' : 'playButton paused'}
+      onClick={() => {
+        audio.playing ? actions.audio.pause() : actions.audio.play()
+      }}
+    />
+  )
+}
+
+const mapStateToProps = state => ({
+  audio: state.audio,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // alignActions: bindActionCreators({ ...alignActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(PlayButton)
diff --git a/animism-align/frontend/app/views/align/components/timeline/cursor.component.js b/animism-align/frontend/app/views/align/components/timeline/cursor.component.js
new file mode 100644
index 0000000..4a94100
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/timeline/cursor.component.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+
+import { ZOOM_STEPS } from 'app/constants'
+import { timestamp } from 'app/utils'
+
+const Cursor = ({ timeline, annotation }) => {
+  const { start_ts, zoom, cursor_ts, duration } = timeline
+  const ts = annotation.start_ts || cursor_ts
+  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
+  const y = (ts - start_ts) / secondsPerPixel
+  return (
+    <div
+      className='cursor'
+      style={{
+        top: y,
+      }}
+    >
+      <div className='line' />
+      <div className='tickLabel'>
+        {timestamp(ts, 1)}
+      </div>
+    </div>
+  )
+}
+
+export default Cursor
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/align/components/timeline/playCursor.component.js b/animism-align/frontend/app/views/align/components/timeline/playCursor.component.js
new file mode 100644
index 0000000..854c43b
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/timeline/playCursor.component.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { ZOOM_STEPS } from 'app/constants'
+import { timestamp } from 'app/utils'
+
+const PlayCursor = ({ timeline, audio }) => {
+  const { start_ts, zoom, duration } = timeline
+  const { play_ts } = audio
+  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
+  const y = (play_ts - start_ts) / secondsPerPixel
+  // console.log(play_ts, y)
+  return (
+    <div
+      className='cursor playCursor'
+      style={{
+        top: y,
+      }}
+    >
+      <div className='line' />
+    </div>
+  )
+}
+
+const mapStateToProps = state => ({
+  timeline: state.align.timeline,
+  audio: state.audio,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // alignActions: bindActionCreators({ ...alignActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(PlayCursor)
diff --git a/animism-align/frontend/app/views/align/components/timeline/ticks.component.js b/animism-align/frontend/app/views/align/components/timeline/ticks.component.js
new file mode 100644
index 0000000..4530863
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/timeline/ticks.component.js
@@ -0,0 +1,88 @@
+import React, { Component } from 'react'
+
+import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from 'app/constants'
+import { timestamp } from 'app/utils'
+
+export default class Ticks extends Component {
+  render() {
+    let { start_ts, zoom, duration } = this.props.timeline
+
+    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
+
+    let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel
+
+    let timeMin = start_ts
+    let timeMax = Math.min(start_ts + widthTimeDuration, duration)
+    let timeWidth = timeMax - timeMin
+
+    let pixelMin = timeMin / secondsPerPixel
+
+    let secondsPerLabel = ZOOM_LABEL_STEPS[zoom] // secs
+    let pixelsPerLabel = secondsPerLabel / secondsPerPixel
+    let secondsPerTick = ZOOM_TICK_STEPS[zoom]
+    let pixelsPerTick = secondsPerTick / secondsPerPixel
+
+    let startOffset = pixelsPerLabel - (pixelMin % pixelsPerLabel)
+    let startTiming = (pixelMin + startOffset) * secondsPerPixel
+
+    let labelCount = Math.ceil(INNER_HEIGHT / pixelsPerLabel) + 1
+    let offset, timing, tickLabels = [], ticks = []
+    for (var i = -1; i < labelCount; i++) {
+      offset = i * pixelsPerLabel + startOffset
+      if (offset > INNER_HEIGHT) continue
+      timing = i * secondsPerLabel + startTiming
+      if (timing > duration) {
+        break
+      }
+      tickLabels.push(
+        <div className='tickLabel' key={"tickLabel_" + i}
+          style={{
+            top: Math.floor(offset)
+          }}>
+          {timestamp(timing)}
+        </div>
+      )
+    }
+
+    let durationOffset = duration / secondsPerPixel - pixelMin
+    if (timing > duration) {
+      tickLabels.push(
+        <div className='tickLabel tickLabelTotal' key={"tickLabel_total"}
+          style={{
+            top: durationOffset
+          }}>
+          {timestamp(duration, 1)}
+        </div>
+      )
+      ticks.push(
+        <div className='tick' key={"tick_total"}
+          style={{
+            top: Math.floor(durationOffset),
+          }}
+        />
+      )
+    }
+    let tickCount = Math.ceil(INNER_HEIGHT / pixelsPerTick) + 6
+    for (var i = 0; i < tickCount; i += 1) {
+      offset = i * pixelsPerTick + startOffset - pixelsPerLabel
+      if (offset > durationOffset) {
+        break
+      }
+      ticks.push(
+        <div className='tick' key={"tick_" + i}
+          style={{
+            top: Math.floor(offset),
+          }}
+        />
+      )
+    }
+    // console.log(ticks.length)
+
+    return (
+      <div className='ticks'>
+        {ticks}
+        {tickLabels}
+      </div>
+    )
+  }
+}
diff --git a/animism-align/frontend/app/views/align/components/timeline/waveform.component.js b/animism-align/frontend/app/views/align/components/timeline/waveform.component.js
new file mode 100644
index 0000000..023b877
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/timeline/waveform.component.js
@@ -0,0 +1,101 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+// import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import {
+  WAVEFORM_SIZE, INNER_HEIGHT,
+  ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS,
+} from 'app/constants'
+
+class Waveform extends Component {
+  constructor(props){
+    super(props)
+    this.canvasRef = React.createRef()
+  }
+  componentDidMount() {
+    this.resize()
+    this.draw()
+  }
+  componentDidUpdate() {
+    this.draw()
+  }
+  resize() {
+    const canvas = this.canvasRef.current
+    canvas.width = WAVEFORM_SIZE
+    canvas.height = INNER_HEIGHT
+  }
+  draw() {
+    const canvas = this.canvasRef.current
+    const ctx = canvas.getContext('2d')
+    const h = INNER_HEIGHT
+    this.clearCanvas(ctx, h)
+    this.drawCurve(ctx, h)
+  }
+  clearCanvas(ctx, h) {  
+    const w = WAVEFORM_SIZE
+    ctx.clearRect(0, 0, w, h)
+    ctx.fillStyle = 'rgba(0,0,0,0.5)'
+    ctx.fillRect(0, 0, w, h)
+    ctx.fillStyle = 'rgba(64,128,192,0.5)'
+  }
+  drawCurve(ctx, h) {
+    let { peaks, timeline } = this.props
+    let { start_ts, zoom, duration } = timeline
+
+    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
+    let stepsPerPixel = ZOOM_STEPS[zoom] // 0.1 sec / step
+
+    let widthTimeDuration = h * secondsPerPixel // secs per pixel
+
+    let timeMin = Math.round(start_ts / secondsPerPixel) * secondsPerPixel
+    let timeMax = Math.min(timeMin + widthTimeDuration, duration)
+    let timeWidth = timeMax - timeMin
+
+    let stepMin = Math.floor(timeMin * 10)
+    let pixelWidth = Math.ceil(timeWidth / secondsPerPixel)
+
+    let i = 0
+    let step = stepMin
+    let waveformPeak = WAVEFORM_SIZE / 2
+    let origin = (1 - peaks[step]) * waveformPeak
+    let y
+    let peak
+    // console.log(stepMin, pixelWidth * stepsPerPixel + stepMin)
+    ctx.beginPath()
+    ctx.moveTo(origin, 0)
+    for (i = 0; i < pixelWidth; i++) {
+      step = i * stepsPerPixel + stepMin
+      peak = peaks[step]
+      y = (1 - peak) * waveformPeak
+      ctx.lineTo(y, i)
+    }
+    for (i = pixelWidth - 1; i > 0; i--) {
+      step = i * stepsPerPixel + stepMin
+      peak = peaks[step]
+      y = (1 + peak) * waveformPeak
+      ctx.lineTo(y, i)
+    }
+    ctx.lineTo(origin, 0)
+    ctx.fillStyle = 'rgba(255,255,255,0.8)'
+    ctx.fill()
+  }
+  render() {
+    return (
+      <canvas ref={this.canvasRef} onClick={this.props.onClick} />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  timeline: state.align.timeline,
+  peaks: state.site.peaks,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Waveform)
diff --git a/animism-align/frontend/app/views/align/containers/annotations.container.js b/animism-align/frontend/app/views/align/containers/annotations.container.js
new file mode 100644
index 0000000..e199bd6
--- /dev/null
+++ b/animism-align/frontend/app/views/align/containers/annotations.container.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+// import * as alignActions from '../align.actions'
+
+import { ZOOM_STEPS } from 'app/constants'
+import { clamp } from 'app/utils'
+import { positionToTime } from 'app/views/align/align.util'
+
+import AnnotationForm from 'app/views/align/components/annotations/annotation.form'
+import AnnotationIndex from 'app/views/align/components/annotations/annotation.index'
+
+class Annotations extends Component {
+  constructor(props){
+    super(props)
+  }
+  render() {
+    return (
+      <div className='annotations'>
+        <AnnotationIndex />
+        {this.props.annotation.start_ts &&
+          <AnnotationForm />
+        }
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  timeline: state.align.timeline,
+  annotation: state.align.annotation,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Annotations)
diff --git a/animism-align/frontend/app/views/align/containers/script.container.js b/animism-align/frontend/app/views/align/containers/script.container.js
new file mode 100644
index 0000000..cc340c6
--- /dev/null
+++ b/animism-align/frontend/app/views/align/containers/script.container.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+class Timeline extends Component {
+  constructor(props){
+    super(props)
+  }
+  render() {
+    if (this.props.text.loading) return <div />
+    return (
+      <textarea 
+        className='script'
+        onChange={e => actions.site.updateText(e.target.value)}
+        value={this.props.text}
+      />
+    )
+  }
+}
+
+
+const mapStateToProps = state => ({
+  text: state.site.text,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // alignActions: bindActionCreators({ ...alignActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Timeline)
diff --git a/animism-align/frontend/app/views/align/containers/timeline.container.js b/animism-align/frontend/app/views/align/containers/timeline.container.js
new file mode 100644
index 0000000..c208e08
--- /dev/null
+++ b/animism-align/frontend/app/views/align/containers/timeline.container.js
@@ -0,0 +1,171 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+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'
+import Ticks from 'app/views/align/components/timeline/ticks.component'
+import Cursor from 'app/views/align/components/timeline/cursor.component'
+import PlayButton from 'app/views/align/components/player/playButton.component'
+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'
+
+class Timeline extends Component {
+  constructor(props){
+    super(props)
+    this.handleKeydown = this.handleKeydown.bind(this)
+    this.handleMouseMove = this.handleMouseMove.bind(this)
+    this.handleWheel = this.handleWheel.bind(this)
+    this.handleContainerClick = this.handleContainerClick.bind(this)
+    this.handleTimelineClick = this.handleTimelineClick.bind(this)
+  }
+  componentDidMount() {
+    this.bind()
+  }
+  componentWillUnmount() {
+    this.unbind()
+  }
+  shouldComponentUpdate(nextProps) {
+    return (
+      nextProps.timeline !== this.props.timeline ||
+      nextProps.annotation !== this.props.annotation
+    )
+  }
+  bind() {
+    document.addEventListener('keydown', this.handleKeydown)
+  }
+  unbind() {
+    document.removeEventListener('keydown', this.handleKeydown)
+  }
+  handleKeydown(e) {
+    if (document.activeElement !== document.body) {
+      return
+    }
+    // console.log(e.keyCode)
+    if (e.metaKey && this.props.selectedAnnotation.id) {
+      const { selectedAnnotation } = this.props
+      switch (e.keyCode) {
+        case 38: // up
+          e.preventDefault()
+          selectedAnnotation.start_ts = Math.max(selectedAnnotation.start_ts - (e.shiftKey ? 1 : 0.1), 0)
+          actions.align.updateSelectedAnnotation(selectedAnnotation)
+          actions.audio.seek(selectedAnnotation.start_ts)
+          actions.align.setCursor(selectedAnnotation.start_ts)
+          break
+        case 40: // down
+          e.preventDefault()
+          selectedAnnotation.start_ts += e.shiftKey ? 1 : 0.1
+          actions.align.updateSelectedAnnotation(selectedAnnotation)
+          actions.audio.seek(selectedAnnotation.start_ts)
+          actions.align.setCursor(selectedAnnotation.start_ts)
+          break
+      }
+      return
+    }
+    if (e.shiftKey) {
+      switch (e.keyCode) {
+        case 187: // plus
+          actions.align.setZoom(this.props.timeline.zoom - 1)
+          break
+        case 189: // minus
+          actions.align.setZoom(this.props.timeline.zoom + 1)
+          break
+      }
+    } else {
+      // console.log(e.keyCode)
+      switch (e.keyCode) {
+        case 27: // escape
+          actions.align.hideAnnotationForm()
+          break
+        case 65: // A - add
+          e.preventDefault()
+          actions.align.showNewAnnotationForm(this.props.audio.play_ts, this.props.text)
+          break
+        case 32: // spacebar
+          actions.audio.toggle()
+          break
+        case 38: // up
+          actions.audio.jump(- ZOOM_STEPS[this.props.timeline.zoom] * 0.1)
+          break
+        case 40: // down
+          actions.audio.jump(ZOOM_STEPS[this.props.timeline.zoom] * 0.1)
+          break
+      }
+    }
+  }
+  handleWheel(e) {
+    let { start_ts, zoom, duration } = this.props.timeline
+    let { deltaY } = e
+    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
+    let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel
+    start_ts += Math.round((deltaY) * ZOOM_STEPS[zoom])
+    start_ts = clamp(start_ts, 0, Math.max(0, duration - widthTimeDuration / 2))
+    if (e.shiftKey) {
+      if (Math.abs(deltaY) < 2) return
+      if (e.deltaY > 0) {
+        actions.align.throttledSetZoom(this.props.timeline.zoom + 1)
+      } else {
+        actions.align.throttledSetZoom(this.props.timeline.zoom - 1)
+      }
+    } else if (e.altKey) {
+      actions.audio.jump(e.deltaY * ZOOM_STEPS[zoom])
+    } else {
+      actions.align.setScrollPosition(start_ts)
+    }
+  }
+  handleMouseMove(e) {
+    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
+    actions.align.setCursor(cursor_ts)
+  }
+  handleContainerClick(e) {
+    actions.align.clearSelectedAnnotation()
+    actions.align.clearSelectedParagraph()
+  }
+  handleTimelineClick(e) {
+    const play_ts = positionToTime(e.pageY, this.props.timeline)
+    if (e.pageX < WAVEFORM_SIZE * 0.67) {
+      actions.audio.seek(play_ts)      
+    } else {
+      actions.align.showNewAnnotationForm(play_ts, this.props.text)
+    }
+  }
+  render() {
+    return (
+      <div
+        className='timeline'
+        onClick={this.handleContainerClick}
+        onWheel={this.handleWheel}
+        onMouseMove={this.handleMouseMove}
+      >
+        <div className='timelineColumn'>
+          <Waveform onClick={this.handleTimelineClick} />
+          <Ticks timeline={this.props.timeline} />
+          <Cursor timeline={this.props.timeline} annotation={this.props.annotation} />
+        </div>
+        <Annotations timeline={this.props.timeline} />
+        <PlayCursor />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  timeline: state.align.timeline,
+  annotation: state.align.annotation,
+  selectedAnnotation: state.align.selectedAnnotation,
+  audio: state.audio,
+  text: state.site.text,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // alignActions: bindActionCreators({ ...alignActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Timeline)
diff --git a/animism-align/frontend/app/views/annotation/annotation.reducer.js b/animism-align/frontend/app/views/annotation/annotation.reducer.js
new file mode 100644
index 0000000..50232a9
--- /dev/null
+++ b/animism-align/frontend/app/views/annotation/annotation.reducer.js
@@ -0,0 +1,20 @@
+import * as types from 'app/types'
+
+import { crudState, crudReducer } from 'app/api/crud.reducer'
+
+const initialState = crudState('annotation', {
+  options: {
+    sort: 'start_ts asc',
+  }
+})
+
+const reducer = crudReducer('annotation')
+
+export default function annotationReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  state = reducer(state, action)
+  switch (action.type) {
+    default:
+      return state
+  }
+}
diff --git a/animism-align/frontend/app/views/audio/audio.actions.js b/animism-align/frontend/app/views/audio/audio.actions.js
new file mode 100644
index 0000000..bd256a4
--- /dev/null
+++ b/animism-align/frontend/app/views/audio/audio.actions.js
@@ -0,0 +1,40 @@
+import * as types from 'app/types'
+import { store, history, dispatch } from 'app/store'
+import actions from 'app/actions'
+import { session } from 'app/session'
+
+const audioPlayer = document.createElement('audio')
+audioPlayer.src = '/static/data_store/peaks/animismA080720.mp3'
+audioPlayer.addEventListener('loadedmetadata', () => {
+  console.log('audio duration:', audioPlayer.duration)
+  dispatch({ type: types.align.set_display_setting, key: 'duration', value: audioPlayer.duration })
+})
+audioPlayer.addEventListener('play', () => {
+  dispatch({ type: types.audio.play })
+})
+audioPlayer.addEventListener('pause', () => {
+  dispatch({ type: types.audio.pause })
+})
+audioPlayer.addEventListener('timeupdate', () => {
+  dispatch({ type: types.audio.update_time, play_ts: audioPlayer.currentTime })
+})
+
+export const play = () => dispatch => {
+  audioPlayer.play()
+}
+export const pause = () => dispatch => {
+  audioPlayer.pause()
+}
+export const seek = play_ts => dispatch => {
+  audioPlayer.currentTime = play_ts
+}
+export const jump = delta_ts => dispatch => {
+  audioPlayer.currentTime += delta_ts
+}
+export const toggle = () => dispatch => {
+  if (store.getState().audio.playing) {
+    pause()(dispatch)
+  } else {
+    play()(dispatch)
+  }
+}
diff --git a/animism-align/frontend/app/views/audio/audio.reducer.js b/animism-align/frontend/app/views/audio/audio.reducer.js
new file mode 100644
index 0000000..6149ca6
--- /dev/null
+++ b/animism-align/frontend/app/views/audio/audio.reducer.js
@@ -0,0 +1,30 @@
+import * as types from 'app/types'
+import { session, getDefault, getDefaultInt } from 'app/session'
+
+const initialState = {
+  playing: false,
+  play_ts: 0,
+}
+
+export default function alignReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  switch (action.type) {
+    case types.audio.play:
+      return {
+        ...state,
+        playing: true,
+      }
+    case types.audio.pause:
+      return {
+        ...state,
+        playing: false,
+      }
+    case types.audio.update_time:
+      return {
+        ...state,
+        play_ts: action.play_ts,
+      }
+    default:
+      return state
+  }
+}
diff --git a/animism-align/frontend/app/views/index.js b/animism-align/frontend/app/views/index.js
new file mode 100644
index 0000000..2c9ee78
--- /dev/null
+++ b/animism-align/frontend/app/views/index.js
@@ -0,0 +1,4 @@
+export { default as align } from './align/align.container'
+export { default as paragraph } from './paragraph/paragraph.container'
+export { default as upload } from './upload/upload.container'
+export { default as media } from './media/media.container'
diff --git a/animism-align/frontend/app/views/media/components/media.form.js b/animism-align/frontend/app/views/media/components/media.form.js
new file mode 100644
index 0000000..af53014
--- /dev/null
+++ b/animism-align/frontend/app/views/media/components/media.form.js
@@ -0,0 +1,270 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { capitalize } from 'app/utils'
+
+import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+
+import MediaImageForm from './media.formImage'
+import MediaVideoForm from './media.formVideo'
+
+const newMedia = () => ({
+  type: 'image',
+  tag: 'media',
+  url: '',
+  title: '',
+  author: '',
+  pre_title: '',
+  post_title: '',
+  translated_title: '',
+  date: '',
+  source: '',
+  medium: '',
+  start_ts: 0,
+  settings: {},
+})
+
+const MEDIA_TYPES = [
+  'image', 'video'
+].map(name => ({ name, label: capitalize(name) }))
+
+export default class MediaForm extends Component {
+  state = {
+    title: "",
+    submitTitle: "",
+    data: { ...newMedia() },
+    errorFields: new Set([]),
+  }
+
+  constructor(props) {
+    super(props)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+    this.handleSettingsChangeEvent = this.handleSettingsChangeEvent.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  componentDidMount() {
+    const { data, isNew } = this.props
+    const title = isNew ? 'New media' : 'Editing ' + data.title
+    const submitTitle = isNew ? "Add Media" : "Save Changes"
+    this.setState({
+      title,
+      submitTitle,
+      errorFields: new Set([]),
+      data: { 
+        ...newMedia(),
+        ...data
+      },
+    })
+    window.addEventListener('keydown', this.handleKeyDown)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  }
+
+  handleKeyDown(e) {
+    // console.log(e, e.keyCode)
+    if ((e.ctrlKey || e.metaKey) && e.keyCode === 83) {
+      if (e) {
+        e.preventDefault()
+      }
+      this.handleSubmit()
+    }
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target
+    this.handleSelect(name, value)
+  }
+
+  handleSelect(name, value) {
+    const { errorFields } = this.state
+    if (errorFields.has(name)) {
+      errorFields.delete(name)
+    }
+    this.setState({
+      errorFields,
+      data: {
+        ...this.state.data,
+        [name]: value,
+      }
+    })
+  }
+
+  handleSettingsChangeEvent(e) {
+    const { name, value } = e.target
+    this.handleSettingsChange(name, value)
+  }
+
+  handleSettingsChange(name, value) {
+    console.log(name, value)
+    if (name !== 'multiple') {
+      value = { [name]: value }
+    }
+    this.setState({
+      data: {
+        ...this.state.data,
+        settings: {
+          ...this.state.data.settings,
+          ...value,
+        }
+      }
+    })
+  }
+
+  handleSubmit(e) {
+    if (e) {
+      e.preventDefault()
+    }
+    const { isNew, onSubmit } = this.props
+    const { data } = this.state
+    const requiredKeys = "author title date".split(" ")
+    const validKeys = "type tag url title author pre_title post_title translated_title date source medium start_ts settings".split(" ")
+    const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {})
+    const errorFields = requiredKeys.filter(key => !validData[key])
+    if (errorFields.length) {
+      console.log('error', errorFields, validData)
+      this.setState({ errorFields: new Set(errorFields) })
+    } else {
+      if (isNew) {
+        //
+      } else {
+        validData.id = data.id
+      }
+      console.log('submit', validData)
+      onSubmit(validData)
+    }
+  }
+
+  render() {
+    const { isNew } = this.props
+    const { title, submitTitle, errorFields, data } = this.state
+    // console.log(data)
+    return (
+      <div className='form'>
+        <h1>{title}</h1>
+        <form onSubmit={this.handleSubmit}>
+          <Select
+            title='Media Type'
+            name='type'
+            selected={data.type}
+            options={MEDIA_TYPES}
+            onChange={this.handleSelect}
+          />
+
+          {data.type === 'image' &&
+            <MediaImageForm
+              data={data}
+              onChange={this.handleSelect}
+              onSettingsChange={this.handleSettingsChange}
+            />
+          }
+
+          {data.type === 'video' &&
+            <MediaVideoForm
+              data={data}
+              onChange={this.handleSelect}
+              onSettingsChange={this.handleSettingsChange}
+            />
+          }
+
+          <TextInput
+            title="Author"
+            name="author"
+            required
+            data={data}
+            onChange={this.handleChange}
+            autoComplete="off"
+          />
+          <TextInput
+            title="Title"
+            name="title"
+            required
+            data={data}
+            onChange={this.handleChange}
+            autoComplete="off"
+          />
+          <TextInput
+            title="Title Prefix"
+            name="pre_title"
+            data={data}
+            onChange={this.handleChange}
+            autoComplete="off"
+          />
+          <TextInput
+            title="Title Suffix"
+            name="post_title"
+            data={data}
+            onChange={this.handleChange}
+            autoComplete="off"
+          />
+          <TextInput
+            title="Translated Title"
+            name="translated_title"
+            data={data}
+            onChange={this.handleChange}
+            autoComplete="off"
+          />
+          <TextInput
+            title="Date"
+            name="date"
+            required
+            data={data}
+            onChange={this.handleChange}
+            autoComplete="off"
+          />
+          <TextInput
+            title="Medium"
+            name="medium"
+            required
+            data={data}
+            onChange={this.handleChange}
+          />
+          <TextInput
+            title="Source"
+            name="source"
+            placeholder="Courtesy of / Copyright"
+            required
+            data={data}
+            onChange={this.handleChange}
+            autoComplete="off"
+          />
+          <TextArea
+            title="Citation"
+            name="bibliography"
+            placeholder="Use if special HTML formatting needed"
+            data={data.settings}
+            onChange={this.handleSettingsChangeEvent}
+          />
+          <Checkbox
+            label="Hide in list of works"
+            name="hide_in_bibliography"
+            checked={data.settings.hide_in_bibliography}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+          <TextArea
+            title="Description"
+            name="description"
+            data={data}
+            onChange={this.handleChange}
+          />
+          <SubmitButton
+            title={submitTitle}
+            onClick={this.handleSubmit}
+          />
+          {!!errorFields.size &&
+            <label>
+              <span></span>
+              <span>Please complete the required fields</span>
+            </label>
+          }
+        </form>
+      </div>
+    )
+  }
+}
diff --git a/animism-align/frontend/app/views/media/components/media.formImage.js b/animism-align/frontend/app/views/media/components/media.formImage.js
new file mode 100644
index 0000000..b6e38be
--- /dev/null
+++ b/animism-align/frontend/app/views/media/components/media.formImage.js
@@ -0,0 +1,172 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { session } from 'app/session'
+import actions from 'app/actions'
+import { capitalize, preloadImage, cropImage } from 'app/utils'
+
+import { TextInput, LabelDescription, UploadImage, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+import { renderThumbnail } from 'app/common/upload.helpers'
+
+import ImageSelection from './media.formImageSelection'
+
+const DISPLAY_SIZE = 1024
+const DISPLAY_QUALITY= 80
+const THUMBNAIL_SIZE = 320
+const THUMBNAIL_QUALITY = 80
+
+export default class MediaImageForm extends Component {
+  state = {
+    img: null,
+  }
+
+  constructor(props) {
+    super(props)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+    this.handleUpload = this.handleUpload.bind(this)
+    this.handleCrop = this.handleCrop.bind(this)
+    this.replaceTaggedSize = this.replaceTaggedSize.bind(this)
+    this.uploadTaggedSize = this.uploadTaggedSize.bind(this)
+  }
+
+  componentDidMount() {
+    // this.setState({ })
+    if (this.props.data.settings.fullsize) {
+      preloadImage(this.props.data.settings.fullsize.url)
+      .then(img => this.setState({ img }))
+    }
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target
+    this.handleSelect(name, value)
+  }
+
+  handleSelect(name, value) {
+    this.props.onSelect(name, value)
+  }
+
+  handleSettingsChange(name, value) {
+    this.props.onSettingsChange(name, value)
+  }
+
+  handleUpload({ file, img, canvas, blob }) {
+    // sizes: fullsize, display, thumbnail
+    this.replaceTaggedSize(file, 'fullsize')
+    .then(data => {
+      this.setState({ img })
+      this.props.onSettingsChange('multiple', {
+        fullsize: data,
+        crop: {},
+      })
+      return this.replaceTaggedSize(blob, 'display', file.name)
+    }).then(data => {
+      this.props.onSettingsChange('multiple', {
+        display: data,
+      })
+      this.uploadThumbnail(img)
+    })
+  }
+
+  uploadThumbnail(img) {
+    const { fn } = this.props.data.settings.fullsize
+    const thumbnailCanvas = renderThumbnail(img, { maxSide: THUMBNAIL_SIZE })
+    thumbnailCanvas.toBlob(thumbnail => {
+      this.replaceTaggedSize(thumbnail, 'thumbnail', fn).then(data => {
+        this.props.onSettingsChange('multiple', {
+          thumbnail: data,
+        })
+      })
+    }, 'image/jpeg', THUMBNAIL_QUALITY)
+  }
+
+  replaceTaggedSize(image, tag, fn) {
+    // when we upload an image, if the image already exists in this "position"
+    // on the record, we should also delete it
+    if (this.props.data.settings[tag] && this.props.data.settings[tag].id) {
+      return new Promise((resolve, reject) => {
+        actions.upload.destroy(this.props.data.settings[tag])
+        .then(() => {
+          console.log('destroy successful')
+          this.uploadTaggedSize(image, tag, fn).then(data => resolve(data))
+        })
+        .catch(() => {
+          console.log('error deleting the image')
+          this.uploadTaggedSize(image, tag, fn).then(data => resolve(data))
+        })
+      })
+    }
+    return this.uploadTaggedSize(image, tag, fn)
+  }
+
+  uploadTaggedSize(image, tag, fn) {
+    console.log('uploading size', tag)
+    const uploadData = {
+      image,
+      tag,
+      username: 'animism',
+    }
+    if (fn) {
+      uploadData['__image_filename'] = fn
+    }
+    // console.log(uploadData)
+    return actions.upload.upload(uploadData).then(data => {
+      // console.log(data)
+      return data.res
+    })
+  }
+
+  handleCrop(crop) {
+    // when cropping an image, re-upload the display image and thumbnail
+    // console.log(crop)
+    cropImage(this.state.img, crop, DISPLAY_SIZE)
+    .then(canvas => {
+      canvas.toBlob(blob => {
+        // console.log(canvas, canvas.width, canvas.height, blob)
+        this.replaceTaggedSize(blob, 'display', this.props.data.settings.fullsize.fn)
+        .then(data => {
+          this.props.onSettingsChange('multiple', {
+            crop,
+            display: data,
+          })
+          this.uploadThumbnail(canvas)
+        })
+      }, 'image/jpeg', DISPLAY_QUALITY)
+    })
+  }
+  
+  render() {
+    const { data } = this.props
+    // console.log(data)
+    return (
+      <div className='imageForm'>
+        {!data.url &&
+          <label className={'text fileInput'}>
+            <span>{"Upload image"}</span>
+            <div className="row">
+              <button>
+                {"Choose image"}
+              </button>
+              <UploadImage
+                onUpload={this.handleUpload}
+                maxSide={DISPLAY_SIZE}
+                quality={DISPLAY_QUALITY}
+              />
+            </div>
+          </label>
+        }
+        {data.settings.fullsize &&
+          <div>
+            <ImageSelection
+              url={data.settings.fullsize.url}
+              crop={data.settings.crop}
+              onCrop={this.handleCrop}
+            />
+          </div>
+        }
+      </div>
+    )
+  }
+}
diff --git a/animism-align/frontend/app/views/media/components/media.formImageSelection.js b/animism-align/frontend/app/views/media/components/media.formImageSelection.js
new file mode 100644
index 0000000..966eb58
--- /dev/null
+++ b/animism-align/frontend/app/views/media/components/media.formImageSelection.js
@@ -0,0 +1,213 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import toBlob from 'data-uri-to-blob'
+
+import { clamp } from 'app/utils'
+import { Loader } from 'app/common'
+
+const defaultState = {
+  dragging: false,
+  draggingBox: false,
+  bounds: null,
+  mouseX: 0,
+  mouseY: 0,
+  box: {
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+  }
+}
+
+export default class ImageSelection extends Component {
+  state = {
+    ...defaultState
+  }
+
+  constructor() {
+    super()
+    // bind these events in the constructor, so we can remove event listeners later
+    this.handleMouseDown = this.handleMouseDown.bind(this)
+    this.handleMouseDownOnBox = this.handleMouseDownOnBox.bind(this)
+    this.handleMouseMove = this.handleMouseMove.bind(this)
+    this.handleMouseUp = this.handleMouseUp.bind(this)
+    this.handleWindowResize = this.handleWindowResize.bind(this)
+  }
+
+  componentDidMount() {
+    document.body.addEventListener('mousemove', this.handleMouseMove)
+    document.body.addEventListener('mouseup', this.handleMouseUp)
+    window.addEventListener('resize', this.handleWindowResize)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.state.bounds && this.props.url !== prevProps.url) {
+      this.setState({
+        ...defaultState,
+        bounds: this.getBoundingClientRect(),
+        box: this.props.crop || defaultState.box,
+      })
+    }
+  }
+
+  componentWillUnmount() {
+    document.body.removeEventListener('mousemove', this.handleMouseMove)
+    document.body.removeEventListener('mouseup', this.handleMouseUp)
+    window.removeEventListener('resize', this.handleWindowResize)
+  }
+
+  getBoundingClientRect() {
+    if (!this.imgRef) return null
+    const rect = this.imgRef.getBoundingClientRect()
+    const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop
+    const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft
+    const bounds = {
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft,
+      width: rect.width,
+      height: rect.height,
+    }
+    return bounds
+  }
+
+  handleLoad() {
+    const bounds = this.getBoundingClientRect()
+    const box = this.props.crop || defaultState.box
+    this.setState({ bounds, box })
+  }
+
+  handleWindowResize() {
+    if (!this.imgRef) return
+    const bounds = this.getBoundingClientRect()
+    this.setState({ bounds })
+  }
+
+  handleMouseDown(e) {
+    e.preventDefault()
+    const bounds = this.getBoundingClientRect()
+    const mouseX = e.pageX
+    const mouseY = e.pageY
+    const x = (mouseX - bounds.left) / bounds.width
+    const y = (mouseY - bounds.top) / bounds.height
+    const w = 1 / bounds.width
+    const h = 1 / bounds.height
+    this.setState({
+      dragging: true,
+      bounds,
+      mouseX,
+      mouseY,
+      box: {
+        x, y, w, h,
+      }
+    })
+  }
+
+  handleMouseDownOnBox(e) {
+    const bounds = this.getBoundingClientRect()
+    const mouseX = e.pageX
+    const mouseY = e.pageY
+    this.setState({
+      draggingBox: true,
+      bounds,
+      mouseX,
+      mouseY,
+      initialBox: {
+        ...this.state.box
+      },
+      box: {
+        ...this.state.box
+      }
+    })
+  }
+
+  handleMouseMove(e) {
+    const {
+      dragging, draggingBox,
+      bounds, mouseX, mouseY, initialBox, box
+    } = this.state
+    if (dragging) {
+      e.preventDefault()
+      let { x, y } = box
+      let dx = (e.pageX - mouseX) / bounds.width
+      let dy = (e.pageY - mouseY) / bounds.height
+      let w = clamp(dx, 0.0, 1.0 - x)
+      let h = clamp(dy, 0.0, 1.0 - y)
+      this.setState({
+        box: {
+          x, y, w, h,
+        }
+      })
+    } else if (draggingBox) {
+      e.preventDefault()
+      let { x, y, w, h } = initialBox
+      let dx = (e.pageX - mouseX) / bounds.width
+      let dy = (e.pageY - mouseY) / bounds.height
+      this.setState({
+        box: {
+          x: clamp(x + dx, 0, 1.0 - w),
+          y: clamp(y + dy, 0, 1.0 - h),
+          w,
+          h,
+        }
+      })
+    }
+  }
+
+  handleMouseUp(e) {
+    const { onCrop } = this.props
+    const { dragging, draggingBox, bounds, box } = this.state
+    if (!dragging && !draggingBox) return
+    e.preventDefault()
+    const { x, y, w, h } = box
+    let url = window.location.pathname
+    this.setState({
+      dragging: false,
+      draggingBox: false,
+    })
+    if (w < 10 / bounds.width || h < 10 / bounds.height) {
+      this.setState({ box: { ...defaultState.box }})
+      onCrop({})
+    } else {
+      // pass the box dimensions up - do the search again
+      onCrop(box)
+    }
+  }
+
+  render() {
+    const { url } = this.props
+    const { bounds, box } = this.state
+    const { x, y, w, h } = box
+    return (
+      <div className="imageSelection">
+        <img
+          src={url}
+          ref={ref => this.imgRef = ref}
+          onMouseDown={this.handleMouseDown}
+          onLoad={this.handleLoad.bind(this)}
+          crossOrigin='anonymous'
+        />
+        {!!w &&
+          <div
+            className="box"
+            style={{
+              left: x * bounds.width,
+              top: y * bounds.height,
+              width: w * bounds.width,
+              height: h * bounds.height,
+            }}
+            onMouseDown={this.handleMouseDownOnBox}
+          />
+        }
+      </div>
+    )
+  }
+}
+
+const boxToFixed = ({ x, y, w, h }) => ({
+  x: x.toFixed(3),
+  y: y.toFixed(3),
+  w: w.toFixed(3),
+  h: h.toFixed(3),
+})
diff --git a/animism-align/frontend/app/views/media/components/media.formVideo.js b/animism-align/frontend/app/views/media/components/media.formVideo.js
new file mode 100644
index 0000000..c6b1cf9
--- /dev/null
+++ b/animism-align/frontend/app/views/media/components/media.formVideo.js
@@ -0,0 +1,111 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import VimeoPlayer from '@u-wave/react-vimeo'
+
+import { capitalize } from 'app/utils'
+import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+
+import { getVimeoMetadata } from 'app/views/media/media.actions'
+
+export default class MediaVideoForm extends Component {
+  state = {
+  }
+
+  constructor(props) {
+    super(props)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+  }
+
+  handleChange(e) {
+    let { name, value } = e.target
+    return this.handleSelect(name, value)
+  }
+
+  handleSelect(name, value) {
+    value = value.trim()
+    if (name === 'url') {
+      getVimeoMetadata(value)
+      .then(data => {
+        console.log('video metadata', data)
+        this.props.onChange(name, value)
+        setTimeout(() => {
+          this.props.onSettingsChange('video', {
+            thumbnail_url: data.thumbnail_url,
+            duration: data.duration,
+            video_id: data.video_id,
+          })
+        }, 20)
+      })
+    } else {
+      this.props.onChange(name, value)
+    }
+  }
+
+  handleSettingsChange(e) {
+    let { name, value } = e.target
+    this.props.onSettingsChange(name, value)
+  }
+
+  handleSettingsSelect(name, value) {
+    this.props.onSettingsChange(name, value)
+  }
+
+  render() {
+    const { data } = this.props
+    return (
+      <div className='videoForm'>
+        <TextInput
+          title="Video URL"
+          name="url"
+          required
+          data={data}
+          onChange={this.handleChange}
+          autoComplete="off"
+        />
+
+        {data.url &&
+          <div>
+            <LabelDescription className='video'>
+              <VimeoPlayer video={data.url} />
+            </LabelDescription>
+
+            {data.settings.video && data.settings.video.thumbnail &&
+              <LabelDescription className='thumbnail'>
+                <img src={data.settings.video.thumbnail} />
+              </LabelDescription>
+            }
+
+            <TextInput
+              title="Start time"
+              name="video_start_time"
+              data={data.settings}
+              placeholder="0:00"
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+
+            <TextInput
+              title="End time"
+              name="video_end_time"
+              data={data.settings}
+              placeholder="0:00"
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+
+            <TextInput
+              title="Original duration"
+              name="original_duration"
+              data={data.settings}
+              placeholder="0:00"
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+          </div>
+        }
+      </div>
+    )
+  }
+}
diff --git a/animism-align/frontend/app/views/media/components/media.indexOptions.js b/animism-align/frontend/app/views/media/components/media.indexOptions.js
new file mode 100644
index 0000000..09a0f74
--- /dev/null
+++ b/animism-align/frontend/app/views/media/components/media.indexOptions.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import { Select, Checkbox } from 'app/common'
+
+const thumbnailOptions = [
+  { name: 'th', label: 'Thumbnails', },
+  { name: 'sm', label: 'Small', },
+  { name: 'md', label: 'Medium', },
+  { name: 'lg', label: 'Large', },
+  { name: 'orig', label: 'Original', },
+]
+
+const sortOptions = [
+  { name: 'id-asc', label: 'Most recent' },
+  { name: 'id-desc', label: 'Oldest first' },
+  { name: 'username-asc', label: 'Username (A-Z)' },
+  { name: 'username-desc', label: 'Username (Z-A)' },
+  { name: 'author-asc', label: 'Author (A-Z)' },
+  { name: 'author-desc', label: 'Author (Z-A)' },
+  { name: 'title-asc', label: 'Title (A-Z)' },
+  { name: 'title-desc', label: 'Title (Z-A)' },
+  // { name: '-asc', label: '' },
+  // { name: '-desc', label: '' },
+  // { name: '-asc', label: '' },
+  // { name: '-desc', label: '' },
+  // { name: '-asc', label: '' },
+  // { name: '-desc', label: '' },
+]
+
+class IndexOptions extends Component {
+  render() {
+    const { options } = this.props
+    return (
+      <div className='row menubar'>
+        <div />
+        <Select
+          name={'sort'}
+          options={sortOptions}
+          selected={options.sort}
+          onChange={actions.upload.updateOption}
+        />
+        <Select
+          name={'thumbnailSize'}
+          options={thumbnailOptions}
+          selected={options.thumbnailSize}
+          onChange={actions.upload.updateOption}
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  options: state.upload.options,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(IndexOptions)
diff --git a/animism-align/frontend/app/views/media/components/media.menu.js b/animism-align/frontend/app/views/media/components/media.menu.js
new file mode 100644
index 0000000..b782cdc
--- /dev/null
+++ b/animism-align/frontend/app/views/media/components/media.menu.js
@@ -0,0 +1,58 @@
+import React, { Component } from 'react'
+import { Route, Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+import actions from 'app/actions'
+import { MenuButton, FileInput } from 'app/common'
+
+const mapStateToProps = state => ({
+  media: state.media,
+})
+
+export default class MediaMenu extends Component {
+  render() {
+    return (
+      <div className='menuButtons'>
+        <Route exact path='/media/:id/show/' component={MediaShowMenu} />
+        <Route exact path='/media/:id/edit/' component={MediaEditMenu} />
+        <Route exact path='/media/new/' component={MediaNewMenu} />
+        <Route exact path='/media/' component={MediaIndexMenu} />
+      </div>
+    )
+  }
+}
+
+const MediaIndexMenu = () => ([
+  <MenuButton key='new' name="new" href="/media/new/" />,
+])
+
+const MediaShowMenu = connect(mapStateToProps)((props) => ([
+  <MenuButton key='back' name="back" href="/media/" />,
+  <MenuButton key='edit' name="edit" href={"/media/" + props.match.params.id + "/edit/"} />,
+  <MenuButton key='delete' name="delete" onClick={() => {
+    const { res: media } = props.media.show
+    if (confirm("Really delete this media?")) {
+      actions.media.destroy(media).then(() => {
+        history.push('/media/')
+      })
+    }
+  }} />,
+]))
+
+const MediaNewMenu = (props) => ([
+  <MenuButton key='back' name="back" href="/media/" />,
+])
+
+const MediaEditMenu = connect(mapStateToProps)((props) => ([
+  <MenuButton key='back' name="back" href="/media/" />,
+  <MenuButton key='copy' name="copy" href={"/media/" + props.match.params.id + '/copy/'} label="Make a copy" />,
+  <MenuButton key='delete' name="delete" onClick={() => {
+    const { res: media } = props.media.show
+    if (confirm("Really delete this media?")) {
+      actions.media.destroy(media).then(() => {
+        history.push('/media/')
+      })
+    }
+  }} />,
+]))
diff --git a/animism-align/frontend/app/views/media/containers/media.edit.js b/animism-align/frontend/app/views/media/containers/media.edit.js
new file mode 100644
index 0000000..cf5f671
--- /dev/null
+++ b/animism-align/frontend/app/views/media/containers/media.edit.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+import actions from 'app/actions'
+
+import { Loader } from 'app/common'
+
+import MediaForm from '../components/media.form'
+import MediaMenu from '../components/media.menu'
+
+class MediaEdit extends Component {
+  componentDidMount() {
+    console.log(this.props.match.params.id)
+    actions.media.show(this.props.match.params.id)
+  }
+
+  handleSubmit(data) {
+    actions.media.update(data)
+      .then(response => {
+        // response
+        console.log(response)
+        history.push('/media/')
+      })
+  }
+
+  render() {
+    const { show } = this.props.media
+    if (show.loading || !show.res) {
+      return (
+        <div className='form'>
+          <Loader />
+        </div>
+      )
+    }
+    return (
+      <div className='row formContainer'>
+        <MediaMenu mediaActions={this.props.mediaActions} />
+        <MediaForm
+          data={show.res}
+          onSubmit={this.handleSubmit.bind(this)}
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  media: state.media,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // mediaActions: bindActionCreators({ ...mediaActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(MediaEdit)
diff --git a/animism-align/frontend/app/views/media/containers/media.index.js b/animism-align/frontend/app/views/media/containers/media.index.js
new file mode 100644
index 0000000..eaf9db2
--- /dev/null
+++ b/animism-align/frontend/app/views/media/containers/media.index.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+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 MediaIndexOptions from '../components/media.indexOptions'
+import MediaMenu from '../components/media.menu'
+
+// const { result, collectionLookup } = this.props
+
+class MediaIndex extends Component {
+  componentDidMount() {
+    // this.fetch(false)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.media.options.sort !== prevProps.media.options.sort) {
+      this.fetch(false)
+    }
+  }
+
+  fetch(load_more) {
+    const { options, index } = this.props.media
+    const { order: index_order } = index
+    const [ sort, order ] = options.sort.split(' ')
+    actions.media.index({
+      sort, order, limit: 5000, // offset: load_more ? index_order.length : 0,
+    }, load_more)
+  }
+
+  render() {
+    const { mediaActions } = this.props
+    const { options } = this.props.media
+    const { loading, lookup, order } = this.props.media.index
+    if (loading) {
+      return (
+        <section>
+          <MediaIndexOptions />
+          <div className="row">
+            {order && !!order.length &&
+              <div className={'results ' + options.thumbnailSize}>
+                {order.map(id => <MediaItem key={id} data={lookup[id]} />)}
+              </div>
+            }
+          </div>
+          <Loader />
+        </section>
+      )
+    }
+    if (!lookup || !order.length) {
+      return (
+        <section>
+          <MediaIndexOptions />
+          <div className="row">
+            <MediaMenu />
+            <p className='gray'>
+              {"No media"}
+            </p>
+          </div>
+        </section>
+      )
+    }
+    return (
+      <section>
+        <MediaIndexOptions />
+        <div className="row">
+          <MediaMenu />
+          <div className={'results ' + options.thumbnailSize}>
+            <h2>Images</h2>
+            {order.filter(id => lookup[id].type === 'image').map(id => <MediaItem key={id} data={lookup[id]} />)}
+            <h2>Video</h2>
+            {order.filter(id => lookup[id].type === 'video').map(id => <MediaItem key={id} data={lookup[id]} />)}
+          </div>
+        </div>
+        {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>}
+      </section>
+    )
+  }
+}
+
+const MediaItem = ({ data }) => {
+  // console.log(data)
+  return (
+    <div className='cell'>
+      <div className='img'>
+        <Link to={"/media/" + data.id + "/edit/"}>
+          <img src={thumbnailURL(data)} alt={data.title} />
+        </Link>
+      </div>
+      <div className='meta center'>
+        <div>
+          <i>{data.title}</i><br />
+          {data.author}<br />
+          {data.date}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const mapStateToProps = state => ({
+  media: state.media,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(MediaIndex)
diff --git a/animism-align/frontend/app/views/media/containers/media.new.js b/animism-align/frontend/app/views/media/containers/media.new.js
new file mode 100644
index 0000000..c193c2f
--- /dev/null
+++ b/animism-align/frontend/app/views/media/containers/media.new.js
@@ -0,0 +1,81 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+import actions from 'app/actions'
+
+import MediaForm from '../components/media.form'
+import MediaMenu from '../components/media.menu'
+
+class MediaNew extends Component {
+  state = {
+    loading: true,
+    initialData: {},
+  }
+
+  componentDidMount() {
+    // console.log(this.props.match.params.id)
+    if (this.props.match.params && this.props.match.params.id) {
+      actions.media.show(this.props.match.params.id)
+      .then(data => {
+        const { id, ...initialData } = data.res
+        delete initialData.settings.video
+        delete initialData.settings.crop
+        delete initialData.settings.display
+        delete initialData.settings.fullsize
+        delete initialData.settings.thumbnail
+        delete initialData.settings.bibliography
+        console.log("copying", id)
+        this.setState({
+          loading: false, 
+          initialData,
+        })
+      })
+    } else {
+      this.setState({ loading: false })
+    }
+  }
+
+  handleSubmit(data) {
+    console.log(data)
+    actions.media.create(data)
+      .then(res => {
+        console.log(res)
+        if (res.res && res.res.id) {
+          history.push('/media/')
+        }
+      })
+      .catch(err => {
+        console.error('error')
+      })
+  }
+
+  render() {
+    if (this.state.loading) {
+      return (
+        <div className='row formContainer' />
+      )      
+    }
+    return (
+      <div className='row formContainer'>
+        <MediaMenu />
+        <MediaForm
+          isNew
+          data={this.state.initialData}
+          onSubmit={this.handleSubmit.bind(this)}
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  media: state.media,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(MediaNew)
diff --git a/animism-align/frontend/app/views/media/media.actions.js b/animism-align/frontend/app/views/media/media.actions.js
new file mode 100644
index 0000000..a6d9bbd
--- /dev/null
+++ b/animism-align/frontend/app/views/media/media.actions.js
@@ -0,0 +1,9 @@
+import * as types from 'app/types'
+import { capitalize, api } from 'app/utils'
+
+export const getVimeoMetadata = url => {
+  return api(() => {}, types.vimeo, 'vimeo', 'https://vimeo.com/api/oembed.json', { url })
+  .then(data => {
+    return data
+  })
+}
diff --git a/animism-align/frontend/app/views/media/media.container.js b/animism-align/frontend/app/views/media/media.container.js
new file mode 100644
index 0000000..b597a6c
--- /dev/null
+++ b/animism-align/frontend/app/views/media/media.container.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import { Route, Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import './media.css'
+
+import actions from 'app/actions'
+
+import MediaIndex from './containers/media.index'
+// import MediaShow from './containers/media.show'
+import MediaNew from './containers/media.new'
+import MediaEdit from './containers/media.edit'
+
+class Container extends Component {
+  render() {
+    return (
+      <div className='media'>
+        <Route exact path='/media/:id/copy/' component={MediaNew} />
+        <Route exact path='/media/:id/edit/' component={MediaEdit} />
+        <Route exact path='/media/new/' component={MediaNew} />
+        <Route exact path='/media/' component={MediaIndex} />
+      </div>
+    )
+  }
+}
+/*
+        <Route exact path='/media/:id/show/' component={MediaShow} />
+*/
+const mapStateToProps = state => ({
+  media: state.media,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Container)
diff --git a/animism-align/frontend/app/views/media/media.css b/animism-align/frontend/app/views/media/media.css
new file mode 100644
index 0000000..a2d95c8
--- /dev/null
+++ b/animism-align/frontend/app/views/media/media.css
@@ -0,0 +1,70 @@
+.app > .media {
+  width: 100%;
+  height: calc(100% - 3.125rem);
+  overflow: scroll;
+}
+
+.results .cell {
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}
+.results h2 {
+  display: block;
+  width: 100%;
+}
+.media .results .meta > div {
+  max-width: 100%;
+}
+
+/* new / edit media forms */
+
+.formContainer {
+  padding-top: 1rem;
+}
+
+.imageForm,
+.videoForm {
+  padding: 1rem 1rem 0.5rem 1rem;
+  margin: 1rem 0;
+  position: relative;
+  left: -1rem;
+  border-radius: 10px;
+}
+
+/* image form */
+
+.imageForm {
+  background: #315;
+}
+.imageForm .fileInput .row {
+  position: relative;
+}
+
+/* video form */
+
+.videoForm {
+  background: #314;
+}
+.videoForm .thumbnail img {
+  max-height: 200px;
+}
+
+/* image crop */
+
+.imageSelection {
+  width: 30rem;
+  position: relative;
+}
+.imageSelection img {
+  display: block;
+  max-width: 100%;
+  max-height: 20rem;
+}
+.imageSelection img.loading {
+  opacity: 0.5;
+}
+.imageSelection .box {
+  position: absolute;
+  background: rgba(255,32,64,0.05);
+  border: 1px solid #f24;
+}
diff --git a/animism-align/frontend/app/views/media/media.reducer.js b/animism-align/frontend/app/views/media/media.reducer.js
new file mode 100644
index 0000000..f13f9de
--- /dev/null
+++ b/animism-align/frontend/app/views/media/media.reducer.js
@@ -0,0 +1,22 @@
+import * as types from 'app/types'
+import { session, getDefault, getDefaultInt } from 'app/session'
+
+import { crudState, crudReducer } from 'app/api/crud.reducer'
+
+const initialState = crudState('media', {
+  options: {
+    sort: 'author asc',
+    thumbnailSize: getDefault('upload.thumbnailSize', 'small'),
+  }
+})
+
+const reducer = crudReducer('media')
+
+export default function mediaReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  state = reducer(state, action)
+  switch (action.type) {
+    default:
+      return state
+  }
+}
diff --git a/animism-align/frontend/app/views/nav/header.component.js b/animism-align/frontend/app/views/nav/header.component.js
new file mode 100644
index 0000000..b03d833
--- /dev/null
+++ b/animism-align/frontend/app/views/nav/header.component.js
@@ -0,0 +1,42 @@
+import React from 'react'
+// import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import PlayButton from 'app/views/align/components/player/playButton.component'
+
+import './nav.css'
+
+function Header(props) {
+  return (
+    <header>
+      <PlayButton />
+      <div>
+        <Link to="/align">Align</Link>
+        <Link to="/paragraph">Transcript</Link>
+        <Link to="/media">Media</Link>
+      </div>
+    </header>
+  )
+}
+
+// const changeUsername = () => {
+//   const username = prompt("Please enter your username:", session('username'))
+//   if (username && username.length) {
+//     session.set('username', username)
+//     document.querySelector('Header div span').innerText = ' → ' + username // very naughty
+//   }
+// }
+
+
+const mapStateToProps = (state) => ({
+  // auth: state.auth,
+  site: state.site,
+  // username: session.get('username'),
+  // isAuthenticated: state.auth.isAuthenticated,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header) 
diff --git a/animism-align/frontend/app/views/nav/nav.css b/animism-align/frontend/app/views/nav/nav.css
new file mode 100644
index 0000000..485ace2
--- /dev/null
+++ b/animism-align/frontend/app/views/nav/nav.css
@@ -0,0 +1,73 @@
+/* header */
+
+header {
+  height: 3.125rem;
+  font-size: 0.875rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(32,16,64,0.8);
+  color: white;
+  z-index: 50;
+  position: relative;
+}
+header b {
+  font-weight: 900;
+}
+header a {
+  color: rgba(255,255,255,0.95);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+header > div:first-child {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 1.5rem;
+}
+header > div:last-child {
+  padding-right: 1.5rem;
+}
+header > div > button {
+  padding: 0.25rem;
+  margin: 0 0 0 0.5rem;
+  background: #000;
+  border-color: #888;
+  color: #888;
+}
+header > div > button:hover {
+  border-color: #fff;
+  color: #fff;
+}
+header > div:last-child a {
+  padding: 0.5rem;
+}
+header .btn-link:focus,
+header .btn-link:hover,
+header .btn-link:active,
+header a:focus,
+header a:hover,
+header a:active {
+  text-decoration: none;
+  color: white;
+}
+header a:focus,
+header a:hover,
+header a:active {
+  color: white;
+}
+.menuToggle {
+  width: 1.625rem;
+  height: 1.625rem;
+  cursor: pointer;
+  line-height: 1;
+}
+header a.navbar-brand {
+  font-size: .8rem;
+}
+
+header .username {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.form.js b/animism-align/frontend/app/views/paragraph/components/paragraph.form.js
new file mode 100644
index 0000000..751ec7f
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.form.js
@@ -0,0 +1,87 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import { clamp, timestamp, capitalize } from 'app/utils'
+import { Select } from 'app/common'
+
+const PARAGRAPH_TYPES = [
+  'paragraph', 'blockquote', 'hidden',
+].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
+
+class ParagraphForm extends Component {
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+  componentDidMount() {
+    if (this.textareaRef && this.textareaRef.current) {
+      this.textareaRef.current.focus()
+    }
+  }
+  handleChange(e) {
+    const { name, value } = e.target
+    this.handleSelect(name, value)
+  }
+  handleSelect(name, value) {
+    const { onUpdate, paragraph } = this.props
+    onUpdate({
+      ...paragraph,
+      [name]: value,
+    })
+  }
+  handleSubmit() {
+    const { paragraph, onClose } = this.props
+    actions.paragraph.update(paragraph)
+      .then(response => {
+        console.log(response)
+        onClose()
+      })
+  }
+  render() {
+    const { paragraph, y } = this.props
+    return (
+      <div
+        className='paragraphForm'
+        style={{
+          top: y,
+        }}
+      >
+        {this.renderButtons()}
+      </div>
+    )
+  }
+  renderButtons() {
+    const { paragraph } = this.props
+    return (
+      <div className='row buttons'>
+        <div className='row'>
+          <Select
+            name='type'
+            selected={paragraph.type}
+            options={PARAGRAPH_TYPES}
+            defaultOption='text'
+            onChange={this.handleSelect}
+          />
+          <div className='ts'>{timestamp(paragraph.start_ts, 1, true)}</div>
+        </div>
+        <div>
+          <button onClick={this.handleSubmit}>Save</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParagraphForm)
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
new file mode 100644
index 0000000..1b8a0ac
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -0,0 +1,165 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+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'
+
+const MEDIA_TYPES = new Set([
+  'image', 'gallery', 'vitrine',
+  'video',
+])
+
+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 => {
+      if (floatLTE(paragraph.start_ts, play_ts) && floatLT(play_ts, paragraph.end_ts)) {
+        this.setCurrentAnnotation(paragraph, play_ts)
+        return true
+      }
+      return false
+    })
+    if (!insideParagraph) {
+      this.setState({
+        currentParagraph: -1,
+        currentAnnotation: -1,
+      })
+    }
+  }
+
+  setCurrentAnnotation(paragraph, play_ts) {
+    const { id: currentParagraph, annotations } = paragraph
+    let currentAnnotation
+    let annotation
+    let i = 0
+    let len = annotations.length
+    for (let i = 0; i < len - 1; i++) {
+      if (floatLT(play_ts, annotations[i+1].start_ts)) {
+        currentAnnotation = annotations[i].id
+        break
+      }
+    }
+    if (!currentAnnotation) {
+      currentAnnotation = annotations[len-1].id
+    }
+    this.setState({ currentParagraph, currentAnnotation })
+  }
+
+  build() {
+    const { order: annotationOrder, lookup: annotationLookup } = this.props.annotation
+    const { lookup: paragraphLookup } = this.props.paragraph
+    let currentParagraph = {}
+    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.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: [],
+        }
+        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
+    } = this.props
+    const { paragraphs, currentParagraph, currentAnnotation } = this.state
+    return paragraphs.map(paragraph => {
+      if (selectedParagraph && selectedParagraph.id === paragraph.id) {
+        paragraph = selectedParagraph
+      }
+      if (paragraph.type in paragraphElementLookup) {
+        const ParagraphElement = paragraphElementLookup[paragraph.type]
+        return (
+          <ParagraphElement
+            key={paragraph.id}
+            paragraph={paragraph}
+            media={media}
+            currentParagraph={paragraph.id === currentParagraph}
+            currentAnnotation={paragraph.id === currentParagraph && currentAnnotation}
+            onAnnotationClick={onAnnotationClick}
+            onDoubleClick={onParagraphDoubleClick}
+          />
+        )
+      } else {
+        return <div key={paragraph.id}>{'(waiting to implement' + paragraph.type + ')'}</div>
+      }
+    })
+  }
+}
+
+const getParagraphType = (annotation, paragraph) => {
+  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,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParagraphList)
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
new file mode 100644
index 0000000..62b4a49
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
@@ -0,0 +1,22 @@
+import React from 'react'
+
+import {
+  Paragraph, ParagraphHeader
+} from './paragraphTypes.text'
+
+import {
+  MediaVideo
+} from './paragraphTypes.video'
+
+import {
+  MediaImage
+} from './paragraphTypes.image'
+
+export const paragraphElementLookup = {
+  paragraph: React.memo(Paragraph),
+  hidden: React.memo(Paragraph),
+  blockquote: React.memo(Paragraph),
+  header: React.memo(ParagraphHeader),
+  video: React.memo(MediaVideo),
+  image: React.memo(MediaImage),
+}
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.image.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.image.js
new file mode 100644
index 0000000..36c72e9
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.image.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  if (!media.lookup) return <div />
+  const className = currentParagraph ? 'media image current' : 'media image'
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+  if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
+  return (
+    <div
+      className={className}
+      onDoubleClick={e => onDoubleClick(e, paragraph)}
+    >
+      <img src={item.settings.display.url} />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
new file mode 100644
index 0000000..c2ebcd7
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+
+export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  let className = paragraph.type
+  if (className !== 'paragraph') className += ' paragraph'
+  if (currentParagraph) className += ' current'
+  return (
+    <div
+      className={className}
+      onDoubleClick={e => onDoubleClick(e, paragraph)}
+    >
+      {paragraph.annotations.map(annotation => (
+        <span
+          key={annotation.id}
+          className={annotation.id === currentAnnotation ? 'current' : ''}
+          onClick={e => onAnnotationClick(e, paragraph, annotation)}
+          dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export const ParagraphHeader = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  let className = currentParagraph ? 'header current' : 'header'
+  const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
+  return (
+    <div
+      className={className}
+      onDoubleClick={e => onDoubleClick(e, paragraph)}
+    >
+      {text}
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.video.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.video.js
new file mode 100644
index 0000000..423864b
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.video.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+
+import VimeoPlayer from '@u-wave/react-vimeo'
+
+export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  if (!media.lookup) return <div />
+  const className = currentParagraph ? 'media current' : 'media'
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+  if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
+  return (
+    <div
+      className={className}
+      onDoubleClick={e => onDoubleClick(e, paragraph)}
+    >
+      <VimeoPlayer video={item.url} muted width="650" />
+    </div>
+  )
+}
diff --git a/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js b/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
new file mode 100644
index 0000000..12ab618
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import ParagraphForm from '../components/paragraph.form'
+import ParagraphList from '../components/paragraph.list'
+import { paragraphElementLookup } from '../components/paragraphTypes'
+
+class ParagraphEditor extends Component {
+  state = {
+    selectedParagraph: null,
+    selectedParagraphOffset: 0,
+  }
+  
+  constructor(props) {
+    super(props)
+    this.handleAnnotationClick = this.handleAnnotationClick.bind(this)
+    this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this)
+    this.handleCloseParagraphForm = this.handleCloseParagraphForm.bind(this)
+    this.updateSelectedParagraph = this.updateSelectedParagraph.bind(this)
+  }
+  
+  handleAnnotationClick(e, paragraph, annotation){
+    actions.audio.seek(annotation.start_ts)
+  }
+
+  handleParagraphDoubleClick(e, paragraph) {
+    console.log(e.target.parentNode)
+    let paragraphNode = e.target
+    if (!paragraphNode.classList.contains('paragraph')) {
+      paragraphNode = paragraphNode.parentNode
+    }
+    this.setState({
+      selectedParagraph: { ...paragraph },
+      selectedParagraphOffset: paragraphNode.offsetTop
+    })
+  }
+
+  updateSelectedParagraph(selectedParagraph) {
+    this.setState({ selectedParagraph })
+  }
+
+  handleCloseParagraphForm() {
+    this.setState({ selectedParagraph: null })
+  }
+
+  render() {
+    // const { media } = this.props
+    const { paragraphs, selectedParagraph, currentParagraph, currentAnnotation } = this.state
+    return (
+      <div className='paragraphs'>
+        <div className='content'>
+          <ParagraphList
+            paragraphElementLookup={paragraphElementLookup}
+            selectedParagraph={selectedParagraph}
+            onAnnotationClick={this.handleAnnotationClick}
+            onParagraphDoubleClick={this.handleParagraphDoubleClick}
+          />
+          {selectedParagraph &&
+            <ParagraphForm
+              paragraph={selectedParagraph}
+              onUpdate={this.updateSelectedParagraph}
+              onClose={this.handleCloseParagraphForm}
+              y={selectedParagraphOffset}
+            />
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  // paragraph: state.paragraph.index,
+  // annotation: state.annotation.index,
+  // audio: state.audio,
+  // media: state.media.index,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParagraphEditor)
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.container.js b/animism-align/frontend/app/views/paragraph/paragraph.container.js
new file mode 100644
index 0000000..ea1c797
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/paragraph.container.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import './paragraph.css'
+
+import actions from 'app/actions'
+import { Loader } from 'app/common'
+
+import ParagraphEditor from './containers/paragraphEditor.container'
+
+class ParagraphContainer extends Component {
+  componentDidMount() {
+    this.bind()
+  }
+  componentWillUnmount() {
+    this.unbind()
+  }
+  bind() {
+    document.addEventListener('keydown', this.handleKeydown)
+  }
+  unbind() {
+    document.removeEventListener('keydown', this.handleKeydown)
+  }
+  handleKeydown(e) {
+    if (document.activeElement !== document.body) {
+      return
+    }
+    // console.log(e.keyCode)
+    switch (e.keyCode) {
+      case 32: // spacebar
+        e.preventDefault()
+        actions.audio.toggle()
+        break
+      case 37: // left
+      case 38: // up
+        e.preventDefault()
+        actions.audio.jump(-5.0)
+        break
+      case 39: // right
+      case 40: // down
+        e.preventDefault()
+        actions.audio.jump(5.0)
+        break
+    }
+  }
+  render() {
+    if (!this.props.annotation.lookup || !this.props.paragraph.lookup) {
+      return <div className='body loading'><Loader /></div>
+    }
+    return (
+      <div className='body'>
+        <ParagraphEditor />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  paragraph: state.paragraph.index,
+  annotation: state.annotation.index,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // alignActions: bindActionCreators({ ...alignActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParagraphContainer)
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.css b/animism-align/frontend/app/views/paragraph/paragraph.css
new file mode 100644
index 0000000..8cd502c
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/paragraph.css
@@ -0,0 +1,93 @@
+.paragraphs {
+  width: 100%;
+  height: calc(100% - 3.125rem);
+  overflow: scroll;
+  background: white;
+  color: black;
+  padding: 1rem;
+}
+
+/* general paragraph styles */
+
+.paragraphs .content {
+  font-family: 'Georgia', serif;
+  width: 650px;
+  margin: 0 auto;
+  padding-bottom: 6rem;
+  position: relative;
+}
+
+.paragraphs .content > div {
+  margin-bottom: 16px;
+}
+
+/* paragraph subtypes */
+
+.paragraphs .header {
+  font-size: 32px;
+}
+
+.paragraphs .paragraph {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.paragraphs .blockquote {
+  padding-left: 3rem;
+}
+
+.paragraphs .hidden {
+  opacity: 0.5;
+}
+
+/* media image */
+
+.paragraphs .media.image img {
+  width: 100%;
+}
+
+/* current paragraph */
+
+.paragraphs .paragraph.current {
+  background: rgba(0,0,0,0.0);
+}
+
+/* sentences */
+
+.paragraphs span {
+  margin-right: 4px;
+  cursor: pointer;
+}
+
+.paragraphs .paragraph .current {
+  box-shadow: -2px -3px 0 #fff,
+               2px -3px 0 #fff,
+              -2px  3px 0 #fff,
+               2px  3px 0 #fff;
+  box-decoration-break: clone;
+  background: black;
+  color: white;
+}
+
+/* paragraph form */
+
+.paragraphForm {
+  position: absolute;
+  right: -305px;
+  width: 300px;
+  padding: 0.5rem;
+  background: #ddd;
+  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+.paragraphForm .select div {
+  color: #ddd;
+  font-family: 'Roboto', sans-serif;
+}
+.paragraphForm .row {
+  justify-content: space-between;
+  align-items: center;
+}
+.paragraphForm .row > div {
+  display: flex;
+  align-items: center;
+}
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.reducer.js b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
new file mode 100644
index 0000000..c3babc8
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
@@ -0,0 +1,20 @@
+import * as types from 'app/types'
+import { session, getDefault, getDefaultInt } from 'app/session'
+
+import { crudState, crudReducer } from 'app/api/crud.reducer'
+
+const initialState = crudState('paragraph', {
+  options: {
+  }
+})
+
+const reducer = crudReducer('paragraph')
+
+export default function paragraphReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  state = reducer(state, action)
+  switch (action.type) {
+    default:
+      return state
+  }
+}
diff --git a/animism-align/frontend/app/views/site/component.template.js b/animism-align/frontend/app/views/site/component.template.js
new file mode 100644
index 0000000..5b22206
--- /dev/null
+++ b/animism-align/frontend/app/views/site/component.template.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+// import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+// import * as uploadActions from './upload.actions'
+
+class ComponentTemplate extends Component {
+  componentDidMount() {
+  }
+  render() {
+    const { } = this.props
+    return (
+      <div className="">
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+})
+
+const mapDispatchToProps = dispatch => ({
+  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ComponentTemplate)
diff --git a/animism-align/frontend/app/views/site/site.actions.js b/animism-align/frontend/app/views/site/site.actions.js
new file mode 100644
index 0000000..b894c64
--- /dev/null
+++ b/animism-align/frontend/app/views/site/site.actions.js
@@ -0,0 +1,14 @@
+import * as types from 'app/types'
+import { api, post, pad, preloadImage } from 'app/utils'
+
+export const loadPeaks = (asdf) => dispatch => {
+  api(dispatch, types.peaks, 'peaks', '/static/data_store/peaks/peaks.json')
+}
+
+export const loadText = (asdf) => dispatch => {
+  api(dispatch, types.text, 'text', '/static/data_store/peaks/text.txt')
+}
+
+export const updateText = text => dispatch => {
+  dispatch({ type: types.text.loaded, data: text })
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/site/site.reducer.js b/animism-align/frontend/app/views/site/site.reducer.js
new file mode 100644
index 0000000..fbb53fc
--- /dev/null
+++ b/animism-align/frontend/app/views/site/site.reducer.js
@@ -0,0 +1,24 @@
+import * as types from 'app/types'
+
+const initialState = {
+  peaks: { loading: true },
+  text: { loading: true },
+}
+
+export default function siteReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  switch (action.type) {
+    case types.peaks.loaded:
+      return {
+        ...state,
+        peaks: action.data,
+      }
+    case types.text.loaded:
+      return {
+        ...state,
+        text: action.data,
+      }
+    default:
+      return state
+  }
+}
diff --git a/animism-align/frontend/app/views/upload/components/upload.form.js b/animism-align/frontend/app/views/upload/components/upload.form.js
new file mode 100644
index 0000000..e35bfaa
--- /dev/null
+++ b/animism-align/frontend/app/views/upload/components/upload.form.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { MenuButton, FileInput } from 'app/common'
+
+export default class UploadForm extends Component {
+  render() {
+    return (
+      <div className='uploadForm'>
+        <MenuButton name="upload" label={false}>
+          <FileInput onChange={this.props.uploadActions.upload} />
+        </MenuButton>
+      </div>
+    )
+  }
+}
diff --git a/animism-align/frontend/app/views/upload/components/upload.index.js b/animism-align/frontend/app/views/upload/components/upload.index.js
new file mode 100644
index 0000000..d60231d
--- /dev/null
+++ b/animism-align/frontend/app/views/upload/components/upload.index.js
@@ -0,0 +1,98 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { uploadUri, formatDateTime } from 'app/utils'
+import { MenuButton, SmallMenuButton, Loader } from 'app/common'
+import actions from 'app/actions'
+
+import UploadIndexOptions from './upload.indexOptions'
+import UploadMenu from './upload.menu'
+
+// const { result, collectionLookup } = this.props
+
+export default class UploadIndex extends Component {
+  componentDidMount() {
+    this.fetch(false)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.upload.options.sort !== prevProps.upload.options.sort) {
+      this.fetch(false)
+    }
+  }
+
+  fetch(load_more) {
+    const { options, index } = this.props.upload
+    const { order: index_order } = index
+    const [ sort, order ] = options.sort.split('-')
+    actions.upload.index({
+      sort, order, limit: 50, offset: load_more ? index_order.length : 0,
+    }, load_more)
+  }
+
+  render() {
+    const { uploadActions } = this.props
+    const { options } = this.props.upload
+    const { loading, lookup, order } = this.props.upload.index
+    if (loading) {
+      return (
+        <section>
+          <UploadIndexOptions />
+          <div className="row">
+            {order && !!order.length &&
+              <div className={'results ' + options.thumbnailSize}>
+                {order.map(id => <UploadItem key={id} data={lookup[id]} />)}
+              </div>
+            }
+          </div>
+          <Loader />
+        </section>
+      )
+    }
+    if (!lookup || !order.length) {
+      return (
+        <section>
+          <UploadIndexOptions />
+          <div className="row">
+            <UploadMenu uploadActions={uploadActions} />
+            <p className='gray'>
+              {"No uploads"}
+            </p>
+          </div>
+        </section>
+      )
+    }
+    return (
+      <section>
+        <UploadIndexOptions />
+        <div className="row">
+          <UploadMenu uploadActions={uploadActions} />
+          <div className={'results ' + options.thumbnailSize}>
+            {order.map(id => <UploadItem key={id} data={lookup[id]} />)}
+          </div>
+        </div>
+        {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>}
+      </section>
+    )
+  }
+}
+
+const UploadItem = ({ data }) => {
+  // console.log(data)
+  // const imageUri = uploadUri(data)
+  return (
+    <div className='cell'>
+      <div className='img'>
+        <Link to={"/upload/" + data.id + "/show/"}>
+          <img src={data.url} alt={"Uploaded image"} />
+        </Link>
+      </div>
+      <div className='meta center'>
+        <div>
+          {formatDateTime(data.created_at)}
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/animism-align/frontend/app/views/upload/components/upload.indexOptions.js b/animism-align/frontend/app/views/upload/components/upload.indexOptions.js
new file mode 100644
index 0000000..75fdffc
--- /dev/null
+++ b/animism-align/frontend/app/views/upload/components/upload.indexOptions.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import { Select, Checkbox } from 'app/common'
+
+const thumbnailOptions = [
+  { name: 'th', label: 'Thumbnails', },
+  { name: 'sm', label: 'Small', },
+  { name: 'md', label: 'Medium', },
+  { name: 'lg', label: 'Large', },
+  { name: 'orig', label: 'Original', },
+]
+
+const sortOptions = [
+  { name: 'id-asc', label: 'Most recent' },
+  { name: 'id-desc', label: 'Oldest first' },
+  { name: 'username-asc', label: 'Username (A-Z)' },
+  { name: 'username-desc', label: 'Username (Z-A)' },
+  // { name: '-asc', label: '' },
+  // { name: '-desc', label: '' },
+  // { name: '-asc', label: '' },
+  // { name: '-desc', label: '' },
+  // { name: '-asc', label: '' },
+  // { name: '-desc', label: '' },
+]
+
+class IndexOptions extends Component {
+  render() {
+    const { options } = this.props
+    return (
+      <div className='row menubar'>
+        <div />
+        <Select
+          name={'sort'}
+          options={sortOptions}
+          selected={options.sort}
+          onChange={actions.upload.updateOption}
+        />
+        <Select
+          name={'thumbnailSize'}
+          options={thumbnailOptions}
+          selected={options.thumbnailSize}
+          onChange={actions.upload.updateOption}
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  options: state.upload.options,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(IndexOptions)
diff --git a/animism-align/frontend/app/views/upload/components/upload.menu.js b/animism-align/frontend/app/views/upload/components/upload.menu.js
new file mode 100644
index 0000000..485d06f
--- /dev/null
+++ b/animism-align/frontend/app/views/upload/components/upload.menu.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { MenuButton, FileInput } from 'app/common'
+
+import actions from 'app/actions'
+
+export default class UploadMenu extends Component {
+  render() {
+    return (
+      <div className='menuButtons'>
+        <MenuButton name="upload">
+          <FileInput onChange={this.props.uploadActions.upload} />
+        </MenuButton>
+      </div>
+    )
+  }
+}
diff --git a/animism-align/frontend/app/views/upload/components/upload.show.js b/animism-align/frontend/app/views/upload/components/upload.show.js
new file mode 100644
index 0000000..0498cac
--- /dev/null
+++ b/animism-align/frontend/app/views/upload/components/upload.show.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import { formatDate, formatTime, formatAge, uploadUri } from 'app/utils'
+import { history } from 'app/store'
+import { Loader, MenuButton } from 'app/common'
+
+class UploadShow extends Component {
+  componentDidMount() {
+    actions.upload.show(this.props.match.params.id)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.match.params.id !== this.props.match.params.id) {
+      actions.upload.show(this.props.match.params.id)
+    }
+  }
+
+  handleDestroy() {
+    const { res: data } = this.props.upload.show
+    if (confirm("Really delete this upload?")) {
+      actions.upload.destroy(data).then(() => {
+        history.push('/upload/')
+      })
+    }
+  }
+
+  render() {
+    const { show, destroy } = this.props.upload
+    if (show.loading || destroy.loading) {
+      return <Loader />
+    }
+    if (!show.loading && !show.res || show.not_found) {
+      return <div className='gray'>Upload {this.props.match.params.id} not found</div>
+    }
+    const { res: data } = show
+    return (
+      <section className="row uploadShow">
+        <div className="menuButtons">
+          <MenuButton name="delete" onClick={this.handleDestroy.bind(this)} />
+        </div>
+        <div>
+          <img src={data.url} />
+          <div className='byline'>
+            {'Uploaded by '}
+            {data.username}
+            {' on '}
+            {formatDate(data.created_at)}
+            {' at '}
+            {formatTime(data.created_at)}
+            {'. '}
+          </div>
+        </div>
+      </section>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  upload: state.upload,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // searchActions: bindActionCreators({ ...searchActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(UploadShow)
diff --git a/animism-align/frontend/app/views/upload/upload.actions.js b/animism-align/frontend/app/views/upload/upload.actions.js
new file mode 100644
index 0000000..73c8e16
--- /dev/null
+++ b/animism-align/frontend/app/views/upload/upload.actions.js
@@ -0,0 +1,18 @@
+import * as types from 'app/types'
+import { store, history } from 'app/store'
+import { api, post, pad, preloadImage } from 'app/utils'
+import actions from 'app/actions'
+import { session } from 'app/session'
+
+export const upload = (image, tag='upload') => dispatch => {
+  const formData = {
+    image,
+    tag,
+    username: 'animism', // session('username'),
+  }
+  // console.log(formData)
+  return actions.upload.upload(formData).then(data => {
+    // console.log(data.res)
+    return data.res
+  })
+}
diff --git a/animism-align/frontend/app/views/upload/upload.container.js b/animism-align/frontend/app/views/upload/upload.container.js
new file mode 100644
index 0000000..7753711
--- /dev/null
+++ b/animism-align/frontend/app/views/upload/upload.container.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { Route, Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import './upload.css'
+
+import actions from 'app/actions'
+import * as uploadActions from './upload.actions'
+
+import UploadMenu from './components/upload.menu'
+import UploadIndex from './components/upload.index'
+import UploadShow from './components/upload.show'
+
+class Container extends Component {
+  render() {
+    return (
+      <div className='row upload'>
+        <div>
+          <Route exact path='/upload/:id/show/' component={UploadShow} />
+          <UploadIndex {...this.props} />
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  upload: state.upload,
+})
+
+const mapDispatchToProps = dispatch => ({
+  uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Container)
diff --git a/animism-align/frontend/app/views/upload/upload.css b/animism-align/frontend/app/views/upload/upload.css
new file mode 100644
index 0000000..28ce33d
--- /dev/null
+++ b/animism-align/frontend/app/views/upload/upload.css
@@ -0,0 +1,182 @@
+.uploadShow {
+  margin-top: 1rem;
+}
+.uploadShow img {
+  max-width: 30rem;
+  max-height: 20rem;
+}
+.upload {
+  height: 100%;
+}
+.upload > div:last-child {
+  flex: 1;
+  width: 100%;
+}
+
+/* results */
+
+.resultsContainer {
+}
+.results {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+.results .result {
+  display: inline-block;
+  margin-right: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+.result > a {
+  display: block;
+}
+.result > a > div {
+  position: relative;
+}
+.result img {
+  max-width: 100%;
+  display: block;
+  cursor: pointer;
+}
+.result > a {
+  border: 2px solid transparent;
+}
+.results .active img,
+.desktop .result > a:hover {
+  border-color: #11f;
+}
+.results.th .result {
+  max-width: 10rem;
+}
+.results.sm .result {
+  max-width: 20rem;
+}
+.results.md .result {
+  max-width: 40rem;
+}
+.results.lg .result {
+  max-width: 80rem;
+}
+.results.orig .result {
+  max-width: 100%;
+}
+.results.th img {
+  max-height: 120px;
+}
+.results.sm img {
+  max-height: 160px;
+}
+.results.md img {
+  max-height: 480px;
+}
+.results.lg img {
+  max-height: 960px;
+}
+.results.orig img {
+  max-width: none;
+  max-height: none;
+}
+.results .img {
+  width: 100%;
+}
+.results .img > a {
+  display: inline-block;
+  position: relative;
+}
+.results .meta {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 0.75rem;
+  color: #888;
+  padding: 0.125rem;
+}
+.results .meta.center,
+.row.center {
+  align-items: center;
+}
+.results .meta > div {
+  overflow: hidden;
+  max-width: 75%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.results .meta > span {
+  padding-right: 0.125rem;
+}
+.results .meta .buttons {
+}
+.score.good {
+  color: #11f;
+  font-weight: bold;
+}
+.score.ok {
+  color: #44d;
+  font-weight: bold;
+}
+.score.poor {
+  color: #66b;
+}
+.score {
+  color: #888;
+}
+.resultGroup {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  position: relative;
+  border: 2px solid #888;
+  max-width: 20rem;
+  margin-right: 1.5rem;
+  margin-bottom: 1.5rem;
+  background: #fff;
+  box-shadow: 0 2px 4px #888;
+}
+.resultGroup .sha256 {
+  position: absolute;
+  background: white;
+  padding: 0.25rem 0.25rem 0rem 0.25rem;
+  left: 0.25rem;
+  top: -0.75rem;
+  font-size: 0.75rem;
+  color: #333;
+  text-transform: uppercase;
+  max-width: 95%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.results.grouped {
+  background: #fff;
+}
+.results.grouped.sm,
+.results.grouped.md,
+.results.grouped.lg,
+.results.grouped.orig {
+  flex-flow: column nowrap;
+}
+.results.th .resultGroup {
+  max-width: 33.5rem;
+}
+.results.sm .resultGroup {
+  max-width: 56rem;
+}
+.results.md .resultGroup {
+  max-width: 79rem;
+}
+.results.lg .resultGroup {
+  max-width: 100%;
+}
+.results.orig .resultGroup {
+  max-width: 100%;
+}
+.results .resultGroup .result {
+  margin: 0.5rem;
+}
+.loadMore {
+  width: 100%;
+}
+.loadMore button {
+  width: 100%;
+}
diff --git a/animism-align/frontend/app/views/upload/upload.reducer.js b/animism-align/frontend/app/views/upload/upload.reducer.js
new file mode 100644
index 0000000..818be88
--- /dev/null
+++ b/animism-align/frontend/app/views/upload/upload.reducer.js
@@ -0,0 +1,22 @@
+import * as types from 'app/types'
+import { session, getDefault, getDefaultInt } from 'app/session'
+
+import { crudState, crudReducer } from 'app/api/crud.reducer'
+
+const initialState = crudState('upload', {
+  options: {
+    sort: getDefault('upload.sort', 'id-desc'),
+    thumbnailSize: getDefault('upload.thumbnailSize', 'small'),
+  }
+})
+
+const reducer = crudReducer('upload')
+
+export default function uploadReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  state = reducer(state, action)
+  switch (action.type) {
+    default:
+      return state
+  }
+}
-- 
cgit v1.2.3-70-g09d2