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

context = window
MIX_MODES = context.JK.MIX_MODES

MixerActions = @MixerActions

@SessionSelfVolumeHover = React.createClass({

  mixins: [Reflux.listenTo(@SessionMyTracksStore,"onInputsChanged")]

  onInputsChanged: (sessionMixers) ->

    mixers = sessionMixers.mixers
    inputGroupMixers = mixers.getAudioInputCategoryMixer(MIX_MODES.PERSONAL)
    chatGroupMixers = mixers.getChatCategoryMixer( MIX_MODES.PERSONAL)

    this.setState({inputGroupMixers: inputGroupMixers, chatGroupMixers: chatGroupMixers})

  getInitialState: () ->
    {inputGroupMixers: @props.inputGroupMixers, chatGroupMixers: @props.chatGroupMixers}

  handleAudioInputMute: (e) ->
    e.preventDefault()

    muting = $(e.currentTarget).is('.enabled')

    MixerActions.mute([@state.inputGroupMixers.muteMixer], muting)

  handleChatInputMute: (e) ->
    e.preventDefault()

    muting = $(e.currentTarget).is('.enabled')

    MixerActions.mute([@state.chatGroupMixers.muteMixer], muting)

  handleAudioInputMuteCheckbox: (e) ->
    muting = $(e.target).is(':checked')

    MixerActions.mute([@state.inputGroupMixers.muteMixer], muting)

  handleChatMuteCheckbox: (e) ->
    muting = $(e.target).is(':checked')

    MixerActions.mute([@state.chatGroupMixers.muteMixer], muting)

  render: () ->

    monitorMuteMixer = @state.inputGroupMixers.muteMixer
    monitorMuteMixerId = monitorMuteMixer?.id
    monitorVolumeLeft = @state.inputGroupMixers.mixer?.volume_left
    monitorMuteClasses = classNames({
      'track-icon-mute': true
      'enabled' : !monitorMuteMixer?.mute
      'muted' : monitorMuteMixer?.mute
    })

    chatMuteMixer = @state.chatGroupMixers.muteMixer
    chatMuteMixerId = chatMuteMixer?.id
    chatVolumeLeft = @state.chatGroupMixers.mixer?.volume_left
    chatMuteClasses = classNames({
      'track-icon-mute': true
      'enabled' : !chatMuteMixer?.mute
      'muted' : chatMuteMixer?.mute
    })

    `<div id="self-volume-hover" >
      <div className="monitor-mixer mixer-holder">
        <h3>Music</h3>
        <div className="session-track track">
          <div className="track-vu-left">
            <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="vul" mixers={this.state.inputGroupMixers} />
          </div>
          <div className="track-vu-right">
            <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="vur" mixers={this.state.inputGroupMixers} />
          </div>
          <div className="track-label">
            <div>Volume</div>
            <div>{monitorVolumeLeft}dB</div>
          </div>
          <SessionTrackGain mixers={this.state.inputGroupMixers}  />
          <div className={monitorMuteClasses} data-control="mute" data-mixer-id={monitorMuteMixerId} onClick={this.handleAudioInputMute}/>

          <input type="checkbox" name="mute"/>
          <label htmlFor="mute">Mute</label>
        </div>

        <div className="textual-help">
          <p>Use this slider to control the volume of all the music in the session in your headphones or speakers.</p>
          <p>This will not affect the volume for other musicians in the session.</p>
          <p>To adjust master levels for all musicians for recordings and broadcasts, use Mixer button in the toolbar.</p>
        </div>
      </div>

      <div className="chat-mixer mixer-holder">
        <h3>Chat</h3>
        <div className="session-track track">
          <div className="track-vu-left">
            <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="vul" mixers={this.state.chatGroupMixers} />
          </div>
          <div className="track-vu-right">
            <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="vur" mixers={this.state.chatGroupMixers} />
          </div>
          <div className="track-label">
            <div>Volume</div>
            <div>{chatVolumeLeft}dB</div>
          </div>
          <SessionTrackGain mixers={this.state.chatGroupMixers}  />
          <div className={chatMuteClasses} data-control="mute" data-mixer-id={chatMuteMixerId} onClick={this.handleChatMute}/>

          <input type="checkbox" name="mute"/>
          <label htmlFor="mute">Mute</label>
        </div>

        <div className="textual-help">
          <p>Use this slider to control the volume of all the voice chat in the session in your headphones or speakers.</p>
          <p>This will not affect the volume for other musicians in the session.</p>
        </div>
      </div>
    </div>`

  componentDidMount: () ->
    $root = jQuery(this.getDOMNode())

    # initialize icheck
    $chatMuteCheckbox = $root.find('.chat-mixer input')
    context.JK.checkbox($chatMuteCheckbox)
    $chatMuteCheckbox.on('ifChanged', @handleChatMuteCheckbox);

    if @state.chatGroupMixers.muteMixer.mute
      $chatMuteCheckbox.iCheck('check').attr('checked', true)
    else
      $chatMuteCheckbox.iCheck('uncheck').attr('checked', false)

    $audioInputMuteCheckbox = $root.find('.monitor-mixer input')
    context.JK.checkbox($audioInputMuteCheckbox)
    $audioInputMuteCheckbox.on('ifChanged', @handleAudioInputMuteCheckbox);

    if @state.inputGroupMixers.muteMixer.mute
      $audioInputMuteCheckbox.iCheck('check').attr('checked', true)
    else
      $audioInputMuteCheckbox.iCheck('uncheck').attr('checked', false)

  componentWillUpdate: (nextProps, nextState) ->
    $root = jQuery(this.getDOMNode())

    # re-initialize icheck
    $chatMuteCheckbox = $root.find('.chat-mixer input')

    if nextState.chatGroupMixers.muteMixer?.mute
      $chatMuteCheckbox.iCheck('check').attr('checked', true)
    else
      $chatMuteCheckbox.iCheck('uncheck').attr('checked', false)

    $audioInputMuteCheckbox = $root.find('.monitor-mixer input')

    if nextState.inputGroupMixers.muteMixer?.mute
      $audioInputMuteCheckbox.iCheck('check').attr('checked', true)
    else
      $audioInputMuteCheckbox.iCheck('uncheck').attr('checked', false)

})