47 lines
1.4 KiB
Markdown
47 lines
1.4 KiB
Markdown
# 07. Create Merged Progress-Waveform Component
|
|
|
|
meta:
|
|
id: merged-waveform-07
|
|
feature: merged-waveform
|
|
priority: P2
|
|
depends_on: [merged-waveform-06]
|
|
tags: [ui, waveform, component]
|
|
|
|
objective:
|
|
- Design and implement a single component that shows progress bar and waveform
|
|
- Component starts as progress bar, expands to waveform when playing
|
|
- Provide smooth transitions between states
|
|
|
|
deliverables:
|
|
- MergedWaveform component
|
|
- State management for progress vs waveform display
|
|
- Visual styling for progress bar and waveform
|
|
|
|
steps:
|
|
1. Create `src/components/MergedWaveform.tsx`
|
|
2. Design component state machine (progress bar → waveform)
|
|
3. Implement progress bar visualization
|
|
4. Add waveform expansion animation
|
|
5. Style progress bar and waveform with theme colors
|
|
|
|
tests:
|
|
- Unit: Test component state transitions
|
|
- Integration: Test component in Player
|
|
- Visual: Verify smooth expansion animation
|
|
|
|
acceptance_criteria:
|
|
- Component displays progress bar when paused
|
|
- Component smoothly expands to waveform when playing
|
|
- Visual styles match theme and existing UI
|
|
|
|
validation:
|
|
- Test with paused and playing states
|
|
- Verify expansion is smooth and visually appealing
|
|
- Check theme color integration
|
|
|
|
notes:
|
|
- Use existing Waveform component as base
|
|
- Add CSS transitions for smooth expansion
|
|
- Keep component size manageable (fit in progress bar area)
|
|
- Consider responsive to terminal width changes
|