diff --git a/src/features/menu/index.jsx b/src/features/menu/index.jsx index 749fc1f..424c21e 100644 --- a/src/features/menu/index.jsx +++ b/src/features/menu/index.jsx @@ -1,6 +1,6 @@ import React, { useRef, useState, useEffect } from 'react'; -// Import des nouvelles fonctions d'aiguillage In/Out -import { initWebMidi, changeMidiOutputPort, changeMidiInputPort } from '../../utils/midiHelper'; +// Ajout de registerMidiLogger dans les imports +import { initWebMidi, changeMidiOutputPort, changeMidiInputPort, registerMidiLogger } from '../../utils/midiHelper'; import { Select } from '../utils/components'; import { useDispatch, useSelector } from 'react-redux'; import { @@ -18,6 +18,11 @@ export default function Menu() { const [midiInputs, setMidiInputs] = useState([]); const [activeOutId, setActiveOutId] = useState(''); const [activeInId, setActiveInId] = useState(''); + + // Nouvel état local pour stocker l'historique des octets MIDI + const [midiLogs, setMidiLogs] = useState([]); + const consoleBottomRef = useRef(null); + const [file, setFile] = useState(null); const fileRef = useRef(null); @@ -26,17 +31,32 @@ export default function Menu() { const dispatch = useDispatch(); const reader = new FileReader(); - // Chargement des listes de câbles d'entrée et de sortie useEffect(() => { + // Initialisation des ports 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); }); + + // Branchement de notre console sur le Helper MIDI + registerMidiLogger((newLog) => { + setMidiLogs((prevLogs) => { + const updatedLogs = [...prevLogs, newLog]; + // Conserve uniquement les 30 derniers messages pour éviter de saturer la mémoire + return updatedLogs.slice(-30); + }); + }); }, []); + // Force le défilement automatique vers le bas de la console lors d'un flux d'octets + useEffect(() => { + if (consoleBottomRef.current) { + consoleBottomRef.current.scrollIntoView({ behavior: 'smooth' }); + } + }, [midiLogs]); + const handleMidiOutChange = (e) => { const portId = e.target.value; setActiveOutId(portId); @@ -72,7 +92,7 @@ export default function Menu() { }, [state.patch.mode, dispatch]); return ( -