alexei.dolgolyov
86a9d344e6
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
3.4 KiB
3.4 KiB
Phase 5: Frontend — Audio Processing Templates
Status: ⬜ Not Started Parent plan: 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_templateshows 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 modulestatic/js/features/audio-processing-template-modal.ts— create — editor modalstatic/css/dashboard.css— modify — styles for template editorstatic/js/app.js— modify — register module, add window exportstemplates/dashboard.html(or relevant Jinja template) — modify — add sectionstatic/js/core/i18n/en.json— modify — new keysstatic/js/core/i18n/ru.json— modify — new keysstatic/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)