Skip to content

Latest commit

 

History

History
54 lines (44 loc) · 4.11 KB

README.md

File metadata and controls

54 lines (44 loc) · 4.11 KB

Podlove Player

State Bound Building Blocks to create Podcast Player UIs

Architecture

Architecture

Available Components

name properties use case
chapter-next - jump to next chapter
chapter-previous - jump to previous chapter
current-chapter - current chapter
divider - visual divider
episode-title - episode title
error - error overlay
play-button variant: simple, details play button with states
play-state on: initialize, active, ended play state conditional closure
poster - show, episode or chapter cover
progress-bar - episode progress with chapter and progress indicators
root - font and theme closure element
show-title - show title
speed-control - audio speed stepper
step-backward - 15 seconds back stepper
step-forward - 30 seconds forward stepper
subscribe-button - subscribe button trigger
tab name: tab name conditional tab closure
tab-chapters - chapters tab element
tab-files - files tab element
tab-overflow - tab bottom transition
tab-playlist - playlist tab element
tab-share - share tab element
tab-shownotes - shownotes tab element
tab-title - tab title with close button
tab-transcripts - title tab element
tab-trigger - trigger element for tabs
timer-current - timer with current playtime
timer-duration - timer with duration left
volume-control - volume control

Getting Started

Development

  1. Bootstrap the player package: lerna bootstrap --hoist
  2. Run the development mode: npm run dev
  3. Open your browser on http://localhost:9000 to get started

Building

  1. Make sure that the dependencies are up to date: lerna bootstrap --hoist
  2. Run the build step: npm run build