15 files changed, 139 insertions, 94 deletions
diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js
index d76a319..dc80fee 100644
--- a/animism-align/frontend/app/utils/index.js
+++ b/animism-align/frontend/app/utils/index.js
@@ -82,6 +82,7 @@ export const timestamp = (n = 0, fps = 1, ms = false, h_label = ':', m_label = '
 }
 
 export const formatSize = n => {
+  if (!n) return "Empty"
   if (n < 1000) return n + " b."
   if (n < 1000000) return (n / 1000).toFixed(1) + " kb."
   if (n < 1000000000) return (n / 1000000).toFixed(1)  + " mb."
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/sidebar/components/script.component.js
index d23b3da..d23b3da 100644
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/script.component.js
+++ b/animism-align/frontend/app/views/editor/sidebar/components/script.component.js
diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js b/animism-align/frontend/app/views/editor/sidebar/components/tableOfContents.component.js
index 8fb3d54..239dc69 100644
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js
+++ b/animism-align/frontend/app/views/editor/sidebar/components/tableOfContents.component.js
@@ -12,6 +12,7 @@ class TableOfContents extends Component {
     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}
diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js b/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js
index 27047ef..3ca19f0 100644
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
+++ b/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js
@@ -58,22 +58,45 @@ class WaveUpload extends Component {
     this.destroyTaggedFile('peaks')
     this.destroyTaggedFile('audio')
     .then(() => {
-      return this.uploadTaggedFile(peaksBlob, 'peaks', 'episode-' + this.props.episode.id + '-peaks.json')
+      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)
+      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 })
+      this.setState({
+        status: "Upload complete",
+        working: false,
+        filename: null,
+        duration: null,
+        size: null,
+      })
     })
   }
 
-  uploadTaggedFile(file, tag, fn) {
+  uploadTaggedFile(file, tag, fn, meta) {
     return new Promise((resolve, reject) => {
       this.setState({ status: "Uploading " + tag + "..." })
       const uploadData = {
@@ -82,10 +105,13 @@ class WaveUpload extends Component {
         __file_filename: fn,
         username: this.props.currentUser.username,
       }
-      console.log(uploadData)
+      // console.log(uploadData)
       return actions.upload.upload(uploadData).then(data => {
-        console.log(data)
-        resolve(data.res)
+        // console.log(data)
+        resolve({
+          ...data.res,
+          ...meta
+        })
       })
     })
   }
@@ -109,8 +135,16 @@ class WaveUpload extends Component {
 
   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}
diff --git a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js b/animism-align/frontend/app/views/editor/sidebar/sidebar.container.js
index 8ff8181..350505b 100644
--- a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
+++ b/animism-align/frontend/app/views/editor/sidebar/sidebar.container.js
@@ -2,11 +2,13 @@ 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/sidebar/script.component.js'
-import TableOfContents from '../components/sidebar/tableOfContents.component.js'
-import WaveUpload from '../components/sidebar/waveUpload.component.js'
+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 = {
@@ -23,9 +25,9 @@ class Sidebar extends Component {
     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>
+          <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 />}
diff --git a/animism-align/frontend/app/views/editor/align/sidebar.css b/animism-align/frontend/app/views/editor/sidebar/sidebar.css
index 7c19797..e4d0f61 100644
--- a/animism-align/frontend/app/views/editor/align/sidebar.css
+++ b/animism-align/frontend/app/views/editor/sidebar/sidebar.css
@@ -26,10 +26,16 @@
 .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;
diff --git a/animism-align/frontend/app/views/editor/align/components/timeline/cursor.component.js b/animism-align/frontend/app/views/editor/timeline/components/cursor.component.js
index 4a94100..4a94100 100644
--- a/animism-align/frontend/app/views/editor/align/components/timeline/cursor.component.js
+++ b/animism-align/frontend/app/views/editor/timeline/components/cursor.component.js
diff --git a/animism-align/frontend/app/views/editor/align/components/timeline/cursorRegion.component.js b/animism-align/frontend/app/views/editor/timeline/components/cursorRegion.component.js
index a0c9bd7..a0c9bd7 100644
--- a/animism-align/frontend/app/views/editor/align/components/timeline/cursorRegion.component.js
+++ b/animism-align/frontend/app/views/editor/timeline/components/cursorRegion.component.js
diff --git a/animism-align/frontend/app/views/editor/align/components/timeline/playCursor.component.js b/animism-align/frontend/app/views/editor/timeline/components/playCursor.component.js
index 80da31f..80da31f 100644
--- a/animism-align/frontend/app/views/editor/align/components/timeline/playCursor.component.js
+++ b/animism-align/frontend/app/views/editor/timeline/components/playCursor.component.js
diff --git a/animism-align/frontend/app/views/editor/align/components/timeline/ticks.component.js b/animism-align/frontend/app/views/editor/timeline/components/ticks.component.js
index 4530863..4530863 100644
--- a/animism-align/frontend/app/views/editor/align/components/timeline/ticks.component.js
+++ b/animism-align/frontend/app/views/editor/timeline/components/ticks.component.js
diff --git a/animism-align/frontend/app/views/editor/align/components/timeline/waveform.component.js b/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js
index 0161129..0161129 100644
--- a/animism-align/frontend/app/views/editor/align/components/timeline/waveform.component.js
+++ b/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js
diff --git a/animism-align/frontend/app/views/editor/align/containers/timeline.container.js b/animism-align/frontend/app/views/editor/timeline/timeline.container.js
index dbef60f..3b7a2dd 100644
--- a/animism-align/frontend/app/views/editor/align/containers/timeline.container.js
+++ b/animism-align/frontend/app/views/editor/timeline/timeline.container.js
@@ -2,14 +2,17 @@ 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/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 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'
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;
+}