PodTui/tasks/podcast-tui-app/42-playback-controls.md

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