feat: Remote Midicontroller - Settings added pull down menus for sele…

…cting midiports in and out for controller
olzzon · Jun 1, 2019 · 6e754cd · 6e754cd
1 parent b6e24ab
commit 6e754cd
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 7 deletions.
diff --git a/src/assets/css/Settings.css b/src/assets/css/Settings.css
@@ -11,10 +11,13 @@
 }
 
 .settings-header{
-    margin-top: 10px;
+    margin-top: 20px;
     margin-bottom: 20px;
     color: white;
     font-size: 140%;
+    border-width: 2px;
+    border-color: black;
+    border-style: solid;
 }
 
 

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
 import { connect } from "react-redux";
 import Select from 'react-select';
+import WebMidi, { INoteParam, IMidiChannel } from 'webmidi';
+
 
 //Utils:
 import { saveSettings } from '../utils/SettingsStorage';
@@ -9,24 +11,89 @@ import { MixerProtocolPresets, MixerProtocolList } from '../constants/MixerProto
 import { any } from 'prop-types';
 
 
+//Set style for Select dropdown component:
+const selectorColorStyles = {
+    control:
+        (styles: any) => ({
+            ...styles, backgroundColor: '#676767', color: 'white', border: 0, width: 500, marginLeft: 100
+        }
+    ),
+    option: (styles: any) => {
+        return {
+            backgroundColor: '#AAAAAA',
+            color: 'white'
+        };
+    },
+    singleValue: (styles: any) => ({ ...styles, color: 'white' }),
+};
+
+
 class Channels extends PureComponent<any, any> {
     templateOptions: any;
     mixerProtocolPresets: any;
+    remoteFaderMidiInputPortList: any;
+    remoteFaderMidiOutputPortList: any;
+
 
     constructor(props: any) {
         super(props);
-        this.templateOptions = MixerProtocolList;
-        this.mixerProtocolPresets = MixerProtocolPresets;
-        this.state = {
-            settings: this.props.store.settings[0]
-        };
+
         this.handleChange = this.handleChange.bind(this);
         this.handleTemplateChange = this.handleTemplateChange.bind(this);
+        this.handleMidiInputPort = this.handleMidiInputPort.bind(this);
+        this.handleMidiOutputPort = this.handleMidiOutputPort.bind(this);
         this.handleShowChannel = this.handleShowChannel.bind(this);
         this.handleShowAllChannels = this.handleShowAllChannels.bind(this);
         this.handleHideAllChannels = this.handleHideAllChannels.bind(this);
+        this.renderRemoteControllerSettings = this.renderRemoteControllerSettings.bind(this);
+        this.findMidiPorts = this.findMidiPorts.bind(this);
+
+        this.templateOptions = MixerProtocolList;
+        this.mixerProtocolPresets = MixerProtocolPresets;
+        this.state = {
+            settings: this.props.store.settings[0]
+        };
+        //Initialise list of Midi ports:
+        this.findMidiPorts();
+    }
+
+    findMidiPorts() {
+        WebMidi.enable((err) => {
+
+            if (err) {
+                console.log("WebMidi could not be enabled.", err);
+            }
+
+            // Viewing available inputs and outputs
+            console.log("Midi inputs : ", WebMidi.inputs);
+            console.log("Midi outputs : ", WebMidi.outputs);
+        });
+        this.remoteFaderMidiInputPortList = WebMidi.inputs.map((input) => {
+            return {"label": input.name, "value": input.name}
+        });
+        this.remoteFaderMidiOutputPortList = WebMidi.outputs.map((output) => {
+            return {"label": output.name, "value": output.name}
+        });
+
+    }
+
+    handleMidiInputPort(selectedOption: any) {
+        var settingsCopy= Object.assign({}, this.state.settings);
+        settingsCopy.remoteFaderMidiInputPort = selectedOption.value;
+        this.setState(
+            {settings: settingsCopy}
+        );
     }
 
+    handleMidiOutputPort(selectedOption: any) {
+        var settingsCopy= Object.assign({}, this.state.settings);
+        settingsCopy.remoteFaderMidiOutputPort = selectedOption.value;
+        this.setState(
+            {settings: settingsCopy}
+        );
+    }
+
+
     handleChange(event: any) {
         var settingsCopy= Object.assign({}, this.state.settings);
         settingsCopy[event.target.name] = event.target.value;
@@ -176,14 +243,41 @@ class Channels extends PureComponent<any, any> {
         )
     }
 
+    renderRemoteControllerSettings() {
+        return (
+            <div>
+                <div className="settings-header">
+                    REMOTE CONTROLLER SETTINGS:
+                </div>
+                Remote Midi Input Port :
+                <Select
+                    styles={selectorColorStyles}
+                    value={{label: this.state.settings.remoteFaderMidiInputPort, value: this.state.settings.remoteFaderMidiInputPort}}
+                    onChange={this.handleMidiInputPort}
+                    options={this.remoteFaderMidiInputPortList}
+                />
+                <br/>
+                Remote Midi Output Port :
+                <Select
+                    styles={selectorColorStyles}
+                    value={{label: this.state.settings.remoteFaderMidiOutputPort, value: this.state.settings.remoteFaderMidiOutputPort}}
+                    onChange={this.handleMidiOutputPort}
+                    options={this.remoteFaderMidiOutputPortList}
+                />
+                <br/>
+            </div>
+        )
+    }
+
     render() {
         return (
             <div className="settings-body">
                 <div className="settings-header">
-                    SETTINGS:
+                    MIXER SETTINGS:
                 </div>
 
                 <Select
+                    styles={selectorColorStyles}
                     value={{label: this.mixerProtocolPresets[this.state.settings.mixerProtocol].label, value: this.state.settings.mixerProtocol}}
                     onChange={this.handleTemplateChange}
                     options={this.templateOptions}
@@ -223,6 +317,8 @@ class Channels extends PureComponent<any, any> {
                 <br/>
                 {this.renderShowGrpFadersSelection()}
                 <br/>
+                {this.renderRemoteControllerSettings()}
+                <br/>
                 <input
                     className="settings-save-button"
                     onClick=

diff --git a/src/reducers/settingsReducer.ts b/src/reducers/settingsReducer.ts
@@ -9,6 +9,8 @@ export interface ISettings {
     localOscPort: number,
     machineOscIp: string,
     machineOscPort: number,
+    remoteFaderMidiInputPort: string,
+    remoteFaderMidiOutputPort: string,
     numberOfChannels: number,
     numberOfSnaps: number,
     fadeTime: number
@@ -24,6 +26,8 @@ const defaultSettingsReducerState: Array<ISettings> = [
         localOscPort: 8000,
         machineOscIp: "0.0.0.0",
         machineOscPort: 10024,
+        remoteFaderMidiInputPort: "",
+        remoteFaderMidiOutputPort: "",
         numberOfChannels: DEFAULTS.NUMBER_OF_CHANNELS,
         numberOfSnaps: DEFAULTS.NUMBER_OF_SNAPS,
         fadeTime: 100 //Time in ms