75 lines
2.2 KiB
CoffeeScript
75 lines
2.2 KiB
CoffeeScript
context = window
|
|
|
|
MixerActions = @MixerActions
|
|
|
|
@SessionMyTrack = React.createClass({
|
|
|
|
mixins: [Reflux.listenTo(@SessionMyTracksStore,"onInputsChanged")]
|
|
|
|
onInputsChanged: (sessionMixers) ->
|
|
|
|
mixers = sessionMixers.mixers
|
|
newMixers = mixers.findMixerForTrack.apply(mixers, this.props.mixerFinder)
|
|
|
|
this.setState({mixers: newMixers})
|
|
|
|
|
|
getInitialState: () ->
|
|
{mixers: this.props.mixers}
|
|
|
|
handleMute: (e) ->
|
|
e.preventDefault()
|
|
|
|
muting = $(e.currentTarget).is('.enabled')
|
|
|
|
MixerActions.mute([this.state.mixers.mixer, this.state.mixers.oppositeMixer], muting)
|
|
|
|
render: () ->
|
|
|
|
muteMixer = this.state.mixers.muteMixer
|
|
vuMixer = this.state.mixers.vuMixer
|
|
|
|
classes = React.addons.classSet({
|
|
'track-icon-mute': true
|
|
'enabled' : !muteMixer.mute
|
|
'muted' : muteMixer.mute
|
|
})
|
|
|
|
`<div className="session-track my-track">
|
|
<div className="name">{this.props.name}</div>
|
|
<div className="track-avatar"><img src={this.props.photoUrl}/></div>
|
|
<div className="track-instrument"><img height="45" src={this.props.instrumentIcon} width="45" /></div>
|
|
<div className="track-controls">
|
|
<SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={this.state.mixers} />
|
|
<div className="track-buttons">
|
|
<div className={classes} data-control="mute" data-mixer-id={muteMixer.id} onClick={this.handleMute}/>
|
|
<div className="track-icon-pan"/>
|
|
<div className="track-icon-equalizer" />
|
|
</div>
|
|
<br className="clearall"/>
|
|
</div>
|
|
|
|
|
|
<br className="clearall"/>
|
|
</div>`
|
|
|
|
componentDidMount: () ->
|
|
$root = jQuery(this.getDOMNode())
|
|
$mute = $root.find('.track-icon-mute')
|
|
$pan = $root.find('.track-icon-pan')
|
|
|
|
context.JK.interactReactBubble(
|
|
$mute,
|
|
'SessionTrackVolumeHover',
|
|
{mixers:this.state.mixers, mixerFinder: this.props.mixerFinder},
|
|
{width:235, positions:['right', 'left'], offsetParent:$root.closest('.screen')})
|
|
|
|
context.JK.interactReactBubble(
|
|
$pan,
|
|
'SessionTrackPanHover',
|
|
{mixers:this.state.mixers, mixerFinder: this.props.mixerFinder},
|
|
{width:331, positions:['right', 'left'], offsetParent:$root.closest('.screen')})
|
|
|
|
|
|
})
|