move views into own folder and begin prising away dataset code

1 files changed, 118 insertions, 0 deletions

diff --git a/app/client/modules/samplernn/views/samplernn.show.js b/app/client/modules/samplernn/views/samplernn.show.js
new file mode 100644
index 0000000..8b42d44
--- /dev/null
+++ b/app/client/modules/samplernn/views/samplernn.show.js
@@ -0,0 +1,118 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import * as util from '../../../util'
+
+import * as samplernnActions from '../samplernn.actions'
+import * as samplernnTasks from '../samplernn.tasks'
+import * as audioPlayerActions from '../../../common/audioPlayer/audioPlayer.actions'
+
+import Loading from '../../../common/loading.component'
+import DatasetForm from '../../../dataset/dataset.form'
+import NewDatasetForm from '../../../dataset/dataset.new'
+import DatasetStatus from '../../../dataset/dataset.status'
+import { FileList, FileRow } from '../../../common/fileList.component'
+
+import SampleRNNDatasets from '../samplernn.datasets'
+
+import samplernnModule from '../samplernn.module'
+
+class SampleRNNShow extends Component {
+  constructor(props){
+    super(props)
+    this.datasetActions = this.datasetActions.bind(this)
+  }
+  componentWillMount(){
+    const id = this.props.match.params.id || localStorage.getItem('samplernn.last_id')
+    console.log('load dataset:', id)
+    const { match, samplernn, actions } = this.props
+    if (id === 'new') return
+    if (id) {
+      if (parseInt(id)) localStorage.setItem('samplernn.last_id', id)
+      if (! samplernn.folder || samplernn.folder.id !== id) {
+        actions.load_directories(id)
+      }
+    }
+  }
+  render(){
+    const { samplernn, match, history } = this.props
+    const { folderLookup } = (samplernn.data || {})
+    const folder = (folderLookup || {})[samplernn.folder_id] || {}
+    return (
+      <div className='app samplernn'>
+        <div class='heading'>
+          <div class='spaced'>
+            <h1>{folder ? folder.name : <Loading />}</h1>
+            <DatasetStatus />
+          </div>
+        </div>
+        {folder && folder.name && folder.name !== 'unsorted' &&
+          <DatasetForm
+            title='Add Files'
+            module={samplernnModule}
+            folder={folder}
+            canUpload canAddURL
+          />
+        }
+        <SampleRNNDatasets
+          id={samplernn.folder_id}
+          folder={folder}
+          history={history}
+          onPickFile={(file, e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            console.log('picked a file', file)
+            this.handlePick(file)
+          }}
+          datasetActions={this.datasetActions}
+        />
+      </div>
+    )
+  }
+  datasetActions(dataset, isFetching=false, isProcessing=false){
+    const { samplernn, remote } = this.props
+    const input = samplernn.data.fileLookup[dataset.input[0]]
+    if (! input) return null
+    if (input.name && input.name.match(/(gif|jpe?g|png)$/i)) return null
+    return (
+      <div>
+        <div class={'actions'}>
+          <span class='link' onClick={() => remote.train_task(dataset, samplernn.folder_id, 1)}>train</span>
+          <span class='link' onClick={() => remote.train_task(dataset, samplernn.folder_id, 2)}>2x</span>
+          <span class='link' onClick={() => remote.train_task(dataset, samplernn.folder_id, 4)}>4x</span>
+          <span class='link' onClick={() => remote.train_task(dataset, samplernn.folder_id, 6)}>6x</span>
+          <span class='link' onClick={() => remote.train_task(dataset, samplernn.folder_id, 18)}>18x</span>
+        </div>
+        {dataset.isBuilt
+        ? <div class='subtext'>
+            {'fetched '}
+            <span class='link' onClick={() => remote.clear_cache_task(dataset)}>rm</span>
+          </div>
+        : isFetching
+        ? <div class='subtext'>
+            {'fetching'}
+          </div>
+        : <div class='subtext'>
+            <span class='link' onClick={() => remote.fetch_task(input.url, input.id, dataset.name)}>fetch</span>
+          </div>
+        }
+      </div>
+    )
+  }
+  handlePick(file){
+    this.props.audioPlayer.play(file)
+  }
+}
+
+const mapStateToProps = state => ({
+  samplernn: state.module.samplernn,
+  dataset: state.dataset,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(samplernnActions, dispatch),
+  remote: bindActionCreators(samplernnTasks, dispatch),
+  audioPlayer: bindActionCreators(audioPlayerActions, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNShow)