1 files changed, 25 insertions, 3 deletions
diff --git a/app/client/live/index.js b/app/client/live/index.js
index 3a5dbd4..ce0be14 100644
--- a/app/client/live/index.js
+++ b/app/client/live/index.js
@@ -8,6 +8,8 @@ import Slider from '../common/slider.component'
 import Select from '../common/select.component'
 import Button from '../common/button.component'
 
+import { startRecording, stopRecording, saveFrame } from './player'
+
 import * as liveActions from './actions'
 
 class App extends Component {
@@ -20,7 +22,8 @@ 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)
+    this.togglePlaying = this.togglePlaying.bind(this)
+    this.toggleRecording = this.toggleRecording.bind(this)
   }
   componentWillUpdate(nextProps) {
     if (nextProps.opt.checkpoint_name && nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
@@ -41,13 +44,20 @@ class App extends Component {
     const frame = Math.floor(percentage * (parseInt(this.props.frame.sequence_len) || 1) + 1)
     this.props.actions.seek(frame)
   }
-  toggle(){
+  togglePlaying(){
     if (this.props.opt.processing) {
       this.props.actions.pause()
     } else {
       this.props.actions.play()
     }
   }
+  toggleRecording(){
+    if (this.props.opt.recording){
+      stopRecording()
+    } else {
+      startRecording()
+    }
+  }
   render(){
     return (
       <div className='app'>
@@ -89,10 +99,22 @@ class App extends Component {
               />
               <Button
                 title={'Processing: ' + (this.props.opt.processing ? 'yes' : 'no')}
-                onClick={this.toggle}
+                onClick={this.togglePlaying}
               >
                 {this.props.opt.processing ? 'Pause' : 'Restart'}
               </Button>
+              <Button
+                title={'Record video'}
+                onClick={this.toggleRecording}
+              >
+                {this.props.opt.recording ? 'Recording' : 'Record'}
+              </Button>
+              <Button
+                title={'Save frame'}
+                onClick={saveFrame}
+              >
+                Save
+              </Button>
             </ParamGroup>
           </div>
           <div className='column'>