cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finish Timbre display

Browse Source
This commit is contained in:
Aoife
2021-04-06 13:44:07 -04:00
parent b1047e91ee
commit 3d8b11c44c
13 changed files with 737 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/editor/parameters/LFO.js
+89 -75
View File
@@ -1,95 +1,109 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
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 (
<div className={props.className}>
<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}
<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: { 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 },
changes: { waveform: value },
})
)
}
/>
</div>
Frequency
<Slider
parameter={parameters.frequency}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { frequency: 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>
);
}