378 lines
13 KiB
React
378 lines
13 KiB
React
import React, { useRef, useState, useEffect } from 'react';
|
|
import {
|
|
initWebMidi,
|
|
changeMidiOutputPort,
|
|
changeMidiInputPort,
|
|
registerMidiLogger,
|
|
requestCurrentPatchDump,
|
|
requestAllDump,
|
|
changeKeyboardInputPort,
|
|
registerPatchReceiver
|
|
} from '../../utils/midiHelper';
|
|
import { Select } from '../utils/components';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import {
|
|
parameterUpdateTab,
|
|
parameterUpdated,
|
|
parameterFromFile,
|
|
parameterRefreshAll,
|
|
selectEntities,
|
|
} from '../editor/parameters/parameterSlice';
|
|
import { return_store_from_file, return_file_from_store } from '../io';
|
|
import download from 'downloadjs';
|
|
|
|
export default function Menu(props) {
|
|
const [midiOutputs, setMidiOutputs] = useState([]);
|
|
const [midiInputs, setMidiInputs] = useState([]);
|
|
const [activeOutId, setActiveOutId] = useState('');
|
|
const [activeInId, setActiveInId] = useState('');
|
|
const [midiLogs, setMidiLogs] = useState([]);
|
|
const consoleBottomRef = useRef(null);
|
|
|
|
const [file, setFile] = useState(null);
|
|
const fileRef = useRef(null);
|
|
|
|
const state = useSelector((state) => selectEntities(state));
|
|
const activeTab = useSelector((state) => state.parameters.activeTab);
|
|
const dispatch = useDispatch();
|
|
const reader = new FileReader();
|
|
const [activeKeyboardId, setActiveKeyboardId] = useState('');
|
|
|
|
useEffect(() => {
|
|
// 1. Initialisation des ports MIDI physiques au démarrage
|
|
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);
|
|
});
|
|
|
|
// 2. Écoute active de la console d'activité noire
|
|
registerMidiLogger((newLog) => {
|
|
setMidiLogs((prevLogs) => {
|
|
const updatedLogs = [...prevLogs, newLog];
|
|
return updatedLogs.slice(-30); // Limite l'historique à 30 lignes
|
|
});
|
|
});
|
|
|
|
// 3. ÉCOUTE ET MISE À JOUR AUTOMATIQUE DU SON PROVENANT DU MICROKORG
|
|
registerPatchReceiver((rawSysExBytes) => {
|
|
try {
|
|
console.log('[MIDI] longueur SysEx:', rawSysExBytes.length);
|
|
console.log(
|
|
'[MIDI] RAW:',
|
|
Array.from(rawSysExBytes)
|
|
.map(b => b.toString(16).padStart(2, '0'))
|
|
.join(' ')
|
|
);
|
|
const parsedStoreData = return_store_from_file(rawSysExBytes);
|
|
if (!parsedStoreData.patch.name.trim()) {
|
|
parsedStoreData.patch.name = '------------';
|
|
}
|
|
console.log('[MIDI] patch décodé:', parsedStoreData.patch);
|
|
console.log('[MIDI] entités:', Object.keys(parsedStoreData));
|
|
// Injection explicite sous forme de tableau d'entités
|
|
dispatch(parameterFromFile(Object.values(parsedStoreData)));
|
|
console.log('[MIDI] Redux mis à jour');
|
|
} catch (error) {
|
|
console.error('[MIDI] erreur décodage/injection:', error);
|
|
}
|
|
});
|
|
}, [dispatch]);
|
|
|
|
// Force le défilement automatique du moniteur vers le bas
|
|
useEffect(() => {
|
|
if (consoleBottomRef.current) {
|
|
consoleBottomRef.current.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}, [midiLogs]);
|
|
|
|
const handleMidiOutChange = (e) => {
|
|
const portId = e.target.value;
|
|
setActiveOutId(portId);
|
|
changeMidiOutputPort(portId);
|
|
};
|
|
|
|
const handleMidiInChange = (e) => {
|
|
const portId = e.target.value;
|
|
setActiveInId(portId);
|
|
changeMidiInputPort(portId);
|
|
};
|
|
|
|
const loadFile = (f) => {
|
|
reader.onloadend = (e) => {
|
|
setFile(new Uint8Array(e.target.result));
|
|
};
|
|
reader.readAsArrayBuffer(f);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (file) {
|
|
dispatch(parameterFromFile(return_store_from_file(file)));
|
|
}
|
|
}, [file, dispatch]);
|
|
|
|
useEffect(() => {
|
|
if (state.patch.mode === 'Vocoder') {
|
|
dispatch(parameterUpdateTab('Vocoder'));
|
|
}
|
|
if (state.patch.mode === 'Single' || state.patch.mode === 'Multiple') {
|
|
dispatch(parameterUpdateTab('Timbre1'));
|
|
}
|
|
}, [state.patch.mode, dispatch]);
|
|
|
|
return (
|
|
|
|
<div className="h-screen col-span-1 flex flex-col justify-between border-solid border-r border-gray-300 bg-white px-2 py-2 text-xs">
|
|
<div className="menu-patch-container">
|
|
|
|
{/* 2 boutons Editor / Memory */}
|
|
<div className="my-1 w-full">
|
|
<label htmlFor="midi-in-select" className="text-xs font-bold text-gray-500 uppercase">MENU</label>
|
|
<div className="flex gap-1 w-full">
|
|
<button
|
|
className={props.page === 'editor' ? 'btn btn-active w-1/2' : 'btn w-1/2'}
|
|
onClick={() => props.setPage('editor')}
|
|
>Editor
|
|
</button>
|
|
|
|
<button
|
|
className={props.page === 'memory' ? 'btn btn-active w-1/2' : 'btn w-1/2'}
|
|
onClick={() => props.setPage('memory')}
|
|
>Memory
|
|
</button>
|
|
</div>
|
|
</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">
|
|
<label htmlFor="midi-out-select" className="text-xs font-bold text-gray-500 uppercase">Out :</label>
|
|
<select
|
|
id="midi-out-select"
|
|
value={activeOutId}
|
|
onChange={handleMidiOutChange}
|
|
className="w-full bg-white text-sm text-gray-800 px-1 py-1 rounded border border-gray-400 focus:outline-none focus:border-indigo-500"
|
|
>
|
|
{midiOutputs.length === 0 ? (
|
|
<option value="">Aucune sortie trouvée</option>
|
|
) : (
|
|
midiOutputs.map(device => (
|
|
<option key={device.id} value={device.id}>{device.name}</option>
|
|
))
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-1">
|
|
<label htmlFor="midi-in-select" className="text-xs font-bold text-gray-500 uppercase">In :</label>
|
|
<select
|
|
id="midi-in-select"
|
|
value={activeInId}
|
|
onChange={handleMidiInChange}
|
|
className="w-full bg-white text-sm text-gray-800 px-1 py-1 rounded border border-gray-400 focus:outline-none focus:border-indigo-500"
|
|
>
|
|
{midiInputs.length === 0 ? (
|
|
<option value="">Aucune entrée trouvée</option>
|
|
) : (
|
|
midiInputs.map(device => (
|
|
<option key={device.id} value={device.id}>{device.name}</option>
|
|
))
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="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);
|
|
}}
|
|
className="w-full bg-white text-xs text-gray-800 px-1 py-1 rounded border border-gray-400"
|
|
>
|
|
<option value="">Aucun clavier</option>
|
|
|
|
{midiInputs.map(device => (
|
|
<option key={device.id} value={device.id}>
|
|
{device.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* BLOC Patch Name */}
|
|
|
|
<div className="patch-name">
|
|
<label htmlFor="midi-in-select" className="text-xs font-bold text-gray-500 uppercase">PATCH NAME</label>
|
|
<input
|
|
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
|
placeholder="Patch Name"
|
|
type="text"
|
|
maxLength="12"
|
|
value={state.patch.name}
|
|
onChange={(e) => {
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: 'Patch',
|
|
changes: { name: e.target.value },
|
|
})
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* CONTENEUR DES BOUTONS D'ACTIONS */}
|
|
|
|
<div className="my-1 w-full">
|
|
<div className="text-xs font-bold text-gray-500 uppercase mb-1">Device Import</div>
|
|
|
|
<div className="grid grid-cols-2 gap-1">
|
|
<button
|
|
disabled={props.page === 'memory'}
|
|
className="btn bg-indigo-600 text-white hover:bg-indigo-700 w-full font-semibold"
|
|
onClick={() => requestCurrentPatchDump()}
|
|
>
|
|
📥 Patch
|
|
</button>
|
|
|
|
<button
|
|
disabled={props.page === 'editor'}
|
|
className="btn bg-indigo-600 text-white hover:bg-indigo-700 w-full font-semibold"
|
|
onClick={() => requestAllDump()}
|
|
>
|
|
📥 Global
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CONTENEUR DES BOUTONS D'ACTIONS */}
|
|
|
|
<div className="my-1">
|
|
<div className="text-xs font-semibold text-gray-500 uppercase mb-1">PATCHS</div>
|
|
<div className="grid grid-cols-3 gap-1">
|
|
<button
|
|
className="btn w-full"
|
|
onClick={() => dispatch(parameterRefreshAll())}
|
|
>New
|
|
</button>
|
|
|
|
<button
|
|
className="btn w-full"
|
|
onClick={() => fileRef.current.click()}
|
|
>Load
|
|
</button>
|
|
|
|
<button
|
|
className="btn w-full"
|
|
onClick={() => {
|
|
download(
|
|
return_file_from_store(state),
|
|
'microKORG_patch.syx',
|
|
'application/octet-binary'
|
|
);
|
|
}}
|
|
>Save
|
|
</button>
|
|
|
|
</div>
|
|
<input
|
|
className="hidden"
|
|
type="file"
|
|
accept=".syx"
|
|
ref={fileRef}
|
|
onChange={(e) => loadFile(e.target.files[0])}
|
|
/>
|
|
</div>
|
|
|
|
{/* liste single,multiple,vocoder */}
|
|
|
|
<label htmlFor="midi-in-select" className="text-xs font-bold text-gray-500 uppercase">TYPE</label>
|
|
|
|
<div className="patch-settings">
|
|
<Select
|
|
className="w-full select"
|
|
value={state.patch.mode}
|
|
list={[
|
|
{ value: 'Single' },
|
|
{ value: 'Multiple' },
|
|
{ value: 'Vocoder' },
|
|
]}
|
|
onChange={(value) => {
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: 'patch',
|
|
changes: { mode: value },
|
|
})
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Choix Timbre 1, Timbre 2, Vocoder, Arp/FX */}
|
|
|
|
<div className="my-1 w-full">
|
|
|
|
<label htmlFor="midi-in-select" className="text-xs font-bold text-gray-500 uppercase">TIMBRES</label>
|
|
<div className="grid grid-cols-4 gap-1">
|
|
<button
|
|
disabled={state.patch.mode === 'Vocoder'}
|
|
className={activeTab === 'Timbre1' ? 'btn btn-active w-full' : 'btn w-full'}
|
|
onClick={() => dispatch(parameterUpdateTab('Timbre1'))}
|
|
>Timbre1
|
|
</button>
|
|
|
|
<button
|
|
disabled={state.patch.mode !== 'Multiple'}
|
|
className={activeTab === 'Timbre2' ? 'btn btn-active w-full' : 'btn w-full'}
|
|
onClick={() => dispatch(parameterUpdateTab('Timbre2'))}
|
|
>Timbre2
|
|
</button>
|
|
|
|
<button
|
|
disabled={state.patch.mode !== 'Vocoder'}
|
|
className={activeTab === 'Vocoder' ? 'btn btn-active w-full' : 'btn w-full'}
|
|
onClick={() => dispatch(parameterUpdateTab('Vocoder'))}
|
|
>Vocoder
|
|
</button>
|
|
|
|
<button
|
|
className={activeTab === 'Effects' ? 'btn btn-active w-full' : 'btn w-full'}
|
|
onClick={() => dispatch(parameterUpdateTab('Effects'))}
|
|
>Arp/FX
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* LA PETITE CONSOLE DU MONITEUR MIDI HEXADÉCIMAL */}
|
|
|
|
<label htmlFor="midi-in-select" className="text-xs font-bold text-gray-500 uppercase">CONSOLE</label>
|
|
|
|
<div className="my-1 flex flex-col flex-grow h-32 w-full bg-black text-gray-300 font-mono text-[10px] p-2 rounded overflow-y-auto border border-gray-700 shadow-inner">
|
|
<div className="text-gray-500 font-bold border-b border-gray-800 pb-1 mb-1 sticky top-0 bg-black uppercase tracking-wider text-[9px]">
|
|
Moniteur MIDI Activity
|
|
</div>
|
|
<div className="flex-grow overflow-y-auto space-y-0.5">
|
|
{midiLogs.length === 0 ? (
|
|
<div className="text-gray-600 italic">Aucun flux détecté...</div>
|
|
) : (
|
|
midiLogs.map((log, idx) => (
|
|
<div key={idx} className={log.type === 'in' ? 'text-emerald-400' : 'text-cyan-400'}>{log.text}</div>
|
|
))
|
|
)}
|
|
<div ref={consoleBottomRef} /></div>
|
|
</div>
|
|
|
|
<div className="w-full text-center text-xl font-semibold border-t border-gray-200 pt-2">
|
|
<span className="text-2xl pb-1">Alapatch v2</span> <br />
|
|
<span className="text-xs text-gray-400 font-normal">A microKORG Patch Editor</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |