timeline stuff working

1 files changed, 40 insertions, 26 deletions

diff --git a/app/client/modules/pix2pixhd/views/sequence.editor.js b/app/client/modules/pix2pixhd/views/sequence.editor.js
index 3bf2d63..06f3889 100644
--- a/app/client/modules/pix2pixhd/views/sequence.editor.js
+++ b/app/client/modules/pix2pixhd/views/sequence.editor.js
@@ -5,7 +5,7 @@ import { Route, Link } from 'react-router-dom'
 
 import util from '../../../util'
 
-import { FileViewer, Timeline, Param, Button } from '../../../common'
+import { FileViewer, Timeline, Param, Button, Group, TextInput } from '../../../common'
 
 import actions from '../../../actions'
 
@@ -13,6 +13,7 @@ const initialState = {
   dir: '/',
   cursor: null,
   selection: null,
+  title: null,
 }
 
 /*
@@ -64,6 +65,7 @@ class SequenceEditor extends Component {
     console.log(checkpoint)
     this.setState({
       ...initialState,
+      title: checkpoint.name + '_v_' + Date.now()
     })
   }
 
@@ -77,35 +79,47 @@ class SequenceEditor extends Component {
 
   render() {
     const { app, checkpoint } = this.props
-    const { cursor, selection } = this.state
+    const { cursor, selection, title } = this.state
     const path = "sequences/" + checkpoint.name
     return (
-      <div className='sequenceEditor'>
-        <Timeline
-          sequence={checkpoint.sequence}
-          onCursor={this.handleCursor}
-          onSelect={this.handleSelect}
-        />
-        <Frame label='Cursor' path={path} frame={cursor} />
-        {selection && selection.start && 
-          <Frame label='Selection Start' path={path} frame={selection.start} />
-        }
-        {selection && selection.end && 
-          <Frame label='Selection End' path={path} frame={selection.end} />
-        }
-        {selection &&
-          <div className='form'>
-            <Param
-              title='Selection length'
-            >{selection.end.i - selection.start.i}{' frames'}</Param>
-            <Param
-              title='Duration'
-            >{util.frameTimestamp(selection.end.i - selection.start.i)}</Param>
-            <Button
-              title='Create a new dataset?'
-            >Create</Button>
+      <div className='sequenceEditor row'>
+        {selection
+        ? <div className='form'>
+            <Group title='New dataset'>
+              <Param title='Selection length'>
+                {selection.end.i - selection.start.i}{' frames'}
+              </Param>
+              <Param title='Duration'>
+                {util.frameTimestamp(selection.end.i - selection.start.i)}
+              </Param>
+              <TextInput
+                title='Title dataset'
+                value={title}
+                onInput={title => this.setState({ title })}
+              />
+              <Button
+                title='Create a new dataset?'
+              >Create</Button>
+            </Group>
           </div>
+        : <div className='form'><Group title='New dataset'>Please select some frames</Group></div>
         }
+        <div className='rows'>
+          <div className='row'>
+            <Frame label='Cursor' path={path} frame={cursor} />
+            {selection && selection.start && 
+              <Frame label='Selection Start' path={path} frame={selection.start} />
+            }
+            {selection && selection.end && 
+              <Frame label='Selection End' path={path} frame={selection.end} />
+            }
+          </div>
+          <Timeline
+            sequence={checkpoint.sequence}
+            onCursor={this.handleCursor}
+            onSelect={this.handleSelect}
+          />
+        </div>
       </div>
     )
   }