211 lines
8.1 KiB
CoffeeScript
211 lines
8.1 KiB
CoffeeScript
context = window
|
|
mixins = []
|
|
|
|
ExternalVideoStore = context.ExternalVideoStore
|
|
|
|
mixins.push(Reflux.listenTo(ExternalVideoStore, "onExternalVideoStateChanged"))
|
|
|
|
@SessionRecordingSettings = React.createClass({
|
|
mixins: mixins
|
|
|
|
getInitialState: () ->
|
|
try
|
|
settings = localStorage.getItem('recordSettings')
|
|
rs = JSON.parse(settings)
|
|
{
|
|
recordingType: rs.recordingType,
|
|
audioFormat: rs.audioFormat,
|
|
videoFormat: rs.videoFormat,
|
|
audioDelay: rs.audioDelay,
|
|
includeChat: rs.includeChat,
|
|
}
|
|
catch e
|
|
console.error('error loading recording settings from local storage', e.message)
|
|
logger.log(e.stack)
|
|
{
|
|
recordingType: context.JK.RECORD_TYPE_AUDIO,
|
|
recordingName: '',
|
|
audioFormat: 'mp3',
|
|
videoFormat: 'mp4',
|
|
audioDelay: 100,
|
|
includeChat: false,
|
|
}
|
|
|
|
setRecordingNameChange: (e) ->
|
|
@setState(recordingName: e.target.value)
|
|
|
|
setRecordingTypeChange: (e) ->
|
|
recordType = e.target.value
|
|
$root = $(@getDOMNode())
|
|
$recordTypeAudio = $root.find('#recording-input-audio')
|
|
$recordTypeBoth = $root.find('#recording-input-both')
|
|
if recordType == context.JK.RECORD_TYPE_BOTH
|
|
if not $recordTypeBoth.attr('disabled')
|
|
$recordTypeBoth.iCheck('check').attr('checked', true)
|
|
@toggleDisableVideoContrls(false)
|
|
else
|
|
$recordTypeAudio.iCheck('check').attr('checked', true)
|
|
@toggleDisableVideoContrls(true)
|
|
|
|
#TODO: requires new *jamClient* api call to determine if OBS software is functional on the client machine.
|
|
obsReady = true #hardcoded for now
|
|
|
|
if !$recordTypeBoth.prop('disabled') && 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>")
|
|
setTimeout (->
|
|
$recordTypeAudio.prop('checked', true).iCheck('update').iCheck('check')
|
|
$recordTypeBoth.prop('checked', false).iCheck('update').iCheck('uncheck')
|
|
), 1000
|
|
return
|
|
@setState(recordingType: recordType)
|
|
|
|
setAudioFormatChange: (e) ->
|
|
$root = $(@getDOMNode())
|
|
audioFormat = $root.find("#audio-format").val()
|
|
@setState(audioFormat: audioFormat)
|
|
|
|
setVideoFormatChange: (e) ->
|
|
$root = $(@getDOMNode())
|
|
videoFormat = $root.find("#video-format").val()
|
|
@setState(videoFormat: videoFormat)
|
|
|
|
toggleDisableVideoContrls: (isDisable) ->
|
|
$root = $(@getDOMNode())
|
|
$videoFormat = $root.find("#video-format")
|
|
$audioDelay = $root.find("#audio-delay")
|
|
$videoFormat.attr('disabled', isDisable)
|
|
$audioDelay.attr('disabled', isDisable)
|
|
|
|
setAudioDelay: (e) ->
|
|
@setState(audioDelay: e.target.value)
|
|
|
|
setIncludeChat: (e) ->
|
|
@setState(includeChat: e.target.checked)
|
|
|
|
cancel: (e) ->
|
|
e.preventDefault()
|
|
@props.handleCancel()
|
|
|
|
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')
|
|
$recName.val().trim().length > 0
|
|
|
|
onExternalVideoStateChanged: (videoState) ->
|
|
$root = $(this.getDOMNode())
|
|
if videoState.videoEnabled
|
|
$root.find('#recording-input-both').attr('disabled', false).iCheck('update').iCheck('uncheck')
|
|
else
|
|
$root.find('#recording-input-both').prop('disabled',true).iCheck('update').iCheck('uncheck');
|
|
$root.find('#recording-input-audio').attr('checked', true).iCheck('update').iCheck('check')
|
|
|
|
render: () ->
|
|
audioFormatOptions = []
|
|
videoFormatOptions = []
|
|
|
|
for format, i in context.JK.AUDIO_FORMATS
|
|
audioFormatOptions.push `<option value={format}>{format}</option>`
|
|
|
|
for format, i in context.JK.VIDEO_FORMATS
|
|
videoFormatOptions.push `<option value={format}>{format}</option>`
|
|
|
|
`<form>
|
|
<div className="form-item">
|
|
<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.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.recordingType} />
|
|
<label htmlFor="recording-input-both">Audio and Video</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="form-item">
|
|
<label htmlFor="recording-name">Name:</label>
|
|
<div>
|
|
<input type="text" name="name" id="recording-name" value={this.state.recordingName} onChange={this.setRecordingNameChange} />
|
|
</div>
|
|
</div>
|
|
<div className="form-item">
|
|
<label htmlFor="audio-format">Audio Format:</label>
|
|
<div>
|
|
<select id="audio-format" value={this.state.audioFormat} onChange={this.setAudioFormatChange}>
|
|
{audioFormatOptions}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="form-item">
|
|
<label htmlFor="video-format">Video Format:</label>
|
|
<div>
|
|
<select id="video-format" value={this.state.videoFormat} onChange={this.setVideoFormatChange}>
|
|
{videoFormatOptions}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="form-item">
|
|
<label htmlFor="audio-delay">Audio Delay (ms):</label>
|
|
<div>
|
|
<input type="number" min="0" width="3" name="name" id="audio-delay" onChange={this.setAudioDelay} value={this.state.audioDelay} />
|
|
</div>
|
|
</div>
|
|
<div className="form-item include-chat-check">
|
|
<label>Voice Chat:</label>
|
|
<input type="checkbox" name="include-chat" id="include-chat" checked={this.state.includeChat} />
|
|
<label className="include-chat-label" htmlFor="include-chat">Include voice chat in recorded audio</label>
|
|
</div>
|
|
<div className="form-actions">
|
|
<a className="button-grey btnCancel" onClick={this.cancel}>CANCEL</a>
|
|
<a className="button-orange" onClick={this.startRecording}>START RECORDING</a>
|
|
</div>
|
|
</form>`
|
|
|
|
componentDidMount: () ->
|
|
$root = jQuery(this.getDOMNode())
|
|
|
|
context.JK.dropdown($root.find('select'))
|
|
|
|
$inputAudioRadioBtn = $root.find('#recording-input-audio')
|
|
$inputBothRadioBtn = $root.find('#recording-input-both')
|
|
|
|
#only enable audio & video radio button if a video is ongoing
|
|
$inputBothRadioBtn.on('ifClicked', this.setRecordingTypeChange)
|
|
$inputAudioRadioBtn.on('ifClicked', this.setRecordingTypeChange)
|
|
|
|
if !context.JK.videoIsOngoing
|
|
$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)
|
|
|
|
$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)
|
|
|
|
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)
|
|
|
|
}) |