ledgrab/plans/processed-audio-sources/phase-6-frontend-source-types.md

Phase 6: Frontend — Source Types

Status: Done Parent plan: PLAN.md Domain: frontend

Objective

Update the audio source UI to support the new ProcessedAudioSource and CaptureAudioSource types, and remove the old MonoAudioSource and BandExtractAudioSource UI.

Tasks

• Task 1: Update audio source TypeScript types/interfaces for new source types
  • Already done in Phase 3: CaptureAudioSource and ProcessedAudioSource in types.ts
  • AudioSourceType = 'capture' | 'processed' already defined
• Task 2: Create ProcessedAudioSource card component
  • Already done in Phase 3/5: renderAudioSourceCard in streams.ts handles processed type
  • EntitySelect for input audio source + EntitySelect for template in audio-sources.ts
• Task 3: Update CaptureAudioSource card (relabeled from Multichannel)
  • Already done in Phase 3: card shows capture icon, device info, template badge
• Task 4: Remove MonoAudioSource card component/rendering
  • Already done in Phase 3: removed from audio-sources.ts and streams.ts
• Task 5: Remove BandExtractAudioSource card component/rendering
  • Already done in Phase 3: removed from audio-sources.ts and streams.ts
• Task 6: Update audio source creation dialog/flow
  • Phase 3 already set up separate CardSections: csAudioCapture and csAudioProcessed
  • Each has its own addCardOnclick pointing to showAudioSourceModal('capture') / showAudioSourceModal('processed')
  • Modal type is set via hidden input, not a type picker dropdown
• Task 7: Update EntitySelect dropdowns that list audio sources
  • Already done: color-strips.ts and value-sources.ts both show [capture]/[processed] badges and use getAudioSourceIcon
• Task 8: Update i18n keys for renamed/new source types
  • Removed old keys: multichannel, mono, band_extract group/add/edit/type keys, channel keys, band keys, freq keys
  • Added new keys: capture/processed add/edit/type keys, processing_template label+hint
  • Updated parent hint to reference processing filters instead of channel extraction
  • Updated value_source.audio_source.hint to remove "(multichannel or mono)" reference
  • All 3 locales updated (en.json, ru.json, zh.json)
• Task 9: Update any inline onclick handlers or window exports in app.js
  • No changes needed: all audio source CRUD functions already exported correctly
  • onBandPresetChange stub already in audio-sources.ts (no-op), not exported to window

Files Modified

• templates/modals/audio-source-editor.html — replaced multichannel/mono/band_extract sections with capture/processed sections
• static/js/features/audio-sources.ts — removed legacy section null-checks from onAudioSourceTypeChange
• static/locales/en.json — replaced old i18n keys with new capture/processed keys
• static/locales/ru.json — same
• static/locales/zh.json — same

Acceptance Criteria

• ProcessedAudioSource can be created/edited/deleted from the UI
• CaptureAudioSource shows correctly with updated label
• MonoAudioSource and BandExtractAudioSource UI is completely removed
• EntitySelect for audio sources shows type badges
• Source type picker shows only Capture and Processed
• All strings are internationalized

Notes

• NEVER use plain HTML <select> — use project custom selectors
• NEVER use emoji — use SVG icons
• Use fetchWithAuth for ALL API calls
• Call cache.invalidate() before load in save/delete handlers
• Check DOM ID conflicts when adding new card types (project checklist)

Review Checklist

• All tasks completed
• Code follows project conventions
• No unintended side effects
• Build passes
• Tests pass (new + existing)

Handoff to Next Phase

What was built

• Cleaned up the HTML modal template to only show capture and processed source type sections (removed multichannel/mono/band_extract HTML)
• Updated all 3 locale files to replace old multichannel/mono/band_extract i18n keys with new capture/processed keys
• Removed legacy section null-checks from onAudioSourceTypeChange

What Phase 7 needs to know

• The frontend now fully supports only two audio source types: capture and processed
• The modal hidden type input defaults to "capture" (was "multichannel")
• Audio source EntitySelects in color-strips.ts and value-sources.ts already show type badges
• All CRUD operations (create/edit/clone/delete/test) work for both source types

Known deviations from plan

• Most of the work (Tasks 1-7) was already completed in Phases 3 and 5
• Phase 6 mainly cleaned up the HTML template and i18n keys
• No new TypeScript files or components were needed

Concerns

• The onBandPresetChange stub export remains in audio-sources.ts for backward compatibility; can be removed in Phase 7 cleanup