refactor: supprimer complètement les matrices de routing inputToGroup/groupToOutput
Le paradigme devient : pour brancher un canal physique sur un groupe, créer un server audio user. Les matrices sont retirées de l'UI Electron, de l'admin PWA, de l'API REST et du backend (GroupAudioRouter supprimé). AudioBridgeManager ne génère plus de tokens per-group. Option "aucune sortie" ajoutée pour les server audio users.
This commit is contained in:
@@ -1,6 +1,5 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import './Admin.css';
|
||||
import AudioRoutingMatrix from './components/AudioRoutingMatrix';
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL || '/api';
|
||||
|
||||
@@ -409,9 +408,6 @@ function Admin() {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p style={{color: 'var(--color-text-secondary)', fontSize: '0.9rem', marginTop: 'var(--spacing-md)'}}>
|
||||
Le routing audio se configure dans l'onglet "Audio" via la matrice de routing.
|
||||
</p>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn-primary">
|
||||
@@ -609,7 +605,6 @@ function Admin() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AudioRoutingMatrix groups={groups} channelNames={channelNames} />
|
||||
|
||||
{currentDevice && currentDevice.inputDeviceId && (
|
||||
<div className="current-config">
|
||||
|
||||
@@ -1,245 +0,0 @@
|
||||
.routing-matrix-container {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: var(--spacing-xl);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.routing-actions {
|
||||
margin-top: var(--spacing-xl);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.routing-matrix-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.routing-matrix-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ws-status {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ws-status.connected {
|
||||
color: #44ff44;
|
||||
background: rgba(68, 255, 68, 0.1);
|
||||
}
|
||||
|
||||
.ws-status.disconnected {
|
||||
color: #888;
|
||||
background: rgba(136, 136, 136, 0.1);
|
||||
}
|
||||
|
||||
.routing-section {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.routing-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.routing-section h4 {
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.routing-description {
|
||||
margin: 0 0 var(--spacing-lg) 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.routing-matrix {
|
||||
display: inline-grid;
|
||||
gap: 2px;
|
||||
background: var(--color-border);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.matrix-corner {
|
||||
background: var(--color-surface-hover);
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.matrix-header-cell {
|
||||
background: var(--color-surface-hover);
|
||||
padding: var(--spacing-sm);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 50px;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.matrix-label-cell {
|
||||
background: var(--color-surface-hover);
|
||||
padding: var(--spacing-sm);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 120px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.label-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.matrix-cell {
|
||||
background: var(--color-bg);
|
||||
padding: var(--spacing-sm);
|
||||
min-height: 60px;
|
||||
min-width: 80px;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-xs);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cell-checkbox {
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.matrix-cell:hover {
|
||||
background: var(--color-surface-hover);
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.matrix-cell.active {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.matrix-cell.active:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gain-select {
|
||||
width: 100%;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.75rem;
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gain-select:focus {
|
||||
outline: none;
|
||||
background: rgba(59, 130, 246, 0.3);
|
||||
border-color: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.matrix-header-cell,
|
||||
.matrix-label-cell {
|
||||
font-size: 0.75rem;
|
||||
padding: var(--spacing-xs);
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.matrix-cell {
|
||||
min-width: 70px;
|
||||
min-height: 50px;
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.gain-select {
|
||||
font-size: 0.7rem;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.routing-matrix-container {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.routing-matrix-header {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.matrix-header-cell,
|
||||
.matrix-label-cell {
|
||||
font-size: 0.7rem;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.matrix-cell {
|
||||
min-width: 65px;
|
||||
min-height: 45px;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.gain-select {
|
||||
font-size: 0.65rem;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
@@ -1,349 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './AudioRoutingMatrix.css';
|
||||
import VUMeter from './VUMeter.jsx';
|
||||
import { useAudioLevels } from '../hooks/useAudioLevels.js';
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
|
||||
|
||||
function AudioRoutingMatrix({ groups, channelNames }) {
|
||||
const { levels, connected: wsConnected } = useAudioLevels();
|
||||
const [routing, setRouting] = useState({ inputToGroup: {}, groupToOutput: {}, gains: {} });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showOnlyNamedChannels, setShowOnlyNamedChannels] = useState(false);
|
||||
const [audioDevice, setAudioDevice] = useState({ inputChannels: 8, outputChannels: 8 });
|
||||
|
||||
useEffect(() => {
|
||||
loadRouting();
|
||||
loadAudioDevice();
|
||||
}, []);
|
||||
|
||||
const loadRouting = async () => {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/admin/audio/routing`);
|
||||
if (!res.ok) {
|
||||
throw new Error(`HTTP error! status: ${res.status}`);
|
||||
}
|
||||
const data = await res.json();
|
||||
setRouting(data.routing || { inputToGroup: {}, groupToOutput: {}, gains: {} });
|
||||
} catch (error) {
|
||||
console.error('Erreur chargement routing:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadAudioDevice = async () => {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/admin/audio/device`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setAudioDevice({
|
||||
inputChannels: data.device?.inputChannels || 8,
|
||||
outputChannels: data.device?.outputChannels || 8
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur chargement audio device:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const saveRouting = async () => {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/admin/audio/routing`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(routing)
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
alert('Configuration de routing sauvegardée!');
|
||||
} else {
|
||||
const errorText = await res.text();
|
||||
console.error('Erreur serveur:', errorText);
|
||||
alert(`Erreur: ${res.status} - ${errorText}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur sauvegarde routing:', error);
|
||||
alert('Erreur lors de la sauvegarde');
|
||||
}
|
||||
};
|
||||
|
||||
const toggleInputToGroup = (inputId, groupId) => {
|
||||
setRouting(prev => {
|
||||
const inputToGroup = { ...prev.inputToGroup };
|
||||
if (!inputToGroup[inputId]) {
|
||||
inputToGroup[inputId] = [];
|
||||
}
|
||||
|
||||
const groupArray = [...inputToGroup[inputId]];
|
||||
const index = groupArray.indexOf(groupId);
|
||||
|
||||
if (index > -1) {
|
||||
groupArray.splice(index, 1);
|
||||
} else {
|
||||
groupArray.push(groupId);
|
||||
}
|
||||
|
||||
inputToGroup[inputId] = groupArray;
|
||||
|
||||
return { ...prev, inputToGroup };
|
||||
});
|
||||
};
|
||||
|
||||
const toggleGroupToOutput = (groupId, outputId) => {
|
||||
setRouting(prev => {
|
||||
const groupToOutput = { ...prev.groupToOutput };
|
||||
if (!groupToOutput[groupId]) {
|
||||
groupToOutput[groupId] = [];
|
||||
}
|
||||
|
||||
const outputArray = [...groupToOutput[groupId]];
|
||||
const index = outputArray.indexOf(outputId);
|
||||
|
||||
if (index > -1) {
|
||||
outputArray.splice(index, 1);
|
||||
} else {
|
||||
outputArray.push(outputId);
|
||||
}
|
||||
|
||||
groupToOutput[groupId] = outputArray;
|
||||
|
||||
return { ...prev, groupToOutput };
|
||||
});
|
||||
};
|
||||
|
||||
const isInputRoutedToGroup = (inputId, groupId) => {
|
||||
return routing.inputToGroup[inputId]?.includes(groupId) || false;
|
||||
};
|
||||
|
||||
const isGroupRoutedToOutput = (groupId, outputId) => {
|
||||
return routing.groupToOutput[groupId]?.includes(outputId) || false;
|
||||
};
|
||||
|
||||
const getGainForInputToGroup = (inputId, groupId) => {
|
||||
const key = `in_${inputId}_${groupId}`;
|
||||
return routing.gains?.[key] || 0.0;
|
||||
};
|
||||
|
||||
const getGainForGroupToOutput = (groupId, outputId) => {
|
||||
const key = `${groupId}_out_${outputId}`;
|
||||
return routing.gains?.[key] || 0.0;
|
||||
};
|
||||
|
||||
const setGainForInputToGroup = (inputId, groupId, gainDb) => {
|
||||
setRouting(prev => {
|
||||
const gains = { ...prev.gains };
|
||||
const key = `in_${inputId}_${groupId}`;
|
||||
gains[key] = parseFloat(gainDb);
|
||||
return { ...prev, gains };
|
||||
});
|
||||
};
|
||||
|
||||
const setGainForGroupToOutput = (groupId, outputId, gainDb) => {
|
||||
setRouting(prev => {
|
||||
const gains = { ...prev.gains };
|
||||
const key = `${groupId}_out_${outputId}`;
|
||||
gains[key] = parseFloat(gainDb);
|
||||
return { ...prev, gains };
|
||||
});
|
||||
};
|
||||
|
||||
const formatGain = (gainDb) => {
|
||||
if (gainDb === 0) return '0dB';
|
||||
return gainDb > 0 ? `+${gainDb}dB` : `${gainDb}dB`;
|
||||
};
|
||||
|
||||
const getChannelName = (type, id) => {
|
||||
const name = channelNames?.[type]?.[id];
|
||||
return name || `${type === 'inputs' ? 'Input' : 'Output'} ${id}`;
|
||||
};
|
||||
|
||||
const hasCustomName = (type, id) => {
|
||||
return channelNames?.[type]?.[id] !== undefined;
|
||||
};
|
||||
|
||||
const getVisibleInputChannels = () => {
|
||||
const allInputs = Array.from({length: audioDevice.inputChannels}, (_, i) => i);
|
||||
if (showOnlyNamedChannels) {
|
||||
return allInputs.filter(i => hasCustomName('inputs', i));
|
||||
}
|
||||
return allInputs;
|
||||
};
|
||||
|
||||
const getVisibleOutputChannels = () => {
|
||||
const allOutputs = Array.from({length: audioDevice.outputChannels}, (_, i) => i);
|
||||
if (showOnlyNamedChannels) {
|
||||
return allOutputs.filter(i => hasCustomName('outputs', i));
|
||||
}
|
||||
return allOutputs;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div style={{padding: 'var(--spacing-xl)', textAlign: 'center'}}>Chargement...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="routing-matrix-container">
|
||||
<div className="routing-matrix-header">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
||||
<h3>Matrice de routing audio</h3>
|
||||
<span
|
||||
className={`ws-status ${wsConnected ? 'connected' : 'disconnected'}`}
|
||||
title={wsConnected ? 'Monitoring temps réel actif' : 'Monitoring temps réel déconnecté'}
|
||||
>
|
||||
{wsConnected ? '● Live' : '○ Offline'}
|
||||
</span>
|
||||
</div>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showOnlyNamedChannels}
|
||||
onChange={(e) => setShowOnlyNamedChannels(e.target.checked)}
|
||||
/>
|
||||
<span>Afficher uniquement les canaux nommés</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="routing-section">
|
||||
<h4>Inputs vers Groupes</h4>
|
||||
<p className="routing-description">
|
||||
Sélectionnez quels inputs audio alimentent chaque groupe
|
||||
</p>
|
||||
|
||||
<div className="routing-matrix" style={{gridTemplateColumns: `120px repeat(${groups.length}, minmax(60px, 1fr))`}}>
|
||||
<div className="matrix-corner"></div>
|
||||
|
||||
{groups.map(group => (
|
||||
<div key={group.id} className="matrix-header-cell">
|
||||
{group.name}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{getVisibleInputChannels().map(i => (
|
||||
<React.Fragment key={`input-row-${i}`}>
|
||||
<div className="matrix-label-cell">
|
||||
<div className="label-content">
|
||||
<span className="label-text">{getChannelName('inputs', i)}</span>
|
||||
{wsConnected && levels.inputs[i] && (
|
||||
<VUMeter level={levels.inputs[i]} size="mini" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{groups.map(group => {
|
||||
const isRouted = isInputRoutedToGroup(String(i), group.id);
|
||||
const gain = getGainForInputToGroup(String(i), group.id);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${i}-${group.id}`}
|
||||
className={`matrix-cell ${isRouted ? 'active' : ''}`}
|
||||
>
|
||||
<div
|
||||
className="cell-checkbox"
|
||||
onClick={() => toggleInputToGroup(String(i), group.id)}
|
||||
>
|
||||
{isRouted && <span className="checkmark">✓</span>}
|
||||
</div>
|
||||
{isRouted && (
|
||||
<select
|
||||
className="gain-select"
|
||||
value={gain}
|
||||
onChange={(e) => setGainForInputToGroup(String(i), group.id, e.target.value)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<option value="-12">-12dB</option>
|
||||
<option value="-6">-6dB</option>
|
||||
<option value="-3">-3dB</option>
|
||||
<option value="0">0dB</option>
|
||||
<option value="3">+3dB</option>
|
||||
<option value="6">+6dB</option>
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="routing-section">
|
||||
<h4>Groupes vers Outputs</h4>
|
||||
<p className="routing-description">
|
||||
Sélectionnez vers quels outputs chaque groupe envoie son audio
|
||||
</p>
|
||||
|
||||
<div className="routing-matrix" style={{gridTemplateColumns: `120px repeat(${getVisibleOutputChannels().length}, minmax(60px, 1fr))`}}>
|
||||
<div className="matrix-corner"></div>
|
||||
|
||||
{getVisibleOutputChannels().map(i => (
|
||||
<div key={`output-header-${i}`} className="matrix-header-cell">
|
||||
<div className="header-content">
|
||||
<span className="header-text">{getChannelName('outputs', i)}</span>
|
||||
{wsConnected && levels.outputs[i] && (
|
||||
<VUMeter level={levels.outputs[i]} size="mini" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{groups.map(group => (
|
||||
<React.Fragment key={`group-row-${group.id}`}>
|
||||
<div className="matrix-label-cell">
|
||||
<div className="label-content">
|
||||
<span className="label-text">{group.name}</span>
|
||||
{wsConnected && levels.groups[group.id] && (
|
||||
<VUMeter level={levels.groups[group.id]} size="mini" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{getVisibleOutputChannels().map(i => {
|
||||
const isRouted = isGroupRoutedToOutput(group.id, String(i));
|
||||
const gain = getGainForGroupToOutput(group.id, String(i));
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${group.id}-${i}`}
|
||||
className={`matrix-cell ${isRouted ? 'active' : ''}`}
|
||||
>
|
||||
<div
|
||||
className="cell-checkbox"
|
||||
onClick={() => toggleGroupToOutput(group.id, String(i))}
|
||||
>
|
||||
{isRouted && <span className="checkmark">✓</span>}
|
||||
</div>
|
||||
{isRouted && (
|
||||
<select
|
||||
className="gain-select"
|
||||
value={gain}
|
||||
onChange={(e) => setGainForGroupToOutput(group.id, String(i), e.target.value)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<option value="-12">-12dB</option>
|
||||
<option value="-6">-6dB</option>
|
||||
<option value="-3">-3dB</option>
|
||||
<option value="0">0dB</option>
|
||||
<option value="3">+3dB</option>
|
||||
<option value="6">+6dB</option>
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="routing-actions">
|
||||
<button onClick={saveRouting} className="btn-primary">
|
||||
Sauvegarder le routing audio
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AudioRoutingMatrix;
|
||||
Reference in New Issue
Block a user