From 3e2c1d432d73823e66e19d0081b498ace467b231 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 2 Jul 2020 00:35:06 +0200
Subject: display the form

---
 .../frontend/views/align/align.actions.js          |  36 ++++++
 .../frontend/views/align/align.container.js        |   8 +-
 animism-align/frontend/views/align/align.css       |  32 ++++-
 .../frontend/views/align/align.reducer.js          |   7 ++
 animism-align/frontend/views/align/align.util.js   |  28 +++++
 .../components/annotations/annotation.form.js      |  95 +++++++++++++++
 .../views/align/components/cursor.component.js     |  25 ----
 .../views/align/components/playButton.component.js |  31 -----
 .../views/align/components/playCursor.component.js |  43 -------
 .../views/align/components/ticks.component.js      |  89 --------------
 .../views/align/components/timeline.component.js   | 129 ---------------------
 .../align/components/timeline/cursor.component.js  |  26 +++++
 .../components/timeline/playButton.component.js    |  31 +++++
 .../components/timeline/playCursor.component.js    |  43 +++++++
 .../align/components/timeline/ticks.component.js   |  89 ++++++++++++++
 .../components/timeline/waveform.component.js      | 100 ++++++++++++++++
 .../views/align/components/waveform.component.js   | 100 ----------------
 .../align/containers/annotations.container.js      |  44 +++++++
 .../views/align/containers/script.container.js     |  34 ++++++
 .../views/align/containers/timeline.container.js   | 129 +++++++++++++++++++++
 20 files changed, 699 insertions(+), 420 deletions(-)
 create mode 100644 animism-align/frontend/views/align/align.util.js
 create mode 100644 animism-align/frontend/views/align/components/annotations/annotation.form.js
 delete mode 100644 animism-align/frontend/views/align/components/cursor.component.js
 delete mode 100644 animism-align/frontend/views/align/components/playButton.component.js
 delete mode 100644 animism-align/frontend/views/align/components/playCursor.component.js
 delete mode 100644 animism-align/frontend/views/align/components/ticks.component.js
 delete mode 100644 animism-align/frontend/views/align/components/timeline.component.js
 create mode 100644 animism-align/frontend/views/align/components/timeline/cursor.component.js
 create mode 100644 animism-align/frontend/views/align/components/timeline/playButton.component.js
 create mode 100644 animism-align/frontend/views/align/components/timeline/playCursor.component.js
 create mode 100644 animism-align/frontend/views/align/components/timeline/ticks.component.js
 create mode 100644 animism-align/frontend/views/align/components/timeline/waveform.component.js
 delete mode 100644 animism-align/frontend/views/align/components/waveform.component.js
 create mode 100644 animism-align/frontend/views/align/containers/annotations.container.js
 create mode 100644 animism-align/frontend/views/align/containers/script.container.js
 create mode 100644 animism-align/frontend/views/align/containers/timeline.container.js

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

diff --git a/animism-align/frontend/views/align/align.actions.js b/animism-align/frontend/views/align/align.actions.js
index 2e1c795..82e4799 100644
--- a/animism-align/frontend/views/align/align.actions.js
+++ b/animism-align/frontend/views/align/align.actions.js
@@ -24,3 +24,39 @@ export const throttledSetZoom = throttle(zoom => dispatch => {
 export const setCursor = cursor_ts => dispatch => (
   dispatch({ type: types.align.set_display_setting, key: 'cursor_ts', value: cursor_ts })
 )
+
+export const showNewTimestampForm = (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,
+      text: croppedText,
+      type: 'sentence',
+    }
+  })
+}
+
+const cutFirstSentence = text => {
+  const textToCrop = text.trim().replace("\n", " ").split("\n")[0]
+  let cropIndex = textToCrop.indexOf('. ') + 1
+  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 hideTimestampForm = () => dispatch => {
+  dispatch({
+    type: types.align.set_temporary_annotation,
+    data: {}
+  })
+}
diff --git a/animism-align/frontend/views/align/align.container.js b/animism-align/frontend/views/align/align.container.js
index 387bd86..80d8a57 100644
--- a/animism-align/frontend/views/align/align.container.js
+++ b/animism-align/frontend/views/align/align.container.js
@@ -5,7 +5,8 @@ import { connect } from 'react-redux'
 
 import './align.css'
 
-import Timeline from './components/timeline.component.js'
+import Timeline from './containers/timeline.container.js'
+import Script from './containers/script.container.js'
 import actions from '../../actions'
 import { Header } from '../../common'
 // import * as uploadActions from './upload.actions'
@@ -20,7 +21,10 @@ class Container extends Component {
   render() {
     return (
       <div className='body'>
-        <Timeline />
+        <div className='row'>
+          <Timeline />
+        </div>
+        <Script />
       </div>
     )
   }
diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css
index 38a1c8b..a366d40 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/views/align/align.css
@@ -6,6 +6,7 @@
   height: 100%;
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   background: linear-gradient(
       0deg,
       rgba(0, 0, 64, 0.5),
@@ -13,6 +14,9 @@
     );
   padding: 0;
 }
+
+/* Timeline */
+
 canvas {
   display: block;
 }
@@ -23,7 +27,9 @@ canvas {
   width: 300px;
   cursor: crosshair;
 }
-
+.timelineColumn {
+  position: relative;
+}
 .ticks .tick {
   position: absolute;
   right: 0;
@@ -64,6 +70,9 @@ canvas {
   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;
@@ -81,3 +90,24 @@ canvas {
 .playButton.paused {
   background-image: url('/static/img/icons_play_white.svg');
 }
+
+/* Script */
+
+.script {
+  align-self: flex-end;
+  height: 100%;
+}
+
+/* Annotations */
+
+.annotations {
+  position: relative;
+  width: 300px;
+}
+.annotationForm {
+  position: absolute;
+  left: 0;
+}
+.annotationForm .row {
+  justify-content: space-between;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/views/align/align.reducer.js b/animism-align/frontend/views/align/align.reducer.js
index 5640cde..9064b56 100644
--- a/animism-align/frontend/views/align/align.reducer.js
+++ b/animism-align/frontend/views/align/align.reducer.js
@@ -8,6 +8,7 @@ const initialState = {
     zoom: 1,
     duration: 0,
   },
+  annotation: {},
   options: {
   }
 }
@@ -34,6 +35,12 @@ export default function alignReducer(state = initialState, action) {
         }
       }
 
+    case types.align.set_temporary_annotation:
+      return {
+        ...state,
+        annotation: action.data,
+      }
+
     default:
       return state
   }
diff --git a/animism-align/frontend/views/align/align.util.js b/animism-align/frontend/views/align/align.util.js
new file mode 100644
index 0000000..32cbc35
--- /dev/null
+++ b/animism-align/frontend/views/align/align.util.js
@@ -0,0 +1,28 @@
+import { ZOOM_STEPS } from './constants'
+import { clamp } from '../../util'
+
+export const positionToTime = (y, { start_ts, zoom, duration }) => {
+  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
+  const widthTimeDuration = window.innerHeight * 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 height = window.innerHeight
+  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
+  const widthTimeDuration = height * secondsPerPixel
+  const timeMin = start_ts
+  const timeMax = Math.min(start_ts + widthTimeDuration, duration)
+  const timeWidth = timeMax - timeMin
+  const timeHalfHeight = height * secondsPerPixel / 2
+  if (ts < timeMin - timeHalfHeight) {
+    return -9999
+  }
+  if (ts > timeMax) {
+    return -9999
+  }
+  return (ts - timeMin) / timeWidth * height
+}
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js
new file mode 100644
index 0000000..9b02478
--- /dev/null
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -0,0 +1,95 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from '../../../../actions'
+// import * as alignActions from '../align.actions'
+
+import { ZOOM_STEPS } from '../../constants'
+import { clamp } from '../../../../util'
+import { timeToPosition } from '../../align.util'
+import { Select } from '../../../../common'
+
+const TIMESTAMP_TYPES = ['sentence', 'header'].map(name => ({ name, label: name }))
+
+class AnnotationForm extends Component {
+  state = {
+    data: {},
+  }
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+  }
+  componentDidMount(){
+    this.setState({
+      data: { ...this.props.annotation },
+    })
+  }
+  componentDidUpdate(prevProps){
+    if (this.props.annotation !== prevProps.annotation) {
+      this.setState({
+        data: { ...this.props.annotation },
+      })
+    }
+  }
+  handleChange(e) {
+    const { name, value } = e.target
+    this.handleSelect(name, value)
+  }
+  handleSelect(name, value) {
+    this.setState({
+      data: {
+        ...this.state.data,
+        [name]: value,
+      }
+    })
+  }
+  render() {
+    const { timeline } = this.props
+    const { data } = this.state
+    if (!data.start_ts) return <div></div>
+    return (
+      <div
+        className='annotationForm'
+        style={{
+          top: timeToPosition(data.start_ts, timeline),
+        }}
+      >
+        <div>
+          <textarea
+            value={data.text}
+            onChange={this.handleChange}
+          />
+        </div>
+        <div className='row'>
+          <Select
+            name='type'
+            selected={data.type}
+            options={TIMESTAMP_TYPES}
+            defaultOption='text'
+            onChange={this.handleSelect}
+          />
+          <button>Save</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+
+/*
+- get the first sentence from the text
+- display the form at that point
+*/
+
+const mapStateToProps = state => ({
+  annotation: state.align.annotation,
+  timeline: state.align.timeline,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(AnnotationForm)
diff --git a/animism-align/frontend/views/align/components/cursor.component.js b/animism-align/frontend/views/align/components/cursor.component.js
deleted file mode 100644
index a5ad438..0000000
--- a/animism-align/frontend/views/align/components/cursor.component.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { Component } from 'react'
-
-import { ZOOM_STEPS } from '../constants'
-import { timestamp } from '../../../util'
-
-const Cursor = ({ timeline }) => {
-  const { start_ts, zoom, cursor_ts, duration } = timeline
-  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
-  const y = (cursor_ts - start_ts) / secondsPerPixel
-  return (
-    <div
-      className='cursor'
-      style={{
-        top: y,
-      }}
-    >
-      <div className='line' />
-      <div className='tickLabel'>
-        {timestamp(cursor_ts, 1)}
-      </div>
-    </div>
-  )
-}
-
-export default Cursor
\ No newline at end of file
diff --git a/animism-align/frontend/views/align/components/playButton.component.js b/animism-align/frontend/views/align/components/playButton.component.js
deleted file mode 100644
index fcb1422..0000000
--- a/animism-align/frontend/views/align/components/playButton.component.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import actions from '../../../actions'
-// import * as alignActions from '../align.actions'
-
-import { ZOOM_STEPS } from '../constants'
-import { clamp } from '../../../util'
-
-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/views/align/components/playCursor.component.js b/animism-align/frontend/views/align/components/playCursor.component.js
deleted file mode 100644
index f191bb1..0000000
--- a/animism-align/frontend/views/align/components/playCursor.component.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import { ZOOM_STEPS } from '../constants'
-import { timestamp } from '../../../util'
-
-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>
-  )
-}
-
-/*
-      <div className='tickLabel'>
-        {timestamp(cursor_ts, 1)}
-      </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/views/align/components/ticks.component.js b/animism-align/frontend/views/align/components/ticks.component.js
deleted file mode 100644
index 55821ae..0000000
--- a/animism-align/frontend/views/align/components/ticks.component.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { Component } from 'react'
-
-import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../constants'
-import { timestamp } from '../../../util'
-
-export default class Ticks extends Component {
-  render() {
-    let { start_ts, zoom, duration } = this.props.timeline
-    const width = window.innerHeight
-
-    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
-
-    let widthTimeDuration = width * 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(width / pixelsPerLabel) + 1
-    let offset, timing, tickLabels = [], ticks = []
-    for (var i = -1; i < labelCount; i++) {
-      offset = i * pixelsPerLabel + startOffset
-      if (offset > width) 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(width / 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/views/align/components/timeline.component.js b/animism-align/frontend/views/align/components/timeline.component.js
deleted file mode 100644
index 3b12cb5..0000000
--- a/animism-align/frontend/views/align/components/timeline.component.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import actions from '../../../actions'
-// import * as alignActions from '../align.actions'
-
-import Waveform from './waveform.component'
-import Ticks from './ticks.component'
-import Cursor from './cursor.component'
-import PlayButton from './playButton.component'
-import PlayCursor from './playCursor.component'
-
-import { ZOOM_STEPS } from '../constants'
-import { clamp } from '../../../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.handleClick = this.handleClick.bind(this)
-  }
-  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
-    }
-    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 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 secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
-    let widthTimeDuration = window.innerHeight * secondsPerPixel // secs per pixel
-
-    start_ts = clamp(start_ts + e.deltaY * ZOOM_STEPS[zoom], 0, Math.max(0, duration - widthTimeDuration / 2))
-    if (e.shiftKey) {
-      if (Math.abs(e.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.seek(start_ts)
-    } else {
-      actions.align.setScrollPosition(start_ts)
-    }
-  }
-  handleMouseMove(e) {
-    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
-    actions.align.setCursor(cursor_ts)
-  }
-  handleClick(e) {
-    const play_ts = positionToTime(e.pageY, this.props.timeline)
-    actions.audio.seek(play_ts)
-  }
-  render() {
-    return (
-      <div
-        className='timeline'
-        onWheel={this.handleWheel}
-        onMouseMove={this.handleMouseMove}
-      >
-        <Waveform onClick={this.handleClick} />
-        <Ticks timeline={this.props.timeline} />
-        <Cursor timeline={this.props.timeline} />
-        <PlayCursor />
-        <PlayButton />
-      </div>
-    )
-  }
-}
-
-const positionToTime = (y, { start_ts, zoom, duration }) => {
-  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
-  const widthTimeDuration = window.innerHeight * 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)
-}
-
-const mapStateToProps = state => ({
-  timeline: state.align.timeline,
-})
-
-const mapDispatchToProps = dispatch => ({
-  // alignActions: bindActionCreators({ ...alignActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(Timeline)
diff --git a/animism-align/frontend/views/align/components/timeline/cursor.component.js b/animism-align/frontend/views/align/components/timeline/cursor.component.js
new file mode 100644
index 0000000..f621b37
--- /dev/null
+++ b/animism-align/frontend/views/align/components/timeline/cursor.component.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+
+import { ZOOM_STEPS } from '../../constants'
+import { timestamp } from '../../../../util'
+
+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/views/align/components/timeline/playButton.component.js b/animism-align/frontend/views/align/components/timeline/playButton.component.js
new file mode 100644
index 0000000..486eaee
--- /dev/null
+++ b/animism-align/frontend/views/align/components/timeline/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 '../../../../actions'
+// import * as alignActions from '../align.actions'
+
+import { ZOOM_STEPS } from '../../constants'
+import { clamp } from '../../../../util'
+
+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/views/align/components/timeline/playCursor.component.js b/animism-align/frontend/views/align/components/timeline/playCursor.component.js
new file mode 100644
index 0000000..71e6a3a
--- /dev/null
+++ b/animism-align/frontend/views/align/components/timeline/playCursor.component.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { ZOOM_STEPS } from '../../constants'
+import { timestamp } from '../../../../util'
+
+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>
+  )
+}
+
+/*
+      <div className='tickLabel'>
+        {timestamp(cursor_ts, 1)}
+      </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/views/align/components/timeline/ticks.component.js b/animism-align/frontend/views/align/components/timeline/ticks.component.js
new file mode 100644
index 0000000..72f9bd0
--- /dev/null
+++ b/animism-align/frontend/views/align/components/timeline/ticks.component.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react'
+
+import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../../constants'
+import { timestamp } from '../../../../util'
+
+export default class Ticks extends Component {
+  render() {
+    let { start_ts, zoom, duration } = this.props.timeline
+    const width = window.innerHeight
+
+    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
+
+    let widthTimeDuration = width * 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(width / pixelsPerLabel) + 1
+    let offset, timing, tickLabels = [], ticks = []
+    for (var i = -1; i < labelCount; i++) {
+      offset = i * pixelsPerLabel + startOffset
+      if (offset > width) 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(width / 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/views/align/components/timeline/waveform.component.js b/animism-align/frontend/views/align/components/timeline/waveform.component.js
new file mode 100644
index 0000000..128204a
--- /dev/null
+++ b/animism-align/frontend/views/align/components/timeline/waveform.component.js
@@ -0,0 +1,100 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+// import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from '../../../../actions'
+// import * as uploadActions from './upload.actions'
+
+import { WAVEFORM_SIZE, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../../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 = window.innerHeight
+  }
+  draw() {
+    const canvas = this.canvasRef.current
+    const ctx = canvas.getContext('2d')
+    const h = window.innerHeight
+    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 indexesPerPixel = stepsPerPixel * 2
+
+    let widthTimeDuration = h * secondsPerPixel // secs per pixel
+
+    let timeMin = start_ts
+    let timeMax = Math.min(start_ts + widthTimeDuration, duration)
+    let timeWidth = timeMax - timeMin
+
+    let stepMin = Math.floor(timeMin * 10 * 2)
+    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(0 * indexesPerPixel + stepMin, pixelWidth * indexesPerPixel + stepMin)
+    ctx.beginPath()
+    ctx.moveTo(origin, 0)
+    for (i = 0; i < pixelWidth; i++) {
+      step = i * indexesPerPixel + stepMin
+      peak = peaks[step]
+      y = (1 - peak) * waveformPeak
+      ctx.lineTo(y, i)
+    }
+    for (i = pixelWidth - 1; i > 0; i--) {
+      step = i * indexesPerPixel + 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/views/align/components/waveform.component.js b/animism-align/frontend/views/align/components/waveform.component.js
deleted file mode 100644
index e454623..0000000
--- a/animism-align/frontend/views/align/components/waveform.component.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-// import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import actions from '../../../actions'
-// import * as uploadActions from './upload.actions'
-
-import { WAVEFORM_SIZE, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../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 = window.innerHeight
-  }
-  draw() {
-    const canvas = this.canvasRef.current
-    const ctx = canvas.getContext('2d')
-    const h = window.innerHeight
-    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 indexesPerPixel = stepsPerPixel * 2
-
-    let widthTimeDuration = h * secondsPerPixel // secs per pixel
-
-    let timeMin = start_ts
-    let timeMax = Math.min(start_ts + widthTimeDuration, duration)
-    let timeWidth = timeMax - timeMin
-
-    let stepMin = Math.floor(timeMin * 10 * 2)
-    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(0 * indexesPerPixel + stepMin, pixelWidth * indexesPerPixel + stepMin)
-    ctx.beginPath()
-    ctx.moveTo(origin, 0)
-    for (i = 0; i < pixelWidth; i++) {
-      step = i * indexesPerPixel + stepMin
-      peak = peaks[step]
-      y = (1 - peak) * waveformPeak
-      ctx.lineTo(y, i)
-    }
-    for (i = pixelWidth - 1; i > 0; i--) {
-      step = i * indexesPerPixel + 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/views/align/containers/annotations.container.js b/animism-align/frontend/views/align/containers/annotations.container.js
new file mode 100644
index 0000000..e32757b
--- /dev/null
+++ b/animism-align/frontend/views/align/containers/annotations.container.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from '../../../actions'
+// import * as alignActions from '../align.actions'
+
+import { ZOOM_STEPS } from '../constants'
+import { clamp } from '../../../util'
+import { positionToTime } from '../align.util'
+
+import AnnotationForm from '../components/annotations/annotation.form'
+
+class Annotations extends Component {
+  constructor(props){
+    super(props)
+    // this.handleKeydown = this.handleKeydown.bind(this)
+  }
+  render() {
+    return (
+      <div className='annotations'>
+        {this.props.annotation.start_ts &&
+          <AnnotationForm />
+        }
+      </div>
+    )
+  }
+}
+
+/*
+- get the first sentence from the text
+- display the form at that point
+*/
+
+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/views/align/containers/script.container.js b/animism-align/frontend/views/align/containers/script.container.js
new file mode 100644
index 0000000..ce3dee8
--- /dev/null
+++ b/animism-align/frontend/views/align/containers/script.container.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from '../../../actions'
+// import * as alignActions from '../align.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/views/align/containers/timeline.container.js b/animism-align/frontend/views/align/containers/timeline.container.js
new file mode 100644
index 0000000..3795751
--- /dev/null
+++ b/animism-align/frontend/views/align/containers/timeline.container.js
@@ -0,0 +1,129 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from '../../../actions'
+// import * as alignActions from '../align.actions'
+
+import Annotations from '../containers/annotations.container'
+import Waveform from '../components/timeline/waveform.component'
+import Ticks from '../components/timeline/ticks.component'
+import Cursor from '../components/timeline/cursor.component'
+import PlayButton from '../components/timeline/playButton.component'
+import PlayCursor from '../components/timeline/playCursor.component'
+
+import { WAVEFORM_SIZE, ZOOM_STEPS } from '../constants'
+import { clamp } from '../../../util'
+import { positionToTime } from '../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.handleClick = this.handleClick.bind(this)
+  }
+  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
+    }
+    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 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 secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
+    let widthTimeDuration = window.innerHeight * secondsPerPixel // secs per pixel
+
+    start_ts = clamp(start_ts + e.deltaY * ZOOM_STEPS[zoom], 0, Math.max(0, duration - widthTimeDuration / 2))
+    if (e.shiftKey) {
+      if (Math.abs(e.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)
+  }
+  handleClick(e) {
+    const play_ts = positionToTime(e.pageY, this.props.timeline)
+    if (e.pageX > WAVEFORM_SIZE * 0.67) {
+      actions.align.showNewTimestampForm(play_ts, this.props.text)
+    } else {
+      actions.audio.seek(play_ts)      
+    }
+  }
+  render() {
+    return (
+      <div
+        className='timeline'
+        onWheel={this.handleWheel}
+        onMouseMove={this.handleMouseMove}
+      >
+        <div className='timelineColumn'>
+          <Waveform onClick={this.handleClick} />
+          <Ticks timeline={this.props.timeline} />
+          <Cursor timeline={this.props.timeline} annotation={this.props.annotation} />
+        </div>
+        <Annotations timeline={this.props.timeline} />
+        <PlayCursor />
+        <PlayButton />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  timeline: state.align.timeline,
+  annotation: state.align.annotation,
+  text: state.site.text,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // alignActions: bindActionCreators({ ...alignActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Timeline)
-- 
cgit v1.2.3-70-g09d2