summaryrefslogtreecommitdiff
path: root/app/client/modules
diff options
context:
space:
mode:
Diffstat (limited to 'app/client/modules')
-rw-r--r--app/client/modules/pix2pix/views/pix2pix.show.js2
-rw-r--r--app/client/modules/pix2wav/pix2wav.reducer.js22
-rw-r--r--app/client/modules/pix2wav/views/pix2wav.show.js12
-rw-r--r--app/client/modules/pix2wav/views/spectrogram.upload.js132
-rw-r--r--app/client/modules/samplernn/views/samplernn.show.js2
5 files changed, 170 insertions, 0 deletions
diff --git a/app/client/modules/pix2pix/views/pix2pix.show.js b/app/client/modules/pix2pix/views/pix2pix.show.js
index 2139c6c..9c55b0b 100644
--- a/app/client/modules/pix2pix/views/pix2pix.show.js
+++ b/app/client/modules/pix2pix/views/pix2pix.show.js
@@ -31,6 +31,8 @@ class Pix2pixShow extends Component {
if (! pix2pix.folder || pix2pix.folder.id !== id) {
actions.load_directories(id)
}
+ } else {
+ this.props.history.push('/pix2pix/new/')
}
}
render(){
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)
diff --git a/app/client/modules/samplernn/views/samplernn.show.js b/app/client/modules/samplernn/views/samplernn.show.js
index b7e0740..a905b7c 100644
--- a/app/client/modules/samplernn/views/samplernn.show.js
+++ b/app/client/modules/samplernn/views/samplernn.show.js
@@ -33,6 +33,8 @@ class SampleRNNShow extends Component {
console.log('looooooooooad', id)
actions.load_directories(id)
}
+ } else {
+ this.props.history.push('/samplernn/new/')
}
}
render(){
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 14:18:09 +0000