render (containerEl) {
const store = stores.get(this)
const setProp = (key, val) => store.dispatch(state => Object.assign({}, state, {[key]: val}))
ReactDOM.render(
connect(store)(({
attack,
gain,
knee,
pan,
ratio,
release,
threshold,
}) =>
createElement('div', {style: {textAlign: 'center'}},
createElement('h2', null, 'Leveller'),
createElement('div', null,
createElement(ControlModule, {title: 'Output'},
createElement(Range, {
defaultValue: gain,
label: 'Gain',
max: 2,
onInput: e => setProp('gain', Number(e.target.value)),
}),
createElement(Range, {
defaultValue: pan,
label: 'Pan',
min: -1,
onInput: e => setProp('pan', Number(e.target.value)),
}),
)
),
createElement(ControlModule, {title: 'Compressor'},
createElement(Range, {
defaultValue: threshold,
label: 'Threshold',
max: 0,
min: -99.99,
onInput: e => setProp('threshold', Number(e.target.value)),
}),
createElement(Range, {
defaultValue: knee,
label: 'Knee',
max: 40,
onInput: e => setProp('knee', Number(e.target.value)),
}),
createElement(Range, {
defaultValue: ratio,
label: 'Ratio',
max: 20,
min: 1,
onInput: e => setProp('ratio', Number(e.target.value)),
}),
createElement(Range, {
defaultValue: attack,
label: 'Attack',
max: 1,
onInput: e => setProp('attack', Number(e.target.value)),
}),
createElement(Range, {
defaultValue: release,
label: 'Release',
max: 1,
onInput: e => setProp('release', Number(e.target.value)),
}),
)
)),
containerEl
)
}
render (containerEl) {
const store = stores.get(this)
const setPropFromRangeEvent = key => e => store.dispatch(state => Object.assign(
{},
state,
{[key]: Number(e.target.value)}
))
const setPropFromSelectEvent = key => e => store.dispatch(state => Object.assign(
{},
state,
{[key]: e.target.value}
))
ReactDOM.render(connect(store)(({
carrierDetune,
carrierOscType,
masterGain,
masterPan,
modulatorDetune,
modulatorOscType,
modulatorRatio,
}) => createElement('div', {style: {textAlign: 'center'}},
createElement('h2', null, 'Ariadne'),
createElement(ControlModule, null,
createElement(Range, {
defaultValue: masterGain,
label: 'Gain',
max: 1.25,
onInput: setPropFromRangeEvent('masterGain'),
}),
createElement(Range, {
defaultValue: masterPan,
label: 'Pan',
min: -1,
onInput: setPropFromRangeEvent('masterPan'),
}),
createElement(
Select,
{
defaultValue: carrierOscType,
label: 'Carrier wave',
onInput: setPropFromSelectEvent('carrierOscType'),
},
createElement('option', {value: 'sawtooth'}, 'Sawtooth'),
createElement('option', {value: 'sine'}, 'Sine'),
createElement('option', {value: 'square'}, 'Square'),
createElement('option', {value: 'triangle'}, 'Triangle')
),
createElement(
Select,
{
defaultValue: modulatorOscType,
label: 'Modulator wave',
onInput: setPropFromSelectEvent('modulatorOscType'),
},
createElement('option', {value: 'sawtooth'}, 'Sawtooth'),
createElement('option', {value: 'sine'}, 'Sine'),
createElement('option', {value: 'square'}, 'Square'),
createElement('option', {value: 'triangle'}, 'Triangle')
),
createElement(Range, {
defaultValue: carrierDetune,
label: 'Carrier detune',
max: 32,
min: -32,
onInput: setPropFromRangeEvent('carrierDetune'),
}),
createElement(Range, {
defaultValue: modulatorRatio,
label: 'Modulator freq',
max: 8,
min: 0.1,
onInput: setPropFromRangeEvent('modulatorRatio'),
}),
createElement(Range, {
defaultValue: modulatorDetune,
label: 'Modulator detune',
max: 128,
min: -128,
onInput: setPropFromRangeEvent('modulatorDetune'),
})
)
)), containerEl)
}