Merge pull request #366 from nudibranchrecords/fix/processDevices-async

Fix/process devices async

src/inputs/MidiInput.js

@@ -8,6 +8,11 @@ import getConnectedDevice from '../selectors/getConnectedDevice'
 
 let store, midiAccess
 
+const getMidiAccess = () => {
+  if (!midiAccess) midiAccess = navigator.requestMIDIAccess()
+  return midiAccess
+}
+
 const onMessage = (rawMessage) => {
   const state = store.getState()
   const deviceId = rawMessage.target.name
@@ -62,9 +67,11 @@ const onMessage = (rawMessage) => {
   }
 }
 
-export const processDevices = () => {
+export const processDevices = async () => {
   const devices = {}
 
+  const midiAccess = await getMidiAccess()
+
   midiAccess.inputs.forEach((entry) => {
     devices[entry.name] = {
       title: entry.name,
@@ -77,15 +84,13 @@ export const processDevices = () => {
   store.dispatch(midiUpdateDevices(devices))
 }
 
-export default (injectedStore) => {
+export default async (injectedStore) => {
   store = injectedStore
+  const midiAccess = await getMidiAccess()
 
-  navigator.requestMIDIAccess().then((injectedMidiAccess) => {
-    midiAccess = injectedMidiAccess
-    processDevices()
+  processDevices()
 
-    midiAccess.onstatechange = () => {
-      processDevices()
-    }
-  })
+  midiAccess.onstatechange = () => {
+    processDevices()
+  }
 }

src/store/project/listener.js

@@ -12,6 +12,8 @@ import { remote } from 'electron'
 import { processDevices } from '../../inputs/MidiInput'
 import { loadSketchModules, initiateScenes } from '../../engine'
 import getSketchesPath from '../../selectors/getSketchesPath'
+import getConnectedDevices from '../../selectors/getConnectedDevices'
+import { initialize } from 'redux-form'
 
 const fileFilters = [
   { name: 'JSON', extensions: ['json'] },
@@ -58,21 +60,31 @@ const loadProject = async (action, store) => {
 
 const loadProjectRequest = async (action, store) => {
   try {
-    const state = store.getState()
+    let state = store.getState()
     const filePath = getProjectFilepath(state)
     const projectData = await load(filePath)
 
     const sketchesPath = getSketchesPath(projectData)
 
     store.dispatch(projectRehydrate(projectData))
-    processDevices()
     store.dispatch(projectFilepathUpdate(filePath))
 
     loadSketchModules(sketchesPath, { siblingCheck: true })
     initiateScenes()
 
     store.dispatch(projectLoadSuccess())
     history.replace(projectData.router.location.pathname)
+
+    await processDevices()
+    state = store.getState()
+    const devices = getConnectedDevices(state)
+    // We have to initialize forms for each midi device, because redux-form
+    // doesn't seem to want to initialize automatically
+    // TODO: Prevent the need to do this (probably replace redux-form)
+    devices.forEach(device => {
+      store.dispatch(initialize(`device_${device.id}`, device.settings))
+    })
+
     uiEventEmitter.emit('repaint')
   } catch (error) {
     console.error(error)