uploading peaks and audio file works!

1 files changed, 89 insertions, 12 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,
 })