/** * High-level MIDI device manager for web UIs. Provides simplified APIs for: * - Setting up device selectors with automatic population and refresh * - Handling device connections/disconnections with callbacks * - Managing MIDI channel selection * * @example * // Setup with callback * const manager = new MIDIDeviceManager({ * midiController: midi, * onStatusUpdate: (msg, state) => updateStatus(msg, state), * onConnectionUpdate: (output, input, midi) => { * console.log("Output:", output?.name); * console.log("Input:", input?.name); * } * }); * * // Setup all selectors with callbacks * const midi = await manager.setupSelectors( * { * output: document.getElementById("output-select"), * input: document.getElementById("input-select"), * channel: document.getElementById("channel-select") * }, * { * onConnect: ({ midi, device, type }) => { * console.log(`${type} connected: ${device.name}`); * }, * onDisconnect: ({ midi, type }) => { * console.log(`${type} disconnected`); * } * } * ); * * // Returns MIDI controller for immediate use * midi.channel.sendCC(1, 100); */ export class MIDIDeviceManager { /** * Create a new MIDIDeviceManager instance * @param {Object} options - Configuration options * @param {MIDIController} [options.midiController] - MIDIController instance * @param {Function} [options.onStatusUpdate] - Callback for status updates (message: string, state: string) * @param {Function} [options.onConnectionUpdate] - Callback when connection status changes (outputDevice: Object, inputDevice: Object, midi: MIDIController) * @param {number} [options.channel=1] - Default MIDI channel */ constructor(options?: { midiController?: MIDIController; onStatusUpdate?: Function; onConnectionUpdate?: Function; channel?: number; }); midi: any; onStatusUpdate: Function; onConnectionUpdate: Function; channel: number; currentOutput: any; currentInput: any; isConnecting: boolean; /** * Set up all MIDI device selectors in one call. Handles population, connection * handling, channel selection, and automatic refresh on device changes. * * @param {Object} selectors - Selectors configuration * @param {HTMLSelectElement|string} [selectors.output] - Output device dropdown element or CSS selector * @param {HTMLSelectElement|string} [selectors.input] - Input device dropdown element or CSS selector * @param {HTMLSelectElement|string} [selectors.channel] - MIDI channel dropdown element or CSS selector * @param {Object} [options] - Configuration options * @param {Function} [options.onConnect] - Called when device connects ({ midi, device, type }) * @param {Function} [options.onDisconnect] - Called when device disconnects ({ midi, type }) * @param {Function} [options.onDeviceListChange] - Called when device list changes (for custom UI updates) * @returns {Promise} The MIDI controller instance for chaining */ setupSelectors(selectors?: { output?: HTMLSelectElement | string; input?: HTMLSelectElement | string; channel?: HTMLSelectElement | string; }, options?: { onConnect?: Function; onDisconnect?: Function; onDeviceListChange?: Function; }): Promise; /** * Update status message and trigger status callback * * @param {string} message - Status message to display * @param {string} [state=""] - Status state (e.g., "connected", "error", "warning") * @returns {void} * * @example * manager.updateStatus("Connected to MIDI keyboard", "connected"); * * @example * manager.updateStatus("Connection failed", "error"); */ updateStatus(message: string, state?: string): void; /** * Update connection status */ updateConnectionStatus(): void; /** * Set up listeners for MIDI device connection/disconnection events. * Automatically repopulates device lists and triggers callbacks when devices change. * @private * @param {Object} selectElements - Select elements to update * @param {HTMLSelectElement} [selectElements.output] - Output device dropdown * @param {HTMLSelectElement} [selectElements.input] - Input device dropdown * @param {Function} [onDeviceListChange] - Callback when device list changes */ private _setupDeviceChangeListeners; _listenersInitialized: boolean; /** * Resolve a selector to a DOM element * @private * @param {string|HTMLElement} selector - CSS selector string or DOM element * @returns {HTMLElement|null} The resolved element or null */ private _resolveSelector; /** * Get the current list of MIDI output devices * @private * @returns {Array} Array of MIDI output device objects */ private _getOutputDevices; /** * Get the current list of MIDI input devices * @private * @returns {Array} Array of MIDI input device objects */ private _getInputDevices; /** * Connect output device selection events to automatically handle connections when * the user selects a device from a dropdown. Handles both connection and disconnection. * @private * @param {HTMLSelectElement} deviceSelectElement - The select element populated with output devices * @param {Function} [onConnect] - Callback when device is successfully connected (midi: MIDIController, device: Object) * @param {Function} [onDisconnect] - Callback when device is disconnected (midi: MIDIController) * @returns {void} */ private _connectOutputDeviceSelection; /** * Connect input device selection events to automatically handle input device connections when * the user selects a device from a dropdown. Handles both connection and disconnection. * @private * @param {HTMLSelectElement} deviceSelectElement - The select element populated with input devices * @param {Function} [onConnect] - Callback when device is successfully connected (midi: MIDIController, device: Object) * @param {Function} [onDisconnect] - Callback when device is disconnected (midi: MIDIController) * @returns {void} */ private _connectInputDeviceSelection; /** * Helper method to populate device list for either input or output devices * @private * @param {HTMLSelectElement} selectElement - The select element to populate * @param {Array} devices - Array of device objects * @param {Object} currentDevice - The currently connected device * @param {Function} [onChange] - Optional callback * @param {boolean} isOutput - Whether these are output devices * @returns {void} */ private _populateDeviceList; /** * Populate a select element with available MIDI output devices. Automatically * handles maintaining selection when the current device remains connected, and clears * selection when the current device is disconnected. Updates status message accordingly. * @private * @param {HTMLSelectElement} selectElement - The select element to populate with devices * @param {Function} [onChange] - Optional callback invoked after populating the list * @returns {Promise} */ private _populateOutputDeviceList; /** * Populate a select element with available MIDI input devices. Automatically * handles maintaining selection when the current input device remains connected, and clears * selection when the current input device is disconnected. * @private * @param {HTMLSelectElement} selectElement - The select element to populate with input devices * @param {Function} [onChange] - Optional callback invoked after populating the list * @returns {Promise} */ private _populateInputDeviceList; /** * Connect channel selection events to automatically update the MIDI channel when * the user selects a different channel from a dropdown. Triggers connection status * update to notify listeners of the channel change. * * @private * @param {HTMLSelectElement} channelSelectElement - The select element with channel options (1-16) * @param {string} type - Channel type: "input" or "output" * @returns {void} * * @example * // Setup output channel selection * const outputChannelSelect = document.getElementById("output-channel-select"); * manager.output.connectChannelSelection(channelSelect); * * @example * // Setup input channel selection * const inputChannelSelect = document.getElementById("input-channel-select"); * manager.input.connectChannelSelection(inputChannelSelect); */ private _connectChannelSelection; } //# sourceMappingURL=MIDIDeviceManager.d.ts.map