📦 motiz88 / react-native-midi-2016

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import 'es6-symbol/implement';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import './webmidi/polyfill';

const MidiPort = ({id, port}) => <Text>{id}: {port.name} {port.manufacturer} {port.description} {port.version} {port.connection} {port.state}</Text>;
MidiPort.propTypes = {
  id: React.PropTypes.string.isRequired,
  port: React.PropTypes.object.isRequired
};
const MidiPorts = ({ports}) => ports ? <View>{[...ports.entries()].map(([id, port], i) => <MidiPort key={i} id={id} port={port} />)}</View> : null;
MidiPorts.propTypes = {
  ports: React.PropTypes.object.isRequired
};
class ReactNativeWebMidiApi extends Component {
  state = {
    inputs: new Map(), outputs: new Map(), midiMessages: []
  }
  componentDidMount () {
    this.initializeMidi();
  }
  handleClick = () => {
    this.initializeMidi();
  }

  handleMidiMessage = port => (ev) => {
    const arr = [];
    for (let i = 0; i < ev.data.length; i++) {
      arr.push((ev.data[i] < 16 ? '0' : '') + ev.data[i].toString(16));
    }
    const description = `${port.id}: ${arr.join(' ')}`;
    this.setState({midiMessages: [...this.state.midiMessages, description].slice(-10)});
  }

  async initializeMidi () {
    const midi = await navigator.requestMIDIAccess();
    const updateDevices = (port) => {
      const { inputs, outputs } = midi;
      inputs.forEach(port => {
        port.onmidimessage = this.handleMidiMessage(port);
      });
      this.setState({ inputs, outputs });
    };
    midi.onstatechange = updateDevices;
    updateDevices();
  }
  render () {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native MIDI!
        </Text>
        <Text>Inputs</Text>
         <MidiPorts ports={this.state.inputs} />
         <Text>Outputs</Text>
         <MidiPorts ports={this.state.outputs} />
        {this.state.midiMessages.map((m, i) => <Text key={i}>{m}</Text>)}
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5
  }
});

AppRegistry.registerComponent('ReactNativeWebMidiApi', () => ReactNativeWebMidiApi);