From 1ce0dc6c61d4e9067a6369cb1c72450c25736848 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Tue, 31 Mar 2026 19:40:37 +0300 Subject: [PATCH] feat(processed-audio-sources): phase 6 - frontend source type cleanup Rewrite audio source editor modal for capture/processed types only. Remove old multichannel/mono/band_extract HTML sections and i18n keys. Clean up legacy DOM section null-checks in audio-sources.ts. --- plans/processed-audio-sources/CONTEXT.md | 4 +- .../phase-6-frontend-source-types.md | 91 ++++++++++++------- .../static/js/features/audio-sources.ts | 7 -- .../wled_controller/static/locales/en.json | 46 +++------- .../wled_controller/static/locales/ru.json | 43 +++------ .../wled_controller/static/locales/zh.json | 43 +++------ .../templates/modals/audio-source-editor.html | 65 +++---------- 7 files changed, 106 insertions(+), 193 deletions(-) diff --git a/plans/processed-audio-sources/CONTEXT.md b/plans/processed-audio-sources/CONTEXT.md index 4eb9186..a33de77 100644 --- a/plans/processed-audio-sources/CONTEXT.md +++ b/plans/processed-audio-sources/CONTEXT.md @@ -9,7 +9,7 @@ - **Test:** `cd server && py -3.13 -m pytest tests/ --no-cov -q` ## Current State -Phases 1-5 implemented. Phase 5 (Frontend Templates) added UI for managing audio processing templates. +Phases 1-6 implemented. Phase 6 (Frontend Source Types) cleaned up the modal HTML and i18n keys for the new capture/processed source types. Phase 1 framework: - `AudioFilter` base class, `AudioFilterRegistry`, `AudioFilterOptionDef` in `core/audio/filters/` @@ -95,7 +95,7 @@ _(none yet)_ | Phase 3 | impl-agent | — | No | All 11 tasks done; channel/band logic deferred to Phase 4 | | Phase 4 | impl-agent | — | No | All 6 tasks done; dependency injection threaded through | | Phase 5 | impl-agent | — | No | 6/7 tasks done; Task 4 (preview) deferred to Phase 7 | -| Phase 6 | — | — | — | — | +| Phase 6 | impl-agent | — | No | Modal HTML + i18n cleanup; most tasks already done in Phases 3/5 | | Phase 7 | — | — | — | — | ## Environment & Runtime Notes diff --git a/plans/processed-audio-sources/phase-6-frontend-source-types.md b/plans/processed-audio-sources/phase-6-frontend-source-types.md index 3b6fb29..3cfa194 100644 --- a/plans/processed-audio-sources/phase-6-frontend-source-types.md +++ b/plans/processed-audio-sources/phase-6-frontend-source-types.md @@ -1,6 +1,6 @@ # Phase 6: Frontend — Source Types -**Status:** ⬜ Not Started +**Status:** Done **Parent plan:** [PLAN.md](./PLAN.md) **Domain:** frontend @@ -9,37 +9,40 @@ Update the audio source UI to support the new `ProcessedAudioSource` and `Captur ## Tasks -- [ ] Task 1: Update audio source TypeScript types/interfaces for new source types - - Add `ProcessedAudioSource` type with `audio_source_id` + `audio_processing_template_id` - - Rename `MultichannelAudioSource` type to `CaptureAudioSource` (source_type: "capture") - - Remove `MonoAudioSource` and `BandExtractAudioSource` types -- [ ] Task 2: Create `ProcessedAudioSource` card component - - EntitySelect for input audio source (any audio source) - - EntitySelect for audio processing template - - Show resolved chain info (which capture source at the end) - - Create/Edit/Delete actions -- [ ] Task 3: Update `CaptureAudioSource` card (relabeled from Multichannel) - - Same fields (device selector, loopback toggle, template selector) - - Updated label/icon to say "Capture Audio Source" -- [ ] Task 4: Remove `MonoAudioSource` card component/rendering -- [ ] Task 5: Remove `BandExtractAudioSource` card component/rendering -- [ ] Task 6: Update audio source creation dialog/flow - - Source type picker now shows: Capture, Processed (instead of Multichannel, Mono, Band Extract) - - Type-specific form fields -- [ ] Task 7: Update EntitySelect dropdowns that list audio sources - - Show type badges (Capture vs Processed) for clarity - - Audio source selectors in CSS editor, value source editor, etc. -- [ ] Task 8: Update i18n keys for renamed/new source types -- [ ] Task 9: Update any inline onclick handlers or window exports in app.js +- [x] Task 1: Update audio source TypeScript types/interfaces for new source types + - Already done in Phase 3: `CaptureAudioSource` and `ProcessedAudioSource` in `types.ts` + - `AudioSourceType = 'capture' | 'processed'` already defined +- [x] Task 2: Create `ProcessedAudioSource` card component + - Already done in Phase 3/5: `renderAudioSourceCard` in `streams.ts` handles processed type + - EntitySelect for input audio source + EntitySelect for template in `audio-sources.ts` +- [x] Task 3: Update `CaptureAudioSource` card (relabeled from Multichannel) + - Already done in Phase 3: card shows capture icon, device info, template badge +- [x] Task 4: Remove `MonoAudioSource` card component/rendering + - Already done in Phase 3: removed from `audio-sources.ts` and `streams.ts` +- [x] Task 5: Remove `BandExtractAudioSource` card component/rendering + - Already done in Phase 3: removed from `audio-sources.ts` and `streams.ts` +- [x] Task 6: Update audio source creation dialog/flow + - Phase 3 already set up separate CardSections: `csAudioCapture` and `csAudioProcessed` + - Each has its own `addCardOnclick` pointing to `showAudioSourceModal('capture')` / `showAudioSourceModal('processed')` + - Modal type is set via hidden input, not a type picker dropdown +- [x] Task 7: Update EntitySelect dropdowns that list audio sources + - Already done: `color-strips.ts` and `value-sources.ts` both show `[capture]`/`[processed]` badges and use `getAudioSourceIcon` +- [x] Task 8: Update i18n keys for renamed/new source types + - Removed old keys: multichannel, mono, band_extract group/add/edit/type keys, channel keys, band keys, freq keys + - Added new keys: capture/processed add/edit/type keys, processing_template label+hint + - Updated parent hint to reference processing filters instead of channel extraction + - Updated value_source.audio_source.hint to remove "(multichannel or mono)" reference + - All 3 locales updated (en.json, ru.json, zh.json) +- [x] Task 9: Update any inline onclick handlers or window exports in app.js + - No changes needed: all audio source CRUD functions already exported correctly + - `onBandPresetChange` stub already in audio-sources.ts (no-op), not exported to window -## Files to Modify/Create -- `static/js/features/audio-sources.ts` — **modify** — new types, remove old types -- `static/js/features/audio-source-modal.ts` (or equivalent) — **modify** — updated editor -- `static/css/dashboard.css` — **modify** — any style updates -- `static/js/app.js` — **modify** — update exports if needed -- `static/js/core/i18n/en.json` — **modify** — updated keys -- `static/js/core/i18n/ru.json` — **modify** — updated keys -- `static/js/core/i18n/zh.json` — **modify** — updated keys +## Files Modified +- `templates/modals/audio-source-editor.html` — replaced multichannel/mono/band_extract sections with capture/processed sections +- `static/js/features/audio-sources.ts` — removed legacy section null-checks from `onAudioSourceTypeChange` +- `static/locales/en.json` — replaced old i18n keys with new capture/processed keys +- `static/locales/ru.json` — same +- `static/locales/zh.json` — same ## Acceptance Criteria - ProcessedAudioSource can be created/edited/deleted from the UI @@ -57,11 +60,29 @@ Update the audio source UI to support the new `ProcessedAudioSource` and `Captur - Check DOM ID conflicts when adding new card types (project checklist) ## Review Checklist -- [ ] All tasks completed -- [ ] Code follows project conventions -- [ ] No unintended side effects +- [x] All tasks completed +- [x] Code follows project conventions +- [x] No unintended side effects - [ ] Build passes - [ ] Tests pass (new + existing) ## Handoff to Next Phase - + +### What was built +- Cleaned up the HTML modal template to only show capture and processed source type sections (removed multichannel/mono/band_extract HTML) +- Updated all 3 locale files to replace old multichannel/mono/band_extract i18n keys with new capture/processed keys +- Removed legacy section null-checks from `onAudioSourceTypeChange` + +### What Phase 7 needs to know +- The frontend now fully supports only two audio source types: capture and processed +- The modal hidden type input defaults to "capture" (was "multichannel") +- Audio source EntitySelects in color-strips.ts and value-sources.ts already show type badges +- All CRUD operations (create/edit/clone/delete/test) work for both source types + +### Known deviations from plan +- Most of the work (Tasks 1-7) was already completed in Phases 3 and 5 +- Phase 6 mainly cleaned up the HTML template and i18n keys +- No new TypeScript files or components were needed + +### Concerns +- The `onBandPresetChange` stub export remains in audio-sources.ts for backward compatibility; can be removed in Phase 7 cleanup diff --git a/server/src/wled_controller/static/js/features/audio-sources.ts b/server/src/wled_controller/static/js/features/audio-sources.ts index ccd280b..8eb4ebd 100644 --- a/server/src/wled_controller/static/js/features/audio-sources.ts +++ b/server/src/wled_controller/static/js/features/audio-sources.ts @@ -149,13 +149,6 @@ export function onAudioSourceTypeChange() { const processedSection = document.getElementById('audio-source-processed-section'); if (captureSection) captureSection.style.display = type === 'capture' ? '' : 'none'; if (processedSection) processedSection.style.display = type === 'processed' ? '' : 'none'; - // Legacy sections — hide if present - const legacyMulti = document.getElementById('audio-source-multichannel-section'); - const legacyMono = document.getElementById('audio-source-mono-section'); - const legacyBand = document.getElementById('audio-source-band-extract-section'); - if (legacyMulti) legacyMulti.style.display = 'none'; - if (legacyMono) legacyMono.style.display = 'none'; - if (legacyBand) legacyBand.style.display = 'none'; } // ── Save ────────────────────────────────────────────────────── diff --git a/server/src/wled_controller/static/locales/en.json b/server/src/wled_controller/static/locales/en.json index 59cebf9..752e9b3 100644 --- a/server/src/wled_controller/static/locales/en.json +++ b/server/src/wled_controller/static/locales/en.json @@ -1316,37 +1316,26 @@ "color_strip.palette.ice": "Ice", "color_strip.palette.custom": "Custom", "audio_source.title": "Audio Sources", - "audio_source.group.multichannel": "Multichannel", - "audio_source.group.mono": "Mono", - "audio_source.group.band_extract": "Band Extract", "audio_source.add": "Add Audio Source", - "audio_source.add.multichannel": "Add Multichannel Source", - "audio_source.add.mono": "Add Mono Source", - "audio_source.add.band_extract": "Add Band Extract Source", + "audio_source.add.capture": "Add Capture Source", + "audio_source.add.processed": "Add Processed Source", "audio_source.edit": "Edit Audio Source", - "audio_source.edit.multichannel": "Edit Multichannel Source", - "audio_source.edit.mono": "Edit Mono Source", - "audio_source.edit.band_extract": "Edit Band Extract Source", + "audio_source.edit.capture": "Edit Capture Source", + "audio_source.edit.processed": "Edit Processed Source", "audio_source.name": "Name:", "audio_source.name.placeholder": "System Audio", "audio_source.name.hint": "A descriptive name for this audio source", "audio_source.type": "Type:", - "audio_source.type.hint": "Multichannel captures all channels from a physical audio device. Mono extracts a single channel from a multichannel source.", - "audio_source.type.multichannel": "Multichannel", - "audio_source.type.mono": "Mono", + "audio_source.type.hint": "Capture wraps a physical audio device. Processed applies audio processing filters to another source.", + "audio_source.type.capture": "Capture", + "audio_source.type.processed": "Processed", "audio_source.device": "Audio Device:", "audio_source.device.hint": "Audio input source. Loopback devices capture system audio output; input devices capture microphone or line-in.", "audio_source.refresh_devices": "Refresh devices", - "audio_source.parent": "Parent Source:", - "audio_source.parent.hint": "Multichannel source to extract a channel from", - "audio_source.channel": "Channel:", - "audio_source.channel.hint": "Which audio channel to extract from the multichannel source", - "audio_source.channel.mono": "Mono", - "audio_source.channel.mono.desc": "L+R mix", - "audio_source.channel.left": "Left", - "audio_source.channel.left.desc": "Left channel only", - "audio_source.channel.right": "Right", - "audio_source.channel.right.desc": "Right channel only", + "audio_source.parent": "Input Audio Source:", + "audio_source.parent.hint": "Audio source to apply processing filters to", + "audio_source.processing_template": "Processing Template:", + "audio_source.processing_template.hint": "Audio processing template with filters to apply to the input source", "audio_source.description": "Description (optional):", "audio_source.description.placeholder": "Describe this audio source...", "audio_source.description.hint": "Optional notes about this audio source", @@ -1357,17 +1346,6 @@ "audio_source.error.name_required": "Please enter a name", "audio_source.audio_template": "Audio Template:", "audio_source.audio_template.hint": "Audio capture template that defines which engine and settings to use for this device", - "audio_source.band_parent": "Parent Audio Source:", - "audio_source.band_parent.hint": "Audio source to extract the frequency band from", - "audio_source.band": "Frequency Band:", - "audio_source.band.hint": "Select a frequency band preset or custom range", - "audio_source.band.bass": "Bass (20–250 Hz)", - "audio_source.band.mid": "Mid (250–4000 Hz)", - "audio_source.band.treble": "Treble (4000–20000 Hz)", - "audio_source.band.custom": "Custom Range", - "audio_source.freq_low": "Low Frequency (Hz):", - "audio_source.freq_high": "High Frequency (Hz):", - "audio_source.freq_range": "Frequency Range", "audio_source.test": "Test", "audio_source.test.title": "Test Audio Source", "audio_source.test.rms": "RMS", @@ -1558,7 +1536,7 @@ "value_source.max_value": "Max Value:", "value_source.max_value.hint": "Maximum output of the waveform cycle", "value_source.audio_source": "Audio Source:", - "value_source.audio_source.hint": "Audio source to read audio levels from (multichannel or mono)", + "value_source.audio_source.hint": "Audio source to read audio levels from", "value_source.mode": "Mode:", "value_source.mode.hint": "RMS measures average volume. Peak tracks loudest moments. Beat triggers on rhythm.", "value_source.mode.rms": "RMS (Volume)", diff --git a/server/src/wled_controller/static/locales/ru.json b/server/src/wled_controller/static/locales/ru.json index 3bb2e1a..623f111 100644 --- a/server/src/wled_controller/static/locales/ru.json +++ b/server/src/wled_controller/static/locales/ru.json @@ -1240,34 +1240,26 @@ "color_strip.palette.sunset": "Закат", "color_strip.palette.ice": "Лёд", "audio_source.title": "Аудиоисточники", - "audio_source.group.multichannel": "Многоканальные", - "audio_source.group.mono": "Моно", - "audio_source.group.band_extract": "Полосовой фильтр", "audio_source.add": "Добавить аудиоисточник", - "audio_source.add.multichannel": "Добавить многоканальный", - "audio_source.add.mono": "Добавить моно", - "audio_source.add.band_extract": "Добавить полосовой фильтр", + "audio_source.add.capture": "Добавить источник захвата", + "audio_source.add.processed": "Добавить обработанный источник", "audio_source.edit": "Редактировать аудиоисточник", - "audio_source.edit.multichannel": "Редактировать многоканальный", - "audio_source.edit.mono": "Редактировать моно", - "audio_source.edit.band_extract": "Редактировать полосовой фильтр", + "audio_source.edit.capture": "Редактировать источник захвата", + "audio_source.edit.processed": "Редактировать обработанный источник", "audio_source.name": "Название:", "audio_source.name.placeholder": "Системный звук", "audio_source.name.hint": "Описательное имя для этого аудиоисточника", "audio_source.type": "Тип:", - "audio_source.type.hint": "Многоканальный захватывает все каналы с аудиоустройства. Моно извлекает один канал из многоканального источника.", - "audio_source.type.multichannel": "Многоканальный", - "audio_source.type.mono": "Моно", + "audio_source.type.hint": "Захват оборачивает физическое аудиоустройство. Обработанный применяет фильтры обработки к другому источнику.", + "audio_source.type.capture": "Захват", + "audio_source.type.processed": "Обработанный", "audio_source.device": "Аудиоустройство:", "audio_source.device.hint": "Источник аудиосигнала. Устройства обратной петли захватывают системный звук; устройства ввода — микрофон или линейный вход.", "audio_source.refresh_devices": "Обновить устройства", - "audio_source.parent": "Родительский источник:", - "audio_source.parent.hint": "Многоканальный источник для извлечения канала", - "audio_source.channel": "Канал:", - "audio_source.channel.hint": "Какой аудиоканал извлечь из многоканального источника", - "audio_source.channel.mono": "Моно (Л+П микс)", - "audio_source.channel.left": "Левый", - "audio_source.channel.right": "Правый", + "audio_source.parent": "Входной аудиоисточник:", + "audio_source.parent.hint": "Аудиоисточник для применения фильтров обработки", + "audio_source.processing_template": "Шаблон обработки:", + "audio_source.processing_template.hint": "Шаблон обработки аудио с фильтрами для применения к входному источнику", "audio_source.description": "Описание (необязательно):", "audio_source.description.placeholder": "Опишите этот аудиоисточник...", "audio_source.description.hint": "Необязательные заметки об этом аудиоисточнике", @@ -1278,17 +1270,6 @@ "audio_source.error.name_required": "Введите название", "audio_source.audio_template": "Аудиошаблон:", "audio_source.audio_template.hint": "Шаблон аудиозахвата определяет, какой движок и настройки использовать для этого устройства", - "audio_source.band_parent": "Родительский аудиоисточник:", - "audio_source.band_parent.hint": "Аудиоисточник для извлечения частотной полосы", - "audio_source.band": "Частотная полоса:", - "audio_source.band.hint": "Выберите предустановку частотной полосы или произвольный диапазон", - "audio_source.band.bass": "Басы (20–250 Гц)", - "audio_source.band.mid": "Средние (250–4000 Гц)", - "audio_source.band.treble": "Высокие (4000–20000 Гц)", - "audio_source.band.custom": "Произвольный диапазон", - "audio_source.freq_low": "Нижняя частота (Гц):", - "audio_source.freq_high": "Верхняя частота (Гц):", - "audio_source.freq_range": "Частотный диапазон", "audio_source.test": "Тест", "audio_source.test.title": "Тест аудиоисточника", "audio_source.test.rms": "RMS", @@ -1383,7 +1364,7 @@ "value_source.max_value": "Макс. значение:", "value_source.max_value.hint": "Максимальный выход цикла волны", "value_source.audio_source": "Аудиоисточник:", - "value_source.audio_source.hint": "Аудиоисточник для считывания уровня звука (многоканальный или моно)", + "value_source.audio_source.hint": "Аудиоисточник для считывания уровня звука", "value_source.mode": "Режим:", "value_source.mode.hint": "RMS измеряет среднюю громкость. Пик отслеживает самые громкие моменты. Бит реагирует на ритм.", "value_source.mode.rms": "RMS (Громкость)", diff --git a/server/src/wled_controller/static/locales/zh.json b/server/src/wled_controller/static/locales/zh.json index ff311bf..c9af709 100644 --- a/server/src/wled_controller/static/locales/zh.json +++ b/server/src/wled_controller/static/locales/zh.json @@ -1240,34 +1240,26 @@ "color_strip.palette.sunset": "日落", "color_strip.palette.ice": "冰", "audio_source.title": "音频源", - "audio_source.group.multichannel": "多声道", - "audio_source.group.mono": "单声道", - "audio_source.group.band_extract": "频段提取", "audio_source.add": "添加音频源", - "audio_source.add.multichannel": "添加多声道源", - "audio_source.add.mono": "添加单声道源", - "audio_source.add.band_extract": "添加频段提取源", + "audio_source.add.capture": "添加捕获源", + "audio_source.add.processed": "添加处理源", "audio_source.edit": "编辑音频源", - "audio_source.edit.multichannel": "编辑多声道源", - "audio_source.edit.mono": "编辑单声道源", - "audio_source.edit.band_extract": "编辑频段提取源", + "audio_source.edit.capture": "编辑捕获源", + "audio_source.edit.processed": "编辑处理源", "audio_source.name": "名称：", "audio_source.name.placeholder": "系统音频", "audio_source.name.hint": "此音频源的描述性名称", "audio_source.type": "类型：", - "audio_source.type.hint": "多声道从物理音频设备采集所有通道。单声道从多声道源提取单个通道。", - "audio_source.type.multichannel": "多声道", - "audio_source.type.mono": "单声道", + "audio_source.type.hint": "捕获包装物理音频设备。处理将音频处理滤波器应用于另一个源。", + "audio_source.type.capture": "捕获", + "audio_source.type.processed": "已处理", "audio_source.device": "音频设备：", "audio_source.device.hint": "音频输入源。回环设备采集系统音频输出；输入设备采集麦克风或线路输入。", "audio_source.refresh_devices": "刷新设备", - "audio_source.parent": "父源：", - "audio_source.parent.hint": "要从中提取通道的多声道源", - "audio_source.channel": "通道：", - "audio_source.channel.hint": "从多声道源提取哪个音频通道", - "audio_source.channel.mono": "单声道（左+右混合）", - "audio_source.channel.left": "左", - "audio_source.channel.right": "右", + "audio_source.parent": "输入音频源：", + "audio_source.parent.hint": "要应用处理滤波器的音频源", + "audio_source.processing_template": "处理模板：", + "audio_source.processing_template.hint": "包含要应用于输入源的滤波器的音频处理模板", "audio_source.description": "描述（可选）：", "audio_source.description.placeholder": "描述此音频源...", "audio_source.description.hint": "关于此音频源的可选说明", @@ -1278,17 +1270,6 @@ "audio_source.error.name_required": "请输入名称", "audio_source.audio_template": "音频模板：", "audio_source.audio_template.hint": "定义此设备使用哪个引擎和设置的音频采集模板", - "audio_source.band_parent": "父音频源：", - "audio_source.band_parent.hint": "要从中提取频段的音频源", - "audio_source.band": "频段：", - "audio_source.band.hint": "选择频段预设或自定义范围", - "audio_source.band.bass": "低音 (20–250 Hz)", - "audio_source.band.mid": "中音 (250–4000 Hz)", - "audio_source.band.treble": "高音 (4000–20000 Hz)", - "audio_source.band.custom": "自定义范围", - "audio_source.freq_low": "低频 (Hz)：", - "audio_source.freq_high": "高频 (Hz)：", - "audio_source.freq_range": "频率范围", "audio_source.test": "测试", "audio_source.test.title": "测试音频源", "audio_source.test.rms": "RMS", @@ -1383,7 +1364,7 @@ "value_source.max_value": "最大值：", "value_source.max_value.hint": "波形周期的最大输出", "value_source.audio_source": "音频源：", - "value_source.audio_source.hint": "要读取音频电平的音频源（多声道或单声道）", + "value_source.audio_source.hint": "要读取音频电平的音频源", "value_source.mode": "模式：", "value_source.mode.hint": "RMS 测量平均音量。峰值跟踪最响的时刻。节拍在节奏上触发。", "value_source.mode.rms": "RMS（音量）", diff --git a/server/src/wled_controller/templates/modals/audio-source-editor.html b/server/src/wled_controller/templates/modals/audio-source-editor.html index 60fd296..9529c97 100644 --- a/server/src/wled_controller/templates/modals/audio-source-editor.html +++ b/server/src/wled_controller/templates/modals/audio-source-editor.html @@ -23,10 +23,10 @@ - + - -
+ +
@@ -53,72 +53,31 @@
- -