seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

handle new recording window events

This commit is contained in:
Nuwan 2023-09-21 10:45:53 +05:30
parent ad9f5dcef3
commit 4a2046aae6
5 changed files with 87 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
web/app/assets/javascripts/react-components/PopupSessionRecording.js.jsx.coffee
View File

@ -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">

8
web/app/assets/javascripts/react-components/SessionRecordBtn.js.jsx.coffee
View File

@ -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>`

29
web/app/assets/javascripts/react-components/SessionRecordingSettings.js.jsx.coffee
View File

@ -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)

36
web/app/assets/javascripts/react-components/stores/RecordingStore.js.jsx.coffee
View File

@ -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()

11
web/app/assets/javascripts/recordingModel.js
View File

@ -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 }