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

redesign complete

Browse Source 
.remove unused import
This commit is contained in:
Aoife
2021-04-06 13:44:07 -04:00
parent f04f404bea
commit 99e2babad4
9 changed files with 518 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/editor/Arpeggio.js
+211 -2
View File
@@ -1,6 +1,9 @@
import React from 'react'; import React from 'react';
import { useSelector } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById } from './timbreSlice.js'; 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'; import { ArpeggA, ArpeggB } from './parameters/Arpeggios';
export default function Arpeggio(props) { export default function Arpeggio(props) {
@@ -12,3 +15,209 @@ export default function Arpeggio(props) {
</div> </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>
);
}
src/features/editor/Effects.js
+19 -4
View File
@@ -2,14 +2,29 @@ import React from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { ModFX, Delay, EQ } from './parameters/ModFX'; import { ModFX, Delay, EQ } from './parameters/ModFX';
import { selectById } from './timbreSlice.js'; import { selectById } from './timbreSlice.js';
import { Arpeggiator } from './Arpeggio';
export default function Effects(props) { export default function Effects(props) {
const ids = useSelector((state) => selectById(state, props.id)); const ids = useSelector((state) => selectById(state, props.id));
return ( return (
<div> <div className='h-screen grid grid-cols-10 grid-rows-6 gap-4 p-6'>
<ModFX id={ids.modfx} /> <ModFX
<Delay id={ids.delay} /> className='row-start-2 col-start-3 col-span-2 row-span-2'
<EQ id={ids.eq} /> 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> </div>
); );
} }
src/features/editor/index.js
-1
View File
@@ -12,7 +12,6 @@ export default function Editor() {
{activeTab === 'Timbre2' ? <Timbre id='timbre2' /> : null} {activeTab === 'Timbre2' ? <Timbre id='timbre2' /> : null}
{activeTab === 'Vocoder' ? <Vocoder id='vocoder' /> : null} {activeTab === 'Vocoder' ? <Vocoder id='vocoder' /> : null}
{activeTab === 'Effects' ? <Effects id='effects' /> : null} {activeTab === 'Effects' ? <Effects id='effects' /> : null}
{activeTab === 'Arpeggio' ? <Arpeggio id='arpeggio' /> : null}
</div> </div>
); );
} }
src/features/editor/parameters/Arpeggios.js
+3 -2
View File
@@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import Card from '../card';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers'; import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
@@ -8,7 +9,7 @@ const ArpeggA = (props) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div> <Card className={props.className} header='Arpeggio A'>
<span>Arpeggio A.</span> <span>Arpeggio A.</span>
<div> <div>
Tempo Tempo
@@ -97,7 +98,7 @@ const ArpeggA = (props) => {
} }
/> />
</div> </div>
</div> </Card>
); );
}; };
src/features/editor/parameters/ModFX.js
+279 -256
View File
@@ -1,61 +1,66 @@
import React from 'react'; import React from 'react';
import Card from '../card';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers'; import { Knob, Select, Checkbox } from '../../utils/components';
const ModFX = (props) => { const ModFX = (props) => {
const parameters = useSelector((state) => selectById(state, props.id)); const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div> <Card className={props.className} header='Mod FX'>
<span>Mod FX</span> <div className='flex flex-row items-center justify-between'>
Mod Type <h3>Mod Type</h3>
<SelectList <Select
value={parameters.type} className='select'
list={[ value={parameters.type}
{ value: 'Flanger/Chorus' }, list={[
{ value: 'Ensemble' }, { value: 'Flanger/Chorus' },
{ value: 'Phaser' }, { value: 'Ensemble' },
]} { value: 'Phaser' },
onChange={(value) => ]}
dispatch( onChange={(value) =>
parameterUpdated({ dispatch(
id: props.id, parameterUpdated({
changes: { type: value }, id: props.id,
}) changes: { type: value },
) })
} )
/> }
LFO Speed />
<Slider </div>
min={0} <div className='flex flex-col items-center'>
max={127} <h3>LFO Speed</h3>
parameter={parameters.lfoSpeed} <Knob
onChange={(value) => max={127}
dispatch( value={parameters.lfoSpeed}
parameterUpdated({ onChange={(value) =>
id: props.id, dispatch(
changes: { lfoSpeed: value }, parameterUpdated({
}) id: props.id,
) changes: { lfoSpeed: value },
} })
/> )
Mod FX Depth }
<Slider />
min={0} </div>
max={127} <div className='flex flex-col items-center'>
parameter={parameters.effectDepth} <h3>Mod FX Depth</h3>
onChange={(value) => <Knob
dispatch( max={127}
parameterUpdated({ value={parameters.effectDepth}
id: props.id, onChange={(value) =>
changes: { effectDepth: value }, dispatch(
}) parameterUpdated({
) id: props.id,
} changes: { effectDepth: value },
/> })
</div> )
}
/>
</div>
</Card>
); );
}; };
@@ -64,102 +69,109 @@ const Delay = (props) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div> <Card className={props.className} header='Delay'>
<span>Delay</span> <div className='flex flex-row items-center justify-between'>
Delay Type <h3>Delay Type</h3>
<SelectList <Select
value={parameters.type} className='select'
list={[ value={parameters.type}
{ value: 'Stereo Delay' }, list={[
{ value: 'Cross Delay' }, { value: 'Stereo Delay' },
{ value: 'L/R Delay' }, { value: 'Cross Delay' },
]} { value: 'L/R Delay' },
onChange={(value) => ]}
dispatch( onChange={(value) =>
parameterUpdated({ dispatch(
id: props.id, parameterUpdated({
changes: { type: value }, id: props.id,
}) changes: { type: value },
) })
} )
/> }
<Checkbox />
name='Tempo Sync' </div>
parameter={parameters.tempoSync} <div className='flex flex-col items-center'>
onChange={(value) => <h3>Tempo Sync</h3>
dispatch( <Checkbox
parameterUpdated({ value={parameters.tempoSync}
id: props.id, onChange={(value) =>
changes: { tempoSync: value }, dispatch(
}) parameterUpdated({
) id: props.id,
} changes: { tempoSync: value },
/> })
{parameters.tempoSync ? ( )
<div> }
Sync Note />
<SelectList </div>
value={parameters.syncNote} <div className='flex flex-row'>
list={[ {parameters.tempoSync ? (
{ value: '1/32' }, <div className='flex flex-col items-center w-1/2'>
{ value: '1/24' }, <h3>Sync Note</h3>
{ value: '1/16' }, <Select
{ value: '1/12' }, className='select'
{ value: '3/32' }, value={parameters.syncNote}
{ value: '1/8' }, list={[
{ value: '1/6' }, { value: '1/32' },
{ value: '3/16' }, { value: '1/24' },
{ value: '1/4' }, { value: '1/16' },
{ value: '1/3' }, { value: '1/12' },
{ value: '3/8' }, { value: '3/32' },
{ value: '1/2' }, { value: '1/8' },
{ value: '2/3' }, { value: '1/6' },
{ value: '3/4' }, { value: '3/16' },
{ value: '1/1' }, { value: '1/4' },
]} { value: '1/3' },
onChange={(value) => { value: '3/8' },
dispatch( { value: '1/2' },
parameterUpdated({ { value: '2/3' },
id: props.id, { value: '3/4' },
changes: { syncNote: value }, { value: '1/1' },
}) ]}
) onChange={(value) =>
} dispatch(
/> parameterUpdated({
</div> id: props.id,
) : ( changes: { syncNote: value },
<div> })
Delay Time )
<Slider }
min={0} />
</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} max={127}
parameter={parameters.delayTime} value={parameters.delayDepth}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { delayTime: value }, changes: { delayDepth: value },
}) })
) )
} }
/> />
</div> </div>
)} </div>
Delay Depth </Card>
<Slider
min={0}
max={127}
parameter={parameters.delayDepth}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { delayDepth: value },
})
)
}
/>
</div>
); );
}; };
@@ -168,127 +180,138 @@ const EQ = (props) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div> <Card className={props.className} header='EQ'>
<span>EQ</span> <div className='flex flex-row items-center justify-between'>
Low EQ Frequency <h3>Low Freq</h3>
<SelectList <Select
labelFunction={(e) => `${e.value}kHz`} className='select w-2/4'
value={parameters.lowFrequency} labelFunction={(e) => `${e.value}kHz`}
list={[ value={parameters.lowFrequency}
{ value: 40 }, list={[
{ value: 50 }, { value: 40 },
{ value: 60 }, { value: 50 },
{ value: 80 }, { value: 60 },
{ value: 100 }, { value: 80 },
{ value: 120 }, { value: 100 },
{ value: 140 }, { value: 120 },
{ value: 160 }, { value: 140 },
{ value: 180 }, { value: 160 },
{ value: 200 }, { value: 180 },
{ value: 220 }, { value: 200 },
{ value: 240 }, { value: 220 },
{ value: 260 }, { value: 240 },
{ value: 280 }, { value: 260 },
{ value: 300 }, { value: 280 },
{ value: 320 }, { value: 300 },
{ value: 340 }, { value: 320 },
{ value: 360 }, { value: 340 },
{ value: 380 }, { value: 360 },
{ value: 400 }, { value: 380 },
{ value: 420 }, { value: 400 },
{ value: 440 }, { value: 420 },
{ value: 460 }, { value: 440 },
{ value: 480 }, { value: 460 },
{ value: 500 }, { value: 480 },
{ value: 600 }, { value: 500 },
{ value: 700 }, { value: 600 },
{ value: 800 }, { value: 700 },
{ value: 900 }, { value: 800 },
{ value: 1000 }, { value: 900 },
]} { value: 1000 },
onChange={(value) => ]}
dispatch( onChange={(value) =>
parameterUpdated({ dispatch(
id: props.id, parameterUpdated({
changes: { lowFrequency: value }, id: props.id,
}) changes: { lowFrequency: value },
) })
} )
/> }
Low EQ Gain />
<Slider </div>
min={-12} <div className='flex flex-row items-center justify-between'>
max={12} <h3>High Freq</h3>
parameter={parameters.lowGain} <Select
onChange={(value) => className='select w-2/4'
dispatch( labelFunction={(e) => `${e.value}kHz`}
parameterUpdated({ value={parameters.highFrequency}
id: props.id, list={[
changes: { lowGain: value }, { value: 1.0 },
}) { value: 1.25 },
) { value: 1.5 },
} { value: 1.75 },
/> { value: 2.0 },
High EQ Frequency { value: 2.25 },
<SelectList { value: 2.5 },
labelFunction={(e) => `${e.value}kHz`} { value: 2.75 },
value={parameters.highFrequency} { value: 3.0 },
list={[ { value: 3.25 },
{ value: 1.0 }, { value: 3.5 },
{ value: 1.25 }, { value: 3.75 },
{ value: 1.5 }, { value: 4.0 },
{ value: 1.75 }, { value: 4.25 },
{ value: 2.0 }, { value: 4.5 },
{ value: 2.25 }, { value: 4.75 },
{ value: 2.5 }, { value: 5.0 },
{ value: 2.75 }, { value: 5.25 },
{ value: 3.0 }, { value: 5.5 },
{ value: 3.25 }, { value: 5.75 },
{ value: 3.5 }, { value: 6.0 },
{ value: 3.75 }, { value: 7.0 },
{ value: 4.0 }, { value: 8.0 },
{ value: 4.25 }, { value: 9.0 },
{ value: 4.5 }, { value: 10.0 },
{ value: 4.75 }, { value: 11.0 },
{ value: 5.0 }, { value: 12.0 },
{ value: 5.25 }, { value: 14.0 },
{ value: 5.5 }, { value: 16.0 },
{ value: 5.75 }, { value: 18.0 },
{ value: 6.0 }, ]}
{ value: 7.0 }, onChange={(value) =>
{ value: 8.0 }, dispatch(
{ value: 9.0 }, parameterUpdated({
{ value: 10.0 }, id: props.id,
{ value: 11.0 }, changes: { highFrequency: value },
{ value: 12.0 }, })
{ value: 14.0 }, )
{ value: 16.0 }, }
{ value: 18.0 }, />
]} </div>
onChange={(value) => <div className='flex flex-row'>
dispatch( <div className='flex flex-col items-center w-1/2'>
parameterUpdated({ <h3>Low Gain</h3>
id: props.id, <Knob
changes: { highFrequency: value }, dual={true}
}) max={12}
) value={parameters.lowGain}
} onChange={(value) =>
/> dispatch(
High EQ Gain parameterUpdated({
<Slider id: props.id,
min={-12} changes: { lowGain: value },
max={12} })
parameter={parameters.highGain} )
onChange={(value) => }
dispatch( />
parameterUpdated({ </div>
id: props.id, <div className='flex flex-col items-center w-1/2'>
changes: { highGain: value }, <h3>High Gain</h3>
}) <Knob
) dual={true}
} max={12}
/> value={parameters.highGain}
</div> onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { highGain: value },
})
)
}
/>
</div>
</div>
</Card>
); );
}; };
src/features/editor/parameters/Pitch.js
-1
View File
@@ -3,7 +3,6 @@ import Card from '../card';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Select, Knob } from '../../utils/components'; import { Select, Knob } from '../../utils/components';
import { Slider } from '../../helpers/Helpers';
export default function Pitch(props) { export default function Pitch(props) {
const parameters = useSelector((state) => selectById(state, props.id)); const parameters = useSelector((state) => selectById(state, props.id));
src/features/editor/timbreSlice.js
+2
View File
@@ -56,6 +56,8 @@ const timbreSlice = createSlice({
modfx: 'modfx', modfx: 'modfx',
delay: 'delay', delay: 'delay',
eq: 'eq', eq: 'eq',
arpeggA: 'arpeggA',
arpeggB: 'arpeggB',
}, },
arpeggio: { arpeggio: {
arpeggA: 'arpeggA', arpeggA: 'arpeggA',
src/features/menu/index.js
+1 -8
View File
@@ -142,14 +142,7 @@ export default function Menu() {
onClick={() => { onClick={() => {
dispatch(parameterUpdateTab('Effects')); dispatch(parameterUpdateTab('Effects'));
}}> }}>
Effects Arp/FX
</button>
<button
className={activeTab === 'Arpeggio' ? `btn btn-active` : `btn`}
onClick={() => {
dispatch(parameterUpdateTab('Arpeggio'));
}}>
Arpeggio
</button> </button>
</div> </div>
<div className='w-full text-center text-xl font-semibold'> <div className='w-full text-center text-xl font-semibold'>
src/features/utils/components.js
+3 -2
View File
@@ -10,7 +10,7 @@ const Select = (props) => {
value={props.value}> value={props.value}>
{props.list.map((element) => ( {props.list.map((element) => (
<option key={element.value} value={element.value}> <option key={element.value} value={element.value}>
{element.value} {props.labelFunction ? props.labelFunction(element) : element.value}
</option> </option>
))} ))}
</select> </select>
@@ -89,6 +89,7 @@ function Knob({
value = 0, value = 0,
fillWidth = 4, fillWidth = 4,
onChange, onChange,
offset = 0,
}) { }) {
value = value / max; value = value / max;
const uid = useMemo(() => knob_id++, []); const uid = useMemo(() => knob_id++, []);
@@ -160,7 +161,7 @@ function Knob({
className={` ${ className={` ${
isDragging ? 'opacity-100' : 'opacity-0 hidden' 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`}> } 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> </div>
<svg <svg
className={` ${ className={` ${