145 lines
4.4 KiB
CoffeeScript
145 lines
4.4 KiB
CoffeeScript
context = window
|
|
mixins = []
|
|
|
|
|
|
|
|
#mixins.push(Reflux.listenTo(@AppStore,"onAppInit"))
|
|
|
|
@SessionRecordingSettings = React.createClass({
|
|
mixins: mixins
|
|
|
|
# beforeShow: (args) ->
|
|
# alert('beforeShow')
|
|
|
|
# afterHide: (args) ->
|
|
|
|
# onAppInit: (@app) ->
|
|
# dialogBindings = {
|
|
# 'beforeShow': @beforeShow,
|
|
# 'afterHide': @afterHide
|
|
# };
|
|
|
|
# @app.bindDialog('session-recording', dialogBindings);
|
|
|
|
getInitialState: () ->
|
|
{
|
|
recordingInputType: 'audio-only',
|
|
recordingName: '',
|
|
audioFormat: 'ogg',
|
|
videoFormat: 'mp4',
|
|
audioDelay: 0,
|
|
includeChat: false,
|
|
}
|
|
|
|
handleCancel: (e) ->
|
|
e.preventDefault()
|
|
@props.app.layout.cancelDialog('session-recording');
|
|
|
|
handleRecordingNameChange: (e) ->
|
|
@setState(recordingName: e.target.value)
|
|
|
|
handleRecordingInputTypeChange: (e) ->
|
|
@setState(recordingInputType: e.target.value)
|
|
|
|
handleAudioFormatChange: (e) ->
|
|
|
|
handleVideoFormatChange: (e) ->
|
|
|
|
handleAudioDelay: (e) ->
|
|
|
|
|
|
handleStartRecording: () ->
|
|
|
|
|
|
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>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<input type="radio" name="recording-input-type" id="recording-input-audio" value="audio-only" defaultChecked="checked" onClick={this.handleRecordingInputTypeChange} />
|
|
</td>
|
|
<td><label htmlFor="recording-input-audio">Audio only</label></td>
|
|
</tr>
|
|
<tr><td><input type="radio" name="recording-input-type" id="recording-input-both" value="audio-video" onClick={this.handleRecordingInputTypeChange} /></td><td><label htmlFor="recording-input-both">Audio and video</label></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div className="form-item">
|
|
<label htmlFor="recording-name">Name:</label>
|
|
<div>
|
|
<input type="text" name="name" id="recording-name" onChange={this.handleRecordingNameChange} />
|
|
</div>
|
|
</div>
|
|
<div className="form-item">
|
|
<label htmlFor="audio-format">Audio Format:</label>
|
|
<div>
|
|
<select id="audio-format" onChange={this.handleAudioFormatChange}>
|
|
{audioFormatOptions}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="form-item">
|
|
<label htmlFor="video-format">Video Format:</label>
|
|
<div>
|
|
<select id="video-format" onChange={this.handleVideoFormatChange}>
|
|
{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.handleAudioDelay} />
|
|
</div>
|
|
</div>
|
|
<div className="form-item">
|
|
<label>Voice Chat:</label>
|
|
<div>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td><input type="checkbox" name="include-chat" id="include-chat" /></td>
|
|
<td><label htmlFor="include-chat">Include voice chat in recorded audio</label></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div className="form-actions">
|
|
<a className="button-grey btnCancel" onClick={this.handleCancel}>CANCEL</a>
|
|
<a className="button-orange" onClick={this.handleStartRecording}>START RECORDING</a>
|
|
</div>
|
|
</form>`
|
|
|
|
componentDidMount: () ->
|
|
$root = jQuery(this.getDOMNode())
|
|
|
|
context.JK.dropdown($root.find('select'))
|
|
|
|
$includeChatCheckbox = $root.find('#include-chat')
|
|
context.JK.checkbox($includeChatCheckbox)
|
|
|
|
$inputAudioRadioBtn = $root.find('#recording-input-audio')
|
|
context.JK.checkbox($inputAudioRadioBtn)
|
|
|
|
$inputBothRadioBtn = $root.find('#recording-input-both')
|
|
context.JK.checkbox($inputBothRadioBtn)
|
|
|
|
componentDidUpdate: () ->
|
|
$root = $(this.getDOMNode())
|
|
context.JK.dropdown($root.find('select'))
|
|
}) |