117 lines
3.8 KiB
CoffeeScript
117 lines
3.8 KiB
CoffeeScript
context = window
|
|
ChannelGroupIds = context.JK.ChannelGroupIds
|
|
MixerActions = @MixerActions
|
|
ptrCount = 0
|
|
|
|
@SessionTrackVolumeHover = React.createClass({
|
|
|
|
mixins: [Reflux.listenTo(@SessionMyTracksStore,"onInputsChanged")]
|
|
|
|
closeHover: (e) ->
|
|
e.preventDefault()
|
|
$container = $(this.getDOMNode()).closest('.react-holder')
|
|
$container.data('bt').btOff()
|
|
|
|
onInputsChanged: (sessionMixers) ->
|
|
|
|
mixers = sessionMixers.mixers
|
|
newMixers = mixers.refreshMixer(@state.mixers)
|
|
|
|
this.setState({mixers: newMixers})
|
|
|
|
getInitialState: () ->
|
|
{mixers: this.props.mixers, ptr: "STVH#{ptrCount++}" }
|
|
|
|
handleMute: (e) ->
|
|
e.preventDefault()
|
|
|
|
muting = $(e.currentTarget).is('.enabled')
|
|
|
|
if @state.mixers.mixer.group_id == ChannelGroupIds.AudioInputMusicGroup || @state.mixers.mixer.group_id == ChannelGroupIds.AudioInputChatGroup
|
|
MixerActions.mute([this.state.mixers.mixer, this.state.mixers.oppositeMixer], muting)
|
|
else
|
|
MixerActions.mute([this.state.mixers.mixer], muting)
|
|
|
|
|
|
handleMuteCheckbox: (e) ->
|
|
muting = $(e.target).is(':checked')
|
|
|
|
if @state.mixers.mixer.group_id == ChannelGroupIds.AudioInputMusicGroup || @state.mixers.mixer.group_id == ChannelGroupIds.AudioInputChatGroup
|
|
MixerActions.mute([this.state.mixers.mixer, this.state.mixers.oppositeMixer], muting)
|
|
else
|
|
MixerActions.mute([this.state.mixers.mixer], muting)
|
|
|
|
|
|
render: () ->
|
|
|
|
muteMixer = this.state.mixers?.muteMixer
|
|
|
|
muteMixerId = muteMixer?.id
|
|
volume_left = this.state.mixers?.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} />
|
|
<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())
|
|
|
|
# initialize icheck
|
|
$checkbox = $root.find('input')
|
|
context.JK.checkbox($checkbox)
|
|
$checkbox.on('ifChanged', this.handleMuteCheckbox);
|
|
|
|
if @state.mixers.muteMixer.mute
|
|
$checkbox.iCheck('check').attr('checked', true)
|
|
else
|
|
$checkbox.iCheck('uncheck').attr('checked', 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')
|
|
|
|
if nextState.mixers?.muteMixer?.mute
|
|
$checkbox.iCheck('check').attr('checked', true)
|
|
else
|
|
$checkbox.iCheck('uncheck').attr('checked', false)
|
|
}) |