seeking and zooming the waveform. playing the audio

13 files changed, 251 insertions, 38 deletions

diff --git a/animism-align/frontend/actions.js b/animism-align/frontend/actions.js
index 6ce2d02..1b5f15e 100644
--- a/animism-align/frontend/actions.js
+++ b/animism-align/frontend/actions.js
@@ -1,6 +1,7 @@
 import { bindActionCreators } from 'redux'
 import { actions as crudActions } from './api'
 
+import * as audioActions from './views/audio/audio.actions'
 import * as alignActions from './views/align/align.actions'
 import * as siteActions from './views/site/site.actions'
 
@@ -12,6 +13,7 @@ export default
           .concat([
             ['site', siteActions],
             ['align', alignActions],
+            ['audio', audioActions],
           ])
           .map(p => [p[0], bindActionCreators(p[1], store.dispatch)])
           .concat([
diff --git a/animism-align/frontend/store.js b/animism-align/frontend/store.js
index 871d72c..accf1b1 100644
--- a/animism-align/frontend/store.js
+++ b/animism-align/frontend/store.js
@@ -7,6 +7,7 @@ import thunk from 'redux-thunk'
 
 import uploadReducer from './views/upload/upload.reducer'
 import alignReducer from './views/align/align.reducer'
+import audioReducer from './views/audio/audio.reducer'
 import paragraphReducer from './views/paragraph/paragraph.reducer'
 import timestampReducer from './views/timestamp/timestamp.reducer'
 import siteReducer from './views/site/site.reducer'
@@ -19,6 +20,7 @@ const createRootReducer = history => (
     site: siteReducer,
     upload: uploadReducer,
     align: alignReducer,
+    audio: audioReducer,
     paragraph: paragraphReducer,
     timestamp: timestampReducer,
     // collection: collectionReducer,
diff --git a/animism-align/frontend/types.js b/animism-align/frontend/types.js
index d38cd68..9d16a4b 100644
--- a/animism-align/frontend/types.js
+++ b/animism-align/frontend/types.js
@@ -11,6 +11,10 @@ export const align = crud_type('align', [
   'set_display_setting',
 ])
 
+export const audio = with_type('audio', [
+  'play', 'pause', 'update_time',
+])
+
 export const site = with_type('site', [
 ])
 
diff --git a/animism-align/frontend/views/align/align.actions.js b/animism-align/frontend/views/align/align.actions.js
index 7d8cbd1..2e1c795 100644
--- a/animism-align/frontend/views/align/align.actions.js
+++ b/animism-align/frontend/views/align/align.actions.js
@@ -1,8 +1,9 @@
 import * as types from '../../types'
-import { store, history } from '../../store'
+import { store, history, dispatch } from '../../store'
 import { api, post, pad, preloadImage } from '../../util'
 import actions from '../../actions'
 import { session } from '../../session'
+import throttle from 'lodash.throttle'
 
 import { ZOOM_STEPS } from './constants'
 
@@ -16,6 +17,10 @@ export const setZoom = zoom => dispatch => {
   }
 }
 
+export const throttledSetZoom = throttle(zoom => dispatch => {
+  setZoom(zoom)(dispatch)
+}, 250, { leading: true })
+
 export const setCursor = cursor_ts => dispatch => (
   dispatch({ type: types.align.set_display_setting, key: 'cursor_ts', value: cursor_ts })
 )
diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css
index 153c481..38a1c8b 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/views/align/align.css
@@ -44,18 +44,40 @@ canvas {
   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; 
-}
\ No newline at end of file
+}
+.playButton {
+  position: absolute;
+  top: 0; left: 0;
+  width: 3rem; height: 3rem;
+  padding: 1rem;
+  background: #000;
+  cursor: pointer;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.playButton.playing {
+  background-image: url('/static/img/icons_pause_white.svg');
+}
+.playButton.paused {
+  background-image: url('/static/img/icons_play_white.svg');
+}
diff --git a/animism-align/frontend/views/align/align.reducer.js b/animism-align/frontend/views/align/align.reducer.js
index f616dc2..5640cde 100644
--- a/animism-align/frontend/views/align/align.reducer.js
+++ b/animism-align/frontend/views/align/align.reducer.js
@@ -1,8 +1,6 @@
 import * as types from '../../types'
 import { session, getDefault, getDefaultInt } from '../../session'
 
-import { crudState, crudReducer } from '../../api/crud.reducer'
-
 const initialState = {
   timeline: {
     cursor_ts: -1,
@@ -18,14 +16,15 @@ export default function alignReducer(state = initialState, action) {
   // console.log(action.type, action)
   switch (action.type) {
     case types.peaks.loaded:
-      return {
-        ...state,
-        timeline: {
-          ...state.timeline,
-          duration: action.data.length / 20,
-        }
-      }
-
+      console.log('peaks duration:', action.data.length / 20)
+      return state
+      // return {
+      //   ...state,
+      //   timeline: {
+      //     ...state.timeline,
+      //     duration: action.data.length / 20,
+      //   }
+      // }
     case types.align.set_display_setting:
       return {
         ...state,
diff --git a/animism-align/frontend/views/align/components/cursor.component.js b/animism-align/frontend/views/align/components/cursor.component.js
index c92f807..a5ad438 100644
--- a/animism-align/frontend/views/align/components/cursor.component.js
+++ b/animism-align/frontend/views/align/components/cursor.component.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 
 import { ZOOM_STEPS } from '../constants'
-import { clamp, timestamp } from '../../../util'
+import { timestamp } from '../../../util'
 
 const Cursor = ({ timeline }) => {
   const { start_ts, zoom, cursor_ts, duration } = timeline
diff --git a/animism-align/frontend/views/align/components/playButton.component.js b/animism-align/frontend/views/align/components/playButton.component.js
new file mode 100644
index 0000000..fcb1422
--- /dev/null
+++ b/animism-align/frontend/views/align/components/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/playCursor.component.js b/animism-align/frontend/views/align/components/playCursor.component.js
new file mode 100644
index 0000000..f191bb1
--- /dev/null
+++ b/animism-align/frontend/views/align/components/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.component.js b/animism-align/frontend/views/align/components/timeline.component.js
index 86175cf..3b12cb5 100644
--- a/animism-align/frontend/views/align/components/timeline.component.js
+++ b/animism-align/frontend/views/align/components/timeline.component.js
@@ -9,6 +9,8 @@ import actions from '../../../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'
@@ -19,6 +21,7 @@ class Timeline extends Component {
     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()
@@ -33,10 +36,31 @@ class Timeline extends Component {
     document.removeEventListener('keydown', this.handleKeydown)
   }
   handleKeydown(e) {
-    if (e.shiftKey && e.keyCode === 189) {
-      actions.align.setZoom(this.props.timeline.zoom - 1)
-    } else if (e.shiftKey && e.keyCode === 187) {
-      actions.align.setZoom(this.props.timeline.zoom + 1)
+    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) {
@@ -45,28 +69,26 @@ class Timeline extends Component {
     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))
-    console.log(start_ts)
-    actions.align.setScrollPosition(start_ts)
+    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 { start_ts, zoom, duration } = this.props.timeline
-    const y = e.pageY
-    const height = window.innerHeight
-
-    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
-    let widthTimeDuration = height * secondsPerPixel
-
-    let timeMin = start_ts
-    let timeMax = Math.min(start_ts + widthTimeDuration, duration)
-    let timeWidth = timeMax - timeMin
-
-    let cursor_ts = y * secondsPerPixel + start_ts
-    cursor_ts = clamp(cursor_ts, 0, timeMax)
-
+    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
     actions.align.setCursor(cursor_ts)
-
-    // let pixelMin = timeMin / secondsPerPixel
-    // const ts = 
+  }
+  handleClick(e) {
+    const play_ts = positionToTime(e.pageY, this.props.timeline)
+    actions.audio.seek(play_ts)
   }
   render() {
     return (
@@ -75,14 +97,27 @@ class Timeline extends Component {
         onWheel={this.handleWheel}
         onMouseMove={this.handleMouseMove}
       >
-        <Waveform />
+        <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,
 })
diff --git a/animism-align/frontend/views/align/components/waveform.component.js b/animism-align/frontend/views/align/components/waveform.component.js
index 4cd9963..e454623 100644
--- a/animism-align/frontend/views/align/components/waveform.component.js
+++ b/animism-align/frontend/views/align/components/waveform.component.js
@@ -83,7 +83,7 @@ class Waveform extends Component {
   }
   render() {
     return (
-      <canvas ref={this.canvasRef} />
+      <canvas ref={this.canvasRef} onClick={this.props.onClick} />
     )
   }
 }
diff --git a/animism-align/frontend/views/audio/audio.actions.js b/animism-align/frontend/views/audio/audio.actions.js
new file mode 100644
index 0000000..963d8b0
--- /dev/null
+++ b/animism-align/frontend/views/audio/audio.actions.js
@@ -0,0 +1,40 @@
+import * as types from '../../types'
+import { store, history, dispatch } from '../../store'
+import actions from '../../actions'
+import { session } from '../../session'
+
+const audioPlayer = document.createElement('audio')
+audioPlayer.src = '/static/data_store/peaks/animismA200620.mp3'
+audioPlayer.addEventListener('loadedmetadata', () => {
+  console.log('audio duration:', audioPlayer.duration)
+  dispatch({ type: types.align.set_display_setting, key: 'duration', value: audioPlayer.duration })
+})
+audioPlayer.addEventListener('play', () => {
+  dispatch({ type: types.audio.play })
+})
+audioPlayer.addEventListener('pause', () => {
+  dispatch({ type: types.audio.pause })
+})
+audioPlayer.addEventListener('timeupdate', () => {
+  dispatch({ type: types.audio.update_time, play_ts: audioPlayer.currentTime })
+})
+
+export const play = () => dispatch => {
+  audioPlayer.play()
+}
+export const pause = () => dispatch => {
+  audioPlayer.pause()
+}
+export const seek = play_ts => dispatch => {
+  audioPlayer.currentTime = play_ts
+}
+export const jump = delta_ts => dispatch => {
+  audioPlayer.currentTime += delta_ts
+}
+export const toggle = () => dispatch => {
+  if (store.getState().audio.playing) {
+    pause()(dispatch)
+  } else {
+    play()(dispatch)
+  }
+}
\ No newline at end of file
diff --git a/animism-align/frontend/views/audio/audio.reducer.js b/animism-align/frontend/views/audio/audio.reducer.js
new file mode 100644
index 0000000..e37933d
--- /dev/null
+++ b/animism-align/frontend/views/audio/audio.reducer.js
@@ -0,0 +1,30 @@
+import * as types from '../../types'
+import { session, getDefault, getDefaultInt } from '../../session'
+
+const initialState = {
+  playing: false,
+  play_ts: 0,
+}
+
+export default function alignReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  switch (action.type) {
+    case types.audio.play:
+      return {
+        ...state,
+        playing: true,
+      }
+    case types.audio.pause:
+      return {
+        ...state,
+        playing: false,
+      }
+    case types.audio.update_time:
+      return {
+        ...state,
+        play_ts: action.play_ts,
+      }
+    default:
+      return state
+  }
+}