feat(processed-audio-sources): phase 5 - frontend audio processing templates

Add Audio Processing Templates management UI to Streams tab:
- Template editor modal with filter list via FilterListManager
- CardSection with reconciliation for template cards
- DataCache instances for templates and audio filter defs
- Audio filter icon mappings in filter-list.ts
- i18n keys in en/ru/zh locales
This commit is contained in:
2026-03-31 19:32:17 +03:00
parent ab43578049
commit 553463935e
14 changed files with 588 additions and 59 deletions
@@ -0,0 +1,46 @@
<!-- Audio Processing Template Editor Modal -->
<div id="apt-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="apt-modal-title">
<div class="modal-content">
<div class="modal-header">
<h2 id="apt-modal-title" data-i18n="audio_processing.add">Add Audio Processing Template</h2>
<button class="modal-close-btn" onclick="closeAudioProcessingTemplateModal()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
</div>
<div class="modal-body">
<input type="hidden" id="apt-id">
<div id="apt-error" class="modal-error" style="display:none"></div>
<div class="form-group">
<div class="label-row">
<label for="apt-name" data-i18n="audio_processing.name">Template Name:</label>
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
</div>
<small class="input-hint" style="display:none" data-i18n="audio_processing.name.hint">A descriptive name for this audio processing template</small>
<input type="text" id="apt-name" data-i18n-placeholder="audio_processing.name_placeholder" placeholder="My Audio Processing Template" required>
<div id="apt-tags-container"></div>
</div>
<!-- Dynamic audio filter list -->
<div id="apt-filter-list" class="pp-filter-list"></div>
<!-- Add filter control -->
<div class="pp-add-filter-row">
<select id="apt-add-filter-select" class="pp-add-filter-select">
<option value="" data-i18n="filters.select_type">Select filter type...</option>
</select>
</div>
<div class="form-group">
<div class="label-row">
<label for="apt-description" data-i18n="audio_processing.description_label">Description (optional):</label>
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
</div>
<small class="input-hint" style="display:none" data-i18n="audio_processing.description.hint">Describe what this template does</small>
<input type="text" id="apt-description" data-i18n-placeholder="audio_processing.description_placeholder" placeholder="Describe this template...">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-icon btn-secondary" onclick="closeAudioProcessingTemplateModal()" title="Cancel" data-i18n-title="settings.button.cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
<button class="btn btn-icon btn-primary" onclick="saveAudioProcessingTemplate()" title="Save" data-i18n-title="settings.button.save" data-i18n-aria-label="aria.save">&#x2713;</button>
</div>
</div>
</div>