diff --git a/src/features/menu/index.jsx b/src/features/menu/index.jsx index 0d4b93d..749fc1f 100644 --- a/src/features/menu/index.jsx +++ b/src/features/menu/index.jsx @@ -1,5 +1,6 @@ import React, { useRef, useState, useEffect } from 'react'; -import { initWebMidi, changeSelectedMidiPort } from '../../utils/midiHelper'; +// Import des nouvelles fonctions d'aiguillage In/Out +import { initWebMidi, changeMidiOutputPort, changeMidiInputPort } from '../../utils/midiHelper'; import { Select } from '../utils/components'; import { useDispatch, useSelector } from 'react-redux'; import { @@ -13,8 +14,10 @@ import { return_store_from_file, return_file_from_store } from '../io'; import download from 'downloadjs'; export default function Menu() { - const [midiDevices, setMidiDevices] = useState([]); - const [activePortId, setActivePortId] = useState(''); + const [midiOutputs, setMidiOutputs] = useState([]); + const [midiInputs, setMidiInputs] = useState([]); + const [activeOutId, setActiveOutId] = useState(''); + const [activeInId, setActiveInId] = useState(''); const [file, setFile] = useState(null); const fileRef = useRef(null); @@ -23,20 +26,27 @@ export default function Menu() { const dispatch = useDispatch(); const reader = new FileReader(); - // Chargement initial des périphériques MIDI + // Chargement des listes de câbles d'entrée et de sortie useEffect(() => { - initWebMidi().then(devices => { - setMidiDevices(devices); - if (devices.length > 0) { - setActivePortId(devices[0].id); - } + initWebMidi().then(midiData => { + setMidiOutputs(midiData.outputs); + setMidiInputs(midiData.inputs); + + if (midiData.outputs.length > 0) setActiveOutId(midiData.outputs[0].id); + if (midiData.inputs.length > 0) setActiveInId(midiData.inputs[0].id); }); }, []); - const handleMidiChange = (e) => { + const handleMidiOutChange = (e) => { const portId = e.target.value; - setActivePortId(portId); - changeSelectedMidiPort(portId); + setActiveOutId(portId); + changeMidiOutputPort(portId); + }; + + const handleMidiInChange = (e) => { + const portId = e.target.value; + setActiveInId(portId); + changeMidiInputPort(portId); }; const loadFile = (f) => { @@ -82,25 +92,49 @@ export default function Menu() { /> - {/* Sélecteur de Port MIDI Corrigé pour React (className) */} -