From 4a2046aae6a00080ac18d2ce252baa7d894506d5 Mon Sep 17 00:00:00 2001 From: Nuwan Date: Thu, 21 Sep 2023 10:45:53 +0530 Subject: [PATCH] handle new recording window events --- .../PopupSessionRecording.js.jsx.coffee | 48 ++++++++++++------- .../SessionRecordBtn.js.jsx.coffee | 8 +++- .../SessionRecordingSettings.js.jsx.coffee | 29 ++++++----- .../stores/RecordingStore.js.jsx.coffee | 36 ++++++++++---- web/app/assets/javascripts/recordingModel.js | 11 +++-- 5 files changed, 87 insertions(+), 45 deletions(-) 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. View Help Article") - 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. View Help Article") + 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 `
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: () -> - ` + btnStyles = "session-record session-record-btn left" + if this.state.isRecording + btnStyles = btnStyles+' button-orange' + else + btnStyles = btnStyles+' button-grey' + ` {this.state.isRecording ? 'STOP RECORDING' : 'RECORD'} ` 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"))
- +
- +
@@ -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 }