jam-cloud/web/app/assets/javascripts/react-components/SessionRecordingSettings.js.jsx.coffee

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)
      {
        recordingInputType: rs.recordingInputType,
        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)
      {
        recordingInputType: 'audio-only',
        recordingName: '',
        audioFormat: 'ogg',
        videoFormat: 'mp4',
        audioDelay: 0,
        includeChat: false,
      }

  setRecordingNameChange: (e) ->
    @setState(recordingName: e.target.value)

  setRecordingInputTypeChange: (e) ->
    @setState(recordingInputType: e.target.value)

  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)

  setAudioDelay: (e) ->
    @setState(audioDelay: e.target.value)

  setIncludeChat: (e) ->
    @setState(includeChat: e.target.checked)
    
  cancel: (e) ->
    e.preventDefault()
    @props.handleCancel()

  startRecording: (e) ->
    e.preventDefault()
    $root = $(@getDOMNode())
    $recName = $root.find('#recording-name')
    if $recName.val().length > 0
      @props.handleSubmit(@state)
      @setState(recordingName: '')

  onExternalVideoStateChanged: (videoState) ->
    $root = $(this.getDOMNode())
    if videoState.videoEnabled
      $root.find('#recording-input-both').iCheck('uncheck').attr('disabled', false)
    else
      $root.find('#recording-input-both').prop('disabled',true).iCheck('update').iCheck('uncheck');
      $root.find('#recording-input-audio').iCheck('check').attr('checked', true)

  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="audio-only" defaultChecked="checked" onClick={this.setRecordingInputTypeChange} />
              <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="audio-video" onClick={this.setRecordingInputTypeChange} />
              <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.iCheck().attr('disabled', !context.JK.videoIsOngoing)
    
    # if @state.recordingInputType == 'audio-video'
    #   $inputBothRadioBtn.iCheck('check').attr('checked', true)
    # else
    #   $inputAudioRadioBtn.iCheck('check').attr('checked', true)

    $inputBothRadioBtn.prop('disabled',true).iCheck('update').iCheck('uncheck');

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