State Bound Building Blocks to create Podcast Player UIs
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 |
- Bootstrap the player package:
lerna bootstrap --hoist
- Run the development mode:
npm run dev
- Open your browser on
http://localhost:9000
to get started
- Make sure that the dependencies are up to date:
lerna bootstrap --hoist
- Run the build step:
npm run build