morph module.. enum method for sliders

1 files changed, 185 insertions, 0 deletions

diff --git a/app/client/modules/morph/views/morph.app.js b/app/client/modules/morph/views/morph.app.js
new file mode 100644
index 0000000..045f396
--- /dev/null
+++ b/app/client/modules/morph/views/morph.app.js
@@ -0,0 +1,185 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux'
+import util from '../../../util'
+
+import actions from '../../../actions'
+
+import * as morphActions from '../morph.actions'
+import * as morphTasks from '../morph.tasks'
+
+import Loading from '../../../common/loading.component'
+import {
+  Select, Slider, Checkbox, Group,
+  Button, Param, FileList, FileRow,
+} from '../../../common'
+
+let yes_count = 0
+
+class MorphResults extends Component {
+  constructor(props){
+    super()
+    this.state = {
+      a: "",
+      b: "",
+      a_offset: 0,
+      b_offset: 0,
+      steps: 16,
+      dilate: 2,
+      smooth: true,
+      cmd: 'mix',
+    }
+    if (!props.morph.data) props.actions.load_data()
+  }
+  componentDidMount(){
+    yes_count = 0
+  }
+  render(){
+    if (! this.props.morph.app) return <Loading progress={this.props.morph.progress} />
+
+    const { sequences, renders, files } = this.props.morph.app
+    const sequence_options = sequences.map(sequence => [
+      sequence.name.split("_").slice(0, 3).join(" ") + "~ (" + sequence.count + ")",
+      sequence.name
+    ])
+
+    console.log(sequence_options)
+    const totalLength = (this.state.steps * this.state.dilate) / 25
+    let lengthWarning
+    if (this.state.steps > 64) {
+      lengthWarning = (
+        <span><br/>warning, this may take a while</span>
+      )
+    }
+
+    return (
+      <div className='app morph'>
+        <div className='heading row middle'>
+          <h1>Morph</h1>
+        </div>
+        <div class='rows params renders'>
+          <div class='column'>
+            <Group title="From">
+              <Select
+                title="Starting sequence"
+                value={this.state.a}
+                options={sequence_options}
+                onChange={key => this.setState({ a: key })}
+              />
+              <Slider
+                title="Offset"
+                value={this.state.a_offset}
+                min={0} max={1} step={0.01}
+                onChange={key => this.setState({ a_offset: key })}
+              />
+            </Group>
+
+            <Group title="To">
+              <Select
+                title="Ending sequence"
+                value={this.state.b}
+                options={sequence_options}
+                onChange={key => this.setState({ b: key })}
+              />
+              <Slider
+                title="Offset"
+                value={this.state.b_offset}
+                min={0} max={1} step={0.01}
+                onChange={key => this.setState({ b_offset: key })}
+              />
+            </Group>
+
+            <Group title="Morph Settings">
+              <Select
+                title="Action"
+                value={this.state.cmd}
+                options={['mix', 'average']}
+                onChange={key => this.setState({ a: key })}
+              />
+              <Slider
+                type="list"
+                title="Steps"
+                value={this.state.steps}
+                options={[2,4,8,16,32,64,128,256]}
+                onChange={key => this.setState({ steps: key })}
+              />
+              <Slider
+                type="list"
+                title="Dilate"
+                value={this.state.dilate}
+                options={[2,4,8,16,32]}
+                onChange={key => this.setState({ dilate: key })}
+              />
+              <Checkbox
+                title="Smooth"
+                value={this.state.smooth}
+                onToggle={key => this.setState({ smooth: key })}
+              />
+              <Button
+                title="Run morph"
+                value="Go"
+              />
+              <br />
+              <Param title="Total length">
+                {totalLength.toFixed(1) + " seconds"}
+              </Param>
+              {lengthWarning}
+              <br />
+            </Group>
+          </div>
+
+          <FileList
+            linkFiles
+            files={files}
+            orderBy='date desc'
+            fields={'name date size delete'}
+            onDelete={file => {
+              let yes;
+              if (yes_count < 3) {
+                yes = confirm('Are you sure you want to delete this file?')
+              } else {
+                yes = true
+              }
+              if (yes) {
+                yes_count += 1
+                console.log('delete: confirmed')
+                actions.file.destroy(file)
+              }
+            }}
+          />
+          <br />
+
+          <h3>renders on server</h3>
+          <FileList
+            files={renders}
+            orderBy='date desc'
+            fields={'name date size'}
+            onClick={(file, e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              console.log('picked a result', file)
+              this.handlePick(file)
+            }}
+          />
+
+        </div>
+      </div>
+    )
+  }
+  handlePick(file){
+    // this.props.audioPlayer.play(file)
+  }
+}
+
+const mapStateToProps = state => ({
+  morph: state.module.morph,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(morphActions, dispatch),
+  remote: bindActionCreators(morphTasks, dispatch),
+  // audioPlayer: bindActionCreators(audioPlayerActions, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(MorphResults)