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

finish vocoder page redesign

Browse Source
This commit is contained in:
Aoife
2021-04-06 13:44:07 -04:00
parent 7424588885
commit f04f404bea
13 changed files with 647 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/editor/Vocoder.js
+35 -12
View File
@@ -4,7 +4,7 @@ import { selectById } from './timbreSlice';
import VCO, { AudioIn } from './parameters/VCO'; import VCO, { AudioIn } from './parameters/VCO';
import Mixer from './parameters/Mixer'; import Mixer from './parameters/Mixer';
import Pitch from './parameters/Pitch'; import Pitch from './parameters/Pitch';
import EG from './parameters/EG'; import { VocoderEG } from './parameters/EG';
import LFO from './parameters/LFO'; import LFO from './parameters/LFO';
import { VocoderFilter, FCMod } from './parameters/Filter'; import { VocoderFilter, FCMod } from './parameters/Filter';
import { VocoderAmp } from './parameters/Amp'; import { VocoderAmp } from './parameters/Amp';
@@ -14,8 +14,9 @@ import Pans from './parameters/Pans';
export default function Vocoder(props) { export default function Vocoder(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-8 grid-rows-3 gap-4 p-6'>
<VCO <VCO
className='col-span-2'
name='VCO' name='VCO'
id={ids.vco} id={ids.vco}
waveforms={[ waveforms={[
@@ -96,18 +97,40 @@ export default function Vocoder(props) {
{ value: 'Voice4' }, { value: 'Voice4' },
]} ]}
/> />
<AudioIn name='Audio In' id={ids.audioIn} /> <AudioIn className='col-span-2' name='Audio In' id={ids.audioIn} />
<Mixer name='Mixer' id={ids.mixer} /> <Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
<Pitch name='Pitch' id={ids.pitch} /> <Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
<div className='col-span-8 grid grid-cols-9 grid-rows-1 gap-4'>
<div />
<VocoderFilter name='Filter' id={ids.filter} /> <VocoderFilter name='Filter' id={ids.filter} />
<FCMod name='FC Mod' id={ids.fcMod} /> <FCMod name='FC Mod' id={ids.fcMod} />
<VocoderAmp name='Amp' id={ids.amp} /> <VocoderAmp className='col-span-2' name='Amp' id={ids.amp} />
<EG name='EG' id={ids.eg} /> <VocoderEG className='col-span-3' name='EG' id1={ids.eg} />
<div /> </div>
<LFO name='LFO 1' id={ids.lfo1} /> <LFO
<LFO name='LFO 2' id={ids.lfo2} /> className='col-span-2'
<Levels name='Levels' id={ids.levels} /> name='LFO 1'
<Pans name='Pans' id={ids.pans} /> id={ids.lfo1}
waveforms={[
{ value: 'Saw' },
{ value: 'Square 1' },
{ value: 'Triangle' },
{ value: 'Sample & Hold' },
]}
/>
<LFO
className='col-span-2'
name='LFO 2'
id={ids.lfo2}
waveforms={[
{ value: 'Saw' },
{ value: 'Square 2' },
{ value: 'Sine' },
{ value: 'Sample & Hold' },
]}
/>
<Levels className='col-span-2' name='Levels' id={ids.levels} />
<Pans className='col-span-2' name='Pans' id={ids.pans} />
</div> </div>
); );
} }
src/features/editor/parameters/Amp.js
+17 -5
View File
@@ -84,9 +84,10 @@ export const VocoderAmp = (props) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className={props.className}> <Card className={props.className} header={props.name}>
<span>{`${props.name}`}</span> <div className='flex flex-row'>
Amp Level <div className='flex flex-col items-center w-1/2'>
<h3>Amp Level</h3>
<Knob <Knob
value={parameters.ampLevel} value={parameters.ampLevel}
max={127} max={127}
@@ -99,7 +100,9 @@ export const VocoderAmp = (props) => {
) )
} }
/> />
Direct Level </div>
<div className='flex flex-col items-center w-1/2'>
<h3>Direct Level</h3>
<Knob <Knob
value={parameters.directLevel} value={parameters.directLevel}
max={127} max={127}
@@ -112,7 +115,11 @@ export const VocoderAmp = (props) => {
) )
} }
/> />
Amp Keyboard Tracking </div>
</div>
<div className='flex flex-row'>
<div className='flex flex-col items-center w-1/2'>
<h3>Keyboard Track</h3>
<Knob <Knob
value={parameters.ampTrack} value={parameters.ampTrack}
dual={true} dual={true}
@@ -126,6 +133,9 @@ export const VocoderAmp = (props) => {
) )
} }
/> />
</div>
<div className='flex flex-col items-center w-1/2'>
<h3>Distortion</h3>
<Checkbox <Checkbox
value={parameters.distortion} value={parameters.distortion}
onChange={(value) => onChange={(value) =>
@@ -138,5 +148,7 @@ export const VocoderAmp = (props) => {
} }
/> />
</div> </div>
</div>
</Card>
); );
}; };
src/features/editor/parameters/EG.js
+87
View File
@@ -168,3 +168,90 @@ export default function EG(props) {
</Card> </Card>
); );
} }
export function VocoderEG(props) {
const parameters_eg_1 = useSelector((state) => selectById(state, props.id1));
const dispatch = useDispatch();
return (
<Card className={props.className} header={props.name}>
<div className='-mt-1 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>
<div className='-mt-8 flex flex-col items-center'>
<h3>EG Reset</h3>
<Checkbox
className='checkbox'
value={parameters_eg_1.egReset}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id1,
changes: { egReset: value },
})
)
}
/>
</div>
</Card>
);
}
src/features/editor/parameters/Filter.js
+34 -25
View File
@@ -3,7 +3,7 @@ import Card from '../card';
import { Select, Knob } from '../../utils/components'; import { Select, Knob } from '../../utils/components';
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 } from '../../helpers/Helpers'; import { Slider } from '../../helpers/Helpers';
export default function Filter(props) { export default function Filter(props) {
const parameters = useSelector((state) => selectById(state, props.id)); const parameters = useSelector((state) => selectById(state, props.id));
@@ -38,7 +38,7 @@ export default function Filter(props) {
<h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3> <h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
<Knob <Knob
value={parameters.cutoff} value={parameters.cutoff}
maxValue={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -74,7 +74,7 @@ export default function Filter(props) {
<Knob <Knob
value={parameters.egIntensity} value={parameters.egIntensity}
dual={true} dual={true}
maxValue={63} max={63}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -113,12 +113,12 @@ export const VocoderFilter = (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 className={props.className}> <Card className={props.className} header={props.name}>
<span>{`${props.name}`}</span> <div className='-mt-3 flex flex-col justify-around'>
Cutoff <div className='flex flex-col items-center'>
<Slider <h3>Cutoff</h3>
parameter={parameters.cutoff} <Knob
min={0} value={parameters.cutoff}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -129,10 +129,11 @@ export const VocoderFilter = (props) => {
) )
} }
/> />
Resonance </div>
<Slider <div className='flex flex-col items-center'>
parameter={parameters.resonance} <h3>Resonance</h3>
min={0} <Knob
value={parameters.resonance}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -143,10 +144,11 @@ export const VocoderFilter = (props) => {
) )
} }
/> />
EF Sense </div>
<Slider <div className='flex flex-col items-center'>
parameter={parameters.efSense} <h3>EF Sense</h3>
min={0} <Knob
value={parameters.efSense}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -158,6 +160,8 @@ export const VocoderFilter = (props) => {
} }
/> />
</div> </div>
</div>
</Card>
); );
}; };
@@ -165,10 +169,12 @@ export const FCMod = (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={props.name}>
<span>{`${props.name}`}</span> <div className='-mt-4 flex flex-col justify-around space-y-4'>
Source <div className='flex flex-col items-center space-y-0.5'>
<SelectList <h3>Source</h3>
<Select
className='select w-full'
value={parameters.source} value={parameters.source}
list={[ list={[
{ value: 'Amp EG' }, { value: 'Amp EG' },
@@ -188,10 +194,11 @@ export const FCMod = (props) => {
) )
} }
/> />
Intensity </div>
<Slider <div className='flex flex-col items-center'>
parameter={parameters.intensity} <h3>Intensity</h3>
min={0} <Knob
value={parameters.intensity}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -203,5 +210,7 @@ export const FCMod = (props) => {
} }
/> />
</div> </div>
</div>
</Card>
); );
}; };
src/features/editor/parameters/LFO.js
+1 -1
View File
@@ -88,7 +88,7 @@ export default function LFO(props) {
/> />
</div> </div>
</div> </div>
<div className='flex flex-col items-center w-1/2'> <div className='flex flex-col items-center w-1/2 space-y-1'>
<h3>Frequency</h3> <h3>Frequency</h3>
<Knob <Knob
value={parameters.frequency} value={parameters.frequency}
src/features/editor/parameters/Levels.js
+45 -38
View File
@@ -1,21 +1,21 @@
import React from 'react'; import React from 'react';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import Card from '../card';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider } from '../../helpers/Helpers'; import { Knob } from '../../utils/components';
export default function Levels(props) { export default function Levels(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={props.name}>
<span>{`${props.name}`}</span> <div className='flex flex-row'>
<div> <div className='flex flex-col items-center w-1/4'>
Level 1 <h3>Level 1</h3>
<Slider <Knob
min={0}
max={127} max={127}
parameter={parameters.level1} value={parameters.level1}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -25,11 +25,12 @@ export default function Levels(props) {
) )
} }
/> />
Level 2 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Level 2</h3>
<Knob
max={127} max={127}
parameter={parameters.level2} value={parameters.level2}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -39,11 +40,12 @@ export default function Levels(props) {
) )
} }
/> />
Level 3 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Level 3</h3>
<Knob
max={127} max={127}
parameter={parameters.level3} value={parameters.level3}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -53,11 +55,12 @@ export default function Levels(props) {
) )
} }
/> />
Level 4 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Level 4</h3>
<Knob
max={127} max={127}
parameter={parameters.level4} value={parameters.level4}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -68,13 +71,13 @@ export default function Levels(props) {
} }
/> />
</div> </div>
<div /> </div>
<div> <div className='flex flex-row'>
Level 5 <div className='flex flex-col items-center w-1/4'>
<Slider <h3>Level 5</h3>
min={0} <Knob
max={127} max={127}
parameter={parameters.level5} value={parameters.level5}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -84,11 +87,12 @@ export default function Levels(props) {
) )
} }
/> />
Level 6 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Level 6</h3>
<Knob
max={127} max={127}
parameter={parameters.level6} value={parameters.level6}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -98,11 +102,12 @@ export default function Levels(props) {
) )
} }
/> />
Level 7 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Level 7</h3>
<Knob
max={127} max={127}
parameter={parameters.level7} value={parameters.level7}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -112,11 +117,12 @@ export default function Levels(props) {
) )
} }
/> />
Level 8 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Level 8</h3>
<Knob
max={127} max={127}
parameter={parameters.level8} value={parameters.level8}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -128,5 +134,6 @@ export default function Levels(props) {
/> />
</div> </div>
</div> </div>
</Card>
); );
} }
src/features/editor/parameters/Pans.js
+61 -46
View File
@@ -1,21 +1,22 @@
import React from 'react'; import React from 'react';
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 } from '../../helpers/Helpers'; import Card from '../card';
import { Knob } from '../../utils/components';
export default function Pans(props) { export default function Pans(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={props.name}>
<span>{`${props.name}`}</span> <div className='flex flex-row'>
<div> <div className='flex flex-col items-center w-1/4'>
Pan 1 <h3>Pan 1</h3>
<Slider <Knob
min={0} dual={true}
max={127} max={63}
parameter={parameters.pan1} value={parameters.pan1}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -25,11 +26,13 @@ export default function Pans(props) {
) )
} }
/> />
Pan 2 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Pan 2</h3>
max={127} <Knob
parameter={parameters.pan2} dual={true}
max={63}
value={parameters.pan2}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -39,11 +42,13 @@ export default function Pans(props) {
) )
} }
/> />
Pan 3 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Pan 3</h3>
max={127} <Knob
parameter={parameters.pan3} dual={true}
max={63}
value={parameters.pan3}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -53,11 +58,13 @@ export default function Pans(props) {
) )
} }
/> />
Pan 4 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Pan 4</h3>
max={127} <Knob
parameter={parameters.pan4} dual={true}
max={63}
value={parameters.pan4}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -68,13 +75,14 @@ export default function Pans(props) {
} }
/> />
</div> </div>
<div /> </div>
<div> <div className='flex flex-row'>
Pan 5 <div className='flex flex-col items-center w-1/4'>
<Slider <h3>Pan 5</h3>
min={0} <Knob
max={127} dual={true}
parameter={parameters.pan5} max={63}
value={parameters.pan5}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -84,11 +92,13 @@ export default function Pans(props) {
) )
} }
/> />
Pan 6 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Pan 6</h3>
max={127} <Knob
parameter={parameters.pan6} dual={true}
max={63}
value={parameters.pan6}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -98,11 +108,13 @@ export default function Pans(props) {
) )
} }
/> />
Pan 7 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Pan 7</h3>
max={127} <Knob
parameter={parameters.pan7} dual={true}
max={63}
value={parameters.pan7}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -112,11 +124,13 @@ export default function Pans(props) {
) )
} }
/> />
Pan 8 </div>
<Slider <div className='flex flex-col items-center w-1/4'>
min={0} <h3>Pan 8</h3>
max={127} <Knob
parameter={parameters.pan8} dual={true}
max={63}
value={parameters.pan8}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -128,5 +142,6 @@ export default function Pans(props) {
/> />
</div> </div>
</div> </div>
</Card>
); );
} }
src/features/editor/parameters/VCO.js
+28 -18
View File
@@ -2,8 +2,7 @@ import React from 'react';
import Card from '../card'; 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, Checkbox } from '../../utils/components';
import { Slider, Checkbox } from '../../helpers/Helpers';
export default function VCO(props) { export default function VCO(props) {
const parameters = useSelector((state) => selectById(state, props.id)); const parameters = useSelector((state) => selectById(state, props.id));
@@ -84,13 +83,14 @@ export const AudioIn = (props) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className={props.className}> <Card className={props.className} header={props.name}>
<span>{`${props.name}`}</span> <div className='-mt-3 flex flex-col items-stretch space-y-4'>
Gate <div className='flex flex-row'>
<Slider <div className='flex flex-col items-center w-1/2'>
min={0} <h3>Gate Sense</h3>
<Knob
max={127} max={127}
parameter={parameters.gate} value={parameters.gate}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -100,11 +100,12 @@ export const AudioIn = (props) => {
) )
} }
/> />
Threshold </div>
<Slider <div className='flex flex-col items-center w-1/2'>
min={0} <h3>Threshold</h3>
<Knob
max={127} max={127}
parameter={parameters.threshold} value={parameters.threshold}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -114,11 +115,14 @@ export const AudioIn = (props) => {
) )
} }
/> />
HPF Level </div>
<Slider </div>
min={0} <div className='flex flex-row'>
<div className='flex flex-col items-center w-1/2'>
<h3>HPF Level</h3>
<Knob
max={127} max={127}
parameter={parameters.hpfLevel} value={parameters.hpfLevel}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -128,9 +132,12 @@ export const AudioIn = (props) => {
) )
} }
/> />
</div>
<div className='flex flex-col items-center w-1/2'>
<h3>HPF Gate</h3>
<Checkbox <Checkbox
name='HPF Gate' className='checkbox'
parameter={parameters.hpfGate} value={parameters.hpfGate}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
@@ -141,5 +148,8 @@ export const AudioIn = (props) => {
} }
/> />
</div> </div>
</div>
</div>
</Card>
); );
}; };
src/features/editor/parameters/parameterSlice.js
+2 -1
View File
@@ -275,7 +275,8 @@ const defaultState = {
waveform: 'Saw', waveform: 'Saw',
keySync: 'Off', keySync: 'Off',
tempoSync: false, tempoSync: false,
frequency: '1/1', frequency: 0,
syncNote: '1/1',
}, },
patches1: { patches1: {
id: 'patches1', id: 'patches1',
src/features/editor/timbreSlice.js
+1
View File
@@ -44,6 +44,7 @@ const timbreSlice = createSlice({
filter: 'filter3', filter: 'filter3',
fcMod: 'fcMod', fcMod: 'fcMod',
eg: 'eg5', eg: 'eg5',
eg2: 'unusedVocoder',
amp: 'amp3', amp: 'amp3',
lfo1: 'lfo5', lfo1: 'lfo5',
lfo2: 'lfo6', lfo2: 'lfo6',
src/features/menu/index.js
+16 -5
View File
@@ -14,6 +14,8 @@ export default function Menu() {
const [file, setFile] = useState(null); const [file, setFile] = useState(null);
const fileRef = useRef(null); const fileRef = useRef(null);
const state = useSelector((state) => selectEntities(state)); const state = useSelector((state) => selectEntities(state));
const activeTab = useSelector((state) => state.parameters.activeTab);
console.log(activeTab);
const dispatch = useDispatch(); const dispatch = useDispatch();
const reader = new FileReader(); const reader = new FileReader();
const loadFile = (f) => { const loadFile = (f) => {
@@ -29,6 +31,15 @@ export default function Menu() {
} }
}, [file, dispatch]); }, [file, dispatch]);
useEffect(() => {
if (state.patch.mode === 'Vocoder') {
dispatch(parameterUpdateTab('Vocoder'));
}
if (state.patch.mode === 'Single' || state.patch.mode === 'Multiple') {
dispatch(parameterUpdateTab('Timbre1'));
}
}, [state.patch.mode, dispatch]);
return ( return (
<div className='col-span-1 flex flex-col justify-around border-solid border-r border-gray-300 bg-white px-4'> <div className='col-span-1 flex flex-col justify-around border-solid border-r border-gray-300 bg-white px-4'>
<div className='menu-patch-container'> <div className='menu-patch-container'>
@@ -104,7 +115,7 @@ export default function Menu() {
<div className='my-1 flex flex-col items-center space-y-2'> <div className='my-1 flex flex-col items-center space-y-2'>
<button <button
disabled={state.patch.mode === 'Vocoder'} disabled={state.patch.mode === 'Vocoder'}
className='btn' className={activeTab === 'Timbre1' ? `btn btn-active` : `btn`}
onClick={() => { onClick={() => {
dispatch(parameterUpdateTab('Timbre1')); dispatch(parameterUpdateTab('Timbre1'));
}}> }}>
@@ -112,7 +123,7 @@ export default function Menu() {
</button> </button>
<button <button
disabled={state.patch.mode !== 'Multiple'} disabled={state.patch.mode !== 'Multiple'}
className='btn' className={activeTab === 'Timbre2' ? `btn btn-active` : `btn`}
onClick={() => { onClick={() => {
dispatch(parameterUpdateTab('Timbre2')); dispatch(parameterUpdateTab('Timbre2'));
}}> }}>
@@ -120,21 +131,21 @@ export default function Menu() {
</button> </button>
<button <button
disabled={state.patch.mode !== 'Vocoder'} disabled={state.patch.mode !== 'Vocoder'}
className='btn' className={activeTab === 'Vocoder' ? `btn btn-active` : `btn`}
onClick={() => { onClick={() => {
dispatch(parameterUpdateTab('Vocoder')); dispatch(parameterUpdateTab('Vocoder'));
}}> }}>
Vocoder Vocoder
</button> </button>
<button <button
className='btn' className={activeTab === 'Effects' ? `btn btn-active` : `btn`}
onClick={() => { onClick={() => {
dispatch(parameterUpdateTab('Effects')); dispatch(parameterUpdateTab('Effects'));
}}> }}>
Effects Effects
</button> </button>
<button <button
className='btn' className={activeTab === 'Arpeggio' ? `btn btn-active` : `btn`}
onClick={() => { onClick={() => {
dispatch(parameterUpdateTab('Arpeggio')); dispatch(parameterUpdateTab('Arpeggio'));
}}> }}>
src/features/utils/components.js
+10 -8
View File
@@ -83,14 +83,14 @@ function getKnobValue(dragStart, currentY, bipolar) {
let knob_id = 0; let knob_id = 0;
function Knob({ function Knob({
maxValue = 127, max = 127,
dual = false, dual = false,
size = 42, size = 42,
value = 0, value = 0,
fillWidth = 4, fillWidth = 4,
onChange, onChange,
}) { }) {
value = value / maxValue; value = value / max;
const uid = useMemo(() => knob_id++, []); const uid = useMemo(() => knob_id++, []);
const radius = size / 2; const radius = size / 2;
const dial_zero = dual ? Math.PI / 2 : START_ANGLE; const dial_zero = dual ? Math.PI / 2 : START_ANGLE;
@@ -115,9 +115,9 @@ function Knob({
if (!dragStart) return; if (!dragStart) return;
const newValue = getKnobValue(dragStart, e.clientY, dual); const newValue = getKnobValue(dragStart, e.clientY, dual);
onChange(Math.round(newValue * maxValue)); onChange(Math.round(newValue * max));
}, },
[dragStart, onChange, dual, maxValue] [dragStart, onChange, dual, max]
); );
const onMouseDown = useCallback( const onMouseDown = useCallback(
(e) => { (e) => {
@@ -158,19 +158,21 @@ function Knob({
{/* TOOLTIP */} {/* TOOLTIP */}
<div <div
className={` ${ className={` ${
isDragging ? 'opacity-100' : 'opacity-0' 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 * maxValue)} {Math.round(value * max)}
</div> </div>
<svg <svg
className={` ${ className={` ${
isDragging ? 'opacity-100' : 'opacity-0' isDragging ? 'opacity-100' : 'opacity-0 hidden'
} transition duration-75 ease-in absolute text-gray-800 w-full h-2 -mt-1`} } transition duration-75 ease-in absolute text-gray-800 w-full h-2 -mt-1`}
x='0px' x='0px'
y='0px' y='0px'
viewBox='0 0 255 255' viewBox='0 0 255 255'
xmlSpace='preserve'> xmlSpace='preserve'>
<polygon class='fill-current' points='0,0 127.5,127.5 255,0'></polygon> <polygon
className='fill-current'
points='0,0 127.5,127.5 255,0'></polygon>
</svg> </svg>
<div <div
style={{ style={{
src/index.css
+3
View File
@@ -31,6 +31,9 @@ code {
.btn:disabled { .btn:disabled {
@apply line-through opacity-50 hover:bg-white cursor-default; @apply line-through opacity-50 hover:bg-white cursor-default;
} }
.btn-active {
@apply ring ring-blue-500;
}
.select { .select {
@apply select-none block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50; @apply select-none block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
} }