135 lines
4.7 KiB
JavaScript
135 lines
4.7 KiB
JavaScript
import React from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { selectById, parameterUpdated } from './parameterSlice.js';
|
|
import { Slider, SelectList } from '../../helpers/Helpers';
|
|
import styles from './Parameters.module.css';
|
|
|
|
export default function Pitch(props) {
|
|
const parameters = useSelector((state) => selectById(state, props.id));
|
|
const dispatch = useDispatch();
|
|
|
|
return (
|
|
<div className={styles.pitchContainer}>
|
|
<div className={styles.container}>
|
|
Voice Assign
|
|
<SelectList
|
|
value={parameters.voiceAssign}
|
|
list={[
|
|
{ value: 'Mono' },
|
|
{ value: 'Poly' },
|
|
{ value: 'Unison' },
|
|
]}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { voiceAssign: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
Trigger Mode
|
|
<SelectList
|
|
value={parameters.triggerMode}
|
|
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { triggerMode: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
Transpose
|
|
<Slider
|
|
parameter={parameters.transpose}
|
|
min={-24}
|
|
max={24}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { transpose: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className={styles.divider} />
|
|
<div className={styles.container}>
|
|
Tune
|
|
<Slider
|
|
parameter={parameters.tune}
|
|
min={-50}
|
|
max={50}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { tune: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
Unisone Detune
|
|
<Slider
|
|
parameter={parameters.unisonDetune}
|
|
min={0}
|
|
max={99}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { unisonDetune: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
Portamento
|
|
<Slider
|
|
parameter={parameters.portamento}
|
|
min={0}
|
|
max={127}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { portamento: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
Bend Range
|
|
<Slider
|
|
parameter={parameters.bendRange}
|
|
min={-12}
|
|
max={12}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { bendRange: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
Vibrato Intensity
|
|
<Slider
|
|
parameter={parameters.vibratoIntensity}
|
|
min={-63}
|
|
max={63}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { vibratoIntensity: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|