6 files changed, 43 insertions, 8 deletions
diff --git a/app/client/common/header.component.js b/app/client/common/header.component.js
index 844e1ef..b5a484e 100644
--- a/app/client/common/header.component.js
+++ b/app/client/common/header.component.js
@@ -4,13 +4,15 @@ import { connect } from 'react-redux'
 function Header(props) {
   return (
     <header>
-      live cortex | {props.fps} fps
+      <b>live cortex</b>
+      <span>{props.fps} fps</span>
     </header>
   )
 }
 
 const mapStateToProps = state => ({
-  fps: state.live.fps
+  fps: state.live.fps,
+  frame: state.live.frame,
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
diff --git a/app/client/common/slider.component.js b/app/client/common/slider.component.js
index e3e3f48..fe27c84 100644
--- a/app/client/common/slider.component.js
+++ b/app/client/common/slider.component.js
@@ -34,6 +34,7 @@ class Slider extends Component {
     if (old_value !== new_value) {
       this.setState({ value: new_value })
       this.props.actions.set_param(this.props.name, new_value)
+      this.props.onChange(new_value)
     }
     clearTimeout(this.timeout)
   }
@@ -49,6 +50,7 @@ class Slider extends Component {
     this.setState({ value: new_value })
     this.timeout = setTimeout(() => {
       this.props.actions.set_param(this.props.name, new_value)
+      this.props.onChange(new_value)
     }, SLIDER_THROTTLE_TIME)
   }
   render(){
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
   }
diff --git a/app/client/socket.js b/app/client/socket.js
index 627694c..b845152 100644
--- a/app/client/socket.js
+++ b/app/client/socket.js
@@ -44,17 +44,14 @@ socket.on('res', (data) => {
   console.log(data)
 })
 
-let fps = 0;
+let fps = 0, last_frame;
 
 socket.on('frame', (data) => {
   const blob = new Blob([data.frame], { type: 'image/jpg' })
   const url = URL.createObjectURL(blob)
   const img = new Image ()
   img.onload = function() {
-    store.dispatch({
-      type: 'CURRENT_FRAME',
-      meta: data.meta,
-    })
+    last_frame = data.meta
     URL.revokeObjectURL(url)
     const player = document.querySelector('.player canvas')
     const ctx = player.getContext('2d')
@@ -71,6 +68,10 @@ setInterval(() => {
     type: 'SET_FPS',
     fps: fps,
   })
+  store.dispatch({
+    type: 'CURRENT_FRAME',
+    meta: last_frame,
+  })
   fps = 0
 }, 1000)
 
@@ -103,6 +104,12 @@ export function load_sequence(sequence) {
     payload: sequence,
   })
 }
+export function seek(frame) {
+  socket.emit('cmd', {
+    cmd: 'seek',
+    payload: frame,
+  })
+}
 export function get_params() {
   socket.emit('cmd', {
     cmd: 'get_params',