diff --git a/web/app/assets/javascripts/react-components/PopupSessionRecording.js.jsx.coffee b/web/app/assets/javascripts/react-components/PopupSessionRecording.js.jsx.coffee
index acb44dd9e..e6c24e168 100644
--- a/web/app/assets/javascripts/react-components/PopupSessionRecording.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/PopupSessionRecording.js.jsx.coffee
@@ -36,37 +36,49 @@ mixins.push(Reflux.listenTo(@AppStore,"onAppInit"))
 
   handleSettingSubmit: (settings) ->
     volume = volume: @state.inputGroupMixers.mixer[0].volume_left
-    recordSettings = $.extend({}, settings, volume)
-    console.log('_DEBUG_ recordSettings', JSON.stringify(recordSettings))
+    settings = $.extend({}, settings, volume)
     try
-      localStorage.setItem("recordSettings", JSON.stringify(recordSettings))
+      localStorage.setItem("recordSettings", JSON.stringify(settings))
     catch e
       logger.info("error while saving recordSettings to localStorage")
       logger.log(e.stack)
 
-    recordType = recordSettings.recordingInputType  
-    #TODO: check OBS has been installed
-    obsReady = false
+    params = {
+      recordingType: settings.recordingType,
+      name: settings.recordingName,
+      audioFormat: settings.audioFormat,
+      includeChat: settings.includeChat,
+      volume: settings.volume,
+    }
     
-    if recordType == context.JK.RECORD_TYPE_BOTH && !obsReady
-      context.JK.Banner.showAlert("To make a video recording in JamKazam, you must first install and configure OBS software. Click the link below for a help article that explains how to do this. <a href=''>View Help Article</a>")
-      return
-    @startStopRecording(recordSettings)
+    if params.recordingType == context.JK.RECORD_TYPE_BOTH
+      params['videoFormat'] = settings.videoFormat
+      params['audioDelay']  = settings.audioDelay
+      
+      #TODO: check OBS has been installed
+      obsReady = true
+
+      unless obsReady
+        context.JK.Banner.showAlert("To make a video recording in JamKazam, you must first install and configure OBS software. Click the link below for a help article that explains how to do this. <a href=''>View Help Article</a>")
+        return
+
+      unless context.JK.videoIsOngoing
+        context.JK.Banner.showAlert("To make a video recording in JamKazam you must have an ongoing video. You can start a video by clicking the Video button on session tool bar.")
+        return
+
+    console.log('_DEBUG_ starting recording', JSON.stringify(params))
+    @startStopRecording(params)
 
   closeDialog: () ->
     @app.layout.cancelDialog('session-recording')
     
-  startStopRecording: (settings) ->
+  startStopRecording: (params) ->
     if @state.isRecording
       RecordingActions.stopRecording()
     else
-      recordChat  = settings.includeChat
-      recordVideo = settings.recordingInputType == 'audio-video'
-      if recordVideo
-        return unless context.JK.videoIsOngoing
-
-      logger.debug("@inputType, @udiotye", recordChat, recordVideo)
-      RecordingActions.startRecording(recordVideo, recordChat)
+      #logger.debug("@inputType, @udiotye", recordChat, recordVideo)
+      #RecordingActions.startRecording(recordVideo, recordChat)
+      RecordingActions.startRecording(params)
 
   render: () ->
     if Object.keys(@state.inputGroupMixers).length > 0 then `<div className="recording-container">
diff --git a/web/app/assets/javascripts/react-components/SessionRecordBtn.js.jsx.coffee b/web/app/assets/javascripts/react-components/SessionRecordBtn.js.jsx.coffee
index 1ffe68e02..68f81994d 100644
--- a/web/app/assets/javascripts/react-components/SessionRecordBtn.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionRecordBtn.js.jsx.coffee
@@ -29,7 +29,6 @@ AppStore = context.AppStore
       @openRecording()
 
   openRecording: () ->
-
     canRecord = window.SessionStore.canRecord()
     if true || canRecord
       RecordingActions.openRecordingControls()
@@ -49,7 +48,12 @@ AppStore = context.AppStore
         buttons: buttons})
 
   render: () ->
-    `<a className="session-record session-record-btn button-grey left" data-is-recording={this.state.isRecording} onClick={this.handleClick}>
+    btnStyles = "session-record session-record-btn left"
+    if this.state.isRecording 
+      btnStyles = btnStyles+' button-orange'
+    else 
+      btnStyles = btnStyles+' button-grey'
+    `<a className={btnStyles} data-is-recording={this.state.isRecording} onClick={this.handleClick}>
       <img src="/assets/content/icon_record.png" align="texttop" height="14" width="14"/>
       {this.state.isRecording ? 'STOP RECORDING' : 'RECORD'}
     </a>`
diff --git a/web/app/assets/javascripts/react-components/SessionRecordingSettings.js.jsx.coffee b/web/app/assets/javascripts/react-components/SessionRecordingSettings.js.jsx.coffee
index a1c7eeda9..631f0be12 100644
--- a/web/app/assets/javascripts/react-components/SessionRecordingSettings.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionRecordingSettings.js.jsx.coffee
@@ -13,7 +13,7 @@ mixins.push(Reflux.listenTo(ExternalVideoStore, "onExternalVideoStateChanged"))
       settings = localStorage.getItem('recordSettings')
       rs = JSON.parse(settings)
       {
-        recordingInputType: rs.recordingInputType,
+        recordingType: rs.recordingType,
         audioFormat:  rs.audioFormat,
         videoFormat: rs.videoFormat,
         audioDelay: rs.audioDelay,
@@ -23,7 +23,7 @@ mixins.push(Reflux.listenTo(ExternalVideoStore, "onExternalVideoStateChanged"))
       console.error('error loading recording settings from local storage', e.message)
       logger.log(e.stack)
       {
-        recordingInputType: context.JK.RECORD_TYPE_AUDIO,
+        recordingType: context.JK.RECORD_TYPE_AUDIO,
         recordingName: '',
         audioFormat: 'mp3',
         videoFormat: 'mp4',
@@ -34,7 +34,7 @@ mixins.push(Reflux.listenTo(ExternalVideoStore, "onExternalVideoStateChanged"))
   setRecordingNameChange: (e) ->
     @setState(recordingName: e.target.value)
 
-  setRecordingInputTypeChange: (e) ->
+  setRecordingTypeChange: (e) ->
     recordType = e.target.value
     $root = $(@getDOMNode())
     $recordTypeAudio = $root.find('#recording-input-audio')
@@ -57,7 +57,7 @@ mixins.push(Reflux.listenTo(ExternalVideoStore, "onExternalVideoStateChanged"))
         $recordTypeBoth.prop('checked', false).iCheck('update').iCheck('uncheck')
       ), 1000
       return
-    @setState(recordingInputType: recordType)
+    @setState(recordingType: recordType)
 
   setAudioFormatChange: (e) ->
     $root = $(@getDOMNode())
@@ -88,11 +88,16 @@ mixins.push(Reflux.listenTo(ExternalVideoStore, "onExternalVideoStateChanged"))
 
   startRecording: (e) ->
     e.preventDefault()
+    
+    if @isFormValid()
+      @props.handleSubmit(@state)
+    else
+      context.JK.Banner.showAlert("Name can not be blank.")
+
+  isFormValid: (e) ->
     $root = $(@getDOMNode())
     $recName = $root.find('#recording-name')
-    if $recName.val().length > 0
-      @props.handleSubmit(@state)
-      @setState(recordingName: '')
+    $recName.val().trim().length > 0
 
   onExternalVideoStateChanged: (videoState) ->
     $root = $(this.getDOMNode())
@@ -117,11 +122,11 @@ mixins.push(Reflux.listenTo(ExternalVideoStore, "onExternalVideoStateChanged"))
         <label>Record:</label>
           <div className="recording-type-container">
             <div className="recording-type recording-type-audio">
-              <input type="radio" name="recording-input-type" id="recording-input-audio" value={context.JK.RECORD_TYPE_AUDIO} checked={context.JK.RECORD_TYPE_AUDIO == this.state.recordingInputType} defaultChecked="checked" />
+              <input type="radio" name="recording-input-type" id="recording-input-audio" value={context.JK.RECORD_TYPE_AUDIO} checked={context.JK.RECORD_TYPE_AUDIO == this.state.recordingType} defaultChecked="checked" />
               <label htmlFor="recording-input-audio">Audio only</label>
             </div>
             <div className="recording-type recording-type-both">
-              <input type="radio" name="recording-input-type" id="recording-input-both" value={context.JK.RECORD_TYPE_BOTH} checked={context.JK.RECORD_TYPE_BOTH == this.state.recordingInputType} />
+              <input type="radio" name="recording-input-type" id="recording-input-both" value={context.JK.RECORD_TYPE_BOTH} checked={context.JK.RECORD_TYPE_BOTH == this.state.recordingType} />
               <label htmlFor="recording-input-both">Audio and Video</label>
             </div>
           </div>
@@ -174,8 +179,8 @@ mixins.push(Reflux.listenTo(ExternalVideoStore, "onExternalVideoStateChanged"))
     $inputBothRadioBtn  = $root.find('#recording-input-both')
 
     #only enable audio & video radio button if a video is ongoing
-    $inputBothRadioBtn.on('ifClicked', this.setRecordingInputTypeChange)
-    $inputAudioRadioBtn.on('ifClicked', this.setRecordingInputTypeChange)
+    $inputBothRadioBtn.on('ifClicked', this.setRecordingTypeChange)
+    $inputAudioRadioBtn.on('ifClicked', this.setRecordingTypeChange)
 
     if !context.JK.videoIsOngoing
       $inputAudioRadioBtn.attr('checked', true).iCheck('update').iCheck('check')
@@ -183,7 +188,7 @@ mixins.push(Reflux.listenTo(ExternalVideoStore, "onExternalVideoStateChanged"))
       @toggleDisableVideoContrls(true)
     else
       $inputBothRadioBtn.attr('disabled', false).iCheck('update')
-      if @state.recordingInputType == context.JK.RECORD_TYPE_BOTH
+      if @state.recordingType == context.JK.RECORD_TYPE_BOTH
         $inputBothRadioBtn.attr('checked', true).iCheck('update').iCheck('check')
         @toggleDisableVideoContrls(false)
 
diff --git a/web/app/assets/javascripts/react-components/stores/RecordingStore.js.jsx.coffee b/web/app/assets/javascripts/react-components/stores/RecordingStore.js.jsx.coffee
index 906e9758c..80e928154 100644
--- a/web/app/assets/javascripts/react-components/stores/RecordingStore.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/stores/RecordingStore.js.jsx.coffee
@@ -47,20 +47,36 @@ BackendToFrontendFPS = {
     #   logger.debug("onStartRecording: recordVideo: #{recordVideo}, recordChat: #{recordChat} frameRate: #{frameRate}")
     #   @recordingModel.startRecording(recordVideo, recordChat, frameRate)
 
-    onStartRecording: `async function(recordVideo, recordChat) {
+    # onStartRecording: `async function(recordVideo, recordChat) {
+    #     let frameRate = 0;
+    #     if (recordVideo) {
+    #       //if (await context.jamClient.GetCurrentVideoFrameRate() != null) {
+    #         frameRate = await context.jamClient.GetCurrentVideoFrameRate() || 0;
+    #         frameRate = BackendToFrontendFPS[frameRate];
+    #       //}
+    #     }
+    #     const NoVideoRecordActive = 0;
+    #     const WebCamRecordActive = 1;
+    #     const ScreenRecordActive = 2;
+    #     logger.debug('onStartRecording: recordVideo: '+recordVideo+' , recordChat:' +recordChat+' frameRate: '+frameRate);
+    #     this.recordingModel.startRecording(recordVideo, recordChat, frameRate);
+    #   }`
+
+    onStartRecording: `async function(recordSettings) {
+        const recordVideo = recordSettings.recordingType == context.JK.RECORD_TYPE_BOTH
         let frameRate = 0;
         if (recordVideo) {
-          //if (await context.jamClient.GetCurrentVideoFrameRate() != null) {
-            frameRate = await context.jamClient.GetCurrentVideoFrameRate() || 0;
-            frameRate = BackendToFrontendFPS[frameRate];
-          //}
+          frameRate = await context.jamClient.GetCurrentVideoFrameRate() || 0;
+          frameRate = BackendToFrontendFPS[frameRate];
         }
-        const NoVideoRecordActive = 0;
-        const WebCamRecordActive = 1;
-        const ScreenRecordActive = 2;
+        recordSettings['frameRate'] = frameRate
+        //const NoVideoRecordActive = 0;
+        //const WebCamRecordActive = 1;
+        //const ScreenRecordActive = 2;
         logger.debug('onStartRecording: recordVideo: '+recordVideo+' , recordChat:' +recordChat+' frameRate: '+frameRate);
-        this.recordingModel.startRecording(recordVideo, recordChat, frameRate);
-      }`
+        //this.recordingModel.startRecording(recordVideo, recordChat, frameRate);
+        this.recordingModel.startRecording(recordSettings);
+      }`  
 
     onStopRecording: () ->
       @recordingModel.stopRecording()
diff --git a/web/app/assets/javascripts/recordingModel.js b/web/app/assets/javascripts/recordingModel.js
index 23025016e..f7434e421 100644
--- a/web/app/assets/javascripts/recordingModel.js
+++ b/web/app/assets/javascripts/recordingModel.js
@@ -79,8 +79,12 @@
             return context.JK.dkeys(groupedTracks);
         }
 
-        function startRecording(recordVideo, recordChat, recordFramerate) {
+        function startRecording(recordSettings) {
             
+            recordVideo     = recordSettings.recordingType == context.JK.RECORD_TYPE_BOTH 
+            recordChat      = recordSettings.includeChat
+            recordFramerate = recordSettings.frameRate
+
             $self.triggerHandler('startingRecording', {});
 
             currentlyRecording = true;
@@ -88,8 +92,7 @@
 
             context.RecordingActions.startingRecording({isRecording: false})
 
-            // 0 indicates the NoVideoRecordActive mode; so anything but that means video got recorded
-            currentRecording = rest.startRecordingPromise({"music_session_id": sessionId, record_video: recordVideo != 0})
+            currentRecording = rest.startRecordingPromise({"music_session_id": sessionId, record_video: recordVideo})
             currentRecording
                 .then(async function(recording) {
                     currentRecordingId = recording.id;
@@ -98,6 +101,8 @@
                     // ask the backend to start the session.
                     var groupedTracks = groupTracksToClient(recording);
                     await jamClient.StartRecording(recording["id"], groupedTracks, recordVideo, recordChat, recordFramerate);
+                    //TODO: need a modified version of jamClient.StartRecording
+                    //await jamClient.StartRecording(recording["id"], groupedTracks, recordSettings)
                 })
                 .catch(function(jqXHR) {
                     var details = { clientId: app.clientId, reason: 'rest', detail: arguments, isRecording: false }