-
-
Notifications
You must be signed in to change notification settings - Fork 44
feat: support for midi 0.1 #736
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
poneciak57
wants to merge
21
commits into
main
Choose a base branch
from
feat/react-native-medi
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+14,333
−188
Open
Changes from 17 commits
Commits
Show all changes
21 commits
Select commit
Hold shift + click to select a range
b904710
feat: initialized folder
poneciak57 309b57d
fix: fixed library to work and verified it in fabric example
poneciak57 b0c41cf
feat: implemented typescript interface
poneciak57 a62fb58
fix: removed example app
poneciak57 57a4665
feat: implemented basic native ios module
poneciak57 01d6870
chore: state updt
poneciak57 8ba2e83
fix: performed devibeification
poneciak57 5067311
feat: implemented simple methods for midi port discovery
poneciak57 f055ff8
feat: implemented everything besides event emiting
poneciak57 fc1b6ea
feat: implemented all ios methods
poneciak57 1ad7e28
feat: implemented all android methods
poneciak57 dc78ae3
feat: implemented ts layer
poneciak57 27243c9
fix: made midi initialization async
poneciak57 bb28e43
fix: proper packed message handling
poneciak57 e55215b
feat: enchanced midi example
poneciak57 7cca34a
feat: example expo app for midi
poneciak57 7bdc687
feat: web support
poneciak57 70c849a
fix: requested changes
poneciak57 27e61d5
Merge branch 'main' into feat/react-native-medi
poneciak57 5589dd6
chore: neatpicks
poneciak57 e28042b
docs: added readme
poneciak57 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import React, { JSX } from 'react'; | ||
| import { MIDIInput, requestMIDIAccess } from 'react-native-medi'; | ||
| import { Button, View, Text, ScrollView } from 'react-native'; | ||
| import { Container } from '../../components'; | ||
| import { colors } from '../../styles'; | ||
|
|
||
|
|
||
| function getColoredMidiMessage(data: Uint8Array): JSX.Element { | ||
| // Map MIDI message types to colors | ||
| // each message is 3 bytes: [status, data1, data2] | ||
| // statuses: | ||
| // 128, 135 - Note Off (red) | ||
| // 144, 151 - Note On (green) | ||
| // 176, 183 - Control Change (dark purple) | ||
| // others - default color | ||
| const status = data[0]; | ||
| const RED = '#FF5555'; | ||
| const GREEN = '#55FF55'; | ||
| const DARK_PURPLE = '#AA00AA'; | ||
| const DEFAULT_COLOR = '#AAAAAA'; // gray | ||
|
|
||
| let color; | ||
| if (status >= 128 && status <= 135) { | ||
| color = RED; | ||
| } else if (status >= 144 && status <= 151) { | ||
| color = GREEN; | ||
| } else if (status >= 176 && status <= 183) { | ||
| color = DARK_PURPLE; | ||
| } else { | ||
| color = DEFAULT_COLOR; | ||
| } | ||
|
|
||
| return <Text style={{ color }}>{`${Array.from(data).join(', ')}`}</Text>; | ||
| } | ||
|
|
||
| const Medi: React.FC = () => { | ||
| const [sourcePorts, setSourcePorts] = React.useState<MIDIInput[]>([]); | ||
| const [connectedPort, setConnectedPort] = React.useState<MIDIInput | null>(null); | ||
| const [messageLog, setMessageLog] = React.useState<JSX.Element[]>([]); | ||
| const scrollViewRef = React.useRef<ScrollView>(null); | ||
|
|
||
| const scanMIDIDevices = async () => { | ||
| const access = await requestMIDIAccess(); | ||
| setSourcePorts(access.inputs); | ||
| }; | ||
|
|
||
| const connectToPort = async (portId: string) => { | ||
| if (connectedPort) { | ||
| await connectedPort.close(); | ||
| } | ||
| const access = await requestMIDIAccess(); | ||
| const input = access.inputs.find((port) => port.id === portId); | ||
| if (input) { | ||
| await input.open(); | ||
| input.onmidimessage = (message: Uint8Array) => { | ||
| setMessageLog((prevLog) => [...prevLog, getColoredMidiMessage(message)]); | ||
| }; | ||
| setConnectedPort(input); | ||
| console.log(`Connected to MIDI Input Port: ${portId}`); | ||
| } else { | ||
| console.log(`MIDI Input Port not found: ${portId}`); | ||
| setConnectedPort(null); | ||
| } | ||
| }; | ||
|
|
||
| const disconnectPort = async () => { | ||
| if (connectedPort) { | ||
| await connectedPort.close(); | ||
| setConnectedPort(null); | ||
| setMessageLog([]); | ||
| console.log(`Disconnected from MIDI Input Port`); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <Container> | ||
| <View style={{ flex: 1, alignItems: 'center' }}> | ||
| <View style={{ width: '80%' }}> | ||
| <Button title="Scan MIDI Devices" onPress={scanMIDIDevices} /> | ||
| <View style={{ flexDirection: 'column', gap: 10, marginTop: 10 }}> | ||
| {connectedPort ? ( | ||
| <Button title="Disconnect MIDI Device" onPress={disconnectPort} /> | ||
| ) : ( | ||
| sourcePorts.map((port) => ( | ||
| <Button key={port.id} title={`Connect to ${port.name}`} onPress={async () => await connectToPort(port.id)} /> | ||
| )) | ||
| )} | ||
| </View> | ||
| </View> | ||
| <View style={{ marginTop: 20, borderWidth: 1, borderColor: '#000', padding: 10, borderRadius: 5, width: '80%', height: 300 }}> | ||
| <Text style={{ fontWeight: 'bold', textAlign: 'center', color: colors.white }}>Connected Port: {connectedPort ? connectedPort.name : 'None'}</Text> | ||
| <ScrollView | ||
| ref={scrollViewRef} | ||
| style={{ width: '100%', marginTop: 10 }} | ||
| onContentSizeChange={() => scrollViewRef.current?.scrollToEnd({ animated: true })} | ||
| > | ||
| {messageLog.map((msg, index) => ( | ||
| <View key={index}> | ||
| {msg} | ||
| </View> | ||
| ))} | ||
| </ScrollView> | ||
| </View> | ||
| <View style={{ marginTop: 20, width: '80%' }}> | ||
| <Button | ||
| title="Clear Logs" | ||
| onPress={() => { | ||
| setMessageLog([]); | ||
| }} | ||
| /> | ||
| </View> | ||
| </View> | ||
|
|
||
| </Container> | ||
| ); | ||
| }; | ||
|
|
||
| export default Medi; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files | ||
|
|
||
| # dependencies | ||
| node_modules/ | ||
|
|
||
| # Expo | ||
| .expo/ | ||
| dist/ | ||
| web-build/ | ||
| expo-env.d.ts | ||
|
|
||
| # Native | ||
| .kotlin/ | ||
| *.orig.* | ||
| *.jks | ||
| *.p8 | ||
| *.p12 | ||
| *.key | ||
| *.mobileprovision | ||
|
|
||
| # Metro | ||
| .metro-health-check* | ||
|
|
||
| # debug | ||
| npm-debug.* | ||
| yarn-debug.* | ||
| yarn-error.* | ||
|
|
||
| # macOS | ||
| .DS_Store | ||
| *.pem | ||
|
|
||
| # local env files | ||
| .env*.local | ||
|
|
||
| # typescript | ||
| *.tsbuildinfo | ||
|
|
||
| # generated native folders | ||
| /ios | ||
| /android |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
since midi package is not planned to be in separate repository, you can use our main
.gitignoreThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
don't get it? You can nest .gitignores it is auto generated from expo project it has some expo specific things i guess