e7a06e2b8f
Force archive the following proposals: - add-audio-device-selector (complete) - add-embedded-backend-packaging (19/26 tasks) - add-flexible-deployment-options (20/21 tasks) New specs created: - audio-device-management (7 requirements) - embedded-backend (8 requirements) Updated specs: - transcription (+2 requirements for model download progress) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
126 lines
4.5 KiB
Markdown
126 lines
4.5 KiB
Markdown
# Tasks: add-audio-device-selector
|
|
|
|
## Phase 1: Core Device Management
|
|
|
|
### Task 1.1: Add Audio Settings Panel HTML Structure
|
|
- [x] Add collapsible panel container in meeting-detail.html
|
|
- [x] Add device dropdown selector element
|
|
- [x] Add volume meter container (canvas or div bars)
|
|
- [x] Add test recording/playback buttons
|
|
- [x] Add status indicator element
|
|
- **Validation**: Panel renders correctly, all elements visible
|
|
|
|
### Task 1.2: Implement Device Enumeration
|
|
- [x] Create `enumerateAudioDevices()` function
|
|
- [x] Filter out virtual devices (Stereo Mix)
|
|
- [x] Populate dropdown with device labels
|
|
- [x] Mark default device in dropdown
|
|
- [x] Add device change event listener for hot-plug support
|
|
- **Validation**: All connected microphones appear in dropdown
|
|
|
|
### Task 1.3: Implement Device Selection Logic
|
|
- [x] Create `selectAudioDevice(deviceId)` function
|
|
- [x] Stop existing audio context when switching
|
|
- [x] Create new AudioContext with selected device
|
|
- [x] Save selection to localStorage
|
|
- [x] Handle device unavailable errors
|
|
- **Validation**: Selecting device updates state, persists after refresh
|
|
|
|
## Phase 2: Volume Monitoring
|
|
|
|
### Task 2.1: Implement Volume Meter
|
|
- [x] Create AudioContext and AnalyserNode
|
|
- [x] Connect selected device to analyser
|
|
- [x] Create volume calculation function (RMS or peak)
|
|
- [x] Implement requestAnimationFrame loop for updates
|
|
- [x] Render volume level as visual bar
|
|
- **Validation**: Meter responds to voice input, updates smoothly
|
|
|
|
### Task 2.2: Volume Meter Styling
|
|
- [x] Add CSS for volume meter bar
|
|
- [x] Add gradient colors (green → yellow → red)
|
|
- [x] Add percentage text display
|
|
- [x] Add "No input detected" indicator
|
|
- **Validation**: Visual feedback is clear and responsive
|
|
|
|
## Phase 3: Test Recording
|
|
|
|
### Task 3.1: Implement Test Recording Function
|
|
- [x] Create `startTestRecording()` function
|
|
- [x] Use MediaRecorder with selected device
|
|
- [x] Implement 5-second auto-stop timer
|
|
- [x] Store recording as Blob
|
|
- [x] Update UI during recording (countdown, indicator)
|
|
- **Validation**: Can record 5 seconds, blob created
|
|
|
|
### Task 3.2: Implement Test Playback Function
|
|
- [x] Create `playTestRecording()` function
|
|
- [x] Create Audio element from blob URL
|
|
- [x] Handle play/stop states
|
|
- [x] Update UI during playback
|
|
- [x] Clean up blob URL when done
|
|
- **Validation**: Recorded audio plays back correctly
|
|
|
|
### Task 3.3: Test Recording UI State Management
|
|
- [x] Disable recording button during recording
|
|
- [x] Show countdown timer during recording
|
|
- [x] Enable play button after recording
|
|
- [x] Disable test controls during main recording
|
|
- **Validation**: UI states transition correctly
|
|
|
|
## Phase 4: Integration
|
|
|
|
### Task 4.1: Integrate with Main Recording
|
|
- [x] Modify `startRecording()` to use selected device
|
|
- [x] Add fallback to auto-selection if no preference
|
|
- [x] Handle selected device being unavailable
|
|
- [x] Stop volume monitoring during main recording
|
|
- **Validation**: Main recording uses selected device
|
|
|
|
### Task 4.2: Add Panel Collapse/Expand
|
|
- [x] Add collapse toggle button
|
|
- [x] Save panel state to localStorage
|
|
- [x] Load panel state on page load
|
|
- [x] Stop volume monitoring when collapsed
|
|
- **Validation**: Panel remembers collapse state
|
|
|
|
### Task 4.3: Add Refresh Device List Button
|
|
- [x] Add refresh icon button
|
|
- [x] Re-enumerate devices on click
|
|
- [x] Preserve selection if still available
|
|
- [x] Update dropdown options
|
|
- **Validation**: New devices appear after refresh
|
|
|
|
## Phase 5: Polish & Error Handling
|
|
|
|
### Task 5.1: Error Handling
|
|
- [x] Handle "No devices found" state
|
|
- [x] Handle permission denied errors
|
|
- [x] Handle device disconnection during use
|
|
- [x] Show user-friendly error messages (Chinese)
|
|
- **Validation**: All error states show appropriate messages
|
|
|
|
### Task 5.2: Localization
|
|
- [x] Add Chinese labels for all UI elements
|
|
- [x] Add Chinese error messages
|
|
- [x] Add tooltips for buttons
|
|
- **Validation**: All text is in Traditional Chinese
|
|
|
|
### Task 5.3: Testing & Documentation
|
|
- [x] Manual testing with multiple microphones
|
|
- [x] Test USB microphone hot-plug
|
|
- [x] Test headset microphone switching
|
|
- [x] Update DEPLOYMENT.md if needed
|
|
- **Validation**: Feature works with various microphone types
|
|
|
|
## Dependencies
|
|
- Task 1.2 depends on Task 1.1
|
|
- Task 2.1 depends on Task 1.3
|
|
- Task 3.1 depends on Task 1.3
|
|
- Task 4.1 depends on Tasks 1.3, 3.1
|
|
- Phase 5 depends on all previous phases
|
|
|
|
## Parallelizable Work
|
|
- Task 1.1 (HTML) and Task 2.2 (CSS) can run in parallel
|
|
- Task 3.1 (Recording) and Task 2.1 (Volume) can run in parallel after Task 1.3
|