better messaging when saving video

3 files changed, 23 insertions, 2 deletions

diff --git a/app/client/live/index.js b/app/client/live/index.js
index 73fc134..462d75d 100644
--- a/app/client/live/index.js
+++ b/app/client/live/index.js
@@ -54,6 +54,7 @@ class App extends Component {
   toggleRecording(){
     if (this.props.opt.recording){
       stopRecording()
+      this.props.actions.pause()
     } else {
       startRecording()
     }
@@ -104,10 +105,16 @@ class App extends Component {
                 {this.props.opt.processing ? 'Pause' : 'Restart'}
               </Button>
               <Button
-                title={this.props.opt.recording ? 'Recording (' + timeInSeconds(this.props.opt.recordFrames) +')' : 'Record video' }
+                title={
+                  this.props.opt.savingVideo
+                  ? 'Saving video...'
+                  : this.props.opt.recording
+                  ? 'Recording (' + timeInSeconds(this.props.opt.recordFrames) +')'
+                  : 'Record video'
+                }
                 onClick={this.toggleRecording}
               >
-                {this.props.opt.recording ? 'Recording' : 'Record'}
+                {this.props.opt.savingVideo ? 'Saving' : this.props.opt.recording ? 'Recording' : 'Record'}
               </Button>
               <Button
                 title={'Save frame'}
diff --git a/app/client/live/player.js b/app/client/live/player.js
index 8ef1668..b39d717 100644
--- a/app/client/live/player.js
+++ b/app/client/live/player.js
@@ -14,7 +14,11 @@ export function startRecording(){
 }
 
 export function stopRecording(){
+  if (!recording) return
   recording = false
+  store.dispatch({
+    type: 'SAVING_VIDEO',
+  })
   videoWriter.compile(false, function(blob){
     console.log(blob)
     store.dispatch({
diff --git a/app/client/live/reducer.js b/app/client/live/reducer.js
index 2a6782c..8fa6edd 100644
--- a/app/client/live/reducer.js
+++ b/app/client/live/reducer.js
@@ -96,6 +96,14 @@ const liveReducer = (state = liveInitialState, action) => {
       )
       return state
 
+    case 'SAVING_VIDEO':
+      return {
+        ...state,
+        opt: {
+          ...state.opt,
+          savingVideo: true,
+        }
+      }
     case 'SAVE_VIDEO':
       FileSaver.saveAs(
         action.blob,
@@ -108,6 +116,8 @@ const liveReducer = (state = liveInitialState, action) => {
         opt: {
           ...state.opt,
           recording: false,
+          savingVideo: false,
+          recordFrames: 0,
         }
       }