Actualiser src/features/menu/index.jsx

src/features/menu/index.jsx

@@ -37,6 +37,7 @@ export default function Menu(props) {
   const dispatch = useDispatch();
   const reader = new FileReader();
   const [activeKeyboardId, setActiveKeyboardId] = useState('');
+  const [keyboardChannel, setKeyboardChannel] = useState(1);
 
   useEffect(() => {
     // 1. Initialisation des ports MIDI physiques au démarrage
@@ -145,7 +146,6 @@ export default function Menu(props) {
       </div>
 
       {/* BLOC SÉLECTEURS MIDI */}
-
       <div className="my-1 flex flex-col space-y-3 bg-gray-100 p-2 rounded border border-gray-300">
 
           <div className="flex flex-col space-y-1">
@@ -184,25 +184,40 @@ export default function Menu(props) {
             </select>
           </div>
 
-          <div className="flex flex-col space-y-1">
+          <div className="grid grid-cols-3 gap-1">
+            <div className="col-span-2 flex flex-col space-y-1">
               <label className="text-xs font-bold text-gray-500 uppercase">Keyboard In :</label>
                 <select
                   value={activeKeyboardId}
                   onChange={(e) => {
                   setActiveKeyboardId(e.target.value);
-                changeKeyboardInputPort(e.target.value);
+                  changeKeyboardInputPort(e.target.value, keyboardChannel);
                   }}
-              className="w-full bg-white text-xs text-gray-800 px-1 py-1 rounded border border-gray-400"
+                  className="w-full bg-white text-xs px-1 py-1 rounded border border-gray-400"
                 >
                   <option value="">Aucun clavier</option>
-
                   {midiInputs.map(device => (
-                <option key={device.id} value={device.id}>
+                    <option key={device.id} value={device.id}>{device.name}</option>
-                  {device.name}
-                </option>
                   ))}
                 </select>
             </div>
+            <div className="flex flex-col space-y-1">
+              <label className="text-xs font-bold text-gray-500 uppercase">Channel</label>
+              <select
+                value={keyboardChannel}
+                onChange={(e) => {
+                const channel = Number(e.target.value);
+                setKeyboardChannel(channel);
+                changeKeyboardInputPort(activeKeyboardId, channel);
+                }}
+                className="w-full bg-white text-xs px-1 py-1 rounded border border-gray-400"
+                >
+                {Array.from({ length: 16 }, (_, i) => (
+                 <option key={i + 1} value={i + 1}>{i + 1}</option>
+                ))}
+              </select>
+            </div>
+          </div>
       </div>
 
         {/* BLOC Patch Name */}