From 37896f6960f8145a13e2943fbb0cde52da430d30 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 11 Mar 2021 14:38:02 +0100
Subject: move sidebar and timeline out of align folder

---
 .../app/views/editor/align/align.container.js      |   5 +-
 .../frontend/app/views/editor/align/align.css      |  73 --------
 .../align/components/sidebar/script.component.js   |  22 ---
 .../sidebar/tableOfContents.component.js           |  29 ---
 .../components/sidebar/waveUpload.component.js     | 157 ----------------
 .../align/components/timeline/cursor.component.js  |  26 ---
 .../components/timeline/cursorRegion.component.js  |  28 ---
 .../components/timeline/playCursor.component.js    |  31 ----
 .../align/components/timeline/ticks.component.js   |  88 ---------
 .../components/timeline/waveform.component.js      | 100 -----------
 .../editor/align/containers/sidebar.container.js   |  42 -----
 .../editor/align/containers/timeline.container.js  | 196 --------------------
 .../frontend/app/views/editor/align/sidebar.css    |  84 ---------
 .../editor/sidebar/components/script.component.js  |  22 +++
 .../components/tableOfContents.component.js        |  30 ++++
 .../sidebar/components/waveUpload.component.js     | 191 ++++++++++++++++++++
 .../app/views/editor/sidebar/sidebar.container.js  |  44 +++++
 .../frontend/app/views/editor/sidebar/sidebar.css  |  90 ++++++++++
 .../editor/timeline/components/cursor.component.js |  26 +++
 .../timeline/components/cursorRegion.component.js  |  28 +++
 .../timeline/components/playCursor.component.js    |  31 ++++
 .../editor/timeline/components/ticks.component.js  |  88 +++++++++
 .../timeline/components/waveform.component.js      | 100 +++++++++++
 .../views/editor/timeline/timeline.container.js    | 199 +++++++++++++++++++++
 .../app/views/editor/timeline/timeline.css         |  72 ++++++++
 25 files changed, 923 insertions(+), 879 deletions(-)
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/sidebar/script.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/timeline/cursor.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/timeline/cursorRegion.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/timeline/playCursor.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/timeline/ticks.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/components/timeline/waveform.component.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/containers/timeline.container.js
 delete mode 100644 animism-align/frontend/app/views/editor/align/sidebar.css
 create mode 100644 animism-align/frontend/app/views/editor/sidebar/components/script.component.js
 create mode 100644 animism-align/frontend/app/views/editor/sidebar/components/tableOfContents.component.js
 create mode 100644 animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js
 create mode 100644 animism-align/frontend/app/views/editor/sidebar/sidebar.container.js
 create mode 100644 animism-align/frontend/app/views/editor/sidebar/sidebar.css
 create mode 100644 animism-align/frontend/app/views/editor/timeline/components/cursor.component.js
 create mode 100644 animism-align/frontend/app/views/editor/timeline/components/cursorRegion.component.js
 create mode 100644 animism-align/frontend/app/views/editor/timeline/components/playCursor.component.js
 create mode 100644 animism-align/frontend/app/views/editor/timeline/components/ticks.component.js
 create mode 100644 animism-align/frontend/app/views/editor/timeline/components/waveform.component.js
 create mode 100644 animism-align/frontend/app/views/editor/timeline/timeline.container.js
 create mode 100644 animism-align/frontend/app/views/editor/timeline/timeline.css

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

diff --git a/animism-align/frontend/app/views/editor/align/align.container.js b/animism-align/frontend/app/views/editor/align/align.container.js
index 46954e8..d61eccd 100644
--- a/animism-align/frontend/app/views/editor/align/align.container.js
+++ b/animism-align/frontend/app/views/editor/align/align.container.js
@@ -2,10 +2,9 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
 import './align.css'
-import './sidebar.css'
 
-import Timeline from './containers/timeline.container.js'
-import Sidebar from './containers/sidebar.container.js'
+import Timeline from 'app/views/editor/timeline/timeline.container.js'
+import Sidebar from 'app/views/editor/sidebar/sidebar.container.js'
 
 class Container extends Component {
   componentDidMount() {
diff --git a/animism-align/frontend/app/views/editor/align/align.css b/animism-align/frontend/app/views/editor/align/align.css
index 58adcf8..83d3777 100644
--- a/animism-align/frontend/app/views/editor/align/align.css
+++ b/animism-align/frontend/app/views/editor/align/align.css
@@ -22,79 +22,6 @@
   height: calc(100% - 3rem);
 }
 
-/* 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;
-  pointer-events: none;
-}
-.ticks .tickLabel {
-  pointer-events: none;
-  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; 
-  user-select: none;
-}
-.timeline .cursor_region {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  border-top: 1px solid #33f;
-  border-bottom: 1px solid #33f;
-  background: rgba(32,64,255,0.2);
-}
-.timeline .cursor_region .tickLabel {
-  position: absolute;
-  top: 2px;
-  left: 6px;
-  user-select: none;
-}
-
 /* Audio player */
 
 .playButton {
diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/script.component.js b/animism-align/frontend/app/views/editor/align/components/sidebar/script.component.js
deleted file mode 100644
index d23b3da..0000000
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/script.component.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-
-const Script = ({ text }) => {
-  if (text.loading) return null
-  return (
-    <textarea 
-      className='script'
-      onChange={e => actions.site.updateText(e.target.value)}
-      value={text}
-    />
-  )
-}
-
-const mapStateToProps = state => ({
-  text: state.align.text,
-})
-
-export default connect(mapStateToProps)(Script)
diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js b/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js
deleted file mode 100644
index 8fb3d54..0000000
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
-
-import { ROMAN_NUMERALS } from 'app/constants'
-import actions from 'app/actions'
-
-class TableOfContents extends Component {
-  render() {
-    const { loading, order, lookup } = this.props.annotation
-    if (loading || !order) return null
-    const sectionIds = order.filter(id => lookup[id].type === "section_heading")
-    return (
-      <div className="sidebar-content toc">
-        {sectionIds.map((id, i) => (
-          <div key={id} onClick={() => actions.align.setScrollPosition(lookup[id].start_ts)}>
-            {ROMAN_NUMERALS[i]}{'. '}{lookup[id].text}
-          </div>
-        ))}
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  annotation: state.annotation.index,
-})
-
-export default connect(mapStateToProps)(TableOfContents)
diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js b/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
deleted file mode 100644
index 27047ef..0000000
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import extractPeaks from 'webaudio-peaks'
-
-import actions from 'app/actions'
-import { formatSize, timestampHMS } from 'app/utils'
-import { Loader } from 'app/common'
-
-class WaveUpload extends Component {
-  state = {
-    working: false,
-    status: "",
-    filename: "",
-    duration: 0,
-  }
-
-  upload(e) {
-    e.preventDefault()
-    document.body.className = ''
-    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
-    let i
-    let file
-    for (i = 0; i < files.length; i++) {
-      file = files[i]
-      if (file && file.type.match('image.*')) break
-    }
-    if (!file) {
-      console.log('No file specified')
-      return
-    }
-    this.setState({ working: true, status: "Loading MP3...", filename: file.name, size: file.size, duration: 0 })
-    const fileReader = new FileReader()
-    fileReader.onload = event => {
-      fileReader.onload = null
-      this.processAudioFile(file, event.target.result)
-    }
-    fileReader.readAsArrayBuffer(file)
-  }
-
-  processAudioFile(audioFile, arrayBuffer) {
-    this.setState({ working: true, status: "Extracting peaks..." })
-    var audioContext = new (window.AudioContext || window.webkitAudioContext)();
-    audioContext.decodeAudioData(arrayBuffer, (audioBuffer) => {
-      // buffer, samplesPerPixel, isMono, startOffset, endOffset, bitResolution
-      this.setState({ duration: audioBuffer.duration })
-      var peaks = extractPeaks(audioBuffer, 441, true);
-      console.log(peaks)
-      const array = Array.from(peaks.data[0])
-      const peaksBlob = new Blob([ JSON.stringify(array) ], {type: "application/json"});
-      this.uploadAudioAndPeaks(audioFile, peaksBlob)
-    })
-  }
-
-  uploadAudioAndPeaks(audioFile, peaksBlob) {
-    const { episode } = this.props
-    const updatedEpisode = { ...episode }
-    this.setState({ status: "Removing old files..." })
-    this.destroyTaggedFile('peaks')
-    this.destroyTaggedFile('audio')
-    .then(() => {
-      return this.uploadTaggedFile(peaksBlob, 'peaks', 'episode-' + this.props.episode.id + '-peaks.json')
-    })
-    .then(peaksResult => {
-      updatedEpisode.settings.peaks = peaksResult
-      return this.uploadTaggedFile(audioFile, 'audio', this.state.filename)
-    })
-    .then(audioResult => {
-      updatedEpisode.settings.audio = audioResult
-      return actions.episode.update(updatedEpisode)
-    })
-    .then(res => {
-      this.setState({ status: "Upload complete", working: false })
-    })
-  }
-
-  uploadTaggedFile(file, tag, fn) {
-    return new Promise((resolve, reject) => {
-      this.setState({ status: "Uploading " + tag + "..." })
-      const uploadData = {
-        tag,
-        file,
-        __file_filename: fn,
-        username: this.props.currentUser.username,
-      }
-      console.log(uploadData)
-      return actions.upload.upload(uploadData).then(data => {
-        console.log(data)
-        resolve(data.res)
-      })
-    })
-  }
-
-  destroyTaggedFile(tag) {
-    return new Promise((resolve, reject) => {
-      if (!this.props.episode.settings[tag]) {
-        return resolve();
-      }
-      actions.upload.destroy(this.props.episode.settings[tag])
-      .then(() => {
-        console.log('Destroy successful')
-        resolve()
-      })
-      .catch(() => {
-        console.log('Error deleting the image')
-        reject()
-      })
-    })
-  }
-
-  render() {
-    const { episode, peaks } = this.props
-    return (
-      <div className="sidebar-content wave-upload">
-        {peaks.length && (
-          <div>
-            Peaks: {peaks.length}
-          </div>
-        )}
-        <div className="uploadButton">
-          <button>
-            <span>
-              {episode.settings.audio
-                ? "Upload a new audio file"
-                : "Upload an audio file"
-              }
-            </span>
-          </button>
-          <input
-            type="file"
-            accept="audio/mp3"
-            onChange={this.upload.bind(this)}
-            required={this.props.required}
-          />
-        </div>
-        <small>Upload an MP3, encoded 192kbit constant bitrate, 44.1kHz stereo</small>
-        {this.state.status && (
-          <div className='status'>
-            {this.state.working && <Loader />}
-            <div className='status-message'>{this.state.status}</div>
-            {this.state.filename && <small>{this.state.filename}</small>}
-            {this.state.size && <small>{'Size: '}{formatSize(this.state.size)}</small>}
-            {!!this.state.duration && <small>{'Duration: '}{timestampHMS(this.state.duration)}</small>}
-          </div>
-        )}
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  peaks: state.align.peaks,
-  currentUser: state.auth.user,
-  project: state.site.project,
-  episode: state.site.episode,
-})
-
-export default connect(mapStateToProps)(WaveUpload)
diff --git a/animism-align/frontend/app/views/editor/align/components/timeline/cursor.component.js b/animism-align/frontend/app/views/editor/align/components/timeline/cursor.component.js
deleted file mode 100644
index 4a94100..0000000
--- a/animism-align/frontend/app/views/editor/align/components/timeline/cursor.component.js
+++ /dev/null
@@ -1,26 +0,0 @@
-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/editor/align/components/timeline/cursorRegion.component.js b/animism-align/frontend/app/views/editor/align/components/timeline/cursorRegion.component.js
deleted file mode 100644
index a0c9bd7..0000000
--- a/animism-align/frontend/app/views/editor/align/components/timeline/cursorRegion.component.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-
-import { ZOOM_STEPS } from 'app/constants'
-import { timestamp } from 'app/utils'
-
-const CursorRegion = ({ timeline }) => {
-  const { start_ts, zoom, cursor_region } = timeline
-  if (!cursor_region) return null
-  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
-  const duration = cursor_region.b_ts - cursor_region.a_ts
-  const y = (cursor_region.a_ts - start_ts) / secondsPerPixel
-  const height = (duration) / secondsPerPixel
-  return (
-    <div
-      className='cursor_region'
-      style={{
-        top: y,
-        height,
-      }}
-    >
-      <div className='tickLabel'>
-        {timestamp(duration, 1, true)}
-      </div>
-    </div>
-  )
-}
-
-export default CursorRegion
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/editor/align/components/timeline/playCursor.component.js b/animism-align/frontend/app/views/editor/align/components/timeline/playCursor.component.js
deleted file mode 100644
index 80da31f..0000000
--- a/animism-align/frontend/app/views/editor/align/components/timeline/playCursor.component.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-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,
-})
-
-export default connect(mapStateToProps)(PlayCursor)
diff --git a/animism-align/frontend/app/views/editor/align/components/timeline/ticks.component.js b/animism-align/frontend/app/views/editor/align/components/timeline/ticks.component.js
deleted file mode 100644
index 4530863..0000000
--- a/animism-align/frontend/app/views/editor/align/components/timeline/ticks.component.js
+++ /dev/null
@@ -1,88 +0,0 @@
-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/editor/align/components/timeline/waveform.component.js b/animism-align/frontend/app/views/editor/align/components/timeline/waveform.component.js
deleted file mode 100644
index 0161129..0000000
--- a/animism-align/frontend/app/views/editor/align/components/timeline/waveform.component.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-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}
-        onMouseDown={this.props.onMouseDown}
-        onMouseUp={this.props.onMouseUp}
-      />
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  timeline: state.align.timeline,
-  peaks: state.align.peaks,
-})
-
-export default connect(mapStateToProps)(Waveform)
diff --git a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js b/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
deleted file mode 100644
index 8ff8181..0000000
--- a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-// import { Link } from 'react-router-dom'
-
-import actions from 'app/actions'
-
-import Script from '../components/sidebar/script.component.js'
-import TableOfContents from '../components/sidebar/tableOfContents.component.js'
-import WaveUpload from '../components/sidebar/waveUpload.component.js'
-
-class Sidebar extends Component {
-  state = {
-    mode: "toc",
-  }
-  componentDidMount(){
-    if (!this.props.peaks.length) {
-      this.setState({ mode: "wav" })
-    }
-  }
-
-  render() {
-    const { mode } = this.state
-    return (
-      <div className='sidebar'>
-        <div className='buttons'>
-          <button onClick={() => this.setState({ mode: "txt" })}>text</button>
-          <button onClick={() => this.setState({ mode: "wav" })}>wav</button>
-          <button onClick={() => this.setState({ mode: "toc" })}>contents</button>
-        </div>
-        {mode === 'toc' && <TableOfContents />}
-        {mode === 'txt' && <Script />}
-        {mode === 'wav' && <WaveUpload />}
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  peaks: state.align.peaks,
-})
-
-export default connect(mapStateToProps)(Sidebar)
diff --git a/animism-align/frontend/app/views/editor/align/containers/timeline.container.js b/animism-align/frontend/app/views/editor/align/containers/timeline.container.js
deleted file mode 100644
index dbef60f..0000000
--- a/animism-align/frontend/app/views/editor/align/containers/timeline.container.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-
-import Annotations from 'app/views/editor/annotation/annotations.container'
-import Waveform from '../components/timeline/waveform.component'
-import Ticks from '../components/timeline/ticks.component'
-import Cursor from '../components/timeline/cursor.component'
-import PlayCursor from '../components/timeline/playCursor.component'
-import CursorRegion from '../components/timeline/cursorRegion.component'
-
-import { WAVEFORM_SIZE, ZOOM_STEPS, INNER_HEIGHT } from 'app/constants'
-import { clamp } from 'app/utils'
-import { positionToTime } from 'app/utils/align.utils'
-
-class Timeline extends Component {
-  state = {
-    dragging: false,
-    a_ts: -1,
-  }
-  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.handleTimelineMouseDown = this.handleTimelineMouseDown.bind(this)
-    this.handleTimelineMouseUp = this.handleTimelineMouseUp.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
-        case 68: // D
-          e.preventDefault()
-          actions.align.cloneSelectedAnnotation(selectedAnnotation)
-      }
-      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)
-    }
-  }
-  handleContainerClick(e) {
-    actions.align.clearSelectedAnnotation()
-    actions.align.clearSelectedParagraph()
-  }
-  handleTimelineMouseDown(e) {
-    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
-    actions.align.clearCursorRegion()
-    actions.align.setCursor(cursor_ts)
-    this.setState({
-      dragging: true,
-      a_ts: cursor_ts,
-    })
-  }
-  handleMouseMove(e) {
-    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
-    if (this.state.dragging) {
-      actions.align.setCursorRegion(
-        Math.min(this.state.a_ts, cursor_ts),
-        Math.max(this.state.a_ts, cursor_ts),
-      )
-    } else {
-      actions.align.setCursor(cursor_ts)
-    }
-  }
-  handleTimelineMouseUp(e) {
-    this.setState({ dragging: false })
-    const play_ts = positionToTime(e.pageY, this.props.timeline)
-    if (e.metaKey) {
-      actions.align.spliceTime(play_ts)
-    } else 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
-            onMouseDown={this.handleTimelineMouseDown}
-            onMouseUp={this.handleTimelineMouseUp}
-          />
-          <Ticks timeline={this.props.timeline} />
-          <Cursor timeline={this.props.timeline} annotation={this.props.annotation} />
-          <CursorRegion timeline={this.props.timeline} />
-        </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.align.text,
-})
-
-export default connect(mapStateToProps)(Timeline)
diff --git a/animism-align/frontend/app/views/editor/align/sidebar.css b/animism-align/frontend/app/views/editor/align/sidebar.css
deleted file mode 100644
index 7c19797..0000000
--- a/animism-align/frontend/app/views/editor/align/sidebar.css
+++ /dev/null
@@ -1,84 +0,0 @@
-/* Sidebar */
-
-.sidebar {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 15rem;
-  z-index: 8;
-  padding-top: 2rem;
-}
-
-/* sidebar header */
-
-.sidebar .buttons {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 15rem;
-  height: 2rem;
-  z-index: 9;
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  background: #111;
-}
-.sidebar .buttons button {
-  border: 0;
-  background: transparent;
-}
-.sidebar .buttons button:hover {
-  background: #333;
-}
-.sidebar-content {
-  background: #222;
-  width: 15rem;
-  padding: 0.5rem 0;
-}
-
-/* wavefile upload */
-
-.sidebar-content.wave-upload {
-  padding: 0.5rem 0.75rem 1.5rem 0.75rem;
-}
-
-.wave-upload .uploadButton {
-  position: relative;
-  text-align: center;
-  margin: 1rem 0;
-}
-.wave-upload small {
-  display: block;
-  text-align: center;
-}
-.wave-upload .status {
-  padding: 1rem 0 0 0;
-  text-align: center;
-}
-.wave-upload .circular-loader {
-  margin: 0 auto 1rem auto;
-}
-.wave-upload .status-message {
-}
-.wave-upload .status small {
-  display: block;
-  margin-top: 0.25rem;
-}
-
-/* table of contents */
-
-.toc div {
-  width: 15rem;
-  padding: 0.25rem 0.75rem;
-  cursor: pointer;
-}
-.toc div:hover {
-  background: #213;
-}
-
-
-/* script */
-
-.sidebar textarea {
-  height: calc(100vh - 5.15rem);
-}
diff --git a/animism-align/frontend/app/views/editor/sidebar/components/script.component.js b/animism-align/frontend/app/views/editor/sidebar/components/script.component.js
new file mode 100644
index 0000000..d23b3da
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/sidebar/components/script.component.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+const Script = ({ text }) => {
+  if (text.loading) return null
+  return (
+    <textarea 
+      className='script'
+      onChange={e => actions.site.updateText(e.target.value)}
+      value={text}
+    />
+  )
+}
+
+const mapStateToProps = state => ({
+  text: state.align.text,
+})
+
+export default connect(mapStateToProps)(Script)
diff --git a/animism-align/frontend/app/views/editor/sidebar/components/tableOfContents.component.js b/animism-align/frontend/app/views/editor/sidebar/components/tableOfContents.component.js
new file mode 100644
index 0000000..239dc69
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/sidebar/components/tableOfContents.component.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { ROMAN_NUMERALS } from 'app/constants'
+import actions from 'app/actions'
+
+class TableOfContents extends Component {
+  render() {
+    const { loading, order, lookup } = this.props.annotation
+    if (loading || !order) return null
+    const sectionIds = order.filter(id => lookup[id].type === "section_heading")
+    return (
+      <div className="sidebar-content toc">
+        {!sectionIds.length && <div className="no-sections">No sections found</div>}
+        {sectionIds.map((id, i) => (
+          <div key={id} onClick={() => actions.align.setScrollPosition(lookup[id].start_ts)}>
+            {ROMAN_NUMERALS[i]}{'. '}{lookup[id].text}
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  annotation: state.annotation.index,
+})
+
+export default connect(mapStateToProps)(TableOfContents)
diff --git a/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js b/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js
new file mode 100644
index 0000000..3ca19f0
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js
@@ -0,0 +1,191 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import extractPeaks from 'webaudio-peaks'
+
+import actions from 'app/actions'
+import { formatSize, timestampHMS } from 'app/utils'
+import { Loader } from 'app/common'
+
+class WaveUpload extends Component {
+  state = {
+    working: false,
+    status: "",
+    filename: "",
+    duration: 0,
+  }
+
+  upload(e) {
+    e.preventDefault()
+    document.body.className = ''
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    let i
+    let file
+    for (i = 0; i < files.length; i++) {
+      file = files[i]
+      if (file && file.type.match('image.*')) break
+    }
+    if (!file) {
+      console.log('No file specified')
+      return
+    }
+    this.setState({ working: true, status: "Loading MP3...", filename: file.name, size: file.size, duration: 0 })
+    const fileReader = new FileReader()
+    fileReader.onload = event => {
+      fileReader.onload = null
+      this.processAudioFile(file, event.target.result)
+    }
+    fileReader.readAsArrayBuffer(file)
+  }
+
+  processAudioFile(audioFile, arrayBuffer) {
+    this.setState({ working: true, status: "Extracting peaks..." })
+    var audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    audioContext.decodeAudioData(arrayBuffer, (audioBuffer) => {
+      // buffer, samplesPerPixel, isMono, startOffset, endOffset, bitResolution
+      this.setState({ duration: audioBuffer.duration })
+      var peaks = extractPeaks(audioBuffer, 441, true);
+      console.log(peaks)
+      const array = Array.from(peaks.data[0])
+      const peaksBlob = new Blob([ JSON.stringify(array) ], {type: "application/json"});
+      this.uploadAudioAndPeaks(audioFile, peaksBlob)
+    })
+  }
+
+  uploadAudioAndPeaks(audioFile, peaksBlob) {
+    const { episode } = this.props
+    const updatedEpisode = { ...episode }
+    this.setState({ status: "Removing old files..." })
+    this.destroyTaggedFile('peaks')
+    this.destroyTaggedFile('audio')
+    .then(() => {
+      return (
+        this.uploadTaggedFile(
+          peaksBlob,
+          'peaks',
+          'episode-' + this.props.episode.id + '-peaks.json',
+          {}
+        )
+      )
+    })
+    .then(peaksResult => {
+      updatedEpisode.settings.peaks = peaksResult
+      return (
+        this.uploadTaggedFile(
+          audioFile,
+          'audio',
+          this.state.filename,
+          {
+            size: this.state.size,
+            duration: this.state.duration,
+          }
+        )
+      )
+    })
+    .then(audioResult => {
+      updatedEpisode.settings.audio = audioResult
+      return actions.episode.update(updatedEpisode)
+    })
+    .then(res => {
+      this.setState({
+        status: "Upload complete",
+        working: false,
+        filename: null,
+        duration: null,
+        size: null,
+      })
+    })
+  }
+
+  uploadTaggedFile(file, tag, fn, meta) {
+    return new Promise((resolve, reject) => {
+      this.setState({ status: "Uploading " + tag + "..." })
+      const uploadData = {
+        tag,
+        file,
+        __file_filename: fn,
+        username: this.props.currentUser.username,
+      }
+      // console.log(uploadData)
+      return actions.upload.upload(uploadData).then(data => {
+        // console.log(data)
+        resolve({
+          ...data.res,
+          ...meta
+        })
+      })
+    })
+  }
+
+  destroyTaggedFile(tag) {
+    return new Promise((resolve, reject) => {
+      if (!this.props.episode.settings[tag]) {
+        return resolve();
+      }
+      actions.upload.destroy(this.props.episode.settings[tag])
+      .then(() => {
+        console.log('Destroy successful')
+        resolve()
+      })
+      .catch(() => {
+        console.log('Error deleting the image')
+        reject()
+      })
+    })
+  }
+
+  render() {
+    const { episode, peaks } = this.props
+    // console.log(episode)
+    return (
+      <div className="sidebar-content wave-upload">
+        {episode.settings.audio && (
+          <div>
+            <small>{episode.settings.audio.fn}</small>
+            <small>{'Size: '}{formatSize(episode.settings.audio.size)}</small>
+            <small>{'Duration: '}{timestampHMS(episode.settings.audio.duration)}</small>
+          </div>
+        )}
+        {peaks.length && (
+          <div>
+            Peaks: {peaks.length}
+          </div>
+        )}
+        <div className="uploadButton">
+          <button>
+            <span>
+              {episode.settings.audio
+                ? "Upload a new audio file"
+                : "Upload an audio file"
+              }
+            </span>
+          </button>
+          <input
+            type="file"
+            accept="audio/mp3"
+            onChange={this.upload.bind(this)}
+            required={this.props.required}
+          />
+        </div>
+        <small>Upload an MP3, encoded 192kbit constant bitrate, 44.1kHz stereo</small>
+        {this.state.status && (
+          <div className='status'>
+            {this.state.working && <Loader />}
+            <div className='status-message'>{this.state.status}</div>
+            {this.state.filename && <small>{this.state.filename}</small>}
+            {this.state.size && <small>{'Size: '}{formatSize(this.state.size)}</small>}
+            {!!this.state.duration && <small>{'Duration: '}{timestampHMS(this.state.duration)}</small>}
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  peaks: state.align.peaks,
+  currentUser: state.auth.user,
+  project: state.site.project,
+  episode: state.site.episode,
+})
+
+export default connect(mapStateToProps)(WaveUpload)
diff --git a/animism-align/frontend/app/views/editor/sidebar/sidebar.container.js b/animism-align/frontend/app/views/editor/sidebar/sidebar.container.js
new file mode 100644
index 0000000..350505b
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/sidebar/sidebar.container.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+// import { Link } from 'react-router-dom'
+
+import './sidebar.css'
+
+import actions from 'app/actions'
+
+import Script from './components/script.component.js'
+import TableOfContents from './components/tableOfContents.component.js'
+import WaveUpload from './components/waveUpload.component.js'
+
+class Sidebar extends Component {
+  state = {
+    mode: "toc",
+  }
+  componentDidMount(){
+    if (!this.props.peaks.length) {
+      this.setState({ mode: "wav" })
+    }
+  }
+
+  render() {
+    const { mode } = this.state
+    return (
+      <div className='sidebar'>
+        <div className='buttons'>
+          <button className={mode === "txt" ? "active" : ""} onClick={() => this.setState({ mode: "txt" })}>text</button>
+          <button className={mode === "wav" ? "active" : ""} onClick={() => this.setState({ mode: "wav" })}>wav</button>
+          <button className={mode === "toc" ? "active" : ""} onClick={() => this.setState({ mode: "toc" })}>contents</button>
+        </div>
+        {mode === 'toc' && <TableOfContents />}
+        {mode === 'txt' && <Script />}
+        {mode === 'wav' && <WaveUpload />}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  peaks: state.align.peaks,
+})
+
+export default connect(mapStateToProps)(Sidebar)
diff --git a/animism-align/frontend/app/views/editor/sidebar/sidebar.css b/animism-align/frontend/app/views/editor/sidebar/sidebar.css
new file mode 100644
index 0000000..e4d0f61
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/sidebar/sidebar.css
@@ -0,0 +1,90 @@
+/* Sidebar */
+
+.sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 15rem;
+  z-index: 8;
+  padding-top: 2rem;
+}
+
+/* sidebar header */
+
+.sidebar .buttons {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 15rem;
+  height: 2rem;
+  z-index: 9;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  background: #111;
+}
+.sidebar .buttons button {
+  border: 0;
+  background: transparent;
+  margin: 0;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.sidebar .buttons button:hover {
+  background: #333;
+}
+.sidebar .buttons button.active {
+  background: #222;
+}
+.sidebar-content {
+  background: #222;
+  width: 15rem;
+  padding: 0.5rem 0;
+}
+
+/* wavefile upload */
+
+.sidebar-content.wave-upload {
+  padding: 0.5rem 0.75rem 1.5rem 0.75rem;
+}
+
+.wave-upload .uploadButton {
+  position: relative;
+  text-align: center;
+  margin: 1rem 0;
+}
+.wave-upload small {
+  display: block;
+  text-align: center;
+}
+.wave-upload .status {
+  padding: 1rem 0 0 0;
+  text-align: center;
+}
+.wave-upload .circular-loader {
+  margin: 0 auto 1rem auto;
+}
+.wave-upload .status-message {
+}
+.wave-upload .status small {
+  display: block;
+  margin-top: 0.25rem;
+}
+
+/* table of contents */
+
+.toc div {
+  width: 15rem;
+  padding: 0.25rem 0.75rem;
+  cursor: pointer;
+}
+.toc div:hover {
+  background: #213;
+}
+
+
+/* script */
+
+.sidebar textarea {
+  height: calc(100vh - 5.15rem);
+}
diff --git a/animism-align/frontend/app/views/editor/timeline/components/cursor.component.js b/animism-align/frontend/app/views/editor/timeline/components/cursor.component.js
new file mode 100644
index 0000000..4a94100
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/timeline/components/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/editor/timeline/components/cursorRegion.component.js b/animism-align/frontend/app/views/editor/timeline/components/cursorRegion.component.js
new file mode 100644
index 0000000..a0c9bd7
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/timeline/components/cursorRegion.component.js
@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { ZOOM_STEPS } from 'app/constants'
+import { timestamp } from 'app/utils'
+
+const CursorRegion = ({ timeline }) => {
+  const { start_ts, zoom, cursor_region } = timeline
+  if (!cursor_region) return null
+  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
+  const duration = cursor_region.b_ts - cursor_region.a_ts
+  const y = (cursor_region.a_ts - start_ts) / secondsPerPixel
+  const height = (duration) / secondsPerPixel
+  return (
+    <div
+      className='cursor_region'
+      style={{
+        top: y,
+        height,
+      }}
+    >
+      <div className='tickLabel'>
+        {timestamp(duration, 1, true)}
+      </div>
+    </div>
+  )
+}
+
+export default CursorRegion
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/editor/timeline/components/playCursor.component.js b/animism-align/frontend/app/views/editor/timeline/components/playCursor.component.js
new file mode 100644
index 0000000..80da31f
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/timeline/components/playCursor.component.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+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,
+})
+
+export default connect(mapStateToProps)(PlayCursor)
diff --git a/animism-align/frontend/app/views/editor/timeline/components/ticks.component.js b/animism-align/frontend/app/views/editor/timeline/components/ticks.component.js
new file mode 100644
index 0000000..4530863
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/timeline/components/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/editor/timeline/components/waveform.component.js b/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js
new file mode 100644
index 0000000..0161129
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js
@@ -0,0 +1,100 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+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}
+        onMouseDown={this.props.onMouseDown}
+        onMouseUp={this.props.onMouseUp}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  timeline: state.align.timeline,
+  peaks: state.align.peaks,
+})
+
+export default connect(mapStateToProps)(Waveform)
diff --git a/animism-align/frontend/app/views/editor/timeline/timeline.container.js b/animism-align/frontend/app/views/editor/timeline/timeline.container.js
new file mode 100644
index 0000000..3b7a2dd
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/timeline/timeline.container.js
@@ -0,0 +1,199 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import './timeline.css'
+
+import actions from 'app/actions'
+
+import Annotations from 'app/views/editor/annotation/annotations.container'
+
+import Waveform from './components/waveform.component'
+import Ticks from './components/ticks.component'
+import Cursor from './components/cursor.component'
+import PlayCursor from './components/playCursor.component'
+import CursorRegion from './components/cursorRegion.component'
+
+import { WAVEFORM_SIZE, ZOOM_STEPS, INNER_HEIGHT } from 'app/constants'
+import { clamp } from 'app/utils'
+import { positionToTime } from 'app/utils/align.utils'
+
+class Timeline extends Component {
+  state = {
+    dragging: false,
+    a_ts: -1,
+  }
+  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.handleTimelineMouseDown = this.handleTimelineMouseDown.bind(this)
+    this.handleTimelineMouseUp = this.handleTimelineMouseUp.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
+        case 68: // D
+          e.preventDefault()
+          actions.align.cloneSelectedAnnotation(selectedAnnotation)
+      }
+      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)
+    }
+  }
+  handleContainerClick(e) {
+    actions.align.clearSelectedAnnotation()
+    actions.align.clearSelectedParagraph()
+  }
+  handleTimelineMouseDown(e) {
+    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
+    actions.align.clearCursorRegion()
+    actions.align.setCursor(cursor_ts)
+    this.setState({
+      dragging: true,
+      a_ts: cursor_ts,
+    })
+  }
+  handleMouseMove(e) {
+    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
+    if (this.state.dragging) {
+      actions.align.setCursorRegion(
+        Math.min(this.state.a_ts, cursor_ts),
+        Math.max(this.state.a_ts, cursor_ts),
+      )
+    } else {
+      actions.align.setCursor(cursor_ts)
+    }
+  }
+  handleTimelineMouseUp(e) {
+    this.setState({ dragging: false })
+    const play_ts = positionToTime(e.pageY, this.props.timeline)
+    if (e.metaKey) {
+      actions.align.spliceTime(play_ts)
+    } else 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
+            onMouseDown={this.handleTimelineMouseDown}
+            onMouseUp={this.handleTimelineMouseUp}
+          />
+          <Ticks timeline={this.props.timeline} />
+          <Cursor timeline={this.props.timeline} annotation={this.props.annotation} />
+          <CursorRegion timeline={this.props.timeline} />
+        </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.align.text,
+})
+
+export default connect(mapStateToProps)(Timeline)
diff --git a/animism-align/frontend/app/views/editor/timeline/timeline.css b/animism-align/frontend/app/views/editor/timeline/timeline.css
new file mode 100644
index 0000000..2a5769f
--- /dev/null
+++ b/animism-align/frontend/app/views/editor/timeline/timeline.css
@@ -0,0 +1,72 @@
+/* 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;
+  pointer-events: none;
+}
+.ticks .tickLabel {
+  pointer-events: none;
+  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; 
+  user-select: none;
+}
+.timeline .cursor_region {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  border-top: 1px solid #33f;
+  border-bottom: 1px solid #33f;
+  background: rgba(32,64,255,0.2);
+}
+.timeline .cursor_region .tickLabel {
+  position: absolute;
+  top: 2px;
+  left: 6px;
+  user-select: none;
+}
-- 
cgit v1.2.3-70-g09d2