1 files changed, 28 insertions, 17 deletions
diff --git a/app/client/modules/pix2wav/views/spectrogram.upload.js b/app/client/modules/pix2wav/views/spectrogram.upload.js
index 0279e80..087af6a 100644
--- a/app/client/modules/pix2wav/views/spectrogram.upload.js
+++ b/app/client/modules/pix2wav/views/spectrogram.upload.js
@@ -9,7 +9,7 @@ import * as pix2wavTasks from '../pix2wav.tasks'
 
 import {
   Loading, Progress,
-  Group, Param, FileUpload, TextInput, Button
+  Group, Param, FileUpload, TextInput, Button, Slider,
 } from '../../../common'
 
 import * as datasetActions from '../../../dataset/dataset.actions'
@@ -24,6 +24,7 @@ class SpectrogramUpload extends Component {
       file: null,
       name: "",
       frames: [],
+      max: 3000,
     }
     const audioElement = document.createElement('audio')
     audioElement.addEventListener('loadedmetadata', () => {
@@ -66,7 +67,6 @@ class SpectrogramUpload extends Component {
     // module={pix2wavModule}
     // data={pix2wav.data}
     // folder={folder}
-    console.log(this.props)
     const { file, frames } = this.state
     return (
       <div className='row'>
@@ -98,21 +98,32 @@ class SpectrogramUpload extends Component {
           <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}{this.props.upload.status}</Param>
-        <TextInput
-          title='Dataset name'
-          onChange={e => this.setState({ name: e.target.value })}
-          value={this.state.name}
-        />
-        <Button
-          onClick={() => this.buildZip()}
-        >Build Zip</Button>
+        <Group title='Metadata'>
+          <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}{this.props.upload.status}</Param>
+          <br />
+        </Group>
+        <Group title='Data settings'>
+          <TextInput
+            title='Dataset name'
+            onChange={e => this.setState({ name: e.target.value })}
+            value={this.state.name}
+          />
+          <Slider
+            name='max frame count'
+            min={10} max={10000} type='int'
+            value={this.state.max}
+            onChange={max => this.setState({ max })}
+          />
+          <Button
+            onClick={() => this.buildZip()}
+          >Build Zip</Button>
+        </Group>
         <Progress />
       </div>
     )