diff options
Diffstat (limited to 'app/client/modules/pix2wav')
| -rw-r--r-- | app/client/modules/pix2wav/pix2wav.reducer.js | 22 | ||||
| -rw-r--r-- | app/client/modules/pix2wav/views/pix2wav.show.js | 12 | ||||
| -rw-r--r-- | app/client/modules/pix2wav/views/spectrogram.upload.js | 132 |
3 files changed, 166 insertions, 0 deletions
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) |