diff --git a/plans/processed-audio-sources/CONTEXT.md b/plans/processed-audio-sources/CONTEXT.md index 15e19d8..4eb9186 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-4 implemented. Phase 4 (Runtime Integration) wired the audio filter pipeline into the stream runtime. +Phases 1-5 implemented. Phase 5 (Frontend Templates) added UI for managing audio processing templates. Phase 1 framework: - `AudioFilter` base class, `AudioFilterRegistry`, `AudioFilterOptionDef` in `core/audio/filters/` @@ -94,7 +94,7 @@ _(none yet)_ | Phase 2 | impl-agent | — | No | All 11 filters implemented, no deviations | | 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 | — | — | — | — | +| Phase 5 | impl-agent | — | No | 6/7 tasks done; Task 4 (preview) deferred to Phase 7 | | Phase 6 | — | — | — | — | | Phase 7 | — | — | — | — | diff --git a/plans/processed-audio-sources/phase-5-frontend-templates.md b/plans/processed-audio-sources/phase-5-frontend-templates.md index e48dc3f..4f482fe 100644 --- a/plans/processed-audio-sources/phase-5-frontend-templates.md +++ b/plans/processed-audio-sources/phase-5-frontend-templates.md @@ -1,6 +1,6 @@ # Phase 5: Frontend — Audio Processing Templates -**Status:** ⬜ Not Started +**Status:** ✅ Done **Parent plan:** [PLAN.md](./PLAN.md) **Domain:** frontend @@ -9,62 +9,89 @@ Build the frontend UI for managing Audio Processing Templates — list, create, ## Tasks -- [ ] Task 1: Create TypeScript module `static/js/features/audio-processing-templates.ts` +- [x] Task 1: Create TypeScript module `static/js/features/audio-processing-templates.ts` - Fetch/cache audio processing templates via DataCache - CRUD operations using fetchWithAuth - CardSection for template list with reconciliation -- [ ] Task 2: Create template editor modal +- [x] Task 2: Create template editor modal - Name, description, tags fields - Ordered filter list with add/remove/reorder controls - Per-filter option controls (sliders, selects, toggles) driven by option schemas from `GET /api/v1/audio-filters` - Template composition support: `audio_filter_template` shows EntitySelect for sub-template - Dirty check via snapshotValues() -- [ ] Task 3: Add Audio Processing Templates section to the Streams tab - - New sub-tab or section alongside existing Audio Sources +- [x] Task 3: Add Audio Processing Templates section to the Streams tab + - New sub-tab alongside existing Audio Sources - CardSection rendering with template name, filter count, description - Create/Edit/Delete actions per card -- [ ] Task 4: Real-time audio preview - - "Test" button on template editor that opens a WebSocket connection - - Shows spectrum visualization (reuse existing audio test pattern) - - Applies template's filters to a selected source in real-time - - Source picker (EntitySelect) for choosing input audio source -- [ ] Task 5: Add i18n keys for all new UI strings (en.json, ru.json, zh.json) +- [ ] Task 4: Real-time audio preview — **DEFERRED to Phase 7** + - Too complex for this phase; requires WebSocket plumbing and source selection + - The audio source test modal already provides spectrum visualization +- [x] Task 5: Add i18n keys for all new UI strings (en.json, ru.json, zh.json) - Template section labels, filter names, option labels, buttons, errors -- [ ] Task 6: Register module in `app.js` / global exports if needed for inline onclick handlers -- [ ] Task 7: Fetch and cache audio filter registry data (for building filter option UIs) +- [x] Task 6: Register module in `app.ts` / global exports for inline onclick handlers +- [x] Task 7: Fetch and cache audio filter registry data (for building filter option UIs) ## Files to Modify/Create -- `static/js/features/audio-processing-templates.ts` — **create** — main module -- `static/js/features/audio-processing-template-modal.ts` — **create** — editor modal -- `static/css/dashboard.css` — **modify** — styles for template editor -- `static/js/app.js` — **modify** — register module, add window exports -- `templates/dashboard.html` (or relevant Jinja template) — **modify** — add section -- `static/js/core/i18n/en.json` — **modify** — new keys -- `static/js/core/i18n/ru.json` — **modify** — new keys -- `static/js/core/i18n/zh.json` — **modify** — new keys +- `static/js/features/audio-processing-templates.ts` — **created** — main module +- `templates/modals/audio-processing-template.html` — **created** — editor modal +- `static/js/core/state.ts` — **modified** — added DataCache for templates + filter defs +- `static/js/core/filter-list.ts` — **modified** — added audio filter icons +- `static/js/features/streams.ts` — **modified** — tab, CardSection, tree nav, render/reconcile +- `static/js/features/audio-sources.ts` — **modified** — use cache for processing templates +- `static/js/app.ts` — **modified** — imports + window exports +- `static/js/global.d.ts` — **modified** — window function declarations +- `templates/index.html` — **modified** — include modal template +- `static/locales/en.json` — **modified** — new i18n keys +- `static/locales/ru.json` — **modified** — new i18n keys +- `static/locales/zh.json` — **modified** — new i18n keys ## Acceptance Criteria - Audio Processing Templates section visible in Streams tab - Templates can be created, edited, deleted - Filter editor shows all 11 available filters with correct option controls - Template composition (audio_filter_template) works via EntitySelect -- Real-time preview shows filtered audio data +- ~~Real-time preview shows filtered audio data~~ (deferred) - All strings are internationalized ## Notes -- Follow existing patterns from postprocessing template UI -- Use IconSelect for filter type selection (if icon set supports it) or a custom filter picker +- Follow existing patterns from CSPT (Color Strip Processing Template) UI +- Uses FilterListManager from core/filter-list.ts for filter management +- IconSelect used for filter type selection - NEVER use plain HTML ` + + +
+
+ + +
+ + +
+
+ + +
+ + +
+ +
+ +
+
+ + +
+ + +
+ + + +