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

Squashed commit of the following:

Browse Source 
commit 822f2d6527d161a29ed9d2603ae73c416ec04c37
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 15:33:17 2020 -0500

    Squashed commit of the following:

    commit 8853f3122e77188a987b5a2585fc61aa137fddab
    Author: [poww10s] <[theironminer@gmail.com]>
    Date:   Thu Nov 19 15:24:23 2020 -0500

        Squashed commit of the following:

        commit 47b74abadfd125b90c883d43786149a51bb7cdba
        Author: [poww10s] <[theironminer@gmail.com]>
        Date:   Thu Nov 19 14:15:03 2020 -0500

            custom rc-slider style and include

        commit b2d1161cbc7eabb6a2c512606b66104084c25754
        Author: [poww10s] <[theironminer@gmail.com]>
        Date:   Thu Nov 19 14:14:45 2020 -0500

            include rc-slider package

    commit fca611edc959935b09dcd70cfaa737680f22d559
    Author: [poww10s] <[theironminer@gmail.com]>
    Date:   Thu Nov 19 03:09:47 2020 -0500

        add styled-components

commit 86bec44f1ea5f631107aad0c561a5788728946c8
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:13:09 2020 -0500

    added timbre2 to App

commit d1c275b9915861fde8ca9225e5dcb591c707949d
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:13:00 2020 -0500

    updated parameterSlice with correct ID's

commit 3e694c135722c4c63c489e6c2691b18fea4f977a
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:12:30 2020 -0500

    added timbre reducer to store

commit 251693a3fd35aca039de51dda79a17e4154afb89
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:12:11 2020 -0500

    added support for seperate timbres

commit a2b24c1e6f7cf1b95bfeffb828418319932658ec
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:11:54 2020 -0500

    added timbreSlice
This commit is contained in:
[poww10s]
2020-11-19 15:33:42 -05:00
parent fcf45a690c
commit 0f8991695f
17 changed files with 881 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+160
View File
@@ -1168,6 +1168,29 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
"@emotion/is-prop-valid": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
"requires": {
"@emotion/memoize": "0.7.4"
}
},
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
"@emotion/stylis": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
},
"@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
"@eslint/eslintrc": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz",
@@ -3407,6 +3430,22 @@
"resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz",
"integrity": "sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw=="
},
"babel-plugin-styled-components": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz",
"integrity": "sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==",
"requires": {
"@babel/helper-annotate-as-pure": "^7.0.0",
"@babel/helper-module-imports": "^7.0.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"lodash": "^4.17.11"
}
},
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
},
"babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3967,6 +4006,11 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
"integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
},
"camelize": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
},
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4103,6 +4147,11 @@
}
}
},
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
},
"clean-css": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4582,6 +4631,11 @@
"postcss": "^7.0.5"
}
},
"css-color-keywords": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
},
"css-color-names": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4665,6 +4719,16 @@
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
},
"css-to-react-native": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
"requires": {
"camelize": "^1.0.0",
"css-color-keywords": "^1.0.0",
"postcss-value-parser": "^4.0.2"
}
},
"css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -5175,6 +5239,11 @@
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz",
"integrity": "sha512-PzwHEmsRP3IGY4gv/Ug+rMeaTIyTJvadCb+ujYXYeIylbHJezIyNToe8KfEgHTCEYyC+/bUghYOGg8yMGlZ6vA=="
},
"dom-align": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz",
"integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA=="
},
"dom-converter": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -12395,6 +12464,70 @@
}
}
},
"rc-align": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.9.tgz",
"integrity": "sha512-myAM2R4qoB6LqBul0leaqY8gFaiECDJ3MtQDmzDo9xM9NRT/04TvWOYd2YHU9zvGzqk9QXF6S9/MifzSKDZeMw==",
"requires": {
"@babel/runtime": "^7.10.1",
"classnames": "2.x",
"dom-align": "^1.7.0",
"rc-util": "^5.3.0",
"resize-observer-polyfill": "^1.5.1"
}
},
"rc-motion": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.3.4.tgz",
"integrity": "sha512-La9JjfM58Vrwds1wM9OAkRTWsGeVqNnftI1YFti2WtaA2Ernk2vjbVio9hGbzhF0EvGrEvrzS96Mx/6lGT6Z0w==",
"requires": {
"@babel/runtime": "^7.11.1",
"classnames": "^2.2.1",
"rc-util": "^5.2.1"
}
},
"rc-slider": {
"version": "9.6.3",
"resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.6.3.tgz",
"integrity": "sha512-qLEDQ6FKPDmzWgF7WQ8otf41z53YKSgiSeoec50H1IMz7xLwwXX9+luDYI08br3x8i6u8jIZtggN5RD1ftKnhw==",
"requires": {
"@babel/runtime": "^7.10.1",
"classnames": "^2.2.5",
"rc-tooltip": "^5.0.1",
"rc-util": "^5.0.0",
"shallowequal": "^1.1.0"
}
},
"rc-tooltip": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-5.0.1.tgz",
"integrity": "sha512-3AnxhUS0j74xAV3khrKw8o6rg+Ima3nw09DJBezMPnX3ImQUAnayWsPSlN1mEnihjA43rcFkGM1emiKE+CXyMQ==",
"requires": {
"@babel/runtime": "^7.11.2",
"rc-trigger": "^5.0.0"
}
},
"rc-trigger": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.1.2.tgz",
"integrity": "sha512-A6UdDy95masAEIaNmazPtqHW1EOFDWi2C2bJGDpr9OYpmObDpWKdxyNijVbFb6l1viTkAU9d3FyStgNPddgFzw==",
"requires": {
"@babel/runtime": "^7.11.2",
"classnames": "^2.2.6",
"rc-align": "^4.0.0",
"rc-motion": "^2.0.0",
"rc-util": "^5.5.0"
}
},
"rc-util": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.5.0.tgz",
"integrity": "sha512-YJB+zZGvCll/bhxXRVLAekr7lOvTgqMlRIhgINoINfUek7wQvi5sft46NOi3yYUYhocpuW4k8+5okW46sBsZAQ==",
"requires": {
"react-is": "^16.12.0",
"shallowequal": "^1.1.0"
}
},
"react": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
@@ -12984,6 +13117,11 @@
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
"integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"resolve": {
"version": "1.18.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
@@ -13668,6 +13806,11 @@
"kind-of": "^6.0.2"
}
},
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -14406,6 +14549,23 @@
"schema-utils": "^2.7.0"
}
},
"styled-components": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
"integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/traverse": "^7.4.5",
"@emotion/is-prop-valid": "^0.8.8",
"@emotion/stylis": "^0.8.4",
"@emotion/unitless": "^0.7.4",
"babel-plugin-styled-components": ">= 1",
"css-to-react-native": "^3.0.0",
"hoist-non-react-statics": "^3.0.0",
"shallowequal": "^1.1.0",
"supports-color": "^5.5.0"
}
},
"stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
package.json
+6 -1
View File
@@ -7,10 +7,12 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"rc-slider": "^9.6.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-scripts": "4.0.0"
"react-scripts": "4.0.0",
"styled-components": "^5.2.1"
},
"scripts": {
"start": "react-scripts start",
@@ -32,5 +34,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-plugin-styled-components": "^1.11.1"
}
}
src/App.js
+2 -1
View File
@@ -6,7 +6,8 @@ function App() {
return (
<div className="App">
<header className="App-header">
<Timbre />
<Timbre id="timbre1" />
<Timbre id="timbre2" />
</header>
</div>
);
src/app/store.js
+2
View File
@@ -1,8 +1,10 @@
import { configureStore } from '@reduxjs/toolkit';
import timbreReducer from '../features/timbre/timbreSlice';
import parameterReducer from '../features/timbre/parameters/parameterSlice';
export default configureStore({
reducer: {
timbres: timbreReducer,
parameters: parameterReducer,
},
});
src/features/helpers/Helpers.js
+7 -6
View File
@@ -1,15 +1,17 @@
import React from 'react';
import styles from './Helpers.module.css';
import RCSlider, { createSliderWithTooltip } from 'rc-slider';
import './index.css';
const SliderWithToolTip = createSliderWithTooltip(RCSlider);
const Slider = (props) => {
return (
<input
className={styles.slider}
type="range"
<SliderWithToolTip
tipFormatter={(v) => `${v}`}
min={props.min}
max={props.max}
value={props.parameter}
onChange={(e) => props.onChange(e.target.value)}
onChange={(v) => props.onChange(v)}
/>
);
};
@@ -22,7 +24,6 @@ const SelectList = (props) => {
));
return (
<select
className={styles.dropdown}
value={props.value}
onChange={(e) => props.onChange(e.target.value)}>
{options}
src/features/helpers/Helpers.module.css
+249 -16
View File
@@ -1,21 +1,254 @@
.slider {
-webkit-appearance: none;
appearance: none;
outline: none;
height: 5px;
background-color: lightgray;
border-radius: 10px;
.rc-slider {
position: relative;
height: 14px;
padding: 5px 0;
width: 100%;
border-radius: 6px;
touch-action: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background: slategray;
height: 15px;
width: 15px;
.rc-slider * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
position: absolute;
width: 100%;
background-color: #e9e9e9;
height: 4px;
border-radius: 6px;
}
.rc-slider-track {
position: absolute;
left: 0;
height: 4px;
border-radius: 6px;
background-color: #abe2fb;
}
.rc-slider-handle {
position: absolute;
width: 14px;
height: 14px;
cursor: pointer;
cursor: -webkit-grab;
margin-top: -5px;
cursor: grab;
border-radius: 50%;
transition: background 0.15s ease-in-out;
border: solid 2px #96dbfa;
background-color: #fff;
touch-action: pan-x;
}
.slider::-webkit-slider-thumb:hover {
background: slateblue;
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
border-color: #57c5f7;
box-shadow: 0 0 0 5px #96dbfa;
}
.rc-slider-handle:focus {
outline: none;
}
.rc-slider-handle-click-focused:focus {
border-color: #96dbfa;
box-shadow: unset;
}
.rc-slider-handle:hover {
border-color: #57c5f7;
}
.rc-slider-handle:active {
border-color: #57c5f7;
box-shadow: 0 0 5px #57c5f7;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.rc-slider-mark {
position: absolute;
top: 18px;
left: 0;
width: 100%;
font-size: 12px;
}
.rc-slider-mark-text {
position: absolute;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
color: #999;
}
.rc-slider-mark-text-active {
color: #666;
}
.rc-slider-step {
position: absolute;
width: 100%;
height: 4px;
background: transparent;
}
.rc-slider-dot {
position: absolute;
bottom: -2px;
margin-left: -4px;
width: 8px;
height: 8px;
border: 2px solid #e9e9e9;
background-color: #fff;
cursor: pointer;
border-radius: 50%;
vertical-align: middle;
}
.rc-slider-dot-active {
border-color: #96dbfa;
}
.rc-slider-dot-reverse {
margin-right: -4px;
}
.rc-slider-disabled {
background-color: #e9e9e9;
}
.rc-slider-disabled .rc-slider-track {
background-color: #ccc;
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
border-color: #ccc;
box-shadow: none;
background-color: #fff;
cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
cursor: not-allowed !important;
}
.rc-slider-vertical {
width: 14px;
height: 100%;
padding: 0 5px;
}
.rc-slider-vertical .rc-slider-rail {
height: 100%;
width: 4px;
}
.rc-slider-vertical .rc-slider-track {
left: 5px;
bottom: 0;
width: 4px;
}
.rc-slider-vertical .rc-slider-handle {
margin-left: -5px;
touch-action: pan-y;
}
.rc-slider-vertical .rc-slider-mark {
top: 0;
left: 18px;
height: 100%;
}
.rc-slider-vertical .rc-slider-step {
height: 100%;
width: 4px;
}
.rc-slider-vertical .rc-slider-dot {
left: 2px;
margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:first-child {
margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:last-child {
margin-bottom: -4px;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
animation-duration: 0.3s;
animation-fill-mode: both;
display: block !important;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave {
animation-duration: 0.3s;
animation-fill-mode: both;
display: block !important;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
animation-name: rcSliderTooltipZoomDownIn;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
animation-name: rcSliderTooltipZoomDownOut;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
transform: scale(0, 0);
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes rcSliderTooltipZoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
100% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
}
@keyframes rcSliderTooltipZoomDownOut {
0% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
}
.rc-slider-tooltip {
position: absolute;
left: -9999px;
top: -9999px;
visibility: visible;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
display: none;
}
.rc-slider-tooltip-placement-top {
padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
padding: 6px 2px;
min-width: 24px;
height: 24px;
font-size: 12px;
line-height: 1;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #6c6c6c;
border-radius: 6px;
box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
bottom: 4px;
left: 50%;
margin-left: -4px;
border-width: 4px 4px 0;
border-top-color: #6c6c6c;
}
src/features/helpers/index.css
+251
View File
@@ -0,0 +1,251 @@
.rc-slider {
position: relative;
height: 14px;
padding: 5px 0;
width: 100%;
border-radius: 6px;
touch-action: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
margin: 5px 0;
}
.rc-slider * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
position: absolute;
width: 100%;
background-color: lightgray;
height: 4px;
border-radius: 6px;
}
.rc-slider-track {
position: absolute;
left: 0;
height: 4px;
border-radius: 6px;
background-color: lightgrey;
}
.rc-slider-handle {
position: absolute;
width: 14px;
height: 14px;
cursor: pointer;
cursor: -webkit-grab;
margin-top: -5px;
cursor: grab;
border-radius: 50%;
background-color: slategrey;
touch-action: pan-x;
}
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
background-color: slateblue;
}
.rc-slider-handle:focus {
outline: none;
}
.rc-slider-handle-click-focused:focus {
background-color: slateblue;
}
.rc-slider-handle:hover {
background-color: slateblue;
}
.rc-slider-handle:active {
background-color: slateblue;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.rc-slider-mark {
position: absolute;
top: 18px;
left: 0;
width: 100%;
font-size: 12px;
}
.rc-slider-mark-text {
position: absolute;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
color: #999;
}
.rc-slider-mark-text-active {
color: #666;
}
.rc-slider-step {
position: absolute;
width: 100%;
height: 4px;
background: transparent;
}
.rc-slider-dot {
position: absolute;
bottom: -2px;
margin-left: -4px;
width: 8px;
height: 8px;
border: 2px solid #e9e9e9;
background-color: #fff;
cursor: pointer;
border-radius: 50%;
vertical-align: middle;
}
.rc-slider-dot-active {
border-color: #96dbfa;
}
.rc-slider-dot-reverse {
margin-right: -4px;
}
.rc-slider-disabled {
background-color: #e9e9e9;
}
.rc-slider-disabled .rc-slider-track {
background-color: #ccc;
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
border-color: #ccc;
box-shadow: none;
background-color: #fff;
cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
cursor: not-allowed !important;
}
.rc-slider-vertical {
width: 14px;
height: 100%;
padding: 0 5px;
}
.rc-slider-vertical .rc-slider-rail {
height: 100%;
width: 4px;
}
.rc-slider-vertical .rc-slider-track {
left: 5px;
bottom: 0;
width: 4px;
}
.rc-slider-vertical .rc-slider-handle {
margin-left: -5px;
touch-action: pan-y;
}
.rc-slider-vertical .rc-slider-mark {
top: 0;
left: 18px;
height: 100%;
}
.rc-slider-vertical .rc-slider-step {
height: 100%;
width: 4px;
}
.rc-slider-vertical .rc-slider-dot {
left: 2px;
margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:first-child {
margin-bottom: -4px;
}
.rc-slider-vertical .rc-slider-dot:last-child {
margin-bottom: -4px;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
animation-duration: 0.3s;
animation-fill-mode: both;
display: block !important;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave {
animation-duration: 0.3s;
animation-fill-mode: both;
display: block !important;
animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
animation-name: rcSliderTooltipZoomDownIn;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
animation-name: rcSliderTooltipZoomDownOut;
animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
transform: scale(0, 0);
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes rcSliderTooltipZoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
100% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
}
@keyframes rcSliderTooltipZoomDownOut {
0% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
}
.rc-slider-tooltip {
position: absolute;
left: -9999px;
top: -9999px;
visibility: visible;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
display: none;
}
.rc-slider-tooltip-placement-top {
padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
padding: 6px 2px;
min-width: 24px;
height: 24px;
font-size: 12px;
line-height: 1;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #6c6c6c;
border-radius: 6px;
box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
bottom: 4px;
left: 50%;
margin-left: -4px;
border-width: 4px 4px 0;
border-top-color: #6c6c6c;
}
src/features/timbre/Timbre.js
+13 -10
View File
@@ -1,4 +1,5 @@
import React from 'react';
import { useSelector } from 'react-redux';
import VCO from './parameters/VCO';
import Mixer from './parameters/Mixer';
import Pitch from './parameters/Pitch';
@@ -6,6 +7,7 @@ import Filter from './parameters/Filter';
import EG from './parameters/EG';
import Amp from './parameters/Amp';
import LFO from './parameters/LFO';
import { selectById } from './timbreSlice.js';
const style = {
display: 'flex',
@@ -13,10 +15,11 @@ const style = {
};
export function Timbre(props) {
const ids = useSelector((state) => selectById(state, props.id));
return (
<div style={style}>
<VCO
id="vco1"
id={ids.vco1}
waveforms={[
'Saw',
'Square',
@@ -96,23 +99,23 @@ export function Timbre(props) {
]}
/>
<VCO
id="vco2"
id={ids.vco2}
waveforms={['Saw', 'Square', 'Triangle']}
dwgsOrModTypeName="Mod Type"
dwgsOrModType={['Off', 'Ring', 'Sync', 'RingSync']}
/>
<Mixer id="mixer1" />
<Pitch id="pitch1" />
<Filter id="filter1" />
<EG id="eg1" />
<Amp id="amp1" />
<EG id="eg2" />
<Mixer id={ids.mixer} />
<Pitch id={ids.pitch} />
<Filter id={ids.filter} />
<EG id={ids.eg1} />
<Amp id={ids.amp} />
<EG id={ids.eg2} />
<LFO
id="lfo1"
id={ids.lfo1}
waveforms={['Saw', 'Square 1', 'Triangle', 'Sample & Hold']}
/>
<LFO
id="lfo2"
id={ids.lfo2}
waveforms={['Saw', 'Square 2', 'Sine', 'Sample & Hold']}
/>
</div>
src/features/timbre/parameters/Amp.js
+6 -6
View File
@@ -12,8 +12,8 @@ export default function Amp(props) {
<div className={styles.container}>
<Slider
parameter={parameters.ampLevel}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -25,8 +25,8 @@ export default function Amp(props) {
/>
<Slider
parameter={parameters.panpot}
min="-63"
max="63"
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -38,8 +38,8 @@ export default function Amp(props) {
/>
<Slider
parameter={parameters.ampTrack}
min="-63"
max="63"
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
src/features/timbre/parameters/EG.js
+8 -8
View File
@@ -12,8 +12,8 @@ export default function EG(props) {
<div className={styles.container}>
<Slider
parameter={parameters.attack}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -25,8 +25,8 @@ export default function EG(props) {
/>
<Slider
parameter={parameters.decay}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -38,8 +38,8 @@ export default function EG(props) {
/>
<Slider
parameter={parameters.sustain}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -51,8 +51,8 @@ export default function EG(props) {
/>
<Slider
parameter={parameters.release}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
src/features/timbre/parameters/Filter.js
+8 -8
View File
@@ -29,8 +29,8 @@ export default function Filter(props) {
/>
<Slider
parameter={parameters.cutoff}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -42,8 +42,8 @@ export default function Filter(props) {
/>
<Slider
parameter={parameters.resonance}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -55,8 +55,8 @@ export default function Filter(props) {
/>
<Slider
parameter={parameters.egIntensity}
min="-63"
max="63"
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -68,8 +68,8 @@ export default function Filter(props) {
/>
<Slider
parameter={parameters.keyboardTrack}
min="-63"
max="63"
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
src/features/timbre/parameters/Mixer.js
+7
View File
@@ -11,6 +11,8 @@ export default function Mixer(props) {
return (
<div className={styles.container}>
<Slider
min={0}
max={127}
parameter={parameters.vol1}
onChange={(value) =>
dispatch(
@@ -22,6 +24,8 @@ export default function Mixer(props) {
}
/>
<Slider
min={0}
max={127}
parameter={parameters.vol2}
onChange={(value) =>
dispatch(
@@ -33,6 +37,9 @@ export default function Mixer(props) {
}
/>
<Slider
className={styles.slider}
min={0}
max={127}
parameter={parameters.vol3}
onChange={(value) =>
dispatch(
src/features/timbre/parameters/Parameters.module.css
+3 -4
View File
@@ -6,10 +6,9 @@
padding: 10pt;
margin: 2pt;
border: solid 1pt black;
width: 120px;
flex-basis: 100%;
}
.container > input {
margin: 7pt 0;
}
.container > select {
.container > * {
margin: 2.5pt 0;
}
src/features/timbre/parameters/Pitch.js
+12 -12
View File
@@ -36,8 +36,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.transpose}
min="-24"
max="24"
min={-24}
max={24}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -49,8 +49,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.tune}
min="-50"
max="50"
min={-50}
max={50}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -62,8 +62,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.unisonDetune}
min="0"
max="99"
min={0}
max={99}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -75,8 +75,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.portamento}
min="0"
max="127"
min={0}
max={127}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -88,8 +88,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.bendRange}
min="-12"
max="12"
min={-12}
max={12}
onChange={(value) =>
dispatch(
parameterUpdated({
@@ -101,8 +101,8 @@ export default function Pitch(props) {
/>
<Slider
parameter={parameters.vibratoIntensity}
min="-63"
max="63"
min={-63}
max={63}
onChange={(value) =>
dispatch(
parameterUpdated({
src/features/timbre/parameters/VCO.js
+4 -4
View File
@@ -38,8 +38,8 @@ export default function VCO(props) {
/>
Waveform Mod
<Slider
min="0"
max="100"
min={0}
max={100}
parameter={parameters.waveMod}
onChange={(value) =>
dispatch(
@@ -52,8 +52,8 @@ export default function VCO(props) {
/>
LFO Mod
<Slider
min="0"
max="100"
min={0}
max={100}
parameter={parameters.lfoMod}
onChange={(value) =>
dispatch(
src/features/timbre/parameters/parameterSlice.js
+88 -1
View File
@@ -9,7 +9,7 @@ const parametersSlice = createSlice({
'vco1',
'vco2',
'mixer1',
'timbre1',
'pitch1',
'filter1',
'eg1',
'amp1',
@@ -17,6 +17,17 @@ const parametersSlice = createSlice({
'lfo1',
'lfo2',
'patches1',
'vco3',
'vco4',
'mixer2',
'pitch2',
'filter2',
'eg3',
'amp2',
'eg4',
'lfo3',
'lfo4',
'patches2',
],
entities: {
'vco1': {
@@ -33,12 +44,32 @@ const parametersSlice = createSlice({
waveMod: 0,
lfoMod: 0,
},
'vco3': {
id: 'vco3',
waveform: 'Sine',
dwgsOrModType: 0,
waveMod: 100,
lfoMod: 0,
},
'vco4': {
id: 'vco4',
waveform: 'Triangle',
dwgsOrModType: 0,
waveMod: 0,
lfoMod: 100,
},
'mixer1': {
id: 'mixer1',
vol1: 127,
vol2: 0,
vol3: 0,
},
'mixer2': {
id: 'mixer2',
vol1: 127,
vol2: 0,
vol3: 0,
},
'pitch1': {
id: 'pitch1',
voiceAssign: 'Mono',
@@ -50,6 +81,17 @@ const parametersSlice = createSlice({
bendRange: 0,
vibratoIntensity: 0,
},
'pitch2': {
id: 'pitch2',
voiceAssign: 'Mono',
triggerMode: 'Single',
transpose: 0,
tune: 0,
unisonDetune: 0,
portamento: 0,
bendRange: 0,
vibratoIntensity: 0,
},
'filter1': {
id: 'filter1',
filterType: '-24db Low Pass',
@@ -58,6 +100,14 @@ const parametersSlice = createSlice({
egIntensity: 0,
keyboardTrack: 0,
},
'filter2': {
id: 'filter2',
filterType: '-24db Low Pass',
cutoff: 0,
resonance: 0,
egIntensity: 0,
keyboardTrack: 0,
},
'eg1': {
id: 'eg1',
attack: 0,
@@ -81,6 +131,29 @@ const parametersSlice = createSlice({
release: 0,
egReset: true,
},
'eg3': {
id: 'eg3',
attack: 0,
decay: 0,
sustain: 127,
release: 0,
egReset: false,
},
'amp2': {
id: 'amp2',
ampLevel: 127,
panpot: 0,
ampTrack: 0,
distortion: false,
},
'eg4': {
id: 'eg4',
attack: 0,
decay: 0,
sustain: 127,
release: 0,
egReset: true,
},
'lfo1': {
id: 'lfo1',
waveform: 'Saw',
@@ -95,6 +168,20 @@ const parametersSlice = createSlice({
tempoSync: false,
frequency: 0,
},
'lfo3': {
id: 'lfo3',
waveform: 'Saw',
keySync: 'Off',
tempoSync: false,
frequency: 0,
},
'lfo4': {
id: 'lfo4',
waveform: 'Saw',
keySync: 'Off',
tempoSync: false,
frequency: 0,
},
},
}),
reducers: {
src/features/timbre/timbreSlice.js
+55
View File
@@ -0,0 +1,55 @@
import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';
const timbreAdapter = createEntityAdapter({});
const timbreSlice = createSlice({
name: 'timbre',
initialState: timbreAdapter.getInitialState({
ids: ['timbre1', 'timbre2', 'vocoder', 'effects', 'arpeggiator'],
entities: {
'timbre1': {
id: 'timbre1',
vco1: 'vco1',
vco2: 'vco2',
mixer: 'mixer1',
pitch: 'pitch1',
filter: 'filter1',
eg1: 'eg1',
amp: 'amp1',
eg2: 'eg2',
lfo1: 'lfo1',
lfo2: 'lfo2',
patches: 'patches1',
},
'timbre2': {
id: 'timbre2',
vco1: 'vco3',
vco2: 'vco4',
mixer: 'mixer2',
pitch: 'pitch2',
filter: 'filter2',
eg1: 'eg3',
amp: 'amp2',
eg2: 'eg4',
lfo1: 'lfo3',
lfo2: 'lfo4',
patches: 'patches2',
},
},
}),
reducers: {
timbreAdded: timbreAdapter.addOne,
timbreUpdated: timbreAdapter.updateOne,
},
});
export const {
selectById,
selectAll,
selectEntities,
selectIds,
} = timbreAdapter.getSelectors((state) => state.timbres);
export const { timbreAdded, timbreUpdated } = timbreSlice.actions;
export default timbreSlice.reducer;