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

context = window
ChannelGroupIds = context.JK.ChannelGroupIds
CategoryGroupIds = context.JK.CategoryGroupIds
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
    if mixers?
      newMixers = mixers.refreshMixer(@state.mixers)

      newMixers = {} unless newMixers?
      sessionController = sessionMixers.session.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
    })

    textualHelp = null

    if (@props.trackType == 'SessionMyTrack' || @props.trackType == 'SessionMyChat') && @props.mode == context.JK.MIX_MODES.MASTER
      textualHelp = ` <div className="textual-help">
          <p>Use the gain knobs on your
              audio interface or this slider to
              adjust your input level up/down.</p>

          <p>Play or sing, and watch where the
              meter lights peak.</p>

          <p>These lights should reach the top of
              the green lights, and maybe one light
              into the orange/red zone.</p>
      </div>`
    else if @props.trackType == 'SessionOtherTrack' || @props.trackType == 'SessionMyTrack'
      textualHelp = `<div className="textual-help">
      <p>Use this slider to adjust this audio
          track's volume up or down to get
          your mix where you like.</p>

          <p>This only affects what you hear, not
          what others hear in your session.</p>

          <p>Your personal mix is what will be
          used for recordings and broadcasts
          you personally control in sessions.</p>
    </div>`
    else
      textualHelp = `<div className="textual-help">
          <p>Use this slider to adjust this audio
          track's volume up or down to get
          your mix where you like.</p>

          <p>This only affects what you hear, not
          what others hear in your session.</p>

          <p>Your personal mix is what will be
          used for recordings and broadcasts
          you personally control in sessions.</p>
      </div>`


    `<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>

        {textualHelp}

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