uploading peaks and audio file works!

9 files changed, 115 insertions, 17 deletions

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
index 68ef1e0..27047ef 100644
--- 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
@@ -1,13 +1,17 @@
 import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
+import extractPeaks from 'webaudio-peaks'
 
-// import actions from 'app/actions'
+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) {
@@ -24,18 +28,83 @@ class WaveUpload extends Component {
       console.log('No file specified')
       return
     }
-    this.setState({ working: true, status: "Loading" })
+    this.setState({ working: true, status: "Loading MP3...", filename: file.name, size: file.size, duration: 0 })
     const fileReader = new FileReader()
-    fileReader.onload = fileReaderEvent => {
+    fileReader.onload = event => {
       fileReader.onload = null
-      this.processAudioFile({ file })
+      this.processAudioFile(file, event.target.result)
     }
-    fileReader.readAsDataURL(file)
+    fileReader.readAsArrayBuffer(file)
   }
 
-  processAudioFile(file) {
-    var context = new (window.AudioContext);
-    source = context.createBufferSource();
+  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() {
@@ -64,9 +133,15 @@ class WaveUpload extends Component {
           />
         </div>
         <small>Upload an MP3, encoded 192kbit constant bitrate, 44.1kHz stereo</small>
-        <div>
-          {this.state.status}
-        </div>
+        {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>
     )
   }
@@ -74,6 +149,8 @@ class WaveUpload extends Component {
 
 const mapStateToProps = state => ({
   peaks: state.align.peaks,
+  currentUser: state.auth.user,
+  project: state.site.project,
   episode: state.site.episode,
 })
 
diff --git a/animism-align/frontend/app/views/editor/align/sidebar.css b/animism-align/frontend/app/views/editor/align/sidebar.css
index 4836127..7c19797 100644
--- a/animism-align/frontend/app/views/editor/align/sidebar.css
+++ b/animism-align/frontend/app/views/editor/align/sidebar.css
@@ -51,6 +51,19 @@
   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 */
 
diff --git a/animism-align/frontend/app/views/editor/media/components/media.form.js b/animism-align/frontend/app/views/editor/media/components/media.form.js
index 2c89fcd..df86516 100644
--- a/animism-align/frontend/app/views/editor/media/components/media.form.js
+++ b/animism-align/frontend/app/views/editor/media/components/media.form.js
@@ -143,7 +143,7 @@ export default class MediaForm extends Component {
   }
 
   render() {
-    const { isNew } = this.props
+    const { isNew, currentUser } = this.props
     const { title, submitTitle, errorFields, data } = this.state
     // console.log(data)
     return (
@@ -161,6 +161,7 @@ export default class MediaForm extends Component {
           {data.type === 'image' &&
             <MediaImageForm
               data={data}
+              currentUser={currentUser}
               onChange={this.handleSelect}
               onSettingsChange={this.handleSettingsChange}
             />
@@ -169,6 +170,7 @@ export default class MediaForm extends Component {
           {data.type === 'video' &&
             <MediaVideoForm
               data={data}
+              currentUser={currentUser}
               onChange={this.handleSelect}
               onSettingsChange={this.handleSettingsChange}
             />
@@ -177,6 +179,7 @@ export default class MediaForm extends Component {
           {data.type === 'file' &&
             <MediaFileForm
               data={data}
+              currentUser={currentUser}
               onChange={this.handleSelect}
               onSettingsChange={this.handleSettingsChange}
             />
@@ -185,6 +188,7 @@ export default class MediaForm extends Component {
           {data.type === 'gallery' &&
             <MediaGalleryForm
               data={data}
+              currentUser={currentUser}
               onChange={this.handleSelect}
               onSettingsChange={this.handleSettingsChange}
             />
diff --git a/animism-align/frontend/app/views/editor/media/components/media.formFile.js b/animism-align/frontend/app/views/editor/media/components/media.formFile.js
index d3b1ae8..bec0a90 100644
--- a/animism-align/frontend/app/views/editor/media/components/media.formFile.js
+++ b/animism-align/frontend/app/views/editor/media/components/media.formFile.js
@@ -38,7 +38,7 @@ export default class MediaFileForm extends Component {
     const uploadData = {
       image: file,
       tag: "file",
-      username: 'animism',
+      username: this.props.currentUser.username,
     }
     // uploadData['__image_filename'] = file.filename
     return actions.upload.upload(uploadData).then(data => {
diff --git a/animism-align/frontend/app/views/editor/media/components/media.formGallery.js b/animism-align/frontend/app/views/editor/media/components/media.formGallery.js
index 2cf894b..4003c7d 100644
--- a/animism-align/frontend/app/views/editor/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/editor/media/components/media.formGallery.js
@@ -181,7 +181,7 @@ export default class MediaGalleryForm extends Component {
     const uploadData = {
       image,
       tag,
-      username: 'animism',
+      username: this.props.currentUser.username,
     }
     if (fn) {
       uploadData['__image_filename'] = fn
diff --git a/animism-align/frontend/app/views/editor/media/components/media.formImage.js b/animism-align/frontend/app/views/editor/media/components/media.formImage.js
index dbbf69f..027926b 100644
--- a/animism-align/frontend/app/views/editor/media/components/media.formImage.js
+++ b/animism-align/frontend/app/views/editor/media/components/media.formImage.js
@@ -103,7 +103,7 @@ export default class MediaImageForm extends Component {
     const uploadData = {
       image,
       tag,
-      username: 'animism',
+      username: this.props.currentUser.username,
     }
     if (fn) {
       uploadData['__image_filename'] = fn
diff --git a/animism-align/frontend/app/views/editor/media/components/media.formVideo.js b/animism-align/frontend/app/views/editor/media/components/media.formVideo.js
index 315925c..656ad2f 100644
--- a/animism-align/frontend/app/views/editor/media/components/media.formVideo.js
+++ b/animism-align/frontend/app/views/editor/media/components/media.formVideo.js
@@ -60,7 +60,7 @@ export default class MediaVideoForm extends Component {
     const uploadData = {
       image: file,
       tag: "poster",
-      username: 'animism',
+      username: this.props.currentUser.username,
     }
     // uploadData['__image_filename'] = file.filename
     return actions.upload.upload(uploadData).then(data => {
diff --git a/animism-align/frontend/app/views/editor/media/containers/media.edit.js b/animism-align/frontend/app/views/editor/media/containers/media.edit.js
index 37a91ef..6799494 100644
--- a/animism-align/frontend/app/views/editor/media/containers/media.edit.js
+++ b/animism-align/frontend/app/views/editor/media/containers/media.edit.js
@@ -38,6 +38,7 @@ class MediaEdit extends Component {
         <MediaMenu mediaActions={this.props.mediaActions} />
         <MediaForm
           data={show.res}
+          currentUser={this.props.currentUser}
           onSubmit={this.handleSubmit.bind(this)}
         />
       </div>
@@ -48,6 +49,7 @@ class MediaEdit extends Component {
 const mapStateToProps = state => ({
   media: state.media,
   episode_id: state.site.episode.id,
+  currentUser: state.auth.user,
 })
 
 export default connect(mapStateToProps)(MediaEdit)
diff --git a/animism-align/frontend/app/views/editor/media/containers/media.new.js b/animism-align/frontend/app/views/editor/media/containers/media.new.js
index 1a41503..0a1be55 100644
--- a/animism-align/frontend/app/views/editor/media/containers/media.new.js
+++ b/animism-align/frontend/app/views/editor/media/containers/media.new.js
@@ -63,6 +63,7 @@ class MediaNew extends Component {
         <MediaForm
           isNew
           data={this.state.initialData}
+          currentUser={this.props.currentUser}
           onSubmit={this.handleSubmit.bind(this)}
         />
       </div>
@@ -73,6 +74,7 @@ class MediaNew extends Component {
 const mapStateToProps = state => ({
   media: state.media,
   episode_id: state.site.episode.id,
+  currentUser: state.auth.user,
 })
 
 export default connect(mapStateToProps)(MediaNew)