statuses

3 files changed, 39 insertions, 0 deletions

diff --git a/app/client/live/actions.js b/app/client/live/actions.js
index 5bf06eb..c9927b3 100644
--- a/app/client/live/actions.js
+++ b/app/client/live/actions.js
@@ -40,3 +40,13 @@ export const seek = (frame) => {
   socket.seek(frame)
   return { type: 'SEEKING', }
 }
+
+export const pause = (frame) => {
+  socket.pause(pause)
+  return { type: 'PAUSING', }
+}
+
+export const play = (frame) => {
+  socket.play()
+  return { type: 'PLAYING', }
+}
diff --git a/app/client/live/index.js b/app/client/live/index.js
index fb512a3..4fc1b5c 100644
--- a/app/client/live/index.js
+++ b/app/client/live/index.js
@@ -6,6 +6,7 @@ import Player from './components/player.component'
 import ParamGroup from '../common/paramGroup.component'
 import Slider from '../common/slider.component'
 import Select from '../common/select.component'
+import Button from '../common/button.component'
 
 import * as liveActions from './actions'
 
@@ -19,6 +20,7 @@ class App extends Component {
     this.changeEpoch = this.changeEpoch.bind(this)
     this.changeSequence = this.changeSequence.bind(this)
     this.seek = this.seek.bind(this)
+    this.toggle = this.toggle.bind(this)
   }
   componentWillUpdate(nextProps) {
     if (nextProps.opt.checkpoint_name && nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
@@ -39,6 +41,13 @@ class App extends Component {
     const frame = Math.floor(percentage * (parseInt(this.props.frame.sequence_len) || 1) + 1)
     this.props.actions.seek(frame)
   }
+  toggle(){
+    if (this.props.opt.processing) {
+      this.props.actions.pause()
+    } else {
+      this.props.actions.play()
+    }
+  }
   render(){
     return (
       <div className='app'>
@@ -78,6 +87,12 @@ class App extends Component {
                 value={(this.props.frame.sequence_i || 0) / (this.props.frame.sequence_len || 1)}
                 onChange={this.seek}
               />
+              <div>
+                Processing: {this.props.opt.processing}
+              </div>
+              <Button onClick={this.toggle}>
+                {this.props.opt.processing ? 'Pause' : 'Restart'}
+              </Button>
             </ParamGroup>
           </div>
           <div className='column'>
diff --git a/app/client/socket.js b/app/client/socket.js
index ecbd6c3..b430c14 100644
--- a/app/client/socket.js
+++ b/app/client/socket.js
@@ -67,6 +67,10 @@ socket.on('status', (data) => {
   console.log('got status', data.key, data.value)
   switch (data.key) {
     case 'processing':
+      store.dispatch({
+        type: 'SET_PARAM',
+        ...data,
+      })
       break
     default:
       break
@@ -120,6 +124,16 @@ export function seek(frame) {
     payload: frame,
   })
 }
+export function pause(frame) {
+  socket.emit('cmd', {
+    cmd: 'pause',
+  })
+}
+export function play(frame) {
+  socket.emit('cmd', {
+    cmd: 'play',
+  })
+}
 export function get_params() {
   socket.emit('cmd', {
     cmd: 'get_params',