@tremolo-ui/react 0.1.5 → 0.1.6

package/src/hooks/useEventListener.ts

@@ -5,6 +5,9 @@ import { useCallbackRef } from './useCallbackRef'
 type Target = EventTarget | null | (() => EventTarget | null)
 type Options = boolean | AddEventListenerOptions
 
+/**
+ * @category hooks
+ */
 export function useEventListener<K extends keyof DocumentEventMap>(
   target: Target,
   event: K,

package/src/hooks/useInterval.ts

@@ -1,5 +1,8 @@
 import { useEffect, useRef } from 'react'
 
+/**
+ * @category hooks
+ */
 export function useInterval(callback: () => void, delay: number | null) {
   const savedCallback = useRef(callback)
 

package/src/hooks/useLongPress.ts

@@ -3,6 +3,9 @@ import { useCallback, useState } from 'react'
 import { useEventListener } from './useEventListener'
 import { useInterval } from './useInterval'
 
+/**
+ * @category hooks
+ */
 export function useLongPress(
   callback: () => void,
   initialDelay = 500,

package/src/hooks/useMIDIAccess.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from 'react'
+
+/** @private */
+export const PERMISSION_DENIED = 'PERMISSION_DENIED'
+/** @private */
+export const NOT_SUPPORTED = 'NOT_SUPPORTED'
+
+/** @private */
+export type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED
+
+/**
+ * Hooks for requesting MIDI access in the browser. The first argument allows you to choose whether to request access on mount.
+ * @category hooks
+ */
+export function useMIDIAccess(requestOnMount = true) {
+  const [midiAccess, setMidiAccess] = useState<MIDIAccess | null>(null)
+  const [error, setError] = useState<MIDIAccessError | null>(null)
+
+  const request = useCallback(() => {
+    if (navigator.requestMIDIAccess) {
+      navigator
+        .requestMIDIAccess()
+        .then((access) => {
+          setMidiAccess(access)
+          setError(null)
+        })
+        .catch(() => {
+          setError(PERMISSION_DENIED)
+        })
+    } else {
+      setError(NOT_SUPPORTED)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (requestOnMount) request()
+  }, [requestOnMount, request])
+
+  return { request, midiAccess, error }
+}

package/src/hooks/useMIDIInput.ts

@@ -0,0 +1,50 @@
+import { useCallback } from 'react'
+
+import { useMIDIMessage } from './useMIDIMessage'
+
+const MIDI_EVENT_TO_NUMBER = {
+  NOTE_ON: 0x90,
+  NOTE_OFF: 0x80,
+  PITCH_BEND: 0xe0,
+}
+
+// const NUMBER_TO_MIDI_EVENT: Record<number, string> = {
+//   0x90: 'NOTE_ON',
+//   0x80: 'NOTE_OFF',
+//   0xe0: 'PITCH_BEND',
+// }
+
+/**
+ * Hooks for handling note on/off events. To be used with useMIDIAccess. Internally uses useMIDIMessage.
+ * @category hooks
+ */
+export function useMIDIInput(
+  midiAccess: MIDIAccess | null,
+  onNoteOnEvent?: (note: number, velocity: number) => void,
+  onNoteOffEvent?: (note: number) => void,
+  onPitchBendEvent?: (msb: number, lsb: number) => void,
+) {
+  const handleMIDIMessage = useCallback(
+    (event: MIDIMessageEvent) => {
+      if (!event.data) return
+      // event.data[0] ... command
+      // event.data[1] ... note, MSB (Most Significant Byte)
+      // event.data[2] ... velocity, LSB (Least Significant Byte)
+      const kind = event.data[0] & 0xf0
+
+      if (
+        kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF ||
+        (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0)
+      ) {
+        onNoteOffEvent?.(event.data[1])
+      } else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) {
+        onNoteOnEvent?.(event.data[1], event.data[2])
+      } else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) {
+        onPitchBendEvent?.(event.data[1], event.data[2])
+      }
+    },
+    [onNoteOffEvent, onNoteOnEvent, onPitchBendEvent],
+  )
+
+  useMIDIMessage(midiAccess, handleMIDIMessage)
+}

package/src/hooks/useMIDIMessage.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+
+/**
+ * Hooks for when you want to process MIDI events in more detail than useMIDIInput.
+ * @category hooks
+ */
+export function useMIDIMessage(
+  midiAccess: MIDIAccess | null,
+  onMIDIMessage: (event: MIDIMessageEvent) => void,
+) {
+  useEffect(() => {
+    if (!midiAccess) return
+
+    for (const input of midiAccess.inputs.values()) {
+      input.addEventListener('midimessage', onMIDIMessage)
+    }
+
+    return () => {
+      for (const input of midiAccess.inputs.values()) {
+        input.removeEventListener('midimessage', onMIDIMessage)
+      }
+    }
+  }, [midiAccess, onMIDIMessage])
+}

package/src/hooks/useRefCallbackEvent.ts

@@ -1,5 +1,9 @@
 import { useMemo } from 'react'
 
+/**
+ * Internal
+ * @private
+ */
 export function useRefCallbackEvent<K extends keyof DocumentEventMap>(
   event: K,
   handler: (event: DocumentEventMap[K]) => void,

package/src/index.ts

@@ -34,17 +34,18 @@ export {
   type StepperProps,
 } from './components/NumberInput'
 export {
+  Piano,
+  type PianoProps,
+  type PianoMethods,
+  getNoteRangeArray,
+  WhiteKey,
   BlackKey,
+  type KeyProps,
+  type KeyMethods,
   KeyLabel,
   type KeyLabelProps,
-  type KeyMethods,
-  type KeyProps,
-  type KeyboardShortcuts,
-  Piano,
-  type PianoProps,
   SHORTCUTS,
-  WhiteKey,
-  getNoteRangeArray,
+  type KeyboardShortcuts,
 } from './components/Piano'
 export {
   Scale,
@@ -77,12 +78,18 @@ export {
   type XYPadThumbMethods,
 } from './components/XYPad'
 
+// hooks
 export { useAnimationFrame } from './hooks/useAnimationFrame'
-export { useDrag, type UseDragProps } from './hooks/useDrag'
-export {
-  useDragWithElement,
-  type UseDragWithElementProps,
-} from './hooks/useDragWithElement'
+export { useDrag } from './hooks/useDrag'
+export { useDragWithElement } from './hooks/useDragWithElement'
 export { useEventListener } from './hooks/useEventListener'
 export { useInterval } from './hooks/useInterval'
 export { useLongPress } from './hooks/useLongPress'
+export {
+  useMIDIAccess,
+  NOT_SUPPORTED,
+  PERMISSION_DENIED,
+  type MIDIAccessError,
+} from './hooks/useMIDIAccess'
+export { useMIDIInput } from './hooks/useMIDIInput'
+export { useMIDIMessage } from './hooks/useMIDIMessage'

package/src/styles/global.css

@@ -1,5 +1,5 @@
 :root {
-  --tremolo-theme-color: #4e76e6;
+  --tremolo-theme-color: oklch(59.5% 0.17548 266.373);
 }
 
 .tremolo-no-select {