Rename timbre to editor, remove outdated tabs
This commit is contained in:
Aoife
@@ -0,0 +1,134 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, Checkbox } from '../../helpers/Helpers';
|
||||
|
||||
export default function Amp(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Amp Level
|
||||
<Slider
|
||||
parameter={parameters.ampLevel}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
PanPot
|
||||
<Slider
|
||||
parameter={parameters.panpot}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { panpot: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Amp Keyboard Tracking
|
||||
<Slider
|
||||
parameter={parameters.ampTrack}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampTrack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name='Distortion'
|
||||
parameter={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { distortion: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const VocoderAmp = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Amp Level
|
||||
<Slider
|
||||
parameter={parameters.ampLevel}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Direct Level
|
||||
<Slider
|
||||
parameter={parameters.directLevel}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { directLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Amp Keyboard Tracking
|
||||
<Slider
|
||||
parameter={parameters.ampTrack}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { ampTrack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name='Distortion'
|
||||
parameter={parameters.distortion}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { distortion: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,198 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
|
||||
|
||||
const ArpeggA = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>Arpeggio A.</span>
|
||||
<div>
|
||||
Tempo
|
||||
<Slider
|
||||
min={20}
|
||||
max={300}
|
||||
parameter={parameters.tempo}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tempo: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Resolution
|
||||
<SelectList
|
||||
value={parameters.resolution}
|
||||
list={[
|
||||
{ value: '1/24' },
|
||||
{ value: '1/16' },
|
||||
{ value: '1/12' },
|
||||
{ value: '1/8' },
|
||||
{ value: '1/6' },
|
||||
{ value: '1/4' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { resolution: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Gate
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
parameter={parameters.gate}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { gate: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div />
|
||||
<div>
|
||||
Type
|
||||
<SelectList
|
||||
value={parameters.type}
|
||||
list={[
|
||||
{ value: 'Up' },
|
||||
{ value: 'Down' },
|
||||
{ value: 'Alternate 1' },
|
||||
{ value: 'Alternate 2' },
|
||||
{ value: 'Random' },
|
||||
{ value: 'Trigger' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { type: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Range
|
||||
<SelectList
|
||||
labelFunction={(v) => `${v.value} Oct`}
|
||||
value={parameters.range}
|
||||
list={[{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { range: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ArpeggB = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>Arpeggio B.</span>
|
||||
<div>
|
||||
<Checkbox
|
||||
name='Latch'
|
||||
parameter={parameters.latch}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { latch: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Swing
|
||||
<Slider
|
||||
min={-100}
|
||||
max={100}
|
||||
parameter={parameters.swing}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { swing: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name='Key Sync'
|
||||
parameter={parameters.keySync}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { keySync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div />
|
||||
<div>
|
||||
Last Step
|
||||
<SelectList
|
||||
labelFunction={(v) => `Step ${v.value}`}
|
||||
value={parameters.lastStep}
|
||||
list={[
|
||||
{ value: 1 },
|
||||
{ value: 2 },
|
||||
{ value: 3 },
|
||||
{ value: 4 },
|
||||
{ value: 5 },
|
||||
{ value: 6 },
|
||||
{ value: 7 },
|
||||
{ value: 8 },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { lastStep: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Target Timbre
|
||||
<SelectList
|
||||
value={parameters.target}
|
||||
list={[
|
||||
{ value: 'Both' },
|
||||
{ value: 'Timbre 1' },
|
||||
{ value: 'Timbre 2' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { target: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { ArpeggA, ArpeggB };
|
||||
@@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, Checkbox } from '../../helpers/Helpers';
|
||||
|
||||
export default function EG(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Attack
|
||||
<Slider
|
||||
parameter={parameters.attack}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { attack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Decay
|
||||
<Slider
|
||||
parameter={parameters.decay}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { decay: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Sustain
|
||||
<Slider
|
||||
parameter={parameters.sustain}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { sustain: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Release
|
||||
<Slider
|
||||
parameter={parameters.release}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { release: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name='EG Reset'
|
||||
parameter={parameters.egReset}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { egReset: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList } from '../../helpers/Helpers';
|
||||
|
||||
export default function Filter(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Filter Type
|
||||
<SelectList
|
||||
value={parameters.filterType}
|
||||
list={[
|
||||
{ value: '-24db Low Pass' },
|
||||
{ value: '-12db Low Pass' },
|
||||
{ value: 'Band Pass' },
|
||||
{ value: 'High Pass' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { filterType: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Cutoff
|
||||
<Slider
|
||||
parameter={parameters.cutoff}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { cutoff: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Resonance
|
||||
<Slider
|
||||
parameter={parameters.resonance}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { resonance: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
EG Intensity
|
||||
<Slider
|
||||
parameter={parameters.egIntensity}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { egIntensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Keyboard Tracking
|
||||
<Slider
|
||||
parameter={parameters.keyboardTrack}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { keyboardTrack: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const VocoderFilter = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Cutoff
|
||||
<Slider
|
||||
parameter={parameters.cutoff}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { cutoff: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Resonance
|
||||
<Slider
|
||||
parameter={parameters.resonance}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { resonance: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
EF Sense
|
||||
<Slider
|
||||
parameter={parameters.efSense}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { efSense: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const FCMod = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Source
|
||||
<SelectList
|
||||
value={parameters.source}
|
||||
list={[
|
||||
{ value: 'Amp EG' },
|
||||
{ value: 'LFO 1' },
|
||||
{ value: 'LFO 2' },
|
||||
{ value: 'Velocity' },
|
||||
{ value: 'Keyboard Track' },
|
||||
{ value: 'Pitch Bend' },
|
||||
{ value: 'Mod Wheel' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { source: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Intensity
|
||||
<Slider
|
||||
parameter={parameters.intensity}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { intensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,95 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
|
||||
|
||||
export default function LFO(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
LFO Waveform
|
||||
<SelectList
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { waveform: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Key Sync
|
||||
<SelectList
|
||||
value={parameters.keySync}
|
||||
list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { keySync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className='check-list'>
|
||||
<Checkbox
|
||||
name='Tempo Sync'
|
||||
parameter={parameters.tempoSync}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tempoSync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<SelectList
|
||||
value={parameters.syncNote}
|
||||
list={[
|
||||
{ value: '1/1' },
|
||||
{ value: '3/4' },
|
||||
{ value: '2/3' },
|
||||
{ value: '1/2' },
|
||||
{ value: '3/8' },
|
||||
{ value: '1/3' },
|
||||
{ value: '1/4' },
|
||||
{ value: '3/16' },
|
||||
{ value: '1/6' },
|
||||
{ value: '1/8' },
|
||||
{ value: '3/32' },
|
||||
{ value: '1/12' },
|
||||
{ value: '1/16' },
|
||||
{ value: '1/24' },
|
||||
{ value: '1/32' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { syncNote: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
Frequency
|
||||
<Slider
|
||||
parameter={parameters.frequency}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { frequency: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
|
||||
export default function Levels(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
<div>
|
||||
Level 1
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level1: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 2
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level2: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 3
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 4
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level4}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level4: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div />
|
||||
<div>
|
||||
Level 5
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level5}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level5: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 6
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level6}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level6: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 7
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level7}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level7: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Level 8
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.level8}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { level8: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
|
||||
export default function Mixer(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Volume 1
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol1: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Volume 2
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol2: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Volume 3
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,295 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
|
||||
|
||||
const ModFX = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>Mod FX</span>
|
||||
Mod Type
|
||||
<SelectList
|
||||
value={parameters.type}
|
||||
list={[
|
||||
{ value: 'Flanger/Chorus' },
|
||||
{ value: 'Ensemble' },
|
||||
{ value: 'Phaser' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { type: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
LFO Speed
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.lfoSpeed}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { lfoSpeed: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Mod FX Depth
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.effectDepth}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { effectDepth: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Delay = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>Delay</span>
|
||||
Delay Type
|
||||
<SelectList
|
||||
value={parameters.type}
|
||||
list={[
|
||||
{ value: 'Stereo Delay' },
|
||||
{ value: 'Cross Delay' },
|
||||
{ value: 'L/R Delay' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { type: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name='Tempo Sync'
|
||||
parameter={parameters.tempoSync}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tempoSync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
{parameters.tempoSync ? (
|
||||
<div>
|
||||
Sync Note
|
||||
<SelectList
|
||||
value={parameters.syncNote}
|
||||
list={[
|
||||
{ value: '1/32' },
|
||||
{ value: '1/24' },
|
||||
{ value: '1/16' },
|
||||
{ value: '1/12' },
|
||||
{ value: '3/32' },
|
||||
{ value: '1/8' },
|
||||
{ value: '1/6' },
|
||||
{ value: '3/16' },
|
||||
{ value: '1/4' },
|
||||
{ value: '1/3' },
|
||||
{ value: '3/8' },
|
||||
{ value: '1/2' },
|
||||
{ value: '2/3' },
|
||||
{ value: '3/4' },
|
||||
{ value: '1/1' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { syncNote: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
Delay Time
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.delayTime}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { delayTime: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
Delay Depth
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.delayDepth}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { delayDepth: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const EQ = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>EQ</span>
|
||||
Low EQ Frequency
|
||||
<SelectList
|
||||
labelFunction={(e) => `${e.value}kHz`}
|
||||
value={parameters.lowFrequency}
|
||||
list={[
|
||||
{ value: 40 },
|
||||
{ value: 50 },
|
||||
{ value: 60 },
|
||||
{ value: 80 },
|
||||
{ value: 100 },
|
||||
{ value: 120 },
|
||||
{ value: 140 },
|
||||
{ value: 160 },
|
||||
{ value: 180 },
|
||||
{ value: 200 },
|
||||
{ value: 220 },
|
||||
{ value: 240 },
|
||||
{ value: 260 },
|
||||
{ value: 280 },
|
||||
{ value: 300 },
|
||||
{ value: 320 },
|
||||
{ value: 340 },
|
||||
{ value: 360 },
|
||||
{ value: 380 },
|
||||
{ value: 400 },
|
||||
{ value: 420 },
|
||||
{ value: 440 },
|
||||
{ value: 460 },
|
||||
{ value: 480 },
|
||||
{ value: 500 },
|
||||
{ value: 600 },
|
||||
{ value: 700 },
|
||||
{ value: 800 },
|
||||
{ value: 900 },
|
||||
{ value: 1000 },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { lowFrequency: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Low EQ Gain
|
||||
<Slider
|
||||
min={-12}
|
||||
max={12}
|
||||
parameter={parameters.lowGain}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { lowGain: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
High EQ Frequency
|
||||
<SelectList
|
||||
labelFunction={(e) => `${e.value}kHz`}
|
||||
value={parameters.highFrequency}
|
||||
list={[
|
||||
{ value: 1.0 },
|
||||
{ value: 1.25 },
|
||||
{ value: 1.5 },
|
||||
{ value: 1.75 },
|
||||
{ value: 2.0 },
|
||||
{ value: 2.25 },
|
||||
{ value: 2.5 },
|
||||
{ value: 2.75 },
|
||||
{ value: 3.0 },
|
||||
{ value: 3.25 },
|
||||
{ value: 3.5 },
|
||||
{ value: 3.75 },
|
||||
{ value: 4.0 },
|
||||
{ value: 4.25 },
|
||||
{ value: 4.5 },
|
||||
{ value: 4.75 },
|
||||
{ value: 5.0 },
|
||||
{ value: 5.25 },
|
||||
{ value: 5.5 },
|
||||
{ value: 5.75 },
|
||||
{ value: 6.0 },
|
||||
{ value: 7.0 },
|
||||
{ value: 8.0 },
|
||||
{ value: 9.0 },
|
||||
{ value: 10.0 },
|
||||
{ value: 11.0 },
|
||||
{ value: 12.0 },
|
||||
{ value: 14.0 },
|
||||
{ value: 16.0 },
|
||||
{ value: 18.0 },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { highFrequency: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
High EQ Gain
|
||||
<Slider
|
||||
min={-12}
|
||||
max={12}
|
||||
parameter={parameters.highGain}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { highGain: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { ModFX, Delay, EQ };
|
||||
@@ -0,0 +1,132 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
|
||||
export default function Pans(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
<div>
|
||||
Pan 1
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan1: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 2
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan2: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 3
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 4
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan4}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan4: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div />
|
||||
<div>
|
||||
Pan 5
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan5}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan5: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 6
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan6}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan6: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 7
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan7}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan7: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Pan 8
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.pan8}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { pan8: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList } from '../../helpers/Helpers';
|
||||
|
||||
const Patch = (props) => {
|
||||
return (
|
||||
<div>
|
||||
Source
|
||||
<SelectList
|
||||
value={props.patch.source}
|
||||
list={[
|
||||
{ value: 'Filter EG' },
|
||||
{ value: 'Amp Eg' },
|
||||
{ value: 'LFO 1' },
|
||||
{ value: 'LFO 2' },
|
||||
{ value: 'Velocity' },
|
||||
{ value: 'Keyboard Track' },
|
||||
{ value: 'Pitch Bend' },
|
||||
{ value: 'Mod Wheel' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: value,
|
||||
destination: props.patch.destination,
|
||||
modIntensity: props.patch.modIntensity,
|
||||
})
|
||||
}
|
||||
/>
|
||||
Destination
|
||||
<SelectList
|
||||
value={props.patch.destination}
|
||||
list={[
|
||||
{ value: 'Pitch' },
|
||||
{ value: 'OSC 2 Tune' },
|
||||
{ value: 'OSC 1 Control 1' },
|
||||
{ value: 'Noise Level' },
|
||||
{ value: 'Cutoff' },
|
||||
{ value: 'Amp' },
|
||||
{ value: 'Pan' },
|
||||
{ value: 'LFO 2 Frequency' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: props.patch.source,
|
||||
destination: value,
|
||||
modIntensity: props.patch.modIntensity,
|
||||
})
|
||||
}
|
||||
/>
|
||||
Mod Intensity
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={props.patch.modIntensity}
|
||||
onChange={(value) =>
|
||||
props.onChange({
|
||||
source: props.patch.source,
|
||||
destination: props.patch.destination,
|
||||
modIntensity: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Patches(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div id='patches'>
|
||||
<span>{`${props.name}`}</span>
|
||||
<Patch
|
||||
patch={parameters.patch1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: {
|
||||
patch1: value,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div />
|
||||
<Patch
|
||||
patch={parameters.patch2}
|
||||
onChange={(value, parameter) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: {
|
||||
patch2: value,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div />
|
||||
<Patch
|
||||
patch={parameters.patch3}
|
||||
onChange={(value, parameter) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { patch3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div />
|
||||
<Patch
|
||||
patch={parameters.patch4}
|
||||
onChange={(value, parameter) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { patch4: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList } from '../../helpers/Helpers';
|
||||
|
||||
export default function Pitch(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
<div>
|
||||
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 />
|
||||
<div>
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
|
||||
|
||||
export default function VCO(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
|
||||
const dispatch = useDispatch();
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Waveform
|
||||
<SelectList
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { waveform: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
{`${props.dwgsOrModTypeName}`}
|
||||
<SelectList
|
||||
value={parameters.dwgsOrModType}
|
||||
list={props.dwgsOrModType}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { dwgsOrModType: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Waveform Mod
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.waveMod}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { waveMod: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
LFO Mod
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.lfoMod}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { lfoMod: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const AudioIn = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Gate
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.gate}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { gate: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Threshold
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.threshold}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { threshold: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
HPF Level
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.hpfLevel}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { hpfLevel: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name='HPF Gate'
|
||||
parameter={parameters.hpfGate}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { hpfGate: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,470 @@
|
||||
import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';
|
||||
|
||||
const defaultState = {
|
||||
ids: [
|
||||
'vco1',
|
||||
'vco2',
|
||||
'mixer1',
|
||||
'pitch1',
|
||||
'filter1',
|
||||
'eg1',
|
||||
'amp1',
|
||||
'eg2',
|
||||
'lfo1',
|
||||
'lfo2',
|
||||
'patches1',
|
||||
'vco3',
|
||||
'vco4',
|
||||
'mixer2',
|
||||
'pitch2',
|
||||
'filter2',
|
||||
'eg3',
|
||||
'amp2',
|
||||
'eg4',
|
||||
'lfo3',
|
||||
'lfo4',
|
||||
'patches2',
|
||||
'vco5',
|
||||
'audioIn',
|
||||
'mixer3',
|
||||
'pitch3',
|
||||
'filter3',
|
||||
'fcMod',
|
||||
'eg4',
|
||||
'amp3',
|
||||
'lfo5',
|
||||
'lfo6',
|
||||
'levels',
|
||||
'pans',
|
||||
'modfx',
|
||||
'delay',
|
||||
'eq',
|
||||
'arpeggA',
|
||||
'arpeggB',
|
||||
'patch',
|
||||
'unusedPatch',
|
||||
'unusedTimbre1',
|
||||
'unusedTimbre2',
|
||||
'unusedVocoder',
|
||||
],
|
||||
entities: {
|
||||
vco1: {
|
||||
id: 'vco1',
|
||||
waveform: 'Saw',
|
||||
dwgsOrModType: 'SynWave1',
|
||||
waveMod: 0,
|
||||
lfoMod: 0,
|
||||
},
|
||||
vco2: {
|
||||
id: 'vco2',
|
||||
waveform: 'Saw',
|
||||
dwgsOrModType: 'Off',
|
||||
waveMod: 0,
|
||||
lfoMod: 0,
|
||||
},
|
||||
vco3: {
|
||||
id: 'vco3',
|
||||
waveform: 'Saw',
|
||||
dwgsOrModType: 'SynWave1',
|
||||
waveMod: 0,
|
||||
lfoMod: 0,
|
||||
},
|
||||
vco4: {
|
||||
id: 'vco4',
|
||||
waveform: 'Saw',
|
||||
dwgsOrModType: 'Off',
|
||||
waveMod: 0,
|
||||
lfoMod: 0,
|
||||
},
|
||||
vco5: {
|
||||
id: 'vco5',
|
||||
waveform: 'Saw',
|
||||
dwgsOrModType: 'SynWave1',
|
||||
waveMod: 0,
|
||||
lfoMod: 0,
|
||||
},
|
||||
audioIn: {
|
||||
id: 'audioIn',
|
||||
gate: 0,
|
||||
threshold: 0,
|
||||
hpfLevel: 0,
|
||||
hpfGate: false,
|
||||
},
|
||||
mixer1: {
|
||||
id: 'mixer1',
|
||||
vol1: 127,
|
||||
vol2: 0,
|
||||
vol3: 0,
|
||||
},
|
||||
mixer2: {
|
||||
id: 'mixer2',
|
||||
vol1: 127,
|
||||
vol2: 0,
|
||||
vol3: 0,
|
||||
},
|
||||
mixer3: {
|
||||
id: 'mixer3',
|
||||
vol1: 127,
|
||||
vol2: 0,
|
||||
vol3: 0,
|
||||
},
|
||||
pitch1: {
|
||||
id: 'pitch1',
|
||||
voiceAssign: 'Mono',
|
||||
triggerMode: 'Single',
|
||||
transpose: 0,
|
||||
tune: 0,
|
||||
unisonDetune: 0,
|
||||
portamento: 0,
|
||||
bendRange: 0,
|
||||
vibratoIntensity: 0,
|
||||
},
|
||||
pitch2: {
|
||||
id: 'pitch2',
|
||||
voiceAssign: 'Mono',
|
||||
triggerMode: 'Single',
|
||||
transpose: 0,
|
||||
tune: 0,
|
||||
unisonDetune: 0,
|
||||
portamento: 0,
|
||||
bendRange: 0,
|
||||
vibratoIntensity: 0,
|
||||
},
|
||||
pitch3: {
|
||||
id: 'pitch3',
|
||||
voiceAssign: 'Mono',
|
||||
triggerMode: 'Single',
|
||||
transpose: 0,
|
||||
tune: 0,
|
||||
unisonDetune: 0,
|
||||
portamento: 0,
|
||||
bendRange: 0,
|
||||
vibratoIntensity: 0,
|
||||
},
|
||||
filter1: {
|
||||
id: 'filter1',
|
||||
filterType: '-24db Low Pass',
|
||||
cutoff: 0,
|
||||
resonance: 0,
|
||||
egIntensity: 0,
|
||||
keyboardTrack: 0,
|
||||
},
|
||||
filter2: {
|
||||
id: 'filter2',
|
||||
filterType: '-24db Low Pass',
|
||||
cutoff: 0,
|
||||
resonance: 0,
|
||||
egIntensity: 0,
|
||||
keyboardTrack: 0,
|
||||
},
|
||||
filter3: {
|
||||
id: 'filter3',
|
||||
shift: 2,
|
||||
cutoff: 0,
|
||||
resonance: 0,
|
||||
efSense: 0,
|
||||
},
|
||||
fcMod: {
|
||||
id: 'fcMod',
|
||||
source: 'Amp EG',
|
||||
intensity: 0,
|
||||
},
|
||||
eg1: {
|
||||
id: 'eg1',
|
||||
attack: 0,
|
||||
decay: 0,
|
||||
sustain: 127,
|
||||
release: 0,
|
||||
egReset: false,
|
||||
},
|
||||
amp1: {
|
||||
id: 'amp1',
|
||||
ampLevel: 127,
|
||||
panpot: 0,
|
||||
ampTrack: 0,
|
||||
distortion: false,
|
||||
},
|
||||
eg2: {
|
||||
id: 'eg2',
|
||||
attack: 0,
|
||||
decay: 0,
|
||||
sustain: 127,
|
||||
release: 0,
|
||||
egReset: false,
|
||||
},
|
||||
eg3: {
|
||||
id: 'eg3',
|
||||
attack: 0,
|
||||
decay: 0,
|
||||
sustain: 127,
|
||||
release: 0,
|
||||
egReset: false,
|
||||
},
|
||||
amp2: {
|
||||
id: 'amp2',
|
||||
ampLevel: 127,
|
||||
panpot: 0,
|
||||
ampTrack: 0,
|
||||
distortion: false,
|
||||
},
|
||||
eg4: {
|
||||
id: 'eg4',
|
||||
attack: 0,
|
||||
decay: 0,
|
||||
sustain: 127,
|
||||
release: 0,
|
||||
egReset: false,
|
||||
},
|
||||
eg5: {
|
||||
id: 'eg5',
|
||||
attack: 0,
|
||||
decay: 0,
|
||||
sustain: 127,
|
||||
release: 0,
|
||||
egReset: false,
|
||||
},
|
||||
amp3: {
|
||||
id: 'amp3',
|
||||
ampLevel: 127,
|
||||
directLevel: 0,
|
||||
ampTrack: 0,
|
||||
distortion: false,
|
||||
},
|
||||
lfo1: {
|
||||
id: 'lfo1',
|
||||
waveform: 'Saw',
|
||||
keySync: 'Off',
|
||||
tempoSync: false,
|
||||
frequency: 0,
|
||||
syncNote: '1/1',
|
||||
},
|
||||
lfo2: {
|
||||
id: 'lfo2',
|
||||
waveform: 'Saw',
|
||||
keySync: 'Off',
|
||||
tempoSync: false,
|
||||
frequency: 0,
|
||||
syncNote: '1/1',
|
||||
},
|
||||
lfo3: {
|
||||
id: 'lfo3',
|
||||
waveform: 'Saw',
|
||||
keySync: 'Off',
|
||||
tempoSync: false,
|
||||
frequency: 0,
|
||||
syncNote: '1/1',
|
||||
},
|
||||
lfo4: {
|
||||
id: 'lfo4',
|
||||
waveform: 'Saw',
|
||||
keySync: 'Off',
|
||||
tempoSync: false,
|
||||
frequency: 0,
|
||||
syncNote: '1/1',
|
||||
},
|
||||
lfo5: {
|
||||
id: 'lfo5',
|
||||
waveform: 'Saw',
|
||||
keySync: 'Off',
|
||||
tempoSync: false,
|
||||
frequency: 0,
|
||||
syncNote: '1/1',
|
||||
},
|
||||
lfo6: {
|
||||
id: 'lfo6',
|
||||
waveform: 'Saw',
|
||||
keySync: 'Off',
|
||||
tempoSync: false,
|
||||
frequency: '1/1',
|
||||
},
|
||||
patches1: {
|
||||
id: 'patches1',
|
||||
patch1: {
|
||||
source: 'Filter EG',
|
||||
destination: 'Pitch',
|
||||
modIntensity: 0,
|
||||
},
|
||||
patch2: {
|
||||
source: 'Filter EG',
|
||||
destination: 'Pitch',
|
||||
modIntensity: 0,
|
||||
},
|
||||
patch3: {
|
||||
source: 'LFO 1',
|
||||
destination: 'Pitch',
|
||||
modIntensity: 0,
|
||||
},
|
||||
patch4: {
|
||||
source: 'LFO 2',
|
||||
destination: 'Pitch',
|
||||
modIntensity: 0,
|
||||
},
|
||||
},
|
||||
patches2: {
|
||||
id: 'patches2',
|
||||
patch1: {
|
||||
source: 'Filter EG',
|
||||
destination: 'Pitch',
|
||||
modIntensity: 0,
|
||||
},
|
||||
patch2: {
|
||||
source: 'Filter EG',
|
||||
destination: 'Pitch',
|
||||
modIntensity: 0,
|
||||
},
|
||||
patch3: {
|
||||
source: 'LFO 1',
|
||||
destination: 'Pitch',
|
||||
modIntensity: 0,
|
||||
},
|
||||
patch4: {
|
||||
source: 'LFO 2',
|
||||
destination: 'Pitch',
|
||||
modIntensity: 0,
|
||||
},
|
||||
},
|
||||
levels: {
|
||||
id: 'levels',
|
||||
level1: 0,
|
||||
level2: 0,
|
||||
level3: 0,
|
||||
level4: 0,
|
||||
level5: 0,
|
||||
level6: 0,
|
||||
level7: 0,
|
||||
level8: 0,
|
||||
},
|
||||
pans: {
|
||||
id: 'pans',
|
||||
pan1: 0,
|
||||
pan2: 0,
|
||||
pan3: 0,
|
||||
pan4: 0,
|
||||
pan5: 0,
|
||||
pan6: 0,
|
||||
pan7: 0,
|
||||
pan8: 0,
|
||||
},
|
||||
modfx: {
|
||||
id: 'modfx',
|
||||
type: 'Flanger/Chorus',
|
||||
lfoSpeed: 0,
|
||||
effectDepth: 0,
|
||||
},
|
||||
delay: {
|
||||
id: 'delay',
|
||||
type: 'Stereo Delay',
|
||||
tempoSync: false,
|
||||
syncNote: '1/32',
|
||||
delayTime: 0,
|
||||
delayDepth: 0,
|
||||
},
|
||||
eq: {
|
||||
id: 'eq',
|
||||
lowFrequency: 40,
|
||||
lowGain: 0,
|
||||
highFrequency: 1.0,
|
||||
highGain: 0,
|
||||
},
|
||||
arpeggA: {
|
||||
id: 'arpeggA',
|
||||
tempo: 20,
|
||||
resolution: '1/24',
|
||||
gate: 0,
|
||||
type: 'Up',
|
||||
range: 1,
|
||||
},
|
||||
arpeggB: {
|
||||
id: 'arpeggB',
|
||||
latch: false,
|
||||
swing: 0,
|
||||
keySync: false,
|
||||
lastStep: 1,
|
||||
target: 'Both',
|
||||
pattern: [0, 0, 0, 0, 0, 0, 0, 0],
|
||||
},
|
||||
patch: {
|
||||
id: 'patch',
|
||||
name: 'Default',
|
||||
mode: 'Single',
|
||||
},
|
||||
unusedPatch: {
|
||||
id: 'unusedPatch',
|
||||
scaleKey: 0,
|
||||
scaleType: 0,
|
||||
keyboardOctave: 0,
|
||||
arpSwitch: 0,
|
||||
},
|
||||
unusedTimbre1: {
|
||||
id: 'unusedTimbre1',
|
||||
midiChannel: 0,
|
||||
keyPriority: 0,
|
||||
filterVelSense: 0,
|
||||
ampSwitch: 0,
|
||||
ampVelSense: 0,
|
||||
},
|
||||
unusedTimbre2: {
|
||||
id: 'unusedTimbre2',
|
||||
midiChannel: 0,
|
||||
keyPriority: 0,
|
||||
filterVelSense: 0,
|
||||
ampSwitch: 0,
|
||||
ampVelSense: 0,
|
||||
},
|
||||
unusedVocoder: {
|
||||
id: 'unusedVocoder',
|
||||
egReset2: 0,
|
||||
midiChannel: 0,
|
||||
keyPriority: 0,
|
||||
filterEFSense: 0,
|
||||
ampVelSense: 0,
|
||||
eg2attack: 0,
|
||||
eg2decay: 0,
|
||||
eg2sustain: 0,
|
||||
eg2release: 0,
|
||||
},
|
||||
},
|
||||
unsaved: false,
|
||||
activeTab: 'Timbre1',
|
||||
};
|
||||
|
||||
const parametersAdapter = createEntityAdapter({});
|
||||
|
||||
const parametersSlice = createSlice({
|
||||
name: 'parameters',
|
||||
initialState: parametersAdapter.getInitialState(defaultState),
|
||||
reducers: {
|
||||
parameterUpdated(state, action) {
|
||||
parametersAdapter.updateOne(state, action.payload);
|
||||
state.unsaved = true;
|
||||
},
|
||||
parameterRefreshAll: () => defaultState,
|
||||
parameterFlipUnsaved(state) {
|
||||
state.unsaved = !state.unsaved;
|
||||
},
|
||||
parameterUpdateTab(state, action) {
|
||||
state.activeTab = action.payload;
|
||||
},
|
||||
parameterFromFile(state, action) {
|
||||
parametersAdapter.upsertMany(state, action.payload);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const {
|
||||
selectById,
|
||||
selectAll,
|
||||
selectEntities,
|
||||
selectIds,
|
||||
} = parametersAdapter.getSelectors((state) => state.parameters);
|
||||
|
||||
export const {
|
||||
parameterAdded,
|
||||
parameterUpdated,
|
||||
parameterRefreshAll,
|
||||
parameterFlipUnsaved,
|
||||
parameterFromFile,
|
||||
parameterUpdateTab,
|
||||
} = parametersSlice.actions;
|
||||
|
||||
export default parametersSlice.reducer;
|
||||
Reference in New Issue
Block a user