diff --git a/src/features/menu/index.jsx b/src/features/menu/index.jsx index e2e0365..742e95c 100644 --- a/src/features/menu/index.jsx +++ b/src/features/menu/index.jsx @@ -1,3 +1,5 @@ +import React, { useState, useEffect } from 'react'; +import { initWebMidi, changeSelectedMidiPort } from '../../utils/midiHelper'; import { useRef, useState, useEffect } from 'react'; import { Select } from '../utils/components'; import { useDispatch, useSelector } from 'react-redux'; @@ -12,6 +14,27 @@ import { return_store_from_file, return_file_from_store } from '../io'; import download from 'downloadjs'; export default function Menu() { + +// À insérer juste au début de votre fonction export default function Menu() { +const [midiDevices, setMidiDevices] = useState([]); +const [activePortId, setActivePortId] = useState(''); + +useEffect(() => { + // Charge la liste des ports physiques au démarrage + initWebMidi().then(devices => { + setMidiDevices(devices); + if (devices.length > 0) { + setActivePortId(devices[0].id); + } + }); +}, []); + +const handleMidiChange = (e) => { + const portId = e.target.value; + setActivePortId(portId); + changeSelectedMidiPort(portId); // Alerte notre helper du changement de câble +}; + const [file, setFile] = useState(null); const fileRef = useRef(null); const state = useSelector((state) => selectEntities(state)); @@ -60,6 +83,25 @@ export default function Menu() { }} /> + +