120 lines
3.7 KiB
CoffeeScript
120 lines
3.7 KiB
CoffeeScript
context = window
|
|
|
|
MixerActions = @MixerActions
|
|
|
|
@SessionOtherTrack = React.createClass({
|
|
|
|
handleMute: (e) ->
|
|
e.preventDefault()
|
|
|
|
unless this.props.hasMixer
|
|
logger.debug("ignoring mute; no mixer")
|
|
return
|
|
|
|
muting = $(e.currentTarget).is('.enabled')
|
|
|
|
MixerActions.mute([this.props.mixers.mixer, this.props.mixers.oppositeMixer], muting)
|
|
|
|
render: () ->
|
|
|
|
# today, all mixers are the same for a remote participant; so just grab the 1st
|
|
mixers = if this.props.tracks.length > 0 then this.props.tracks[0].mixers else {}
|
|
|
|
muteMixer = mixers.muteMixer
|
|
vuMixer = mixers.vuMixer
|
|
muteMixerId = muteMixer?.id
|
|
|
|
classes = classNames({
|
|
'track-icon-mute': true
|
|
'enabled' : !muteMixer?.mute
|
|
'muted' : muteMixer?.mute
|
|
})
|
|
|
|
componentClasses = classNames({
|
|
"session-track" : true
|
|
"my-track" : true
|
|
"has-mixer" : this.props.hasMixer
|
|
"no-mixer" : !this.props.hasMixer
|
|
"has-audio" : this.props.noAudio != true
|
|
"no-audio" : this.props.noAudio == true
|
|
})
|
|
|
|
pan = if mixers.mixer? then mixers.mixer?.pan else 0
|
|
|
|
panStyle = {
|
|
transform: "rotate(#{pan}deg)"
|
|
WebkitTransform: "rotate(#{pan}deg)"
|
|
}
|
|
|
|
`<div className={componentClasses}>
|
|
<div className="disabled-track-overlay" />
|
|
<div className="session-track-contents">
|
|
<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={mixers} />
|
|
<div className="track-buttons">
|
|
<div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
|
|
<div className="track-icon-pan" style={panStyle}/>
|
|
<div className="track-icon-equalizer" />
|
|
</div>
|
|
<br className="clearall"/>
|
|
</div>
|
|
|
|
<br className="clearall"/>
|
|
</div>
|
|
</div>`
|
|
|
|
componentDidMount: () ->
|
|
|
|
console.log("SessionSetUserName (other)", this.props.clientId, this.props.name)
|
|
|
|
context.jamClient.SessionSetUserName(this.props.client_id, this.props.name)
|
|
|
|
$root = $(this.getDOMNode())
|
|
$mute = $root.find('.track-icon-mute')
|
|
$pan = $root.find('.track-icon-pan')
|
|
|
|
context.JK.interactReactBubble(
|
|
$mute,
|
|
'SessionTrackVolumeHover',
|
|
() =>
|
|
mixers = if this.props.tracks.length > 0 then this.props.tracks[0].mixers else {}
|
|
{mixers:mixers}
|
|
,
|
|
{width:235, positions:['right', 'left'], offsetParent:$root.closest('.screen')})
|
|
|
|
context.JK.interactReactBubble(
|
|
$pan,
|
|
'SessionTrackPanHover',
|
|
() =>
|
|
mixers = if this.props.tracks.length > 0 then this.props.tracks[0].mixers else {}
|
|
{mixers:mixers}
|
|
,
|
|
{width:331, positions:['right', 'left'], offsetParent:$root.closest('.screen')})
|
|
|
|
unless this.props.hasMixer
|
|
$mute.on("mouseenter", false)
|
|
$mute.on("mouseleave", false)
|
|
$pan.on("mouseentere", false)
|
|
$pan.on("mouseleave", false)
|
|
|
|
componentWillUpdate: (nextProps, nextState) ->
|
|
$root = $(this.getDOMNode())
|
|
$mute = $root.find('.track-icon-mute')
|
|
$pan = $root.find('.track-icon-pan')
|
|
|
|
# disable hover effects if there is no mixer
|
|
if nextProps.hasMixer
|
|
$mute.off("mouseenter", false)
|
|
$mute.off("mouseleave", false)
|
|
$pan.off("mouseenter", false)
|
|
$pan.off("mouseleave", false)
|
|
else
|
|
$mute.on("mouseenter", false)
|
|
$mute.on("mouseleave", false)
|
|
$pan.on("mouseentere", false)
|
|
$pan.on("mouseleave", false)
|
|
})
|