Clean up and finish serialisation
This commit is contained in:
Aoife
@@ -1,199 +0,0 @@
|
||||
import React from 'react';
|
||||
import Card from '../card';
|
||||
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 (
|
||||
<Card className={props.className} header='Arpeggio A'>
|
||||
<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>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
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 };
|
||||
@@ -3,7 +3,6 @@ import Card from '../card';
|
||||
import { Select, Knob } from '../../utils/components';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
|
||||
export default function Filter(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
@@ -11,10 +10,10 @@ export default function Filter(props) {
|
||||
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='-mt-2 flex items-center justify-between'>
|
||||
<div className="-mt-2 flex items-center justify-between">
|
||||
<h3>Filter Type</h3>
|
||||
<Select
|
||||
className='select w-4/6'
|
||||
className="select w-4/6"
|
||||
value={parameters.filterType}
|
||||
list={[
|
||||
{ value: '-24db Low Pass' },
|
||||
@@ -32,10 +31,10 @@ export default function Filter(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='-mt-3 flex flex-row justify-evenly'>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
|
||||
<div className="-mt-3 flex flex-row justify-evenly">
|
||||
<div className="flex flex-col w-1/2">
|
||||
<div className="flex flex-col items-center">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Cutoff</h3>
|
||||
<Knob
|
||||
value={parameters.cutoff}
|
||||
max={127}
|
||||
@@ -49,8 +48,8 @@ export default function Filter(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='pt-3 flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Resonance</h3>
|
||||
<div className="pt-3 flex flex-col items-center">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Resonance</h3>
|
||||
<Knob
|
||||
value={parameters.resonance}
|
||||
max={127}
|
||||
@@ -65,10 +64,10 @@ export default function Filter(props) {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4'></div>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
<div className="px-4"></div>
|
||||
<div className="flex flex-col w-1/2">
|
||||
<div className="flex flex-col items-center">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
EG Intensity
|
||||
</h3>
|
||||
<Knob
|
||||
@@ -85,8 +84,8 @@ export default function Filter(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='pt-3 flex flex-col items-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>
|
||||
<div className="pt-3 flex flex-col items-center">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
Keyboard Track
|
||||
</h3>
|
||||
<Knob
|
||||
@@ -114,8 +113,8 @@ export const VocoderFilter = (props) => {
|
||||
const dispatch = useDispatch();
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='-mt-3 flex flex-col justify-around'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<div className="-mt-3 flex flex-col justify-around">
|
||||
<div className="flex flex-col items-center">
|
||||
<h3>Cutoff</h3>
|
||||
<Knob
|
||||
value={parameters.cutoff}
|
||||
@@ -130,7 +129,7 @@ export const VocoderFilter = (props) => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<div className="flex flex-col items-center">
|
||||
<h3>Resonance</h3>
|
||||
<Knob
|
||||
value={parameters.resonance}
|
||||
@@ -145,7 +144,7 @@ export const VocoderFilter = (props) => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<div className="flex flex-col items-center">
|
||||
<h3>EF Sense</h3>
|
||||
<Knob
|
||||
value={parameters.efSense}
|
||||
@@ -170,11 +169,11 @@ export const FCMod = (props) => {
|
||||
const dispatch = useDispatch();
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='-mt-4 flex flex-col justify-around space-y-4'>
|
||||
<div className='flex flex-col items-center space-y-0.5'>
|
||||
<div className="-mt-4 flex flex-col justify-around space-y-4">
|
||||
<div className="flex flex-col items-center space-y-0.5">
|
||||
<h3>Source</h3>
|
||||
<Select
|
||||
className='select w-full'
|
||||
className="select w-full"
|
||||
value={parameters.source}
|
||||
list={[
|
||||
{ value: 'Amp EG' },
|
||||
@@ -195,7 +194,7 @@ export const FCMod = (props) => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<div className="flex flex-col items-center">
|
||||
<h3>Intensity</h3>
|
||||
<Knob
|
||||
value={parameters.intensity}
|
||||
|
||||
@@ -3,15 +3,14 @@ import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import Card from '../card';
|
||||
import { Select, Knob } from '../../utils/components';
|
||||
import { Slider, SelectList } from '../../helpers/Helpers';
|
||||
|
||||
const Patch = (props) => {
|
||||
return (
|
||||
<div className='-mt-3 w-1/4'>
|
||||
<div className='flex flex-col items-center justify-between'>
|
||||
<div className="-mt-3 w-1/4">
|
||||
<div className="flex flex-col items-center justify-between">
|
||||
<h3>Source</h3>
|
||||
<Select
|
||||
className='select w-2/3'
|
||||
className="select w-2/3"
|
||||
value={props.patch.source}
|
||||
list={[
|
||||
{ value: 'Filter EG' },
|
||||
@@ -32,10 +31,10 @@ const Patch = (props) => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-1 flex flex-col items-center justify-between'>
|
||||
<div className="mt-1 flex flex-col items-center justify-between">
|
||||
<h3>Destination</h3>
|
||||
<Select
|
||||
className='select w-2/3'
|
||||
className="select w-2/3"
|
||||
value={props.patch.destination}
|
||||
list={[
|
||||
{ value: 'Pitch' },
|
||||
@@ -56,7 +55,7 @@ const Patch = (props) => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-1 flex flex-col items-center'>
|
||||
<div className="mt-1 flex flex-col items-center">
|
||||
<h3>Mod Intensity</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
@@ -79,8 +78,8 @@ export default function Patches(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<Card className={props.className} id='patches' header={props.name}>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<Card className={props.className} id="patches" header={props.name}>
|
||||
<div className="flex flex-row justify-evenly">
|
||||
<Patch
|
||||
patch={parameters.patch1}
|
||||
onChange={(value) =>
|
||||
|
||||
@@ -9,11 +9,11 @@ export default function VCO(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<Card className='col-span-2' header={props.name}>
|
||||
<div className='-mt-2 flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Waveform</h3>
|
||||
<Card className="col-span-2" header={props.name}>
|
||||
<div className="-mt-2 flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Waveform</h3>
|
||||
<Select
|
||||
className='select w-4/6'
|
||||
className="select w-4/6"
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
onChange={(value) =>
|
||||
@@ -26,10 +26,10 @@ export default function VCO(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='-mt-4 flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>{`${props.dwgsOrModTypeName}`}</h3>
|
||||
<div className="-mt-4 flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-gray-900">{`${props.dwgsOrModTypeName}`}</h3>
|
||||
<Select
|
||||
className='select w-4/6'
|
||||
className="select w-4/6"
|
||||
value={parameters.dwgsOrModType}
|
||||
list={props.dwgsOrModType}
|
||||
onChange={(value) =>
|
||||
@@ -42,9 +42,9 @@ export default function VCO(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='mb-2 flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
|
||||
<div className="mb-2 flex flex-row">
|
||||
<div className="flex flex-col items-center w-1/2">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Waveform Mod</h3>
|
||||
<Knob
|
||||
maxValue={127}
|
||||
value={parameters.waveMod}
|
||||
@@ -58,8 +58,8 @@ export default function VCO(props) {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
|
||||
<div className="flex flex-col items-center w-1/2">
|
||||
<h3 className="text-lg font-semibold text-gray-900">LFO Mod</h3>
|
||||
<Knob
|
||||
maxValue={127}
|
||||
value={parameters.lfoMod}
|
||||
@@ -84,9 +84,9 @@ export const AudioIn = (props) => {
|
||||
|
||||
return (
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='-mt-3 flex flex-col items-stretch space-y-4'>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<div className="-mt-3 flex flex-col items-stretch space-y-4">
|
||||
<div className="flex flex-row">
|
||||
<div className="flex flex-col items-center w-1/2">
|
||||
<h3>Gate Sense</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
@@ -101,7 +101,7 @@ export const AudioIn = (props) => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<div className="flex flex-col items-center w-1/2">
|
||||
<h3>Threshold</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
@@ -117,8 +117,8 @@ export const AudioIn = (props) => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<div className="flex flex-row">
|
||||
<div className="flex flex-col items-center w-1/2">
|
||||
<h3>HPF Level</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
@@ -133,10 +133,10 @@ export const AudioIn = (props) => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<div className="flex flex-col items-center w-1/2">
|
||||
<h3>HPF Gate</h3>
|
||||
<Checkbox
|
||||
className='checkbox'
|
||||
className="checkbox"
|
||||
value={parameters.hpfGate}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
|
||||
Reference in New Issue
Block a user