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

context = window
ChannelGroupIds = context.JK.ChannelGroupIds
MixerActions = @MixerActions
ptrCount = 0

@SessionTrackVolumeHover = React.createClass({

  # example: 'music' when it represent the gainer that controls all non-chat inputs
  propTypes: {
    gainType: React.PropTypes.string
  }

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

  closeHover: (e) ->
    e.preventDefault()
    $container = $(this.getDOMNode()).closest('.react-holder')
    $container.data('bt').btOff()

  onInputsChanged: (sessionMixers) ->

    mixers = sessionMixers.mixers
    newMixers = mixers.refreshMixer(@state.mixers)

    newMixers = {} unless newMixers?
    sessionController = sessionMixers.session.sessionController()
    logger.debug("session controller", sessionController)

    this.setState({mixers: newMixers, sessionController: sessionController})

  getInitialState: () ->
    {mixers: this.props.mixers, ptr: "STVH#{ptrCount++}", sessionController: window.SessionStore.helper.sessionController()}

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

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

    # if it's a chat, my input, or media track, or jam track, or media track group, then do both mixers at the same time
    if @state.mixers.mixer.group_id == ChannelGroupIds.AudioInputMusicGroup || @state.mixers.mixer.group_id == ChannelGroupIds.AudioInputChatGroup || @state.mixers.mixer.group_id == ChannelGroupIds.MediaTrackGroup || @state.mixers.mixer.group_id == ChannelGroupIds.JamTrackGroup || ((@state.mixers.mixer.group_id == ChannelGroupIds.MonitorCatGroup || @state.mixers.mixer.group_id == ChannelGroupIds.MasterCatGroup) && @state.mixers.mixer.name == CategoryGroupIds.MediaTrack)
      MixerActions.mute([this.state.mixers.mixer, this.state.mixers.oppositeMixer], muting)
    else
      MixerActions.mute(this.state.mixers.mixer, muting)


  handleMuteCheckbox: (e) ->

    return if @iCheckMaint

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

    # if it's a chat, my input, or media track, or jam track, or media track group, then do both mixers at the same time
    if @state.mixers.mixer.group_id == ChannelGroupIds.AudioInputMusicGroup || @state.mixers.mixer.group_id == ChannelGroupIds.AudioInputChatGroup || @state.mixers.mixer.group_id == ChannelGroupIds.MediaTrackGroup || @state.mixers.mixer.group_id == ChannelGroupIds.JamTrackGroup || ((@state.mixers.mixer.group_id == ChannelGroupIds.MonitorCatGroup || @state.mixers.mixer.group_id == ChannelGroupIds.MasterCatGroup) && @state.mixers.mixer.name == CategoryGroupIds.MediaTrack)
      MixerActions.mute([this.state.mixers.mixer, this.state.mixers.oppositeMixer], muting)
    else
      MixerActions.mute(this.state.mixers.mixer, muting)


  render: () ->

    muteMixer = @state.mixers?.muteMixer
    if muteMixer && $.isArray(muteMixer)
      muteMixer = muteMixer[0]
    muteMixerId = muteMixer?.id

    mixer = @state.mixers?.mixer
    if mixer && $.isArray(mixer)
      mixer = mixer[0]

    volume_left = mixer.volume_left

    classes = classNames({
      'track-icon-mute': true
      'enabled' : !muteMixer?.mute
      'muted' : muteMixer?.mute
    })

    `<div className="track-volume-hover">
      <div className="session-track track">
        <div className="track-vu-left">
          <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="left" mixers={this.state.mixers} ptr={this.state.ptr} />
        </div>
        <div className="track-vu-right">
          <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="right" mixers={this.state.mixers} ptr={this.state.ptr} />
        </div>
        <div className="track-label">
          <div>Volume</div>
          <div>{volume_left}dB</div>
        </div>
        <SessionTrackGain mixers={this.state.mixers} gainType={this.props.gainType} sessionController={this.state.sessionController} />
        <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>

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

      <div className="textual-help">
        <p>Use this slider to control the volume of this track in your personal mix.</p>
        <p>This will not affect the volume of this track 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 className="close-window">
        <a onClick={this.closeHover}>close</a>
      </div>
    </div>`

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

    muteMixer = this.state.mixers?.muteMixer
    if $.isArray(muteMixer)
      muteMixer = muteMixer[0]

    # initialize icheck
    $checkbox = $root.find('input')
    context.JK.checkbox($checkbox)
    $checkbox.on('ifChanged', this.handleMuteCheckbox);


    # using iCheck causes a 'ifChanged' event, so we need to swallow this up
    @iCheckMaint = true
    if muteMixer?.mute
      $checkbox.iCheck('check').attr('checked', true)
    else
      $checkbox.iCheck('uncheck').attr('checked', false)
    @iCheckMaint = false

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

    # if the mixers go dead, whack our selves out of existence
    unless nextState.mixers?
      $container = $root.closest('.react-holder')
      $container.data('bt').btOff()
      return

    # re-initialize icheck
    $checkbox = $root.find('input')

    muteMixer = nextState.mixers?.muteMixer
    if muteMixer? && $.isArray(muteMixer)
      muteMixer = muteMixer[0]

    # using iCheck causes a 'ifChanged' event, so we need to swallow this up
    @iCheckMaint = true
    if muteMixer?.mute
      $checkbox.iCheck('check').attr('checked', true)
    else
      $checkbox.iCheck('uncheck').attr('checked', false)
    @iCheckMaint = false
})