redesign complete
.remove unused import
This commit is contained in:
Aoife
@@ -1,6 +1,9 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { selectById } from './timbreSlice.js';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById } from './parameters/parameterSlice.js';
|
||||
import Card from './card';
|
||||
import { Knob, Select, Checkbox } from '../utils/components';
|
||||
import { parameterUpdated } from './parameters/parameterSlice';
|
||||
import { ArpeggA, ArpeggB } from './parameters/Arpeggios';
|
||||
|
||||
export default function Arpeggio(props) {
|
||||
@@ -12,3 +15,209 @@ export default function Arpeggio(props) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Arpeggiator(props) {
|
||||
const parameters_1 = useSelector((state) => selectById(state, props.id1));
|
||||
const parameters_2 = useSelector((state) => selectById(state, props.id2));
|
||||
const dispatch = useDispatch();
|
||||
return (
|
||||
<Card className={props.className} header='Arpeggiator'>
|
||||
<div className='flex flex-row'>
|
||||
<section className='flex flex-col justify-around w-2/5'>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<h3>Type</h3>
|
||||
<Select
|
||||
className='select w-1/2'
|
||||
value={parameters_1.type}
|
||||
list={[
|
||||
{ value: 'Up' },
|
||||
{ value: 'Down' },
|
||||
{ value: 'Alternate 1' },
|
||||
{ value: 'Alternate 2' },
|
||||
{ value: 'Random' },
|
||||
{ value: 'Trigger' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { type: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<h3>Range</h3>
|
||||
<Select
|
||||
className='select w-1/2'
|
||||
labelFunction={(v) => `${v.value} Oct`}
|
||||
value={parameters_1.range}
|
||||
list={[{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { range: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<h3>Resolution</h3>
|
||||
<Select
|
||||
className='select w-1/2'
|
||||
value={parameters_1.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.id1,
|
||||
changes: { resolution: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section className=' -mt-4 flex flex-col justify-around w-1/5'>
|
||||
<div className='flex flex-col'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Tempo</h3>
|
||||
<Knob
|
||||
max={280}
|
||||
offset={20}
|
||||
value={parameters_1.tempo - 20}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { tempo: value + 20 },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Gate</h3>
|
||||
<Knob
|
||||
max={100}
|
||||
value={parameters_1.gate}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id1,
|
||||
changes: { gate: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Swing</h3>
|
||||
<Knob
|
||||
dual={true}
|
||||
max={100}
|
||||
value={parameters_2.swing}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { swing: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className='flex flex-col space-y-4 w-2/5'>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<h3>Target</h3>
|
||||
<Select
|
||||
className='select w-1/2'
|
||||
value={parameters_2.target}
|
||||
list={[
|
||||
{ value: 'Both' },
|
||||
{ value: 'Timbre 1' },
|
||||
{ value: 'Timbre 2' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { target: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<h3>Last Step</h3>
|
||||
<Select
|
||||
className='select w-1/2'
|
||||
labelFunction={(v) => `Step ${v.value}`}
|
||||
value={parameters_2.lastStep}
|
||||
list={[
|
||||
{ value: 1 },
|
||||
{ value: 2 },
|
||||
{ value: 3 },
|
||||
{ value: 4 },
|
||||
{ value: 5 },
|
||||
{ value: 6 },
|
||||
{ value: 7 },
|
||||
{ value: 8 },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { lastStep: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row justify-around'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Key Sync</h3>
|
||||
<Checkbox
|
||||
parameter={parameters_2.keySync}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { keySync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Latch</h3>
|
||||
<Checkbox
|
||||
parameter={parameters_2.latch}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id2,
|
||||
changes: { latch: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,14 +2,29 @@ import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { ModFX, Delay, EQ } from './parameters/ModFX';
|
||||
import { selectById } from './timbreSlice.js';
|
||||
import { Arpeggiator } from './Arpeggio';
|
||||
|
||||
export default function Effects(props) {
|
||||
const ids = useSelector((state) => selectById(state, props.id));
|
||||
return (
|
||||
<div>
|
||||
<ModFX id={ids.modfx} />
|
||||
<Delay id={ids.delay} />
|
||||
<EQ id={ids.eq} />
|
||||
<div className='h-screen grid grid-cols-10 grid-rows-6 gap-4 p-6'>
|
||||
<ModFX
|
||||
className='row-start-2 col-start-3 col-span-2 row-span-2'
|
||||
id={ids.modfx}
|
||||
/>
|
||||
<Delay
|
||||
className='row-start-2 col-start-5 col-span-2 row-span-2'
|
||||
id={ids.delay}
|
||||
/>
|
||||
<EQ
|
||||
className='row-start-2 col-start-7 col-span-2 row-span-2'
|
||||
id={ids.eq}
|
||||
/>
|
||||
<Arpeggiator
|
||||
className='row-start-4 row-span-2 col-start-4 col-span-4'
|
||||
id1={ids.arpeggA}
|
||||
id2={ids.arpeggB}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,7 +12,6 @@ export default function Editor() {
|
||||
{activeTab === 'Timbre2' ? <Timbre id='timbre2' /> : null}
|
||||
{activeTab === 'Vocoder' ? <Vocoder id='vocoder' /> : null}
|
||||
{activeTab === 'Effects' ? <Effects id='effects' /> : null}
|
||||
{activeTab === 'Arpeggio' ? <Arpeggio id='arpeggio' /> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
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';
|
||||
@@ -8,7 +9,7 @@ const ArpeggA = (props) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card className={props.className} header='Arpeggio A'>
|
||||
<span>Arpeggio A.</span>
|
||||
<div>
|
||||
Tempo
|
||||
@@ -97,7 +98,7 @@ const ArpeggA = (props) => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,61 +1,66 @@
|
||||
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';
|
||||
import { Knob, Select, Checkbox } from '../../utils/components';
|
||||
|
||||
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>
|
||||
<Card className={props.className} header='Mod FX'>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<h3>Mod Type</h3>
|
||||
<Select
|
||||
className='select'
|
||||
value={parameters.type}
|
||||
list={[
|
||||
{ value: 'Flanger/Chorus' },
|
||||
{ value: 'Ensemble' },
|
||||
{ value: 'Phaser' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { type: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>LFO Speed</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.lfoSpeed}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { lfoSpeed: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Mod FX Depth</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.effectDepth}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { effectDepth: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -64,102 +69,109 @@ const Delay = (props) => {
|
||||
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}
|
||||
<Card className={props.className} header='Delay'>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<h3>Delay Type</h3>
|
||||
<Select
|
||||
className='select'
|
||||
value={parameters.type}
|
||||
list={[
|
||||
{ value: 'Stereo Delay' },
|
||||
{ value: 'Cross Delay' },
|
||||
{ value: 'L/R Delay' },
|
||||
]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { type: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<h3>Tempo Sync</h3>
|
||||
<Checkbox
|
||||
value={parameters.tempoSync}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tempoSync: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
{parameters.tempoSync ? (
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Sync Note</h3>
|
||||
<Select
|
||||
className='select'
|
||||
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 className='flex flex-col items-center w-1/2'>
|
||||
<h3>Delay Time</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
value={parameters.delayTime}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { delayTime: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Delay Depth</h3>
|
||||
<Knob
|
||||
max={127}
|
||||
parameter={parameters.delayTime}
|
||||
value={parameters.delayDepth}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { delayTime: value },
|
||||
changes: { delayDepth: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
Delay Depth
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.delayDepth}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { delayDepth: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -168,127 +180,138 @@ const EQ = (props) => {
|
||||
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>
|
||||
<Card className={props.className} header='EQ'>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<h3>Low Freq</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
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 },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<h3>High Freq</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
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 },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>Low Gain</h3>
|
||||
<Knob
|
||||
dual={true}
|
||||
max={12}
|
||||
value={parameters.lowGain}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { lowGain: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col items-center w-1/2'>
|
||||
<h3>High Gain</h3>
|
||||
<Knob
|
||||
dual={true}
|
||||
max={12}
|
||||
value={parameters.highGain}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { highGain: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@ import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Select, Knob } from '../../utils/components';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
|
||||
export default function Pitch(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
|
||||
@@ -56,6 +56,8 @@ const timbreSlice = createSlice({
|
||||
modfx: 'modfx',
|
||||
delay: 'delay',
|
||||
eq: 'eq',
|
||||
arpeggA: 'arpeggA',
|
||||
arpeggB: 'arpeggB',
|
||||
},
|
||||
arpeggio: {
|
||||
arpeggA: 'arpeggA',
|
||||
|
||||
@@ -142,14 +142,7 @@ export default function Menu() {
|
||||
onClick={() => {
|
||||
dispatch(parameterUpdateTab('Effects'));
|
||||
}}>
|
||||
Effects
|
||||
</button>
|
||||
<button
|
||||
className={activeTab === 'Arpeggio' ? `btn btn-active` : `btn`}
|
||||
onClick={() => {
|
||||
dispatch(parameterUpdateTab('Arpeggio'));
|
||||
}}>
|
||||
Arpeggio
|
||||
Arp/FX
|
||||
</button>
|
||||
</div>
|
||||
<div className='w-full text-center text-xl font-semibold'>
|
||||
|
||||
@@ -10,7 +10,7 @@ const Select = (props) => {
|
||||
value={props.value}>
|
||||
{props.list.map((element) => (
|
||||
<option key={element.value} value={element.value}>
|
||||
{element.value}
|
||||
{props.labelFunction ? props.labelFunction(element) : element.value}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
@@ -89,6 +89,7 @@ function Knob({
|
||||
value = 0,
|
||||
fillWidth = 4,
|
||||
onChange,
|
||||
offset = 0,
|
||||
}) {
|
||||
value = value / max;
|
||||
const uid = useMemo(() => knob_id++, []);
|
||||
@@ -160,7 +161,7 @@ function Knob({
|
||||
className={` ${
|
||||
isDragging ? 'opacity-100' : 'opacity-0 hidden'
|
||||
} transition duration-75 ease-in select-none pointer-events-none absolute -mt-6 bg-gray-800 text-white truncate text-xs box-content rounded text-center w-8 py-0.5`}>
|
||||
{Math.round(value * max)}
|
||||
{Math.round(value * max + offset)}
|
||||
</div>
|
||||
<svg
|
||||
className={` ${
|
||||
|
||||
Reference in New Issue
Block a user