229 lines
8.5 KiB
CoffeeScript
229 lines
8.5 KiB
CoffeeScript
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)
|
|
|
|
handleVuMeterUpdate: (e) ->
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
|
|
$select = $(e.currentTarget)
|
|
updateRate = $select.val()
|
|
|
|
localStorage.setItem('vuMeterUpdateRate', updateRate)
|
|
|
|
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
|
|
})
|
|
|
|
vuMixer = @state.mixers?.vuMixer
|
|
if vuMixer && $.isArray(vuMixer)
|
|
vuMixer = vuMixer[0]
|
|
vuMixerId = vuMixer?.id
|
|
|
|
textualHelp = null
|
|
|
|
vuMeterUpdatePref = `<div style={{ marginTop: '13px', width: '100px', clear: 'both' }}>
|
|
<strong><small>VU Meter Updates:</small></strong>
|
|
<select className="vu-meter-pref-select" style={{ width: '100%', margin: '5px 0' }} onChange={this.handleVuMeterUpdate}>
|
|
<option value="fast">Fast</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="slow">Slow</option>
|
|
</select>
|
|
</div>`
|
|
|
|
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>
|
|
{vuMeterUpdatePref}
|
|
</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>
|
|
{vuMeterUpdatePref}
|
|
</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>
|
|
{vuMeterUpdatePref}
|
|
</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 className="close-btn" style={{ height: '5px', position: 'absolute', top: '300px', left: '20px' }}><a onClick={this.closeHover}>close</a></div>
|
|
</div>
|
|
<div>
|
|
{textualHelp}
|
|
</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
|
|
|
|
vuMixer = @state.mixers?.vuMixer
|
|
|
|
if vuMixer && $.isArray(vuMixer)
|
|
vuMixer = vuMixer[0]
|
|
vuMixerId = vuMixer?.id
|
|
if !vuMixerId
|
|
console.warn("No vuMixerId found in vuMeterUpdate select")
|
|
return
|
|
|
|
vuMeterUpdateRate = localStorage.getItem('vuMeterUpdateRate') || 'fast'
|
|
$vuMeterSelect = $root.find('.vu-meter-pref-select')
|
|
$vuMeterSelect.val(vuMeterUpdateRate)
|
|
$vuMeterSelect.on('change', this.handleVuMeterUpdate)
|
|
$vuMeterSelect.trigger('change')
|
|
|
|
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
|
|
}) |