diff --git a/web/app/assets/javascripts/asyncJamClient.js b/web/app/assets/javascripts/asyncJamClient.js index 704812889..9a93a0eae 100644 --- a/web/app/assets/javascripts/asyncJamClient.js +++ b/web/app/assets/javascripts/asyncJamClient.js @@ -223,7 +223,7 @@ JoinSession: enumAppCounter++, LastUsedProfileName: enumAppCounter++, LeaveSession: enumAppCounter++, - LeaveSessionAndMinimize: enumAppCounter++, + LeaveSessionAndMinimize: enumAppCounter++, log: enumAppCounter++, NetworkTest: enumAppCounter++, NetworkTestResult: enumAppCounter++, @@ -421,6 +421,11 @@ IsOBSAvailable: enumAppCounter++, StartMediaRecording: enumAppCounter++, LaunchBroadcastSettings: enumAppCounter++, + SetRecordingOptionStartedByPeer: enumAppCounter++, + GetRecordingOptionStartedByPeer: enumAppCounter++, + SetAudioRecordingPreference: enumAppCounter++, + GetAudioRecordingPreference: enumAppCounter++, + PeerStopRecording: enumAppCounter++, }); function setupWebSocketConnection() { diff --git a/web/app/assets/javascripts/globals.js b/web/app/assets/javascripts/globals.js index 08913f292..6c30d96f5 100644 --- a/web/app/assets/javascripts/globals.js +++ b/web/app/assets/javascripts/globals.js @@ -40,11 +40,13 @@ context.JK.VIDEO_FORMATS = ['.flv', '.mp4', '.mov', '.mkv', '.ts', '.m3u8']; context.JK.AUDIO_STORE_TYPE_MIX_AND_STEMS = { key: 'session_mix_and_steams', - value: 'Session mix + individual parts (streams)' + value: 'Session mix + individual parts (streams)', + backendValues: [2, 3] }; context.JK.AUDIO_STORE_TYPE_MIX_ONLY = { key: 'session_mix_only', - value: 'Session mix only' + value: 'Session mix only', + backendValues: [1] }; context.JK.RECORD_TYPE_AUDIO = 'audio-only' context.JK.RECORD_TYPE_BOTH = 'audio-video' 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 d5347fd60..a4b32e3a6 100644 --- a/web/app/assets/javascripts/react-components/SessionRecordingSettings.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/SessionRecordingSettings.js.jsx.coffee @@ -17,10 +17,16 @@ mixins.push(Reflux.listenTo(RecordingStore, "onRecordingStateChanged")) $root.find('#recording-input-both').prop('disabled',true).iCheck('update').iCheck('uncheck'); $root.find('#recording-input-audio').attr('checked', true).iCheck('update').iCheck('check') - onRecordingStateChanged: (recordingState) -> - if recordingState.audioRecordingFormat - @setState({audioFormat: recordingState.audioRecordingFormat}) + # onRecordingStateChanged: (recordingState) -> + # if recordingState.audioRecordingFormat + # @setState({audioFormat: recordingState.audioRecordingFormat}) + onRecordingStateChanged: `function (recordingState) { + console.log('_REC_ onRecordingStateChanged', recordingState); + if (recordingState.audioRecordingFormat) { + this.setState({audioFormat: recordingState.audioRecordingFormat}); + } + }` getInitialState: () -> try @@ -120,10 +126,12 @@ mixins.push(Reflux.listenTo(RecordingStore, "onRecordingStateChanged")) if audioStoreType == context.JK.AUDIO_STORE_TYPE_MIX_AND_STEMS['key'] $audioStoreTypeMixAndStems.iCheck('check').attr('checked', true) $audioStoreTypeMix.iCheck('uncheck').attr('checked', false) + context.jamClient.SetAudioRecordingPreference(context.JK.AUDIO_STORE_TYPE_MIX_AND_STEMS['backendValues'][0]) else $audioStoreTypeMixAndStems.iCheck('uncheck').attr('checked', false) $audioStoreTypeMix.iCheck('check').attr('checked', true) - + context.jamClient.SetAudioRecordingPreference(context.JK.AUDIO_STORE_TYPE_MIX_ONLY['backendValues'][0]) + @setState(audioStoreType: audioStoreType) toggleDisableVideoContrls: (isDisable) -> @@ -242,58 +250,143 @@ mixins.push(Reflux.listenTo(RecordingStore, "onRecordingStateChanged")) ` - componentDidMount: () -> - $root = jQuery(this.getDOMNode()) + # componentDidMount: () -> + # $root = jQuery(this.getDOMNode()) - context.JK.dropdown($root.find('select')) + # context.JK.dropdown($root.find('select')) - $inputAudioRadioBtn = $root.find('#recording-input-audio') - $inputBothRadioBtn = $root.find('#recording-input-both') + # $inputAudioRadioBtn = $root.find('#recording-input-audio') + # $inputBothRadioBtn = $root.find('#recording-input-both') - $inputBothRadioBtn.on('ifClicked', this.setRecordingTypeChange) - $inputAudioRadioBtn.on('ifClicked', this.setRecordingTypeChange) + # $inputBothRadioBtn.on('ifClicked', this.setRecordingTypeChange) + # $inputAudioRadioBtn.on('ifClicked', this.setRecordingTypeChange) - $inputRecordStoreTypeMixAndStems = $root.find('#audio-store-type-mix-and-stems') - $inputRecordStoreTypeMix = $root.find('#audio-store-type-mix') + # $inputRecordStoreTypeMixAndStems = $root.find('#audio-store-type-mix-and-stems') + # $inputRecordStoreTypeMix = $root.find('#audio-store-type-mix') - $inputRecordStoreTypeMixAndStems.on('ifClicked', this.setAudioStoreTypeChange) - $inputRecordStoreTypeMix.on('ifClicked', this.setAudioStoreTypeChange) + # $inputRecordStoreTypeMixAndStems.on('ifClicked', this.setAudioStoreTypeChange) + # $inputRecordStoreTypeMix.on('ifClicked', this.setAudioStoreTypeChange) - context.JK.checkbox($inputRecordStoreTypeMixAndStems) - context.JK.checkbox($inputRecordStoreTypeMix) + # context.JK.checkbox($inputRecordStoreTypeMixAndStems) + # context.JK.checkbox($inputRecordStoreTypeMix) - #only enable audio & video radio button if a video is ongoing - if !context.JK.videoIsOngoing - @setState({recordingType: context.JK.RECORD_TYPE_AUDIO}) - $inputAudioRadioBtn.attr('checked', true).iCheck('update').iCheck('check') - $inputBothRadioBtn.attr('disabled',true).iCheck('update').iCheck('uncheck') - @toggleDisableVideoContrls(true) - else - $inputBothRadioBtn.attr('disabled', false).iCheck('update') - if @state.recordingType == context.JK.RECORD_TYPE_BOTH - $inputBothRadioBtn.attr('checked', true).iCheck('update').iCheck('check') - @toggleDisableVideoContrls(false) + # #only enable audio & video radio button if a video is ongoing + # if !context.JK.videoIsOngoing + # @setState({recordingType: context.JK.RECORD_TYPE_AUDIO}) + # $inputAudioRadioBtn.attr('checked', true).iCheck('update').iCheck('check') + # $inputBothRadioBtn.attr('disabled',true).iCheck('update').iCheck('uncheck') + # @toggleDisableVideoContrls(true) + # else + # $inputBothRadioBtn.attr('disabled', false).iCheck('update') + # if @state.recordingType == context.JK.RECORD_TYPE_BOTH + # $inputBothRadioBtn.attr('checked', true).iCheck('update').iCheck('check') + # @toggleDisableVideoContrls(false) - context.JK.checkbox($inputAudioRadioBtn) - context.JK.checkbox($inputBothRadioBtn) + # context.JK.checkbox($inputAudioRadioBtn) + # context.JK.checkbox($inputBothRadioBtn) - $includeChatCheckbox = $root.find('#include-chat') - $includeChatCheckbox.iCheck('check').attr('checked', @state.includeChat) - $includeChatCheckbox.on 'ifToggled', (e) => - @setState(includeChat: e.target.checked) - context.JK.checkbox($includeChatCheckbox) + # $includeChatCheckbox = $root.find('#include-chat') + # $includeChatCheckbox.iCheck('check').attr('checked', @state.includeChat) + # $includeChatCheckbox.on 'ifToggled', (e) => + # @setState(includeChat: e.target.checked) + # context.JK.checkbox($includeChatCheckbox) - context.JK.helpBubble($root.find(".audio-store-type-mix-and-stems-help"), "audio-store-type-mix-and-stems", {}, {offsetParent:$root.closest('.top-parent'), positions: ['right', 'bottom'], width:450}) + # context.JK.helpBubble($root.find(".audio-store-type-mix-and-stems-help"), "audio-store-type-mix-and-stems", {}, {offsetParent:$root.closest('.top-parent'), positions: ['right', 'bottom'], width:450}) - context.JK.helpBubble($root.find(".include-chat-help"), "include-chat-in-recording", {}, {offsetParent:$root.closest('.top-parent'), positions: ['right', 'bottom'], width:450}) + # context.JK.helpBubble($root.find(".include-chat-help"), "include-chat-in-recording", {}, {offsetParent:$root.closest('.top-parent'), positions: ['right', 'bottom'], width:450}) - context.JK.helpBubble($root.find(".audio-delay-help"), "audio-delay-in-recording", {}, {offsetParent:$root.closest('.top-parent'), positions: ['right', 'bottom'], width:450}) + # context.JK.helpBubble($root.find(".audio-delay-help"), "audio-delay-in-recording", {}, {offsetParent:$root.closest('.top-parent'), positions: ['right', 'bottom'], width:450}) - componentDidUpdate: () -> - $root = $(this.getDOMNode()) - context.JK.dropdown($root.find('select')) - $root.find('#audio-format').unbind('change').change(this.setAudioFormatChange) - $root.find('#video-format').unbind('change').change(this.setVideoFormatChange) - #$root.find('#audio-store-types').unbind('change').change(this.setAudioStoreTypeChange) + + updateAudioStoreState: `function (audioStoreType) { + const $root = $(this.getDOMNode()); + const $audioStoreTypeMixAndStems = $root.find('#audio-store-type-mix-and-stems'); + const $audioStoreTypeMix = $root.find('#audio-store-type-mix'); + if (context.JK.AUDIO_STORE_TYPE_MIX_AND_STEMS['backendValues'].indexOf(audioStoreType) > -1) { + $audioStoreTypeMixAndStems.iCheck('check').attr('checked', true); + $audioStoreTypeMix.iCheck('uncheck').attr('checked', false); + } else { + $audioStoreTypeMixAndStems.iCheck('uncheck').attr('checked', false); + $audioStoreTypeMix.iCheck('check').attr('checked', true); + } + }` + + componentDidMount: `function(){ + const $root = jQuery(this.getDOMNode()); + + context.JK.dropdown($root.find('select')); + + const $inputAudioRadioBtn = $root.find('#recording-input-audio'); + const $inputBothRadioBtn = $root.find('#recording-input-both'); + + $inputBothRadioBtn.on('ifClicked', this.setRecordingTypeChange); + $inputAudioRadioBtn.on('ifClicked', this.setRecordingTypeChange); + + const $inputRecordStoreTypeMixAndStems = $root.find('#audio-store-type-mix-and-stems'); + const $inputRecordStoreTypeMix = $root.find('#audio-store-type-mix'); + + //get the audio store type from backend and set the radio button accordingly using jamClient.GetAudioRecordingPreference() + context.jamClient.GetAudioRecordingPreference().then((audioStoreType) => { + console.log('_REC_ componentDidMount audioStoreType', audioStoreType); + this.updateAudioStoreState(audioStoreType); + }); + + + $inputRecordStoreTypeMixAndStems.on('ifClicked', this.setAudioStoreTypeChange); + $inputRecordStoreTypeMix.on('ifClicked', this.setAudioStoreTypeChange); + + context.JK.checkbox($inputRecordStoreTypeMixAndStems); + context.JK.checkbox($inputRecordStoreTypeMix); + + //only enable audio & video radio button if a video is ongoing + if (!context.JK.videoIsOngoing) { + this.setState({recordingType: context.JK.RECORD_TYPE_AUDIO}); + $inputAudioRadioBtn.attr('checked', true).iCheck('update').iCheck('check'); + $inputBothRadioBtn.attr('disabled',true).iCheck('update').iCheck('uncheck'); + this.toggleDisableVideoContrls(true); + } else { + $inputBothRadioBtn.attr('disabled', false).iCheck('update'); + if (this.state.recordingType === context.JK.RECORD_TYPE_BOTH) { + $inputBothRadioBtn.attr('checked', true).iCheck('update').iCheck('check'); + this.toggleDisableVideoContrls(false); + } + } + + context.JK.checkbox($inputAudioRadioBtn); + context.JK.checkbox($inputBothRadioBtn); + + const $includeChatCheckbox = $root.find('#include-chat'); + $includeChatCheckbox.iCheck('check').attr('checked', this.state.includeChat); + $includeChatCheckbox.on('ifToggled', e => { + return this.setState({includeChat: e.target.checked}); + }); + context.JK.checkbox($includeChatCheckbox); + + context.JK.helpBubble($root.find(".audio-store-type-mix-and-stems-help"), "audio-store-type-mix-and-stems", {}, {offsetParent:$root.closest('.top-parent'), positions: ['right', 'bottom'], width:450}); + + context.JK.helpBubble($root.find(".include-chat-help"), "include-chat-in-recording", {}, {offsetParent:$root.closest('.top-parent'), positions: ['right', 'bottom'], width:450}); + + return context.JK.helpBubble($root.find(".audio-delay-help"), "audio-delay-in-recording", {}, {offsetParent:$root.closest('.top-parent'), positions: ['right', 'bottom'], width:450}); + }` + + # componentDidUpdate: () -> + # console.log('componentDidUpdate') + # $root = $(this.getDOMNode()) + # context.JK.dropdown($root.find('select')) + # $root.find('#audio-format').unbind('change').change(this.setAudioFormatChange) + # $root.find('#video-format').unbind('change').change(this.setVideoFormatChange) + # #$root.find('#audio-store-types').unbind('change').change(this.setAudioStoreTypeChange) + + componentDidUpdate: `function () { + console.log('componentDidUpdate'); + context.jamClient.GetAudioRecordingPreference().then((audioStoreType) => { + console.log('_REC_ componentDidUpdate audioStoreType', audioStoreType); + this.updateAudioStoreState(audioStoreType); + }); + const $root = $(this.getDOMNode()); + context.JK.dropdown($root.find('select')); + $root.find('#audio-format').unbind('change').change(this.setAudioFormatChange); + $root.find('#video-format').unbind('change').change(this.setVideoFormatChange); + }` }) \ No newline at end of file diff --git a/web/app/assets/javascripts/recordingModel.js b/web/app/assets/javascripts/recordingModel.js index 3b8099733..c187f22a6 100644 --- a/web/app/assets/javascripts/recordingModel.js +++ b/web/app/assets/javascripts/recordingModel.js @@ -116,7 +116,13 @@ /** Nulls can be passed for all 3 currently; that's a user request. */ function stopRecording(recordingId, reason, detail) { - + currentRecording + .then(async function(recording) { + if(recording.owner.id !== context.JK.currentUserId){ + return; + } + }) + if(stoppingRecording) { logger.debug("ignoring stopRecording because we are already stopping"); return; @@ -141,10 +147,8 @@ //context.jamClient.SessionStopPlay(); //} - console.log("_DEBUG_ stopRecording", recording.owner, context.JK.currentUserId) if(recording.owner.id === context.JK.currentUserId){ - alert("stopping recording for owner") await jamClient.StopRecording(recording.id, groupedTracks); }