From e28171ff3679e8e172d438c796751bf823dfe7f8 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 11 Mar 2021 14:56:28 +0100
Subject: loading peaks correctly

---
 .../frontend/app/views/editor/align/align.actions.js         |  2 +-
 .../views/editor/sidebar/components/waveUpload.component.js  | 12 +++++-------
 .../views/editor/timeline/components/waveform.component.js   |  4 ++--
 3 files changed, 8 insertions(+), 10 deletions(-)

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

diff --git a/animism-align/frontend/app/views/editor/align/align.actions.js b/animism-align/frontend/app/views/editor/align/align.actions.js
index a2f4881..3b6450b 100644
--- a/animism-align/frontend/app/views/editor/align/align.actions.js
+++ b/animism-align/frontend/app/views/editor/align/align.actions.js
@@ -150,7 +150,7 @@ export const spliceTime = start_ts => dispatch => {
 /* peaks */
 
 export const loadPeaks = (episode) => dispatch => (
-  api(dispatch, types.peaks, 'peaks', URLS.peaks)
+  api(dispatch, types.peaks, 'peaks', episode.settings.peaks.url)
 )
 
 /* longform text */
diff --git a/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js b/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js
index 3ca19f0..efd4bee 100644
--- a/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js
+++ b/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import extractPeaks from 'webaudio-peaks'
 
 import actions from 'app/actions'
-import { formatSize, timestampHMS } from 'app/utils'
+import { formatSize, timestampHMS, commatize } from 'app/utils'
 import { Loader } from 'app/common'
 
 class WaveUpload extends Component {
@@ -43,7 +43,7 @@ class WaveUpload extends Component {
     audioContext.decodeAudioData(arrayBuffer, (audioBuffer) => {
       // buffer, samplesPerPixel, isMono, startOffset, endOffset, bitResolution
       this.setState({ duration: audioBuffer.duration })
-      var peaks = extractPeaks(audioBuffer, 441, true);
+      var peaks = extractPeaks(audioBuffer, audioBuffer.sampleRate / 5, true);
       console.log(peaks)
       const array = Array.from(peaks.data[0])
       const peaksBlob = new Blob([ JSON.stringify(array) ], {type: "application/json"});
@@ -93,6 +93,8 @@ class WaveUpload extends Component {
         duration: null,
         size: null,
       })
+      actions.align.loadPeaks(episode)
+      actions.audio.loadEpisodeAudio(episode)
     })
   }
 
@@ -143,11 +145,7 @@ class WaveUpload extends Component {
             <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}
+            <small>{'Peaks: '}{commatize(peaks.length)}</small>
           </div>
         )}
         <div className="uploadButton">
diff --git a/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js b/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js
index 0161129..992f0d5 100644
--- a/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js
+++ b/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js
@@ -68,13 +68,13 @@ class Waveform extends Component {
     for (i = 0; i < pixelWidth; i++) {
       step = i * stepsPerPixel + stepMin
       peak = peaks[step]
-      y = (1 - peak) * waveformPeak
+      y = (1 - peak / 127) * waveformPeak
       ctx.lineTo(y, i)
     }
     for (i = pixelWidth - 1; i > 0; i--) {
       step = i * stepsPerPixel + stepMin
       peak = peaks[step]
-      y = (1 + peak) * waveformPeak
+      y = (1 + peak / 127) * waveformPeak
       ctx.lineTo(y, i)
     }
     ctx.lineTo(origin, 0)
-- 
cgit v1.2.3-70-g09d2