63 lines
1.6 KiB
Markdown
63 lines
1.6 KiB
Markdown
# 41. Create Player UI Layout
|
|
|
|
meta:
|
|
id: podcast-tui-app-41
|
|
feature: podcast-tui-app
|
|
priority: P0
|
|
depends_on: [40]
|
|
tags: [player, layout, solidjs, opentui]
|
|
|
|
objective:
|
|
- Create player UI layout component
|
|
- Display episode information
|
|
- Position player controls and waveform
|
|
- Handle player state
|
|
|
|
deliverables:
|
|
- `src/components/Player.tsx` with player layout
|
|
- `src/components/PlayerHeader.tsx` with episode info
|
|
- `src/components/PlayerControls.tsx` with controls area
|
|
|
|
steps:
|
|
- Create `src/components/Player.tsx`:
|
|
- Player container with borders
|
|
- Episode information header
|
|
- Waveform visualization area
|
|
- Playback controls area
|
|
- Progress bar area
|
|
- Create `src/components/PlayerHeader.tsx`:
|
|
- Episode title
|
|
- Podcast name
|
|
- Episode duration
|
|
- Close player button
|
|
- Create `src/components/PlayerControls.tsx`:
|
|
- Play/Pause button
|
|
- Previous/Next episode buttons
|
|
- Volume control
|
|
- Speed control
|
|
- Keyboard shortcuts display
|
|
|
|
tests:
|
|
- Unit: Test Player layout renders correctly
|
|
- Unit: Test PlayerHeader displays correctly
|
|
- Unit: Test PlayerControls layout
|
|
|
|
acceptance_criteria:
|
|
- Player UI displays episode information
|
|
- Controls positioned correctly
|
|
- Player fits within terminal bounds
|
|
- Layout is responsive
|
|
|
|
validation:
|
|
- Run application and navigate to "Player"
|
|
- Select an episode to play
|
|
- Verify player UI displays
|
|
- Check layout and positioning
|
|
|
|
notes:
|
|
- Use Flexbox for player layout
|
|
- Player should be at bottom or overlay
|
|
- Use `<scrollbox>` for waveform area
|
|
- Add loading state when no episode
|
|
- Use SolidJS signals for player state
|