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/EG.js
+160 -73
View File
@@ -1,83 +1,170 @@
import React from 'react';
import Card from '../card';
import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, Checkbox } from '../../helpers/Helpers';
import { Knob, Checkbox } from '../../utils/components';
export default function EG(props) {
const parameters = useSelector((state) => selectById(state, props.id));
const parameters_eg_1 = useSelector((state) => selectById(state, props.id1));
const parameters_eg_2 = useSelector((state) => selectById(state, props.id2));
const dispatch = useDispatch();
return (
<div className={props.className}>
<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>
<Card className={props.className} header={props.name}>
<div className='flex flex-row justify-evenly'>
<div className='flex flex-col items-center'>
<h3>Attack</h3>
<Knob
value={parameters_eg_1.attack}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id1,
changes: { attack: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>Decay</h3>
<Knob
value={parameters_eg_1.decay}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id1,
changes: { decay: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>Sustain</h3>
<Knob
value={parameters_eg_1.sustain}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id1,
changes: { sustain: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>Release</h3>
<Knob
value={parameters_eg_1.release}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id1,
changes: { release: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>EG 1 Reset</h3>
<Checkbox
className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
value={parameters_eg_1.egReset}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id1,
changes: { egReset: value },
})
)
}
/>
</div>
</div>
<div className='flex flex-row justify-evenly'>
<div className='flex flex-col items-center'>
<h3>Attack</h3>
<Knob
value={parameters_eg_2.attack}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id2,
changes: { attack: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>Decay</h3>
<Knob
value={parameters_eg_2.decay}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id2,
changes: { decay: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>Sustain</h3>
<Knob
value={parameters_eg_2.sustain}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id2,
changes: { sustain: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>Release</h3>
<Knob
value={parameters_eg_2.release}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id2,
changes: { release: value },
})
)
}
/>
</div>
<div className='flex flex-col items-center'>
<h3>EG 2 Reset</h3>
<Checkbox
className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
value={parameters_eg_2.egReset}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id2,
changes: { egReset: value },
})
)
}
/>
</div>
</div>
</Card>
);
}