1 files changed, 25 insertions, 8 deletions

diff --git a/app/client/modules/pix2wav/views/spectrogram.upload.js b/app/client/modules/pix2wav/views/spectrogram.upload.js
index efbfca7..111a2a7 100644
--- a/app/client/modules/pix2wav/views/spectrogram.upload.js
+++ b/app/client/modules/pix2wav/views/spectrogram.upload.js
@@ -14,6 +14,7 @@ import {
 
 import * as datasetActions from '../../../dataset/dataset.actions'
 import * as wav2pixActions from '../../../audio/wav2pix'
+import * as pix2wavPlayer from '../../../audio/pix2wav'
 
 import pix2wavModule from '../pix2wav.module'
 
@@ -30,6 +31,7 @@ class SpectrogramUpload extends Component {
       frames: [],
       frame_start: 0,
       max: 1000,
+      preview_count: 8*4,
       frame_step: wav2pixActions.FRAME_STEP,
     }
     const audioElement = document.createElement('audio')
@@ -59,8 +61,8 @@ class SpectrogramUpload extends Component {
     this.audioElement.src = URL.createObjectURL(file)
   }
   rebuildFrames(){
-    const { file, pcm, frame_step, frame_start } = this.state
-    this.props.wav2pix.renderFrames(pcm || file, { frame_start, frame_step })
+    const { file, pcm, frame_step, frame_start, preview_count } = this.state
+    this.props.wav2pix.renderFrames(pcm || file, { frame_start, frame_step, max: preview_count })
     .then(data => {
       console.log('got frames', data.frames.length)
       this.setState({
@@ -83,6 +85,12 @@ class SpectrogramUpload extends Component {
       )
     })
   }
+  playFrame(i){
+    return () => {
+      const frame = this.state.frames[i]
+      pix2wavPlayer.play(frame)
+    }
+  }
   render(){
     // loading={pix2wav.loading}
     // progress={pix2wav.progress}
@@ -90,7 +98,11 @@ class SpectrogramUpload extends Component {
     // module={pix2wavModule}
     // data={pix2wav.data}
     // folder={folder}
-    const { file, frames } = this.state
+    const { file, frames, preview_count } = this.state
+    const canvases = []
+    for (let i = 0, _len = preview_count; i < _len; i++) {
+      canvases.push(<canvas key={i} onClick={this.playFrame(i)} />)
+    }
     return (
       <div className='row'>
         <div className='col spectrogramBuilder'>
@@ -107,12 +119,14 @@ class SpectrogramUpload extends Component {
             {file && this.renderMetadata(file)}
           </Group>
         </div>
-        <div ref={(c) => { this.canvases = c }} className='thumbs' id='pix2wav_canvases' />
+        <div ref={(c) => { this.canvases = c }} className='thumbs' id='pix2wav_canvases'>
+          {canvases}
+        </div>
       </div>
     )
   }
   renderMetadata(file){
-    const { duration } = this.state
+    const { duration, preview_count } = this.state
     const size = util.hush_size(file.size)
     const total_frame_count = Math.floor((duration * 44100 - wav2pixActions.FRAME_LENGTH) / this.state.frame_step)
     const frame_size = Math.round(wav2pixActions.FRAME_LENGTH / 44100 * 1000) + ' ms.'
@@ -185,9 +199,12 @@ class SpectrogramUpload extends Component {
     )
   }
   componentDidUpdate(){
-    this.canvases.innerHTML = ''
-    const canvases = (this.state.frames || []).map(c => {
-      this.canvases.append(c.canvas)
+    (this.state.frames || []).map((frame, i) => {
+      const canvas = this.canvases.children[i]
+      const ctx = canvas.getContext('2d-lodpi')
+      canvas.width = frame.canvas.width
+      canvas.height = frame.canvas.height
+      ctx.drawImage(frame.canvas, 0, 0)
     })
   }
 }