add channel switcher (#84)

src/core/MainView.jsx

@@ -13,6 +13,8 @@ import { AppServices } from './AppServices'
 import MIDIEmitter from './MIDIEmitter'
 import { tw } from 'twind'
 import { StatusBar } from './StatusBar'
+import { switchOutputChannel, OutputChannelSwitcher } from './switchOutputChannel'
+import { showInformationMessage } from './showInformationMessage'
 
 export class MainView extends React.Component {
   constructor(props) {
@@ -49,6 +51,16 @@ export class MainView extends React.Component {
     if (e.metaKey) {
       if (e.keyCode >= 0x30 && e.keyCode <= 0x39) {
         MIDI.send([0xc0, e.keyCode === 0x30 ? 9 : e.keyCode - 0x31])
+        showInformationMessage(
+          'Program change to #' + (e.keyCode === 0x30 ? 10 : e.keyCode - 0x30)
+        )
+        e.preventDefault()
+        return
+      }
+    }
+    if (e.ctrlKey) {
+      if (e.keyCode >= 0x30 && e.keyCode <= 0x39) {
+        switchOutputChannel(e.keyCode === 0x30 ? 9 : e.keyCode - 0x31)
         e.preventDefault()
         return
       }
@@ -204,6 +216,7 @@ export class MainView extends React.Component {
           )}
         </Observer>
         <AppServices features={this.props.features} store={this.store} />
+        <OutputChannelSwitcher />
       </div>
     )
   }

src/core/showInformationMessage.tsx

@@ -0,0 +1,17 @@
+import { tw } from "twind"
+
+export function showInformationMessage (text: string) {
+  const message = document.createElement('div')
+  message.className = tw`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none bg-black text-white text-xl p-4`
+  message.style.opacity = '1'
+  message.style.zIndex = '999'
+  message.style.transition = 'opacity 0.5s ease-in-out'
+  message.innerText = text
+  document.body.appendChild(message)
+  setTimeout(() => {
+    message.style.opacity = '0'
+    setTimeout(() => {
+      document.body.removeChild(message)
+    }, 500)
+  }, 1000)
+}

src/core/switchOutputChannel.jsx

@@ -0,0 +1,18 @@
+import React, { useEffect } from 'react';
+import { useConfiguration } from './AppConfigurationHooks';
+import { showInformationMessage } from './showInformationMessage';
+import { StatusBarItem } from './StatusBar';
+
+// HACK: Allow switching output channel from keyboard.
+export let switchOutputChannel = () => { };
+
+export function OutputChannelSwitcher() {
+  const mainChannel = useConfiguration('midi.output.channel');
+  useEffect(() => {
+    switchOutputChannel = (channel) => {
+      mainChannel.setValue(String(channel));
+      showInformationMessage('Switched output channel to ch.' + (channel + 1));
+    };
+  }, [mainChannel.setValue]);
+  return <StatusBarItem>ch.{+mainChannel.value + 1}</StatusBarItem>;
+}