init

tasks/podcast-tui-app/44-progress-tracking.md

@@ -0,0 +1,61 @@
+# 43. Build ASCII Waveform Visualization
+
+meta:
+  id: podcast-tui-app-43
+  feature: podcast-tui-app
+  priority: P0
+  depends_on: [42]
+  tags: [waveform, visualization, ascii, solidjs]
+
+objective:
+- Create ASCII waveform visualization
+- Generate waveform from audio data
+- Display waveform in player
+- Handle click to seek
+
+deliverables:
+- `src/components/Waveform.tsx` with waveform display
+- `src/utils/waveform.ts` with waveform generation
+- `src/components/WaveformProgress.tsx` with progress overlay
+
+steps:
+- Create `src/utils/waveform.ts`:
+  - `generateWaveform(audioUrl: string): Promise<string>`
+  - Fetch audio data
+  - Analyze audio frequencies
+  - Convert to ASCII characters
+  - Return ASCII waveform string
+- Create `src/components/Waveform.tsx`:
+  - Display ASCII waveform
+  - Color-coded for played/paused
+  - Click to seek to position
+  - Handle terminal width
+- Create `src/components/WaveformProgress.tsx`:
+  - Progress overlay on waveform
+  - Show current position
+  - Highlight current segment
+
+tests:
+- Unit: Test waveform generation
+- Unit: Test waveform display
+- Integration: Test click to seek
+
+acceptance_criteria:
+- Waveform displays correctly
+- Waveform generated from audio
+- Color-coded for played/paused
+- Clicking waveform seeks to position
+
+validation:
+- Run application and play an episode
+- Verify waveform displays
+- Check waveform colors
+- Test seeking by clicking waveform
+
+notes:
+- ASCII waveform: Use `#` for peaks, `.` for valleys
+- Use Web Audio API for waveform generation
+- Cache waveform data for performance
+- Handle large audio files
+- Use frame buffer for drawing
+- Color scheme: Green for played, Gray for paused