From 24a47dfa9d25c943bf1b51a1daf87140f76b3fbb Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 6 Jun 2018 03:38:41 +0200
Subject: displaying these gray ass thumbnails

---
 app/client/modules/pix2wav/pix2wav.reducer.js      |  22 ++++
 app/client/modules/pix2wav/views/pix2wav.show.js   |  12 ++
 .../modules/pix2wav/views/spectrogram.upload.js    | 132 +++++++++++++++++++++
 3 files changed, 166 insertions(+)
 create mode 100644 app/client/modules/pix2wav/views/spectrogram.upload.js

(limited to 'app/client/modules/pix2wav')

diff --git a/app/client/modules/pix2wav/pix2wav.reducer.js b/app/client/modules/pix2wav/pix2wav.reducer.js
index 0b55b07..8db1046 100644
--- a/app/client/modules/pix2wav/pix2wav.reducer.js
+++ b/app/client/modules/pix2wav/pix2wav.reducer.js
@@ -4,6 +4,7 @@ import datasetReducer from '../../dataset/dataset.reducer'
 const pix2wavInitialState = {
   loading: true,
   progress: { i: 0, n: 0 },
+  status: '',
   error: null,
   folder_id: 0,
   data: null,
@@ -15,6 +16,27 @@ const pix2wavReducer = (state = pix2wavInitialState, action) => {
   }
 
   switch (action.type) {
+    case types.wav2pix.loaded_buffer:
+      return {
+        ...state,
+        status: 'Loaded buffer',
+      }
+    case types.wav2pix.draw_progress:
+      console.log(action)
+      return {
+        ...state,
+        status: 'Rendering frame /',
+      }
+    case types.wav2pix.draw_finish:
+      return {
+        ...state,
+        status: 'Render complete',
+      }
+    case types.wav2pix.load_zip:
+      return {
+        ...state,
+        status: 'Built zip file',
+      }
     default:
       return state
   }
diff --git a/app/client/modules/pix2wav/views/pix2wav.show.js b/app/client/modules/pix2wav/views/pix2wav.show.js
index acb99b1..19f303d 100644
--- a/app/client/modules/pix2wav/views/pix2wav.show.js
+++ b/app/client/modules/pix2wav/views/pix2wav.show.js
@@ -12,6 +12,8 @@ import NewDatasetForm from '../../../dataset/dataset.new'
 import UploadStatus from '../../../dataset/upload.status'
 import { FileList, FileRow } from '../../../common/fileList.component'
 
+import SpectrogramUpload from './spectrogram.upload'
+
 import DatasetComponent from '../../../dataset/dataset.component'
 
 import pix2wavModule from '../pix2wav.module'
@@ -31,6 +33,8 @@ class Pix2wavShow extends Component {
       if (! pix2wav.folder || pix2wav.folder.id !== id) {
         actions.load_directories(id)
       }
+    } else {
+      this.props.history.push('/pix2wav/new/')
     }
   }
   render(){
@@ -46,6 +50,14 @@ class Pix2wavShow extends Component {
             <UploadStatus />
           </div>
         </div>
+        <SpectrogramUpload
+          loading={pix2wav.loading}
+          progress={pix2wav.progress}
+          id={pix2wav.folder_id}
+          module={pix2wavModule}
+          data={pix2wav.data}
+          folder={folder}
+        />
         <DatasetComponent
           loading={pix2wav.loading}
           progress={pix2wav.progress}
diff --git a/app/client/modules/pix2wav/views/spectrogram.upload.js b/app/client/modules/pix2wav/views/spectrogram.upload.js
new file mode 100644
index 0000000..a0a2708
--- /dev/null
+++ b/app/client/modules/pix2wav/views/spectrogram.upload.js
@@ -0,0 +1,132 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import moment from 'moment'
+import util from '../../../util'
+
+import * as pix2wavActions from '../pix2wav.actions'
+import * as pix2wavTasks from '../pix2wav.tasks'
+
+import {
+  Loading, Progress,
+  Group, Param, FileUpload, TextInput, Button
+} from '../../../common'
+
+import * as wav2pixActions from '../../../audio/wav2pix'
+
+import pix2wavModule from '../pix2wav.module'
+
+class SpectrogramUpload extends Component {
+  constructor(props){
+    super(props)
+    this.state = {
+      file: null,
+      name: "",
+      frames: [],
+    }
+    const audioElement = document.createElement('audio')
+    audioElement.addEventListener('loadedmetadata', () => {
+      this.setState({ duration: audioElement.duration })
+    })
+    this.audioElement = audioElement
+  }
+  pickFile(file){
+    let name = file.name.split('.')[0]
+      .replace(/\s+/g, '_')
+      .replace(/-/g, '_')
+      .replace(/_+/g, '_')
+    this.setState({ file, name })
+    this.audioElement.src = URL.createObjectURL(file)
+    console.log(file.size)
+    if (file.size < 2 << 20) {
+      console.log('booooooooo')
+      this.props.wav2pix.renderFrames(file, {})
+      .then(frames => {
+        console.log(frames)
+        this.setState({
+          ...this.state, frames
+        })
+      })
+    }
+    console.log(file)
+    // get info on the file... size, etc
+  }
+  buildZip(){
+    const { file } = this.state
+
+  }
+  render(){
+    // loading={pix2wav.loading}
+    // progress={pix2wav.progress}
+    // id={pix2wav.folder_id}
+    // module={pix2wavModule}
+    // data={pix2wav.data}
+    // folder={folder}
+    const { file, frames } = this.state
+    return (
+      <div className='row'>
+        <div className='col spectrogramBuilder'>
+          <Group title='Spectrogram Builder'>
+            <p>
+              {"Convert your sounds into spectrograms. "}
+              {"Sound files can be WAV, MP3, AIFF, or FLAC. "}
+              <b>2 minutes max.</b>
+            </p>
+            <FileUpload
+              title='Choose a sound file'
+              mime='image.*'
+              onUpload={file => this.pickFile(file)}
+            />
+            <TextInput
+              title='Dataset name'
+              onChange={e => this.setState({ name: e.target.value })}
+              value={this.state.name}
+            />
+            <Button
+              onClick={() => this.buildZip()}
+            >Build Zip</Button>
+            <Progress />
+            {file && this.renderMetadata(file)}
+          </Group>
+        </div>
+        <div ref={(c) => { this.canvases = c }} id='pix2wav_canvases' />
+      </div>
+    )
+  }
+  renderMetadata(file){
+    const { duration } = this.state
+    const size = util.hush_size(file.size)
+    return (
+      <div className='fileMetadata'>
+        {file.size > 2 << 20 &&
+          <p>
+            <i>Careful, your file is larger than 2 MB.</i>
+          </p>}
+        <Param title='Name'>{file.name}</Param>
+        <Param title='Type'>{file.type}</Param>
+        <Param title='Size'><span className={size[0]}>{size[1]}</span></Param>
+        <Param title='Date'>{moment(file.lastModifiedDate).format("YYYY-MM-DD h:mm a")}</Param>
+        <Param title='Duration'>{Math.floor(duration) + ' s.'}</Param>
+        <br />
+        <Param title='Status'>{this.props.pix2wav.status}</Param>
+      </div>
+    )
+  }
+  componentDidUpdate(){
+    const canvases = (this.state.frames || []).map(c => {
+      this.canvases.append(c.canvas)
+    })
+  }
+}
+
+const mapStateToProps = state => ({
+  pix2wav: state.module.pix2wav,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(pix2wavActions, dispatch),
+  remote: bindActionCreators(pix2wavTasks, dispatch),
+  wav2pix: bindActionCreators(wav2pixActions, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SpectrogramUpload)
-- 
cgit v1.2.3-70-g09d2