feat(processed-audio-sources): phase 1 - audio filter framework
Add the foundation for audio processing filters, mirroring the existing picture filter/postprocessing template system: - AudioFilter base class, AudioFilterRegistry, AudioFilterOptionDef - AudioProcessingTemplate dataclass + SQLite-backed store - audio_filter_template meta-filter with recursive resolution - Full REST API: CRUD templates + filter registry discovery - Dependency injection wired in dependencies.py and main.py
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
# Phase 5: Frontend — Audio Processing Templates
|
||||
|
||||
**Status:** ⬜ Not Started
|
||||
**Parent plan:** [PLAN.md](./PLAN.md)
|
||||
**Domain:** frontend
|
||||
|
||||
## Objective
|
||||
Build the frontend UI for managing Audio Processing Templates — list, create, edit, delete, with a filter editor and real-time preview.
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] 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
|
||||
- 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
|
||||
- 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)
|
||||
- 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)
|
||||
|
||||
## 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
|
||||
|
||||
## 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
|
||||
- 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
|
||||
- NEVER use plain HTML `<select>` — use project custom selectors (CRITICAL project rule)
|
||||
- NEVER use emoji — use SVG icons from `core/icons.ts`
|
||||
- Use fetchWithAuth for ALL API calls (project rule)
|
||||
- Call cache.invalidate() before load functions in save/delete handlers
|
||||
|
||||
## Review Checklist
|
||||
- [ ] All tasks completed
|
||||
- [ ] Code follows project conventions
|
||||
- [ ] No unintended side effects
|
||||
- [ ] Build passes
|
||||
- [ ] Tests pass (new + existing)
|
||||
|
||||
## Handoff to Next Phase
|
||||
<!-- Filled in by the implementation agent after completing this phase. -->
|
||||
Reference in New Issue
Block a user