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
71 lines
3.4 KiB
Markdown
71 lines
3.4 KiB
Markdown
# 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. -->
|