169 lines
6.1 KiB
CoffeeScript
169 lines
6.1 KiB
CoffeeScript
context = window
|
|
MIX_MODES = context.JK.MIX_MODES
|
|
|
|
MixerActions = @MixerActions
|
|
|
|
@SessionSelfVolumeHover = 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
|
|
inputGroupMixers = mixers.simulatedMusicCategoryMixers[MIX_MODES.PERSONAL]
|
|
chatGroupMixers = mixers.simulatedChatCategoryMixers[MIX_MODES.PERSONAL]
|
|
|
|
@setState({inputGroupMixers: inputGroupMixers, chatGroupMixers: chatGroupMixers})
|
|
|
|
getInitialState: () ->
|
|
{inputGroupMixers: @props.inputGroupMixers, chatGroupMixers: @props.chatGroupMixers}
|
|
|
|
handleAudioInputMute: (e) ->
|
|
e.preventDefault()
|
|
|
|
muting = $(e.currentTarget).is('.enabled')
|
|
|
|
MixerActions.mute(@state.inputGroupMixers.muteMixer, muting)
|
|
|
|
handleChatInputMute: (e) ->
|
|
e.preventDefault()
|
|
|
|
muting = $(e.currentTarget).is('.enabled')
|
|
|
|
MixerActions.mute(@state.chatGroupMixers.muteMixer, muting)
|
|
|
|
handleAudioInputMuteCheckbox: (e) ->
|
|
muting = $(e.target).is(':checked')
|
|
|
|
MixerActions.mute(@state.inputGroupMixers.muteMixer, muting)
|
|
|
|
handleChatMuteCheckbox: (e) ->
|
|
muting = $(e.target).is(':checked')
|
|
|
|
MixerActions.mute(@state.chatGroupMixers.muteMixer, muting)
|
|
|
|
render: () ->
|
|
|
|
monitorMuteMixer = @state.inputGroupMixers.muteMixer[0]
|
|
monitorMuteMixerId = monitorMuteMixer?.id
|
|
monitorVolumeLeft = @state.inputGroupMixers.mixer[0].volume_left
|
|
monitorMuteClasses = classNames({
|
|
'track-icon-mute': true
|
|
'enabled' : !monitorMuteMixer?.mute
|
|
'muted' : monitorMuteMixer?.mute
|
|
})
|
|
|
|
chatMuteMixer = @state.chatGroupMixers.muteMixer[0]
|
|
chatMuteMixerId = chatMuteMixer?.id
|
|
chatVolumeLeft = @state.chatGroupMixers.mixer?[0].volume_left
|
|
chatMuteClasses = classNames({
|
|
'track-icon-mute': true
|
|
'enabled' : !chatMuteMixer?.mute
|
|
'muted' : chatMuteMixer?.mute
|
|
})
|
|
|
|
`<div id="self-volume-hover" >
|
|
<div className="monitor-mixer mixer-holder">
|
|
<h3>Music</h3>
|
|
<div className="session-track track">
|
|
<div className="track-vu-left">
|
|
<SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="best" mixers={this.state.inputGroupMixers} />
|
|
</div>
|
|
<div className="track-vu-right">
|
|
<SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="best" mixers={this.state.inputGroupMixers} />
|
|
</div>
|
|
<div className="track-label">
|
|
<div>Volume</div>
|
|
<div>{monitorVolumeLeft}dB</div>
|
|
</div>
|
|
<SessionTrackGain mixers={this.state.inputGroupMixers} gainType='music' controlGroup="music" />
|
|
<div className={monitorMuteClasses} data-control="mute" onClick={this.handleAudioInputMute}/>
|
|
|
|
<input type="checkbox" name="mute"/>
|
|
<label htmlFor="mute">Mute</label>
|
|
</div>
|
|
|
|
<div className="textual-help">
|
|
<p>Use this slider to control the volume of all the music in the session in your headphones or speakers.</p>
|
|
<p>This will not affect the volume 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>
|
|
|
|
<div className="chat-mixer mixer-holder">
|
|
<h3>Chat</h3>
|
|
<div className="session-track track">
|
|
<div className="track-vu-left">
|
|
<SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="best" mixers={this.state.chatGroupMixers} />
|
|
</div>
|
|
<div className="track-vu-right">
|
|
<SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="best" mixers={this.state.chatGroupMixers} />
|
|
</div>
|
|
<div className="track-label">
|
|
<div>Volume</div>
|
|
<div>{chatVolumeLeft}dB</div>
|
|
</div>
|
|
<SessionTrackGain mixers={this.state.chatGroupMixers} controlGroup="chat" />
|
|
<div className={chatMuteClasses} data-control="mute" onClick={this.handleChatMute}/>
|
|
|
|
<input type="checkbox" name="mute"/>
|
|
<label htmlFor="mute">Mute</label>
|
|
</div>
|
|
|
|
<div className="textual-help">
|
|
<p>Use this slider to control the volume of all the voice chat in the session in your headphones or speakers.</p>
|
|
<p>This will not affect the volume for other musicians in the session.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="close-window">
|
|
<a onClick={this.closeHover}>close</a>
|
|
</div>
|
|
</div>`
|
|
|
|
componentDidMount: () ->
|
|
$root = jQuery(this.getDOMNode())
|
|
|
|
# initialize icheck
|
|
$chatMuteCheckbox = $root.find('.chat-mixer input')
|
|
context.JK.checkbox($chatMuteCheckbox)
|
|
$chatMuteCheckbox.on('ifChanged', @handleChatMuteCheckbox);
|
|
|
|
if @state.chatGroupMixers.muteMixer[0].mute
|
|
$chatMuteCheckbox.iCheck('check').attr('checked', true)
|
|
else
|
|
$chatMuteCheckbox.iCheck('uncheck').attr('checked', false)
|
|
|
|
$audioInputMuteCheckbox = $root.find('.monitor-mixer input')
|
|
context.JK.checkbox($audioInputMuteCheckbox)
|
|
$audioInputMuteCheckbox.on('ifChanged', @handleAudioInputMuteCheckbox);
|
|
|
|
if @state.inputGroupMixers.muteMixer[0].mute
|
|
$audioInputMuteCheckbox.iCheck('check').attr('checked', true)
|
|
else
|
|
$audioInputMuteCheckbox.iCheck('uncheck').attr('checked', false)
|
|
|
|
componentWillUpdate: (nextProps, nextState) ->
|
|
$root = jQuery(this.getDOMNode())
|
|
|
|
# re-initialize icheck
|
|
$chatMuteCheckbox = $root.find('.chat-mixer input')
|
|
|
|
if nextState.chatGroupMixers.muteMixer[0].mute
|
|
$chatMuteCheckbox.iCheck('check').attr('checked', true)
|
|
else
|
|
$chatMuteCheckbox.iCheck('uncheck').attr('checked', false)
|
|
|
|
$audioInputMuteCheckbox = $root.find('.monitor-mixer input')
|
|
|
|
if nextState.inputGroupMixers.muteMixer[0].mute
|
|
$audioInputMuteCheckbox.iCheck('check').attr('checked', true)
|
|
else
|
|
$audioInputMuteCheckbox.iCheck('uncheck').attr('checked', false)
|
|
|
|
}) |