This repository has been archived by the owner on Dec 21, 2022. It is now read-only.
/
index.shared.js
99 lines (93 loc) · 2.67 KB
/
index.shared.js
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
/**
* 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);