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

remove old styles and begin phase out old elements

Browse Source
This commit is contained in:
Aoife
2021-04-06 13:37:14 -04:00
parent 9ea1e7fb46
commit 689225a650
30 changed files with 1802 additions and 1740 deletions
Download Patch File Download Diff File Expand all files Collapse all files
craco.config.js
+7
View File
@@ -0,0 +1,7 @@
module.exports = {
style: {
postcss: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
};
package-lock.json
Generated
+581 -204
View File
File diff suppressed because it is too large Load Diff
package.json
+11 -5
View File
@@ -3,7 +3,9 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@reduxjs/toolkit": "^1.4.0", "@craco/craco": "^6.1.1",
"@reduxjs/toolkit": "^1.5.1",
"@tailwindcss/forms": "^0.3.2",
"@testing-library/jest-dom": "^4.2.4", "@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0", "@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
@@ -20,9 +22,9 @@
"styled-components": "^5.2.1" "styled-components": "^5.2.1"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "craco start",
"build": "react-scripts build", "build": "craco build",
"test": "react-scripts test", "test": "craco test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
@@ -41,6 +43,10 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"babel-plugin-styled-components": "^1.11.1" "@tailwindcss/postcss7-compat": "^2.0.4",
"autoprefixer": "^9.8.6",
"babel-plugin-styled-components": "^1.11.1",
"postcss": "^7.0.35",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4"
} }
} }
src/App.css
-44
View File
@@ -1,44 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-float infinite 3s ease-in-out;
}
}
.App-header {
min-height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
}
.App-link {
color: rgb(112, 76, 182);
}
.App-spacer {
min-height: 100vh;
min-width: 15vw;
border-right: 1px solid black;
}
@keyframes App-logo-float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
src/App.js
+3 -8
View File
@@ -1,17 +1,12 @@
import React from 'react'; import React from 'react';
import Menu from './features/menu'; import Menu from './features/menu';
import TimbreSwitcher from './features/timbre/timbreSwitcher'; import TimbreSwitcher from './features/timbre/timbreSwitcher';
import './App.css';
function App() { function App() {
return ( return (
<div className='App'> <div className='grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
<header className='App-header'> <Menu className='col-span-1' />
<div className='App-spacer'> <TimbreSwitcher className='col-span-5' />
<Menu />
</div>
<TimbreSwitcher />
</header>
</div> </div>
); );
} }
src/features/helpers/Helpers.module.css
View File
src/features/menu/index.js
+10 -9
View File
@@ -1,6 +1,5 @@
import { useRef, useState, useEffect } from 'react'; import { useRef, useState, useEffect } from 'react';
import './menu.css'; import { Select } from '../utils/components';
import { SelectList } from '../helpers/Helpers';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { import {
parameterUpdateIndex, parameterUpdateIndex,
@@ -31,10 +30,11 @@ export default function Menu() {
}, [file, dispatch]); }, [file, dispatch]);
return ( return (
<div className='menu'> <div className='flex flex-col justify-around border-solid border-r-2 border-gray-400 px-4'>
<div className='menu-patch-container'> <div className='menu-patch-container'>
<div className='patch-name'> <div className='patch-name'>
<input <input
className='block w-full rounded-md bg-gray-100 border-transparent hover:bg-gray-200 focus:bg-white focus:ring-1'
placeholder='Patch Name' placeholder='Patch Name'
type='text' type='text'
maxLength='12' maxLength='12'
@@ -49,32 +49,32 @@ export default function Menu() {
}} }}
/> />
</div> </div>
<div className='patch-load'> <div className='my-1 flex flex-col items-center'>
<button <button
className='menu-button' className='mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200'
onClick={() => { onClick={() => {
dispatch(parameterRefreshAll()); dispatch(parameterRefreshAll());
}}> }}>
New Patch New Patch
</button> </button>
<button <button
className='menu-button' className='mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200'
onClick={() => { onClick={() => {
fileRef.current.click(); fileRef.current.click();
}}> }}>
Load Patch Load Patch
</button> </button>
<button <button
className='menu-button' className='mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200'
onClick={() => { onClick={() => {
return_file_from_store(state); return_file_from_store(state);
}}> }}>
Save Patch Save Patch
</button> </button>
<input <input
className='hidden'
type='file' type='file'
accept='.syx' accept='.syx'
className='menu-file-input'
ref={fileRef} ref={fileRef}
onChange={(e) => { onChange={(e) => {
loadFile(e.target.files[0]); loadFile(e.target.files[0]);
@@ -82,7 +82,8 @@ export default function Menu() {
/> />
</div> </div>
<div className='patch-settings'> <div className='patch-settings'>
<SelectList <Select
className=''
value={state.patch.mode} value={state.patch.mode}
list={[ list={[
{ value: 'Single' }, { value: 'Single' },
src/features/menu/menu.css
-54
View File
@@ -1,54 +0,0 @@
.menu {
height: 100vh;
min-width: 15vw;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
align-items: stretch;
}
.menu-patch-container > * {
margin-top: 10pt;
}
input[type='text'] {
font-family: 'Roboto', sans-serif;
text-indent: 8pt;
width: 70%;
padding: 6pt 0;
outline: none;
border-radius: 4pt;
border: 1px solid gainsboro;
}
input[type='text']:hover {
border-color: silver;
}
input[type='text']:focus {
border: 2px solid dodgerblue;
}
.menu-button {
width: 65%;
display: block;
padding: 4pt;
margin: 8px auto;
outline: none;
}
h2 {
text-align: left;
font-size: x-large;
font-weight: 400;
}
.menu-file-input {
display: none;
}
.patch-settings {
font-size: small;
width: 75%;
margin: 10pt auto;
line-height: 1.5em;
}
src/features/timbre/Arpeggio.js
+1 -2
View File
@@ -2,12 +2,11 @@ import React from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { selectById } from './timbreSlice.js'; import { selectById } from './timbreSlice.js';
import { ArpeggA, ArpeggB } from './parameters/Arpeggios'; import { ArpeggA, ArpeggB } from './parameters/Arpeggios';
import styles from './Timbre.module.css';
export default function Arpeggio(props) { export default function Arpeggio(props) {
const ids = useSelector((state) => selectById(state, props.id)); const ids = useSelector((state) => selectById(state, props.id));
return ( return (
<div className={styles.timbreStyle}> <div>
<ArpeggA id={ids.arpeggA} /> <ArpeggA id={ids.arpeggA} />
<ArpeggB id={ids.arpeggB} /> <ArpeggB id={ids.arpeggB} />
</div> </div>
src/features/timbre/Effects.js
+1 -2
View File
@@ -2,12 +2,11 @@ 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 styles from './Timbre.module.css';
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 className={styles.timbreStyle}> <div>
<ModFX id={ids.modfx} /> <ModFX id={ids.modfx} />
<Delay id={ids.delay} /> <Delay id={ids.delay} />
<EQ id={ids.eq} /> <EQ id={ids.eq} />
src/features/timbre/Timbre.js
+2 -3
View File
@@ -9,12 +9,11 @@ import Amp from './parameters/Amp';
import LFO from './parameters/LFO'; import LFO from './parameters/LFO';
import Patches from './parameters/Patches'; import Patches from './parameters/Patches';
import { selectById } from './timbreSlice.js'; import { selectById } from './timbreSlice.js';
import styles from './Timbre.module.css';
export default function Timbre(props) { export default function Timbre(props) {
const ids = useSelector((state) => selectById(state, props.id)); const ids = useSelector((state) => selectById(state, props.id));
return ( return (
<div className={styles.timbreStyle}> <div>
<VCO <VCO
name='VCO 1' name='VCO 1'
id={ids.vco1} id={ids.vco1}
@@ -118,7 +117,7 @@ export default function Timbre(props) {
<Amp name='Amp' id={ids.amp} /> <Amp name='Amp' id={ids.amp} />
<EG name='EG 1' id={ids.eg1} /> <EG name='EG 1' id={ids.eg1} />
<EG name='EG 2' id={ids.eg2} /> <EG name='EG 2' id={ids.eg2} />
<div className={styles.lineBreak} /> <div />
<LFO <LFO
name='LFO 1' name='LFO 1'
id={ids.lfo1} id={ids.lfo1}
src/features/timbre/Timbre.module.css
-130
View File
@@ -1,130 +0,0 @@
.timbreStyle {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.lineBreak {
width: 0%;
}
@media only screen and (max-width: 1920px) {
.lineBreak {
width: 100%;
}
}
@media only screen and (max-width: 1440px) {
.lineBreak {
width: 0%;
}
}
@media only screen and (max-width: 990px) {
.lineBreak {
width: 0%;
}
}
@media only screen and (max-width: 920px) {
.lineBreak {
width: 100%;
}
}
.buttonContainer {
position: fixed;
top: 0;
left: 25%;
}
.buttonContainer > button:hover {
background: white;
color: slateblue;
border: 2px solid slateblue;
}
.buttonContainer > button:focus {
background: slateblue;
color: white;
border: 2px solid slateblue;
}
.tabs {
height: 100vh;
display: flex;
flex-direction: column;
}
.tabList {
border-bottom: 1px solid black;
display: none;
flex-direction: row;
list-style-type: none;
justify-content: center;
top: 0;
padding: 0;
margin: 0;
width: 85vw;
background: white;
}
.tab {
height: 1.25em;
width: 4em;
background: white;
color: slategrey;
font-size: 0.75em;
margin: 0.75em 1em;
padding: 0.25em 1em;
border: 2px solid slategrey;
border-radius: 3px;
outline: none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
transition: all 0.2s ease-in-out;
}
.tab:hover {
background: white;
color: slateblue;
border: 2px solid slateblue;
}
.selected,
.selected:hover {
background: slateblue;
color: white;
border: 2px solid slateblue;
transition: 0.2s ease-in-out;
}
@keyframes slideeffect {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.tabPanel {
padding: 1em 0;
height: 100%;
animation: slideeffect 0.6s ease-in-out;
opacity: 1;
overflow-y: scroll;
}
.tabPanel::-webkit-scrollbar {
width: 0.3em;
}
.tabPanel::-webkit-scrollbar-track,
.tabPanel::-webkit-scrollbar-thumb {
background-color: transparent;
}
.tabPanel:hover::-webkit-scrollbar-thumb {
background-color: lightgray;
border-radius: 6px;
}
src/features/timbre/Vocoder.js
+98 -99
View File
@@ -10,105 +10,104 @@ import { VocoderFilter, FCMod } from './parameters/Filter';
import { VocoderAmp } from './parameters/Amp'; import { VocoderAmp } from './parameters/Amp';
import Levels from './parameters/Levels'; import Levels from './parameters/Levels';
import Pans from './parameters/Pans'; import Pans from './parameters/Pans';
import styles from './Timbre.module.css';
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 className={styles.timbreStyle}> <div>
<VCO <VCO
name="VCO" name='VCO'
id={ids.vco} id={ids.vco}
waveforms={[ waveforms={[
{ value: 'Saw' }, { value: 'Saw' },
{ value: 'Square' }, { value: 'Square' },
{ value: 'Triangle' }, { value: 'Triangle' },
{ value: 'Sine' }, { value: 'Sine' },
{ value: 'Vox Wave' }, { value: 'Vox Wave' },
{ value: 'DWGS' }, { value: 'DWGS' },
{ value: 'Noise' }, { value: 'Noise' },
{ value: 'Audio In' }, { value: 'Audio In' },
]} ]}
dwgsOrModTypeName="DWGS" dwgsOrModTypeName='DWGS'
dwgsOrModType={[ dwgsOrModType={[
{ value: 'SynSine1' }, { value: 'SynSine1' },
{ value: 'SynSine2' }, { value: 'SynSine2' },
{ value: 'SynSine3' }, { value: 'SynSine3' },
{ value: 'SynSine4' }, { value: 'SynSine4' },
{ value: 'SynSine5' }, { value: 'SynSine5' },
{ value: 'SynSine6' }, { value: 'SynSine6' },
{ value: 'SynSine7' }, { value: 'SynSine7' },
{ value: 'SynBass1' }, { value: 'SynBass1' },
{ value: 'SynBass2' }, { value: 'SynBass2' },
{ value: 'SynBass3' }, { value: 'SynBass3' },
{ value: 'SynBass4' }, { value: 'SynBass4' },
{ value: 'SynBass5' }, { value: 'SynBass5' },
{ value: 'SynBass6' }, { value: 'SynBass6' },
{ value: 'SynBass7' }, { value: 'SynBass7' },
{ value: 'SynWave1' }, { value: 'SynWave1' },
{ value: 'SynWave2' }, { value: 'SynWave2' },
{ value: 'SynWave3' }, { value: 'SynWave3' },
{ value: 'SynWave4' }, { value: 'SynWave4' },
{ value: 'SynWave5' }, { value: 'SynWave5' },
{ value: 'SynWave6' }, { value: 'SynWave6' },
{ value: 'SynWave7' }, { value: 'SynWave7' },
{ value: 'SynWave8' }, { value: 'SynWave8' },
{ value: 'SynWave9' }, { value: 'SynWave9' },
{ value: '5thWave1' }, { value: '5thWave1' },
{ value: '5thWave2' }, { value: '5thWave2' },
{ value: '5thWave3' }, { value: '5thWave3' },
{ value: 'Digi1' }, { value: 'Digi1' },
{ value: 'Digi2' }, { value: 'Digi2' },
{ value: 'Digi3' }, { value: 'Digi3' },
{ value: 'Digi4' }, { value: 'Digi4' },
{ value: 'Digi5' }, { value: 'Digi5' },
{ value: 'Digi6' }, { value: 'Digi6' },
{ value: 'Digi7' }, { value: 'Digi7' },
{ value: 'Digi8' }, { value: 'Digi8' },
{ value: 'Endless' }, { value: 'Endless' },
{ value: 'E.Piano1' }, { value: 'E.Piano1' },
{ value: 'E.Piano2' }, { value: 'E.Piano2' },
{ value: 'E.Piano3' }, { value: 'E.Piano3' },
{ value: 'E.Piano4' }, { value: 'E.Piano4' },
{ value: 'Organ1' }, { value: 'Organ1' },
{ value: 'Organ2' }, { value: 'Organ2' },
{ value: 'Organ3' }, { value: 'Organ3' },
{ value: 'Organ4' }, { value: 'Organ4' },
{ value: 'Organ5' }, { value: 'Organ5' },
{ value: 'Organ6' }, { value: 'Organ6' },
{ value: 'Organ7' }, { value: 'Organ7' },
{ value: 'Clav1' }, { value: 'Clav1' },
{ value: 'Clav2' }, { value: 'Clav2' },
{ value: 'Guitar1' }, { value: 'Guitar1' },
{ value: 'Guitar2' }, { value: 'Guitar2' },
{ value: 'Guitar3' }, { value: 'Guitar3' },
{ value: 'Bass1' }, { value: 'Bass1' },
{ value: 'Bass2' }, { value: 'Bass2' },
{ value: 'Bass3' }, { value: 'Bass3' },
{ value: 'Bass4' }, { value: 'Bass4' },
{ value: 'Bass5' }, { value: 'Bass5' },
{ value: 'Bell1' }, { value: 'Bell1' },
{ value: 'Bell2' }, { value: 'Bell2' },
{ value: 'Bell3' }, { value: 'Bell3' },
{ value: 'Bell4' }, { value: 'Bell4' },
{ value: 'Voice1' }, { value: 'Voice1' },
{ value: 'Voice2' }, { value: 'Voice2' },
{ value: 'Voice3' }, { value: 'Voice3' },
{ value: 'Voice4' }, { value: 'Voice4' },
]} ]}
/> />
<AudioIn name="Audio In" id={ids.audioIn} /> <AudioIn name='Audio In' id={ids.audioIn} />
<Mixer name="Mixer" id={ids.mixer} /> <Mixer name='Mixer' id={ids.mixer} />
<Pitch name="Pitch" id={ids.pitch} /> <Pitch name='Pitch' id={ids.pitch} />
<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 name='Amp' id={ids.amp} />
<EG name="EG" id={ids.eg} /> <EG name='EG' id={ids.eg} />
<div className={styles.lineBreak} /> <div />
<LFO name="LFO 1" id={ids.lfo1} /> <LFO name='LFO 1' id={ids.lfo1} />
<LFO name="LFO 2" id={ids.lfo2} /> <LFO name='LFO 2' id={ids.lfo2} />
<Levels name="Levels" id={ids.levels} /> <Levels name='Levels' id={ids.levels} />
<Pans name="Pans" id={ids.pans} /> <Pans name='Pans' id={ids.pans} />
</div> </div>
); );
} }
src/features/timbre/parameters/Amp.js
+122 -123
View File
@@ -2,134 +2,133 @@ 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, Checkbox } from '../../helpers/Helpers'; import { Slider, Checkbox } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
export default function Amp(props) { export default function Amp(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={styles.container}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
Amp Level Amp Level
<Slider <Slider
parameter={parameters.ampLevel} parameter={parameters.ampLevel}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { ampLevel: value }, changes: { ampLevel: value },
}) })
) )
} }
/> />
PanPot PanPot
<Slider <Slider
parameter={parameters.panpot} parameter={parameters.panpot}
min={-63} min={-63}
max={63} max={63}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { panpot: value }, changes: { panpot: value },
}) })
) )
} }
/> />
Amp Keyboard Tracking Amp Keyboard Tracking
<Slider <Slider
parameter={parameters.ampTrack} parameter={parameters.ampTrack}
min={-63} min={-63}
max={63} max={63}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { ampTrack: value }, changes: { ampTrack: value },
}) })
) )
} }
/> />
<Checkbox <Checkbox
name="Distortion" name='Distortion'
parameter={parameters.distortion} parameter={parameters.distortion}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { distortion: value }, changes: { distortion: value },
}) })
) )
} }
/> />
</div> </div>
); );
} }
export const VocoderAmp = (props) => { export const VocoderAmp = (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={styles.container}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
Amp Level Amp Level
<Slider <Slider
parameter={parameters.ampLevel} parameter={parameters.ampLevel}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { ampLevel: value }, changes: { ampLevel: value },
}) })
) )
} }
/> />
Direct Level Direct Level
<Slider <Slider
parameter={parameters.directLevel} parameter={parameters.directLevel}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { directLevel: value }, changes: { directLevel: value },
}) })
) )
} }
/> />
Amp Keyboard Tracking Amp Keyboard Tracking
<Slider <Slider
parameter={parameters.ampTrack} parameter={parameters.ampTrack}
min={-63} min={-63}
max={63} max={63}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { ampTrack: value }, changes: { ampTrack: value },
}) })
) )
} }
/> />
<Checkbox <Checkbox
name="Distortion" name='Distortion'
parameter={parameters.distortion} parameter={parameters.distortion}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { distortion: value }, changes: { distortion: value },
}) })
) )
} }
/> />
</div> </div>
); );
}; };
src/features/timbre/parameters/Arpeggios.js
+12 -13
View File
@@ -2,16 +2,15 @@ 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, SelectList, Checkbox } from '../../helpers/Helpers'; import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
const ArpeggA = (props) => { const ArpeggA = (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={styles.horizontalContainer}> <div>
<span className={styles.header}>Arpeggio A.</span> <span>Arpeggio A.</span>
<div className={styles.container}> <div>
Tempo Tempo
<Slider <Slider
min={20} min={20}
@@ -61,8 +60,8 @@ const ArpeggA = (props) => {
} }
/> />
</div> </div>
<div className={styles.divider} /> <div />
<div className={styles.container}> <div>
Type Type
<SelectList <SelectList
value={parameters.type} value={parameters.type}
@@ -107,11 +106,11 @@ const ArpeggB = (props) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className={styles.horizontalContainer}> <div>
<span className={styles.header}>Arpeggio B.</span> <span>Arpeggio B.</span>
<div className={styles.container}> <div>
<Checkbox <Checkbox
name="Latch" name='Latch'
parameter={parameters.latch} parameter={parameters.latch}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -137,7 +136,7 @@ const ArpeggB = (props) => {
} }
/> />
<Checkbox <Checkbox
name="Key Sync" name='Key Sync'
parameter={parameters.keySync} parameter={parameters.keySync}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -149,8 +148,8 @@ const ArpeggB = (props) => {
} }
/> />
</div> </div>
<div className={styles.divider} /> <div />
<div className={styles.container}> <div>
Last Step Last Step
<SelectList <SelectList
labelFunction={(v) => `Step ${v.value}`} labelFunction={(v) => `Step ${v.value}`}
src/features/timbre/parameters/EG.js
+75 -76
View File
@@ -2,83 +2,82 @@ 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, Checkbox } from '../../helpers/Helpers'; import { Slider, Checkbox } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
export default function EG(props) { export default function EG(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={styles.container}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
Attack Attack
<Slider <Slider
parameter={parameters.attack} parameter={parameters.attack}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { attack: value }, changes: { attack: value },
}) })
) )
} }
/> />
Decay Decay
<Slider <Slider
parameter={parameters.decay} parameter={parameters.decay}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { decay: value }, changes: { decay: value },
}) })
) )
} }
/> />
Sustain Sustain
<Slider <Slider
parameter={parameters.sustain} parameter={parameters.sustain}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { sustain: value }, changes: { sustain: value },
}) })
) )
} }
/> />
Release Release
<Slider <Slider
parameter={parameters.release} parameter={parameters.release}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { release: value }, changes: { release: value },
}) })
) )
} }
/> />
<Checkbox <Checkbox
name="EG Reset" name='EG Reset'
parameter={parameters.egReset} parameter={parameters.egReset}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { egReset: value }, changes: { egReset: value },
}) })
) )
} }
/> />
</div> </div>
); );
} }
src/features/timbre/parameters/Filter.js
+172 -173
View File
@@ -2,186 +2,185 @@ 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, SelectList } from '../../helpers/Helpers'; import { Slider, SelectList } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
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));
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className={styles.container}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
Filter Type Filter Type
<SelectList <SelectList
value={parameters.filterType} value={parameters.filterType}
list={[ list={[
{ value: '-24db Low Pass' }, { value: '-24db Low Pass' },
{ value: '-12db Low Pass' }, { value: '-12db Low Pass' },
{ value: 'Band Pass' }, { value: 'Band Pass' },
{ value: 'High Pass' }, { value: 'High Pass' },
]} ]}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { filterType: value }, changes: { filterType: value },
}) })
) )
} }
/> />
Cutoff Cutoff
<Slider <Slider
parameter={parameters.cutoff} parameter={parameters.cutoff}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { cutoff: value }, changes: { cutoff: value },
}) })
) )
} }
/> />
Resonance Resonance
<Slider <Slider
parameter={parameters.resonance} parameter={parameters.resonance}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { resonance: value }, changes: { resonance: value },
}) })
) )
} }
/> />
EG Intensity EG Intensity
<Slider <Slider
parameter={parameters.egIntensity} parameter={parameters.egIntensity}
min={-63} min={-63}
max={63} max={63}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { egIntensity: value }, changes: { egIntensity: value },
}) })
) )
} }
/> />
Keyboard Tracking Keyboard Tracking
<Slider <Slider
parameter={parameters.keyboardTrack} parameter={parameters.keyboardTrack}
min={-63} min={-63}
max={63} max={63}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { keyboardTrack: value }, changes: { keyboardTrack: value },
}) })
) )
} }
/> />
</div> </div>
); );
} }
export const VocoderFilter = (props) => { 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={styles.container}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
Cutoff Cutoff
<Slider <Slider
parameter={parameters.cutoff} parameter={parameters.cutoff}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { cutoff: value }, changes: { cutoff: value },
}) })
) )
} }
/> />
Resonance Resonance
<Slider <Slider
parameter={parameters.resonance} parameter={parameters.resonance}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { resonance: value }, changes: { resonance: value },
}) })
) )
} }
/> />
EF Sense EF Sense
<Slider <Slider
parameter={parameters.efSense} parameter={parameters.efSense}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { efSense: value }, changes: { efSense: value },
}) })
) )
} }
/> />
</div> </div>
); );
}; };
export const FCMod = (props) => { 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 className={styles.container}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
Source Source
<SelectList <SelectList
value={parameters.source} value={parameters.source}
list={[ list={[
{ value: 'Amp EG' }, { value: 'Amp EG' },
{ value: 'LFO 1' }, { value: 'LFO 1' },
{ value: 'LFO 2' }, { value: 'LFO 2' },
{ value: 'Velocity' }, { value: 'Velocity' },
{ value: 'Keyboard Track' }, { value: 'Keyboard Track' },
{ value: 'Pitch Bend' }, { value: 'Pitch Bend' },
{ value: 'Mod Wheel' }, { value: 'Mod Wheel' },
]} ]}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { source: value }, changes: { source: value },
}) })
) )
} }
/> />
Intensity Intensity
<Slider <Slider
parameter={parameters.intensity} parameter={parameters.intensity}
min={0} min={0}
max={127} max={127}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { intensity: value }, changes: { intensity: value },
}) })
) )
} }
/> />
</div> </div>
); );
}; };
src/features/timbre/parameters/LFO.js
+2 -3
View File
@@ -2,15 +2,14 @@ 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, SelectList, Checkbox } from '../../helpers/Helpers'; import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
export default function LFO(props) { export default function LFO(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={styles.lfo}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
LFO Waveform LFO Waveform
<SelectList <SelectList
value={parameters.waveform} value={parameters.waveform}
src/features/timbre/parameters/Levels.js
+125 -126
View File
@@ -1,133 +1,132 @@
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 { Slider } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
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 className={styles.horizontalContainer}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
<div className={styles.container}> <div>
Level 1 Level 1
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.level1} parameter={parameters.level1}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { level1: value }, changes: { level1: value },
}) })
) )
} }
/> />
Level 2 Level 2
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.level2} parameter={parameters.level2}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { level2: value }, changes: { level2: value },
}) })
) )
} }
/> />
Level 3 Level 3
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.level3} parameter={parameters.level3}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { level3: value }, changes: { level3: value },
}) })
) )
} }
/> />
Level 4 Level 4
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.level4} parameter={parameters.level4}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { level4: value }, changes: { level4: value },
}) })
) )
} }
/> />
</div> </div>
<div className={styles.divider}/> <div />
<div className={styles.container}> <div>
Level 5 Level 5
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.level5} parameter={parameters.level5}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { level5: value }, changes: { level5: value },
}) })
) )
} }
/> />
Level 6 Level 6
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.level6} parameter={parameters.level6}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { level6: value }, changes: { level6: value },
}) })
) )
} }
/> />
Level 7 Level 7
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.level7} parameter={parameters.level7}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { level7: value }, changes: { level7: value },
}) })
) )
} }
/> />
Level 8 Level 8
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.level8} parameter={parameters.level8}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { level8: value }, changes: { level8: value },
}) })
) )
} }
/> />
</div> </div>
</div> </div>
); );
} }
src/features/timbre/parameters/Mixer.js
+49 -51
View File
@@ -2,58 +2,56 @@ 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 { Slider } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
export default function Mixer(props) { export default function Mixer(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={styles.container}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
Volume 1 Volume 1
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.vol1} parameter={parameters.vol1}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { vol1: value }, changes: { vol1: value },
}) })
) )
} }
/> />
Volume 2 Volume 2
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.vol2} parameter={parameters.vol2}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { vol2: value }, changes: { vol2: value },
}) })
) )
} }
/> />
Volume 3 Volume 3
<Slider <Slider
className={styles.slider} min={0}
min={0} max={127}
max={127} parameter={parameters.vol3}
parameter={parameters.vol3} onChange={(value) =>
onChange={(value) => dispatch(
dispatch( parameterUpdated({
parameterUpdated({ id: props.id,
id: props.id, changes: { vol3: value },
changes: { vol3: value }, })
}) )
) }
} />
/> </div>
</div> );
);
} }
src/features/timbre/parameters/ModFX.js
+7 -8
View File
@@ -2,15 +2,14 @@ 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, SelectList, Checkbox } from '../../helpers/Helpers'; import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
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 className={styles.container}> <div>
<span className={styles.header}>Mod FX</span> <span>Mod FX</span>
Mod Type Mod Type
<SelectList <SelectList
value={parameters.type} value={parameters.type}
@@ -65,8 +64,8 @@ const Delay = (props) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className={styles.container}> <div>
<span className={styles.header}>Delay</span> <span>Delay</span>
Delay Type Delay Type
<SelectList <SelectList
value={parameters.type} value={parameters.type}
@@ -85,7 +84,7 @@ const Delay = (props) => {
} }
/> />
<Checkbox <Checkbox
name="Tempo Sync" name='Tempo Sync'
parameter={parameters.tempoSync} parameter={parameters.tempoSync}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
@@ -169,8 +168,8 @@ const EQ = (props) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className={styles.container}> <div>
<span className={styles.header}>EQ</span> <span>EQ</span>
Low EQ Frequency Low EQ Frequency
<SelectList <SelectList
labelFunction={(e) => `${e.value}kHz`} labelFunction={(e) => `${e.value}kHz`}
src/features/timbre/parameters/Pans.js
+126 -127
View File
@@ -1,133 +1,132 @@
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 { Slider } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
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 className={styles.horizontalContainer}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
<div className={styles.container}> <div>
Pan 1 Pan 1
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.pan1} parameter={parameters.pan1}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { pan1: value }, changes: { pan1: value },
}) })
) )
} }
/> />
Pan 2 Pan 2
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.pan2} parameter={parameters.pan2}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { pan2: value }, changes: { pan2: value },
}) })
) )
} }
/> />
Pan 3 Pan 3
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.pan3} parameter={parameters.pan3}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { pan3: value }, changes: { pan3: value },
}) })
) )
} }
/> />
Pan 4 Pan 4
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.pan4} parameter={parameters.pan4}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { pan4: value }, changes: { pan4: value },
}) })
) )
} }
/> />
</div> </div>
<div className={styles.divider}/> <div />
<div className={styles.container}> <div>
Pan 5 Pan 5
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.pan5} parameter={parameters.pan5}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { pan5: value }, changes: { pan5: value },
}) })
) )
} }
/> />
Pan 6 Pan 6
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.pan6} parameter={parameters.pan6}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { pan6: value }, changes: { pan6: value },
}) })
) )
} }
/> />
Pan 7 Pan 7
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.pan7} parameter={parameters.pan7}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { pan7: value }, changes: { pan7: value },
}) })
) )
} }
/> />
Pan 8 Pan 8
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.pan8} parameter={parameters.pan8}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { pan8: value }, changes: { pan8: value },
}) })
) )
} }
/> />
</div> </div>
</div> </div>
); );
} }
src/features/timbre/parameters/Parameters.module.css
-98
View File
@@ -1,98 +0,0 @@
.container,
.lfo,
.horizontalContainer,
.patchesContainer {
border: solid 1pt slategrey;
border-radius: 6px;
}
.container,
.lfo {
position: relative;
font-size: small;
display: inline-flex;
flex-direction: column;
justify-content: center;
padding: 16pt;
margin: 10pt;
min-width: 15%;
height: 214px;
line-height: 1.5em;
}
.lfo {
height: 250px;
}
.lfo > *,
.container > * {
margin: 3pt 0;
}
.header {
font-size: 1.5em;
line-height: 1.25em;
text-align: center;
background-color: white;
padding: 0 0.25em 0.075em;
border-left: 1px solid slategrey;
border-right: 1px solid slategrey;
box-sizing: border-box;
}
.lfo > .header,
.container > .header {
position: absolute;
top: -7.5%;
left: 12%;
}
.horizontalContainer > .header,
.patchesContainer > .header {
position: absolute;
top: -5.25%;
left: 6%;
}
.horizontalContainer {
position: relative;
font-size: small;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 16pt 8pt 16pt 8pt;
margin: 10pt;
width: 448px;
height: 214px;
}
.patchesContainer {
position: relative;
font-size: small;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 16pt 8pt 16pt 8pt;
margin: 10pt;
width: 680px;
height: 250px;
}
.horizontalContainer > .container,
.patchesContainer > .container {
padding: 0 16pt;
width: 100%;
margin: 10pt 0;
border: none;
}
.divider {
height: 214px;
width: 2px;
background-color: slategrey;
margin: 0 8pt;
}
.patchesContainer > .divider {
width: 4px;
}
src/features/timbre/parameters/Patches.js
+117 -118
View File
@@ -2,128 +2,127 @@ 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, SelectList } from '../../helpers/Helpers'; import { Slider, SelectList } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
const Patch = (props) => { const Patch = (props) => {
return ( return (
<div className={styles.container}> <div>
Source Source
<SelectList <SelectList
value={props.patch.source} value={props.patch.source}
list={[ list={[
{ value: 'Filter EG' }, { value: 'Filter EG' },
{ value: 'Amp Eg' }, { value: 'Amp Eg' },
{ value: 'LFO 1' }, { value: 'LFO 1' },
{ value: 'LFO 2' }, { value: 'LFO 2' },
{ value: 'Velocity' }, { value: 'Velocity' },
{ value: 'Keyboard Track' }, { value: 'Keyboard Track' },
{ value: 'Pitch Bend' }, { value: 'Pitch Bend' },
{ value: 'Mod Wheel' }, { value: 'Mod Wheel' },
]} ]}
onChange={(value) => onChange={(value) =>
props.onChange({ props.onChange({
source: value, source: value,
destination: props.patch.destination, destination: props.patch.destination,
modIntensity: props.patch.modIntensity, modIntensity: props.patch.modIntensity,
}) })
} }
/> />
Destination Destination
<SelectList <SelectList
value={props.patch.destination} value={props.patch.destination}
list={[ list={[
{ value: 'Pitch' }, { value: 'Pitch' },
{ value: 'OSC 2 Tune' }, { value: 'OSC 2 Tune' },
{ value: 'OSC 1 Control 1' }, { value: 'OSC 1 Control 1' },
{ value: 'Noise Level' }, { value: 'Noise Level' },
{ value: 'Cutoff' }, { value: 'Cutoff' },
{ value: 'Amp' }, { value: 'Amp' },
{ value: 'Pan' }, { value: 'Pan' },
{ value: 'LFO 2 Frequency' }, { value: 'LFO 2 Frequency' },
]} ]}
onChange={(value) => onChange={(value) =>
props.onChange({ props.onChange({
source: props.patch.source, source: props.patch.source,
destination: value, destination: value,
modIntensity: props.patch.modIntensity, modIntensity: props.patch.modIntensity,
}) })
} }
/> />
Mod Intensity Mod Intensity
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={props.patch.modIntensity} parameter={props.patch.modIntensity}
onChange={(value) => onChange={(value) =>
props.onChange({ props.onChange({
source: props.patch.source, source: props.patch.source,
destination: props.patch.destination, destination: props.patch.destination,
modIntensity: value, modIntensity: value,
}) })
} }
/> />
</div> </div>
); );
}; };
export default function Patches(props) { export default function Patches(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 id="patches" className={styles.patchesContainer}> <div id='patches'>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
<Patch <Patch
patch={parameters.patch1} patch={parameters.patch1}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { changes: {
patch1: value, patch1: value,
}, },
}) })
) )
} }
/> />
<div className={styles.divider} /> <div />
<Patch <Patch
patch={parameters.patch2} patch={parameters.patch2}
onChange={(value, parameter) => onChange={(value, parameter) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { changes: {
patch2: value, patch2: value,
}, },
}) })
) )
} }
/> />
<div className={styles.divider} /> <div />
<Patch <Patch
patch={parameters.patch3} patch={parameters.patch3}
onChange={(value, parameter) => onChange={(value, parameter) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { patch3: value }, changes: { patch3: value },
}) })
) )
} }
/> />
<div className={styles.divider} /> <div />
<Patch <Patch
patch={parameters.patch4} patch={parameters.patch4}
onChange={(value, parameter) => onChange={(value, parameter) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { patch4: value }, changes: { patch4: value },
}) })
) )
} }
/> />
</div> </div>
); );
} }
src/features/timbre/parameters/Pitch.js
+122 -127
View File
@@ -2,134 +2,129 @@ 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, SelectList } from '../../helpers/Helpers'; import { Slider, SelectList } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
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));
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className={styles.horizontalContainer}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
<div className={styles.container}> <div>
Voice Assign Voice Assign
<SelectList <SelectList
value={parameters.voiceAssign} value={parameters.voiceAssign}
list={[ list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
{ value: 'Mono' }, onChange={(value) =>
{ value: 'Poly' }, dispatch(
{ value: 'Unison' }, parameterUpdated({
]} id: props.id,
onChange={(value) => changes: { voiceAssign: value },
dispatch( })
parameterUpdated({ )
id: props.id, }
changes: { voiceAssign: value }, />
}) Trigger Mode
) <SelectList
} value={parameters.triggerMode}
/> list={[{ value: 'Single' }, { value: 'Multiple' }]}
Trigger Mode onChange={(value) =>
<SelectList dispatch(
value={parameters.triggerMode} parameterUpdated({
list={[{ value: 'Single' }, { value: 'Multiple' }]} id: props.id,
onChange={(value) => changes: { triggerMode: value },
dispatch( })
parameterUpdated({ )
id: props.id, }
changes: { triggerMode: value }, />
}) Transpose
) <Slider
} parameter={parameters.transpose}
/> min={-24}
Transpose max={24}
<Slider onChange={(value) =>
parameter={parameters.transpose} dispatch(
min={-24} parameterUpdated({
max={24} id: props.id,
onChange={(value) => changes: { transpose: value },
dispatch( })
parameterUpdated({ )
id: props.id, }
changes: { transpose: value }, />
}) </div>
) <div />
} <div>
/> Tune
</div> <Slider
<div className={styles.divider} /> parameter={parameters.tune}
<div className={styles.container}> min={-50}
Tune max={50}
<Slider onChange={(value) =>
parameter={parameters.tune} dispatch(
min={-50} parameterUpdated({
max={50} id: props.id,
onChange={(value) => changes: { tune: value },
dispatch( })
parameterUpdated({ )
id: props.id, }
changes: { tune: value }, />
}) Unisone Detune
) <Slider
} parameter={parameters.unisonDetune}
/> min={0}
Unisone Detune max={99}
<Slider onChange={(value) =>
parameter={parameters.unisonDetune} dispatch(
min={0} parameterUpdated({
max={99} id: props.id,
onChange={(value) => changes: { unisonDetune: value },
dispatch( })
parameterUpdated({ )
id: props.id, }
changes: { unisonDetune: value }, />
}) Portamento
) <Slider
} parameter={parameters.portamento}
/> min={0}
Portamento max={127}
<Slider onChange={(value) =>
parameter={parameters.portamento} dispatch(
min={0} parameterUpdated({
max={127} id: props.id,
onChange={(value) => changes: { portamento: value },
dispatch( })
parameterUpdated({ )
id: props.id, }
changes: { portamento: value }, />
}) Bend Range
) <Slider
} parameter={parameters.bendRange}
/> min={-12}
Bend Range max={12}
<Slider onChange={(value) =>
parameter={parameters.bendRange} dispatch(
min={-12} parameterUpdated({
max={12} id: props.id,
onChange={(value) => changes: { bendRange: value },
dispatch( })
parameterUpdated({ )
id: props.id, }
changes: { bendRange: value }, />
}) Vibrato Intensity
) <Slider
} parameter={parameters.vibratoIntensity}
/> min={-63}
Vibrato Intensity max={63}
<Slider onChange={(value) =>
parameter={parameters.vibratoIntensity} dispatch(
min={-63} parameterUpdated({
max={63} id: props.id,
onChange={(value) => changes: { vibratoIntensity: value },
dispatch( })
parameterUpdated({ )
id: props.id, }
changes: { vibratoIntensity: value }, />
}) </div>
) </div>
} );
/>
</div>
</div>
);
} }
src/features/timbre/parameters/VCO.js
+122 -123
View File
@@ -2,134 +2,133 @@ 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, SelectList, Checkbox } from '../../helpers/Helpers'; import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
import styles from './Parameters.module.css';
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));
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div className={styles.container}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
Waveform Waveform
<SelectList <SelectList
value={parameters.waveform} value={parameters.waveform}
list={props.waveforms} list={props.waveforms}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { waveform: value }, changes: { waveform: value },
}) })
) )
} }
/> />
{`${props.dwgsOrModTypeName}`} {`${props.dwgsOrModTypeName}`}
<SelectList <SelectList
value={parameters.dwgsOrModType} value={parameters.dwgsOrModType}
list={props.dwgsOrModType} list={props.dwgsOrModType}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { dwgsOrModType: value }, changes: { dwgsOrModType: value },
}) })
) )
} }
/> />
Waveform Mod Waveform Mod
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.waveMod} parameter={parameters.waveMod}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { waveMod: value }, changes: { waveMod: value },
}) })
) )
} }
/> />
LFO Mod LFO Mod
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.lfoMod} parameter={parameters.lfoMod}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { lfoMod: value }, changes: { lfoMod: value },
}) })
) )
} }
/> />
</div> </div>
); );
} }
export const AudioIn = (props) => { export const AudioIn = (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={styles.container}> <div>
<span className={styles.header}>{`${props.name}`}</span> <span>{`${props.name}`}</span>
Gate Gate
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.gate} parameter={parameters.gate}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { gate: value }, changes: { gate: value },
}) })
) )
} }
/> />
Threshold Threshold
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.threshold} parameter={parameters.threshold}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { threshold: value }, changes: { threshold: value },
}) })
) )
} }
/> />
HPF Level HPF Level
<Slider <Slider
min={0} min={0}
max={127} max={127}
parameter={parameters.hpfLevel} parameter={parameters.hpfLevel}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { hpfLevel: value }, changes: { hpfLevel: value },
}) })
) )
} }
/> />
<Checkbox <Checkbox
name="HPF Gate" name='HPF Gate'
parameter={parameters.hpfGate} parameter={parameters.hpfGate}
onChange={(value) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { hpfGate: value }, changes: { hpfGate: value },
}) })
) )
} }
/> />
</div> </div>
); );
}; };
src/features/timbre/timbreSwitcher.js
+8 -14
View File
@@ -5,24 +5,18 @@ import Effects from './Effects';
import Arpeggio from './Arpeggio'; import Arpeggio from './Arpeggio';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import styles from './Timbre.module.css';
export default function TimbreSwitcher() { export default function TimbreSwitcher() {
const index = useSelector((state) => state.parameters.tabIndex); const index = useSelector((state) => state.parameters.tabIndex);
return ( return (
<div className={styles.tabs}> <div>
<Tabs <Tabs selectedIndex={index} onSelect={() => {}}>
className={styles.tabs} <TabList>
selectedIndex={index} <Tab>Timbre 1</Tab>
onSelect={() => {}} <Tab>Timbre 2</Tab>
selectedTabClassName={styles.selected} <Tab>Vocoder</Tab>
selectedTabPanelClassName={styles.tabPanel}> <Tab>Effects</Tab>
<TabList className={styles.tabList}> <Tab>Arpeggio</Tab>
<Tab className={styles.tab}>Timbre 1</Tab>
<Tab className={styles.tab}>Timbre 2</Tab>
<Tab className={styles.tab}>Vocoder</Tab>
<Tab className={styles.tab}>Effects</Tab>
<Tab className={styles.tab}>Arpeggio</Tab>
</TabList> </TabList>
<TabPanel> <TabPanel>
src/features/utils/components.js
+14
View File
@@ -0,0 +1,14 @@
const Select = (props) => {
return (
<select
className={props.className}
onChange={(e) => props.onChange(e.target.value)}
value={props.value}>
{props.list.map((element) => (
<option value={element.value}>{element.value}</option>
))}
</select>
);
};
export { Select };
src/index.css
+4
View File
@@ -13,3 +13,7 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js
+11
View File
@@ -0,0 +1,11 @@
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require('@tailwindcss/forms')],
};