110 lines
3.2 KiB
JavaScript
110 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { selectById, parameterUpdated } from './parameterSlice.js';
|
|
import Card from '../card';
|
|
import { Select, Knob, Checkbox } from '../../utils/components';
|
|
|
|
export default function LFO(props) {
|
|
const parameters = useSelector((state) => selectById(state, props.id));
|
|
const dispatch = useDispatch();
|
|
|
|
return (
|
|
<Card className={props.className} header={props.name}>
|
|
<div className='flex items-center justify-between'>
|
|
<h3>LFO Waveform</h3>
|
|
<Select
|
|
className='select w-3/5'
|
|
value={parameters.waveform}
|
|
list={props.waveforms}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { waveform: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<h3>Key Sync</h3>
|
|
<Select
|
|
className='select w-3/5'
|
|
value={parameters.keySync}
|
|
list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { keySync: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className='flex flex-row mb-4'>
|
|
<div className='flex flex-col w-1/2'>
|
|
<h3 className='self-center'>Tempo Sync</h3>
|
|
<div className='flex flex-row items-center justify-evenly'>
|
|
<Checkbox
|
|
value={parameters.tempoSync}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { tempoSync: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
<Select
|
|
className='select mt-2 w-2/3'
|
|
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>
|
|
</div>
|
|
<div className='flex flex-col items-center w-1/2'>
|
|
<h3>Frequency</h3>
|
|
<Knob
|
|
value={parameters.frequency}
|
|
max={127}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { frequency: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|