seek to a frame

1 files changed, 12 insertions, 0 deletions

diff --git a/app/client/live/index.js b/app/client/live/index.js
index 44cc70b..f632836 100644
--- a/app/client/live/index.js
+++ b/app/client/live/index.js
@@ -18,6 +18,7 @@ class App extends Component {
     this.changeCheckpoint = this.changeCheckpoint.bind(this)
     this.changeEpoch = this.changeEpoch.bind(this)
     this.changeSequence = this.changeSequence.bind(this)
+    this.seek = this.seek.bind(this)
   }
   componentWillUpdate(nextProps) {
     console.log('willupdate', nextProps.opt)
@@ -38,6 +39,10 @@ class App extends Component {
     console.log('got sequence', sequence)
     this.props.actions.load_sequence(sequence)
   }
+  seek(percentage){
+    const frame = Math.floor(percentage * (this.props.opt.frame.sequence_len || 1) + 1
+    this.props.actions.seek(frame)
+  }
   render(){
     return (
       <div className='app'>
@@ -71,6 +76,12 @@ class App extends Component {
                 options={this.props.sequences}
                 onChange={this.changeSequence}
               />
+              <Slider
+                name='position'
+                min={0.0} max={1.0} type='float'
+                value={(this.opt.frame.sequence_i || 0) / (this.opt.frame.sequence_len || 1)}
+                onChange={this.seek}
+              />
             </ParamGroup>
           </div>
           <div className='column'>
@@ -186,6 +197,7 @@ class App extends Component {
 
 const mapStateToProps = state => ({
   opt: state.live.opt,
+  frame: state.live.frame
   checkpoints: state.live.checkpoints,
   epochs: state.live.epochs,
   sequences: state.live.sequences,