100 lines
3.5 KiB
CoffeeScript
100 lines
3.5 KiB
CoffeeScript
context = window
|
|
MIX_MODES = context.JK.MIX_MODES
|
|
mixins = []
|
|
|
|
MixerStore = context.MixerStore
|
|
|
|
mixins.push(Reflux.listenTo(SessionMyTracksStore,"onInputChanged"))
|
|
|
|
@SessionRecordingVu = React.createClass({
|
|
mixins: mixins
|
|
|
|
onInputChanged: (sessionMixers) ->
|
|
inputGroupMixers = {}
|
|
mixers = sessionMixers.mixers
|
|
if mixers
|
|
#categoryMixers = mixers.simulatedMusicCategoryMixers[MIX_MODES.MASTER]
|
|
categoryMixers = mixers.simulatedMusicCategoryMixers[MIX_MODES.PERSONAL]
|
|
if categoryMixers
|
|
inputGroupMixers = categoryMixers
|
|
@setState({mixers: inputGroupMixers})
|
|
|
|
getInitialState: () ->
|
|
{ mixers: @props.mixers }
|
|
|
|
renderVu: () ->
|
|
monitorMuteMixer = @state.mixers.muteMixer[0]
|
|
monitorMuteMixerId = mixers?.id
|
|
monitorVolumeLeft = @state.mixers.mixer[0].volume_left
|
|
monitorMuteClasses = classNames({
|
|
'track-icon-mute': true
|
|
'enabled' : !monitorMuteMixer?.mute
|
|
'muted' : monitorMuteMixer?.mute
|
|
})
|
|
|
|
`<div>
|
|
<div className="vol-gauge-heading">
|
|
Volume:
|
|
</div>
|
|
<div className="vol-gauge">
|
|
<div className="session-track track">
|
|
<div className="track-vu-left">
|
|
<SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="best" mixers={this.state.mixers} />
|
|
</div>
|
|
<div className="track-vu-right">
|
|
<SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="best" mixers={this.state.mixers} />
|
|
</div>
|
|
<div className="track-label">
|
|
<div>Volume</div>
|
|
<div>{monitorVolumeLeft}dB</div>
|
|
</div>
|
|
<SessionTrackGain mixers={this.state.mixers} 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 volume control only if you find that the volume of your overall recording is too low or too high.</p>
|
|
<p>If too low/high move slider up from 0db to increase volume or down to decrease volume.</p>
|
|
<p>To change the volume of individual tracks in the mix, use the personal mix controls in the session window.</p>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
|
|
render: () ->
|
|
if Object.keys(@state.mixers).length > 0 then @renderVu() else `<span>Loading...</span>`
|
|
|
|
handleAudioInputMute: (e) ->
|
|
e.preventDefault()
|
|
muting = $(e.currentTarget).is('.enabled')
|
|
MixerActions.mute(@state.mixers.muteMixer, muting)
|
|
|
|
handleAudioInputMuteCheckbox: (e) ->
|
|
muting = $(e.target).is(':checked')
|
|
MixerActions.mute(@state.mixers.muteMixer, muting)
|
|
|
|
componentDidMount: () ->
|
|
$root = jQuery(this.getDOMNode())
|
|
|
|
# initialize icheck
|
|
$audioInputMuteCheckbox = $root.find('input')
|
|
context.JK.checkbox($audioInputMuteCheckbox)
|
|
$audioInputMuteCheckbox.on('ifChanged', @handleAudioInputMuteCheckbox)
|
|
|
|
if @state.mixers.muteMixer[0].mute
|
|
$audioInputMuteCheckbox.iCheck('check').attr('checked', true)
|
|
else
|
|
$audioInputMuteCheckbox.iCheck('uncheck').attr('checked', false)
|
|
|
|
componentWillUpdate: (nextProps, nextState) ->
|
|
$root = jQuery(this.getDOMNode())
|
|
|
|
$audioInputMuteCheckbox = $root.find('input')
|
|
|
|
if nextState.mixers.muteMixer[0].mute
|
|
$audioInputMuteCheckbox.iCheck('check').attr('checked', true)
|
|
else
|
|
$audioInputMuteCheckbox.iCheck('uncheck').attr('checked', false)
|
|
}) |