From 9a2bec6d2fa93ed237eefa96858135f173d1760c Mon Sep 17 00:00:00 2001 From: Benoit Date: Wed, 1 Jul 2026 14:27:35 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20page=20Routing=20compl=C3=A8te=20+=20ge?= =?UTF-8?q?stion=20server=5Faudio=5Fusers=20dans=20Config?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Page Routing : matrices Entrées→Groupes et Groupes→Sorties avec checkboxes, éditeur de noms de canaux (ajout/suppression dynamique), sauvegarde YAML directe - Page Config : section Utilisateurs Audio Serveur (CRUD complet, modal avec sélecteur de groupe, canaux entrée/sortie) - IPC main.js : handlers server-audio-users:list/create/update/delete, routing:get, routing:save - preload.js : namespaces electronAPI.serverAudioUsers et electronAPI.routing - showModal : support du type 'select' avec options - loadViewData : routing et config lisibles sans serveur (YAML direct) --- electron/main.js | 83 ++++++++ electron/preload.js | 14 ++ electron/ui/app.js | 422 +++++++++++++++++++++++++++++++++++++++-- electron/ui/index.html | 68 +++++++ electron/ui/styles.css | 154 +++++++++++++++ 5 files changed, 723 insertions(+), 18 deletions(-) diff --git a/electron/main.js b/electron/main.js index 7aadda2..fb815d3 100644 --- a/electron/main.js +++ b/electron/main.js @@ -436,6 +436,89 @@ app.whenReady().then(async () => { } }); + // ========== Server Audio Users (lecture/écriture YAML directe) ========== + + ipcMain.handle('server-audio-users:list', () => { + try { + const config = readConfig(); + return { users: config.server_audio_users || [] }; + } catch (error) { + return { users: [], error: error.message }; + } + }); + + ipcMain.handle('server-audio-users:create', (event, { name, group, input_channel, output_channel }) => { + try { + const config = readConfig(); + const users = config.server_audio_users || []; + if (users.find(u => u.name === name)) { + return { success: false, error: `Un utilisateur "${name}" existe déjà` }; + } + const user = { name, group, input_channel: parseInt(input_channel), output_channel: parseInt(output_channel) }; + config.server_audio_users = [...users, user]; + writeConfig(config); + return { success: true, user }; + } catch (error) { + return { success: false, error: error.message }; + } + }); + + ipcMain.handle('server-audio-users:update', (event, { name, group, input_channel, output_channel }) => { + try { + const config = readConfig(); + const users = config.server_audio_users || []; + const idx = users.findIndex(u => u.name === name); + if (idx === -1) return { success: false, error: `Utilisateur "${name}" introuvable` }; + config.server_audio_users[idx] = { name, group, input_channel: parseInt(input_channel), output_channel: parseInt(output_channel) }; + writeConfig(config); + return { success: true }; + } catch (error) { + return { success: false, error: error.message }; + } + }); + + ipcMain.handle('server-audio-users:delete', (event, { name }) => { + try { + const config = readConfig(); + const users = config.server_audio_users || []; + const idx = users.findIndex(u => u.name === name); + if (idx === -1) return { success: false, error: `Utilisateur "${name}" introuvable` }; + config.server_audio_users.splice(idx, 1); + writeConfig(config); + return { success: true }; + } catch (error) { + return { success: false, error: error.message }; + } + }); + + // ========== Routing (lecture/écriture YAML directe) ========== + + ipcMain.handle('routing:get', () => { + try { + const config = readConfig(); + return { + routing: config.audio?.routing || { inputToGroup: {}, groupToOutput: {}, gains: {} }, + channelNames: config.audio?.channelNames || { inputs: {}, outputs: {} }, + groups: config.groups || [] + }; + } catch (error) { + return { error: error.message }; + } + }); + + ipcMain.handle('routing:save', (event, { routing, channelNames }) => { + try { + const config = readConfig(); + if (!config.audio) config.audio = {}; + config.audio.routing = routing; + config.audio.channelNames = channelNames; + writeConfig(config); + return { success: true }; + } catch (error) { + return { success: false, error: error.message }; + } + }); + ipcMain.handle('config:export', async () => { const configPath = path.join(__dirname, '..', 'server', 'config', 'config.yaml'); diff --git a/electron/preload.js b/electron/preload.js index a6d2f2f..920b449 100644 --- a/electron/preload.js +++ b/electron/preload.js @@ -51,6 +51,20 @@ contextBridge.exposeInMainWorld('electronAPI', { delete: (data) => ipcRenderer.invoke('groups:delete', data) }, + // Utilisateurs audio serveur : lecture/écriture YAML directe (fonctionne sans serveur) + serverAudioUsers: { + list: () => ipcRenderer.invoke('server-audio-users:list'), + create: (data) => ipcRenderer.invoke('server-audio-users:create', data), + update: (data) => ipcRenderer.invoke('server-audio-users:update', data), + delete: (data) => ipcRenderer.invoke('server-audio-users:delete', data) + }, + + // Routing audio : lecture/écriture YAML directe (fonctionne sans serveur) + routing: { + get: () => ipcRenderer.invoke('routing:get'), + save: (data) => ipcRenderer.invoke('routing:save', data) + }, + // Helpers platform: process.platform, version: process.env.npm_package_version || '0.3.0' diff --git a/electron/ui/app.js b/electron/ui/app.js index 009fc3f..c0046c0 100644 --- a/electron/ui/app.js +++ b/electron/ui/app.js @@ -9,6 +9,7 @@ let serverRunning = false; let statsInterval = null; let logsBuffer = []; let audioLevelsWS = null; +let routingData = null; let audioLevelsData = { inputs: {}, groups: {}, @@ -572,12 +573,26 @@ async function loadInitialData() { } async function loadViewData(view) { - // Les groupes sont lisibles même sans serveur (config.yaml direct) + // Ces vues lisent config.yaml directement (fonctionne sans serveur) if (view === 'groups') { await fetchGroups(); return; } + if (view === 'routing') { + await fetchRouting(); + return; + } + + if (view === 'config') { + await fetchServerAudioUsers(); + if (serverRunning) { + await fetchDevices(); + await fetchConfig(); + } + return; + } + if (!serverRunning) return; switch (view) { @@ -586,10 +601,6 @@ async function loadViewData(view) { await fetchUsers(); await generateQRCode(); break; - case 'config': - await fetchDevices(); - await fetchConfig(); - break; case 'monitoring': renderVUMeters(); break; @@ -778,8 +789,372 @@ document.addEventListener('DOMContentLoaded', () => { } }); } + + // Bouton ajouter utilisateur audio serveur + const btnAddSAU = document.getElementById('btn-add-server-audio-user'); + if (btnAddSAU) { + btnAddSAU.addEventListener('click', addServerAudioUser); + } + + // Délégation modifier/supprimer utilisateur audio serveur + const sauList = document.getElementById('server-audio-users-list'); + if (sauList) { + sauList.addEventListener('click', async (e) => { + const btn = e.target.closest('[data-sau-action]'); + if (!btn) return; + const action = btn.dataset.sauAction; + const name = btn.dataset.sauName; + if (action === 'edit') { + await editServerAudioUser(name, btn.dataset.sauGroup, parseInt(btn.dataset.sauInput), parseInt(btn.dataset.sauOutput)); + } else if (action === 'delete') { + await deleteServerAudioUser(name); + } + }); + } + + // Boutons routing + document.getElementById('btn-save-routing')?.addEventListener('click', saveRouting); + document.getElementById('btn-reload-routing')?.addEventListener('click', fetchRouting); + document.getElementById('btn-add-input-channel')?.addEventListener('click', () => addChannelRow('input')); + document.getElementById('btn-add-output-channel')?.addEventListener('click', () => addChannelRow('output')); + + // Délégation suppression lignes canal (boutons ✕) + document.addEventListener('click', (e) => { + const btn = e.target.closest('.channel-name-delete'); + if (!btn) return; + deleteChannelRow(btn.dataset.dir, btn.dataset.channel); + }); }); +// ========== Server Audio Users ========== + +async function fetchServerAudioUsers() { + const container = document.getElementById('server-audio-users-list'); + if (!container) return; + + const data = await window.electronAPI.serverAudioUsers.list(); + + const serverNote = serverRunning ? '' : + '

Serveur arrêté — les modifications seront appliquées au prochain démarrage.

'; + + if (!data.users || data.users.length === 0) { + container.innerHTML = serverNote + '

Aucun utilisateur audio serveur configuré

'; + return; + } + + container.innerHTML = serverNote + data.users.map(user => ` +
+
+

${escapeHtml(user.name)}

+

Groupe: ${escapeHtml(user.group)} · Entrée: canal ${user.input_channel} · Sortie: canal ${user.output_channel}

+
+
+ + +
+
+ `).join(''); +} + +async function addServerAudioUser() { + const groupsData = await window.electronAPI.groups.list(); + const groupOptions = (groupsData.groups || []).map(g => ({ + value: slugify(g.name), + label: g.name + })); + const defaultGroup = groupOptions[0]?.value || 'default'; + + const result = await showModal({ + title: 'Nouvel utilisateur audio serveur', + fields: [ + { name: 'name', label: 'Nom (identifiant unique, ex: foh)' }, + { name: 'group', label: 'Groupe', type: 'select', options: groupOptions, default: defaultGroup }, + { name: 'input_channel', label: 'Canal entrée (index physique)', type: 'number', default: 0, min: 0, max: 63, step: 1 }, + { name: 'output_channel', label: 'Canal sortie (index physique)', type: 'number', default: 0, min: 0, max: 63, step: 1 } + ], + confirmLabel: 'Ajouter' + }); + + if (!result || !result.name.trim()) return; + + const res = await window.electronAPI.serverAudioUsers.create({ + name: result.name.trim(), + group: result.group, + input_channel: parseInt(result.input_channel), + output_channel: parseInt(result.output_channel) + }); + + if (res.success) { + showNotification('Utilisateur audio serveur ajouté', 'success'); + await fetchServerAudioUsers(); + } else { + showNotification('Erreur: ' + (res.error || 'Création échouée'), 'error'); + } +} + +async function editServerAudioUser(name, group, input_channel, output_channel) { + const groupsData = await window.electronAPI.groups.list(); + const groupOptions = (groupsData.groups || []).map(g => ({ + value: slugify(g.name), + label: g.name + })); + + const result = await showModal({ + title: `Modifier "${name}"`, + fields: [ + { name: 'group', label: 'Groupe', type: 'select', options: groupOptions, default: group }, + { name: 'input_channel', label: 'Canal entrée (index physique)', type: 'number', default: input_channel, min: 0, max: 63, step: 1 }, + { name: 'output_channel', label: 'Canal sortie (index physique)', type: 'number', default: output_channel, min: 0, max: 63, step: 1 } + ], + confirmLabel: 'Modifier' + }); + + if (!result) return; + + const res = await window.electronAPI.serverAudioUsers.update({ + name, + group: result.group, + input_channel: parseInt(result.input_channel), + output_channel: parseInt(result.output_channel) + }); + + if (res.success) { + showNotification('Utilisateur audio serveur modifié', 'success'); + await fetchServerAudioUsers(); + } else { + showNotification('Erreur: ' + (res.error || 'Modification échouée'), 'error'); + } +} + +async function deleteServerAudioUser(name) { + const confirmed = await showModal({ + title: 'Supprimer l\'utilisateur audio serveur', + message: `Supprimer "${name}" ? Cette action est irréversible.`, + confirmLabel: 'Supprimer', + confirmClass: 'btn-danger' + }); + + if (!confirmed) return; + + const res = await window.electronAPI.serverAudioUsers.delete({ name }); + + if (res.success) { + showNotification('Utilisateur audio serveur supprimé', 'success'); + await fetchServerAudioUsers(); + } else { + showNotification('Erreur: ' + (res.error || 'Suppression échouée'), 'error'); + } +} + +// ========== Routing ========== + +async function fetchRouting() { + const data = await window.electronAPI.routing.get(); + if (data.error) { + showNotification('Erreur chargement routing: ' + data.error, 'error'); + return; + } + routingData = data; + renderRoutingView(); +} + +function renderRoutingView() { + if (!routingData) return; + renderChannelNamesEditor(); + renderRoutingMatrices(); +} + +function renderChannelNamesEditor() { + const { channelNames } = routingData; + const inputs = channelNames?.inputs || {}; + const outputs = channelNames?.outputs || {}; + + const inputChannels = Object.keys(inputs).sort((a, b) => parseInt(a) - parseInt(b)); + const outputChannels = Object.keys(outputs).sort((a, b) => parseInt(a) - parseInt(b)); + + const inputsContainer = document.getElementById('channel-names-inputs'); + const outputsContainer = document.getElementById('channel-names-outputs'); + + if (inputsContainer) { + inputsContainer.innerHTML = inputChannels.length > 0 + ? inputChannels.map(ch => channelNameRow('input', ch, inputs[ch] || '')).join('') + : '

Aucun canal d\'entrée défini.

'; + } + + if (outputsContainer) { + outputsContainer.innerHTML = outputChannels.length > 0 + ? outputChannels.map(ch => channelNameRow('output', ch, outputs[ch] || '')).join('') + : '

Aucun canal de sortie défini.

'; + } +} + +function channelNameRow(dir, ch, name) { + return ` +
+ Canal ${ch} + + +
`; +} + +function addChannelRow(dir) { + const containerId = dir === 'input' ? 'channel-names-inputs' : 'channel-names-outputs'; + const container = document.getElementById(containerId); + if (!container) return; + + // Retirer le message "Aucun canal" si présent + const emptyMsg = container.querySelector('.config-note'); + if (emptyMsg) emptyMsg.remove(); + + const existing = Array.from(container.querySelectorAll('.channel-name-row')) + .map(r => parseInt(r.dataset.channel)) + .filter(n => !isNaN(n)); + const nextCh = existing.length > 0 ? Math.max(...existing) + 1 : 0; + + const row = document.createElement('div'); + row.innerHTML = channelNameRow(dir, nextCh, ''); + const newRow = row.firstElementChild; + container.appendChild(newRow); + newRow.querySelector('input')?.focus(); +} + +function deleteChannelRow(dir, channel) { + const containerId = dir === 'input' ? 'channel-names-inputs' : 'channel-names-outputs'; + const container = document.getElementById(containerId); + const row = container?.querySelector(`.channel-name-row[data-channel="${channel}"][data-dir="${dir}"]`); + if (!row) return; + row.remove(); + if (!container.querySelector('.channel-name-row')) { + container.innerHTML = `

Aucun canal de ${dir === 'input' ? 'entrée' : 'sortie'} défini.

`; + } +} + +function renderRoutingMatrices() { + const { routing, channelNames, groups } = routingData; + const inputs = channelNames?.inputs || {}; + const outputs = channelNames?.outputs || {}; + const inputToGroup = routing?.inputToGroup || {}; + const groupToOutput = routing?.groupToOutput || {}; + + const inputChannels = Object.keys(inputs).sort((a, b) => parseInt(a) - parseInt(b)); + const outputChannels = Object.keys(outputs).sort((a, b) => parseInt(a) - parseInt(b)); + + // Matrice Entrées → Groupes + const inputMatrixEl = document.getElementById('routing-input-matrix'); + if (inputMatrixEl) { + if (inputChannels.length === 0 || groups.length === 0) { + inputMatrixEl.innerHTML = '

Définissez des canaux d\'entrée et des groupes pour configurer le routing.

'; + } else { + let html = '
'; + html += ''; + groups.forEach(g => { html += ``; }); + html += ''; + + inputChannels.forEach(ch => { + const chGroups = inputToGroup[ch] || []; + html += ''; + html += ``; + groups.forEach(g => { + const gId = slugify(g.name); + const checked = chGroups.includes(gId) ? 'checked' : ''; + html += ``; + }); + html += ''; + }); + + html += '
Canal Entrée${escapeHtml(g.name)}
${ch}${escapeHtml(inputs[ch] || `Canal ${ch}`)}
'; + inputMatrixEl.innerHTML = html; + } + } + + // Matrice Groupes → Sorties + const outputMatrixEl = document.getElementById('routing-output-matrix'); + if (outputMatrixEl) { + if (groups.length === 0 || outputChannels.length === 0) { + outputMatrixEl.innerHTML = '

Définissez des canaux de sortie et des groupes pour configurer le routing.

'; + } else { + let html = '
'; + html += ''; + outputChannels.forEach(ch => { + html += ``; + }); + html += ''; + + groups.forEach(g => { + const gId = slugify(g.name); + const gOutputs = groupToOutput[gId] || []; + html += ''; + html += ``; + outputChannels.forEach(ch => { + const checked = gOutputs.includes(ch) ? 'checked' : ''; + html += ``; + }); + html += ''; + }); + + html += '
Groupe${ch}
${escapeHtml(outputs[ch] || `Canal ${ch}`)}
${escapeHtml(g.name)}
'; + outputMatrixEl.innerHTML = html; + } + } +} + +async function saveRouting() { + if (!routingData) return; + + // Collecter les noms de canaux depuis le DOM + const newChannelNames = { inputs: {}, outputs: {} }; + document.querySelectorAll('.channel-name-input[data-dir="input"]').forEach(el => { + newChannelNames.inputs[el.dataset.channel] = el.value; + }); + document.querySelectorAll('.channel-name-input[data-dir="output"]').forEach(el => { + newChannelNames.outputs[el.dataset.channel] = el.value; + }); + + // Collecter le routing depuis les checkboxes + const newInputToGroup = {}; + const newGroupToOutput = {}; + + document.querySelectorAll('.routing-check[data-direction="input"]:checked').forEach(cb => { + const ch = cb.dataset.channel; + if (!newInputToGroup[ch]) newInputToGroup[ch] = []; + if (!newInputToGroup[ch].includes(cb.dataset.group)) newInputToGroup[ch].push(cb.dataset.group); + }); + + document.querySelectorAll('.routing-check[data-direction="output"]:checked').forEach(cb => { + const g = cb.dataset.group; + if (!newGroupToOutput[g]) newGroupToOutput[g] = []; + if (!newGroupToOutput[g].includes(cb.dataset.channel)) newGroupToOutput[g].push(cb.dataset.channel); + }); + + const newRouting = { + ...(routingData.routing || {}), + inputToGroup: newInputToGroup, + groupToOutput: newGroupToOutput + }; + + const result = await window.electronAPI.routing.save({ routing: newRouting, channelNames: newChannelNames }); + + if (result.success) { + routingData.routing = newRouting; + routingData.channelNames = newChannelNames; + renderRoutingView(); + showNotification('Routing sauvegardé', 'success'); + const note = document.getElementById('routing-server-note'); + if (note) note.classList.remove('hidden'); + } else { + showNotification('Erreur: ' + (result.error || 'Sauvegarde échouée'), 'error'); + } +} + // ========== Helpers ========== /** @@ -802,19 +1177,30 @@ function showModal({ title, fields = [], confirmLabel = 'Confirmer', confirmClas if (message) { bodyEl.innerHTML = `

${escapeHtml(message)}

`; } else { - bodyEl.innerHTML = fields.map(field => ` -
- - -
- `).join(''); + bodyEl.innerHTML = fields.map(field => { + if (field.type === 'select') { + const optionsHtml = (field.options || []).map(opt => + `` + ).join(''); + return ` +
+ + +
`; + } + return ` +
+ + +
`; + }).join(''); } overlay.classList.remove('hidden'); diff --git a/electron/ui/index.html b/electron/ui/index.html index 83050fd..ad8ee0a 100644 --- a/electron/ui/index.html +++ b/electron/ui/index.html @@ -40,6 +40,9 @@ + @@ -123,6 +126,15 @@ +
+

🔗 Utilisateurs Audio Serveur

+

Participants LiveKit côté serveur avec canaux physiques d'entrée et de sortie dédiés (mix-minus natif). Voir aussi la page Routing pour le câblage entre canaux et groupes.

+ +
+

Chargement...

+
+
+

💾 Sauvegarde de configuration

@@ -163,6 +175,62 @@
+ +
+

Routing Audio

+ + +
+

🏷️ Noms des Canaux

+

Définissez les canaux physiques disponibles. Les matrices de routing se mettent à jour après la sauvegarde.

+
+
+
+

Canaux Entrée

+ +
+
+

Chargement...

+
+
+
+
+

Canaux Sortie

+ +
+
+

Chargement...

+
+
+
+
+ + +
+

🎙️ Entrées → Groupes

+

Quels canaux physiques d'entrée alimentent quels groupes LiveKit.

+
+

Chargement...

+
+
+ + +
+

🔊 Groupes → Sorties

+

Vers quels canaux physiques de sortie chaque groupe est routé.

+
+

Chargement...

+
+
+ + +
+ + + +
+
+

Monitoring Audio

diff --git a/electron/ui/styles.css b/electron/ui/styles.css index 2698b57..a9889d5 100644 --- a/electron/ui/styles.css +++ b/electron/ui/styles.css @@ -800,3 +800,157 @@ body { opacity: 0.3; } } + +/* ========== Routing View ========== */ + +.routing-matrix-wrapper { + overflow-x: auto; +} + +.routing-matrix-scroll { + overflow-x: auto; + max-width: 100%; +} + +.routing-matrix { + border-collapse: collapse; + font-size: 0.875rem; + min-width: 100%; +} + +.routing-matrix th, +.routing-matrix td { + padding: 0.5rem 0.75rem; + border: 1px solid var(--border-color); + text-align: center; + vertical-align: middle; +} + +.routing-matrix thead th { + background: var(--bg-tertiary); + font-weight: 600; + position: sticky; + top: 0; + z-index: 1; +} + +.matrix-label-cell { + text-align: left; + font-weight: 600; + background: var(--bg-tertiary); + min-width: 200px; + position: sticky; + left: 0; + z-index: 2; +} + +.matrix-group-header { + min-width: 110px; + font-size: 0.8125rem; + line-height: 1.4; +} + +.matrix-channel-label { + text-align: left; + white-space: nowrap; + background: var(--bg-secondary); + position: sticky; + left: 0; + z-index: 1; +} + +.ch-index { + display: inline-block; + background: var(--bg-primary); + color: var(--accent-primary); + font-family: 'Courier New', monospace; + font-size: 0.75rem; + padding: 0.1rem 0.4rem; + border-radius: 3px; + margin-right: 0.5rem; + min-width: 24px; + text-align: center; +} + +.ch-name { + color: var(--text-secondary); + font-size: 0.8125rem; +} + +.matrix-cell { + text-align: center; +} + +.matrix-cell input[type="checkbox"] { + width: 18px; + height: 18px; + cursor: pointer; + accent-color: var(--accent-primary); +} + +.routing-matrix tbody tr:hover .matrix-channel-label, +.routing-matrix tbody tr:hover td { + background: rgba(74, 158, 255, 0.05); +} + +/* Channel Names Editor */ + +.channel-names-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; +} + +.channel-names-col-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0.75rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--border-color); +} + +.channel-names-col-header h4 { + font-size: 0.875rem; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.06em; + margin: 0; +} + +.channel-names-list { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.channel-name-row { + display: flex; + align-items: center; + gap: 0.625rem; +} + +.channel-index { + min-width: 58px; + font-size: 0.8125rem; + color: var(--text-secondary); + font-family: 'Courier New', monospace; + flex-shrink: 0; +} + +/* Routing actions bar */ + +.routing-actions { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.5rem 0 1.5rem; +} + +.routing-restart-note { + color: var(--accent-warning); +} + +.routing-restart-note.hidden { + display: none; +}