Merge pull request #19 from oscarrc/dev

[MOD] Read and display user programs' names when selected
oscarrc · Mar 6, 2021 · 7c1280d · 7c1280d
2 parents 1444e70 + af1e1d6
commit 7c1280d
Show file tree

Hide file tree

Showing 20 changed files with 22,842 additions and 158 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,9 @@
 
 # production
 /build
+/android
+/electron
+/dist
 
 # misc
 .DS_Store

diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ This is still a work in progress, so expect some bugs and issues.
 #### TODOs
 
 - [ ] Implement midi passthrough (in progress, but [I need a controller for testing](https://ko-fi.com/oscarrc))
-- [ ] Get names of user oscilators and effects (I already how to do it, I just need to implement it)
+- [*] Get names of user oscilators and effects (I already how to do it, I just need to implement it)
 
 If you miss any feature, please, request it.
 

diff --git a/capacitor.config.json b/capacitor.config.json
@@ -0,0 +1,14 @@
+{
+  "appId": "me.oscarrc.ntsweb",
+  "appName": "nts-web",
+  "bundledWebRuntime": false,
+  "backgroundColor": "#212122",
+  "npmClient": "npm",
+  "webDir": "build",
+  "plugins": {
+    "SplashScreen": {
+      "launchShowDuration": 0
+    }
+  },
+  "cordova": {}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,9 +1,14 @@
 {
   "name": "nts-web",
+  "description": "NTS-1 web based editor and controller",
   "version": "2.0.0",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
+    "@capacitor-community/electron": "^1.3.4",
+    "@capacitor/android": "^2.4.6",
+    "@capacitor/cli": "^2.4.6",
+    "@capacitor/core": "^2.4.6",
     "@reduxjs/toolkit": "^1.5.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
@@ -32,10 +37,12 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "postbuild": "npx cap copy android && npx cap copy @capacitor-community/electron",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build && cp build/index.html build/200.html",
-    "deploy": "surge build nts-web.oscarrc.me"
+    "deploy": "surge build nts-web.oscarrc.me",
+    "postdeploy": "electron-packager electron/ nts-web --platform=win32 --arch=arm64 --arch=ia32 --arch=x64 --overwrite --out=dist"
   },
   "eslintConfig": {
     "extends": [

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/icon.png b/public/icon.png
diff --git a/public/logo192.png → public/icon192.png b/public/logo192.png → public/icon192.png
diff --git a/public/logo512.png → public/icon512.png b/public/logo512.png → public/icon512.png
diff --git a/public/index.html b/public/index.html
@@ -21,7 +21,7 @@
     <meta property="og:image" content="%PUBLIC_URL%/assets/img/screenshot.png" />
 
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/icon192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   </head>
   <body>

diff --git a/public/logoMaskable.png b/public/logoMaskable.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -9,7 +9,7 @@
       "sizes": "1600x1045"
     }
   ],
-  "categories": ["Music"],
+  "categories": ["Music", "Midi", "Synthesizer"],
   "dir": "ltr",
   "lang": "en",
   "icons": [
@@ -19,17 +19,17 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "icon192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "icon512.png",
       "type": "image/png",
       "sizes": "512x512"
     },
     {
-      "src": "logoMaskable.png",
+      "src": "icon.png",
       "type": "image/png",
       "sizes": "512x512",
       "purpose": "maskable"
@@ -39,5 +39,6 @@
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#f3cc62",
-  "background_color": "#212122"
+  "background_color": "#212122",
+  "orientation": "any"
 }
diff --git a/src/App.js b/src/App.js
@@ -38,9 +38,10 @@ function App(){
 			} else return Promise.reject("nodevice");
 
 			return midiGetUserPrograms(devices.inputDevice, devices.outputDevice, midiState.inputChannel, midiState.sysexVendor, midiState.sysexDevice, midiState.sysexChannel);
-		}).then( count => {			
-			dispatch({ type: "synth/setUserPrograms", payload: count});			
+		}).then( userProgs => {			
+			dispatch({ type: "synth/setUserPrograms", payload: userProgs});			
 		}).catch( err => {
+			console.log(err)
 			dispatch({ type: "display/setMessage", payload: err ? err : "error" });
 		});
 	}

diff --git a/src/components/layout/section.js b/src/components/layout/section.js
@@ -4,8 +4,6 @@ import { Row, Col, Divider } from 'antd';
 import { midiControlChange } from '../../utils/midi';
 import { Dropdown, Knob, Selector, Switch } from '../partials';
 
-import { strings } from '../../config/synth';
-
 export function Section(props) {
     const dispatch = useDispatch();
     const [ hovered, setHovered ] = useState(false);
@@ -73,7 +71,7 @@ export function Section(props) {
                             active={ isNaN(props.state[control.cc].active) ? 1 : props.state[control.cc].active }
                             svalue={ props.state[control.cc].svalue }
                             value={ props.state[control.cc].value }
-                            values={ strings[control.cc] }
+                            values={ props.strings[control.cc] }
                             step={ props.state[control.cc].step }
                             onChange={ controlChange }
                         />

diff --git a/src/components/views/synth.js b/src/components/views/synth.js
@@ -22,13 +22,13 @@ export function Synth() {
                     <Section section={controls.arp} state={ synthState.patches[synthState.bank] } midi={ midiState } loading={ loading } />
                 </Col>
                 <Col span={24} lg={10} xl={4}>
-                    <Section section={controls.amp} state={ synthState.patches[synthState.bank] } midi={ midiState } loading={ loading } />
+                    <Section section={controls.amp} state={ synthState.patches[synthState.bank] } strings={synthState.strings} midi={ midiState } loading={ loading } />
                 </Col>
                 <Col span={24} lg={12} xl={6}>
                     <Section section={controls.effects} state={ synthState.patches[synthState.bank] } midi={ midiState } loading={ loading } />
                 </Col>
                 <Col span={24} lg={10} xl={4}>
-                    <Section section={controls.vcf} state={ synthState.patches[synthState.bank] } midi={ midiState } loading={ loading } />
+                    <Section section={controls.vcf} state={ synthState.patches[synthState.bank] } strings={synthState.strings} midi={ midiState } loading={ loading } />
                     <More />
                 </Col>
             </Row>

diff --git a/src/config/synth.js b/src/config/synth.js
@@ -270,23 +270,7 @@ const strings = {
         "Sawtooth",
         "Triangle",
         "Square",
-        "VPN",
-        "User 1",
-        "User 2",
-        "User 3",
-        "User 4 ",
-        "User 5",
-        "User 6",
-        "User 7",
-        "User 8",
-        "User 9",
-        "User 10",
-        "User 11",
-        "User 12",
-        "User 13",
-        "User 14",
-        "User 15",
-        "User 16"
+        "VPN"
     ],
     117: [
         "Up",
@@ -320,55 +304,23 @@ const strings = {
         "Chorus",
         "Ensemble",
         "Phaser",
-        "Flanger",
-        "User 1",
-        "User 2",
-        "User 3",
-        "User 4 ",
-        "User 5",
-        "User 6",
-        "User 7",
-        "User 8",
-        "User 9",
-        "User 10",
-        "User 11",
-        "User 12",
-        "User 13",
-        "User 14",
-        "User 15",
-        "User 16"
+        "Flanger"
     ],
     89: [
         "Off",
         "Stereo",
         "Mono",
         "Ping Pong",
         "High Pass",
-        "Tape",
-        "User 1",
-        "User 2",
-        "User 3",
-        "User 4 ",
-        "User 5",
-        "User 6",
-        "User 7",
-        "User 8"
+        "Tape"
     ],
     90: [
         "Off",
         "Hall",
         "Plate",
         "Space",
         "Riser",
-        "Submarine",
-        "User 1",
-        "User 2",
-        "User 3",
-        "User 4 ",
-        "User 5",
-        "User 6",
-        "User 7",
-        "User 8"
+        "Submarine"
     ],
     42: [
         "LowPass 2p",

diff --git a/src/redux/reducers/display.js b/src/redux/reducers/display.js
@@ -11,7 +11,10 @@ export const displaySlice = createSlice({
         state.value = action.payload
       },
       setMessage: (state, action) => {
-          state.value = messages[action.payload]
+          state.value = messages[action.payload] ? messages[action.payload] : {
+            title: "Error",
+            text: "Check the console for more info"
+          }
       }
   }
 });

diff --git a/src/redux/reducers/synth.js b/src/redux/reducers/synth.js
@@ -9,7 +9,7 @@ export const synthSlice = createSlice({
     value: {
         bank: 0,
         octave: 3,
-        conifg:{},
+        strings: strings,
         patches: [
           defaultPatch,
           defaultPatch,
@@ -34,11 +34,11 @@ export const synthSlice = createSlice({
         })
       },
       setControl: (state, action) => {
-        if(strings[action.payload.cc] && !isNaN(action.payload.val.value)){
-          let value = Math.round(action.payload.val.value / state.value.patches[state.value.bank][action.payload.cc].step);
+        if(state.value.strings[action.payload.cc] && !isNaN(action.payload.val.value)){
+          let value = Math.floor(action.payload.val.value / state.value.patches[state.value.bank][action.payload.cc].step);
           let index = value >= state.value.patches[state.value.bank][action.payload.cc].max ? state.value.patches[state.value.bank][action.payload.cc].max : value;
-          action.payload.val.svalue = strings[action.payload.cc][index];
-          if( strings[action.payload.cc][index] === "Off" ){
+          action.payload.val.svalue = state.value.strings[action.payload.cc][index];
+          if( state.value.strings[action.payload.cc][index] === "Off" ){
             action.payload.val.active = 0;
             delete action.payload.val.value;
             delete action.payload.val.svalue;
@@ -57,10 +57,11 @@ export const synthSlice = createSlice({
         state.value.octave = action.payload;
       },
       setUserPrograms: (state, action) => {
-        Object.keys(action.payload).forEach( k => { //TODO fix count and values has something to do with min
+        Object.keys(action.payload.count).forEach( k => {
+          state.value.strings[k] = strings[k].concat(action.payload.strings[k]);
           state.value.patches.forEach( p => {
             let value = Math.round(p[k].value / p[k].step);
-            p[k].max = p[k].max + action.payload[k];
+            p[k].max = p[k].max + action.payload.count[k];
             p[k].step =  Math.round(127/(p[k].max + 1));
             p[k].value = value * p[k].step
           })
@@ -76,7 +77,7 @@ export const synthSlice = createSlice({
 
           state.value.patches[state.value.bank][k].value = value < max  ? value * step : 127;
 
-          if(strings[k]) state.value.patches[state.value.bank][k].svalue = strings[k][value];
+          if(state.value.strings[k]) state.value.patches[state.value.bank][k].svalue = state.value.strings[k][value];
           if(!isNaN(active)) state.value.patches[state.value.bank][k].active = Math.random() < 0.5 ? 1 : 0;
         })
       },

diff --git a/src/serviceWorkerRegistration.js b/src/serviceWorkerRegistration.js
@@ -38,11 +38,14 @@ export function register(config) {
 
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
+        navigator.serviceWorker.ready.then((sw) => {
           console.log(
             'This web app is being served cache-first by a service ' +
               'worker. To learn more, visit https://cra.link/PWA'
           );
+
+          //Enable background sync
+          registerPeriodicSync(sw);
         });
       } else {
         // Is not localhost. Just register service worker
@@ -124,6 +127,30 @@ function checkValidServiceWorker(swUrl, config) {
     });
 }
 
+function registerPeriodicSync(sw){
+  if ('periodicSync' in sw) {
+    // Request permission
+    navigator.permissions.query({
+      name: 'periodic-background-sync',
+    }).then( status => {      
+
+      if (status.state === 'granted') {
+          sw.periodicSync.register('news', {
+            minInterval: 30 * 24 * 60 * 60 * 1000, // 1 month
+          }).then( () => {            
+            console.log('Periodic background sync registered!');
+          }).catch( e => {
+            console.error(`Periodic background sync failed:\nx${e}`);
+        });;
+      } else {
+        console.info('Periodic background sync is not granted.');
+      }
+    })
+  } else {
+    console.log('Periodic background sync is not supported.');
+  }
+}
+
 export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready

diff --git a/src/utils/midi.js b/src/utils/midi.js
@@ -109,15 +109,15 @@ const midiGetUserPrograms = (inputId, outputId, inputChannel, vendor, device, ch
                 output.sendSysex(vendor, [48 + channel, 0, 1, device, 25, type, bank]);
             }else{
                 setTimeout(()=> {
-                    input.removeListener("sysex", inputChannel, doCount);        
-                    console.log(strings)
-                    resolve(count)
+                    input.removeListener("sysex", inputChannel, doCount);
+                    resolve({count, strings})
                 }, 250)
             }
         }
 
         input.addListener("sysex", inputChannel, doCount);
         output.sendSysex(vendor, [80, 0, 2]);
+        output.sendSysex(vendor, [48 + channel, 0, 1, device, 25, 1, 0]);
     })
 }