seek to a frame

3 files changed, 25 insertions, 1 deletions

diff --git a/app/client/live/actions.js b/app/client/live/actions.js
index eb0a2ff..46e0c6c 100644
--- a/app/client/live/actions.js
+++ b/app/client/live/actions.js
@@ -35,3 +35,8 @@ export const load_epoch = (checkpoint, epoch) => {
   socket.load_epoch(checkpoint, epoch)
   return { type: 'LOADING_CHECKPOINT', }
 }
+
+export const seek = (frame) => {
+  socket.seek(frame)
+  return { type: 'LOADING_CHECKPOINT', }
+}
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,
diff --git a/app/client/live/reducer.js b/app/client/live/reducer.js
index df227e4..e056808 100644
--- a/app/client/live/reducer.js
+++ b/app/client/live/reducer.js
@@ -8,6 +8,7 @@ const liveInitialState = {
   checkpoint_dir: ['latest'],
   sequences: [],
   fps: 0,
+  frame: { i: 0, sequence_i: 0, sequence_len: '1' }
 }
 
 const liveReducer = (state = liveInitialState, action) => {
@@ -44,7 +45,7 @@ const liveReducer = (state = liveInitialState, action) => {
     case 'LIST_EPOCHS':
       return {
         ...state,
-        epochs: action.epochs.map(a => [ a == 'latest' ? Infinity : a, a ])
+        epochs: (action.epochs || []).map(a => [ a == 'latest' ? Infinity : a, a ])
                       .sort((a,b) => a[0] - b[0])
                       .map(a => a[1])
     }
@@ -61,6 +62,12 @@ const liveReducer = (state = liveInitialState, action) => {
         fps: action.fps,
       }
 
+    case 'CURRENT_FRAME':
+      return action.meta ? {
+        ...state,
+        frame: action.meta
+      } : state
+
     default:
       return state
   }