@podlove/player
v5.13.0
Published
HTML5 Goodness for Podcasting
Downloads
111
Readme
Podlove Player
State Bound Building Blocks to create Podcast Player UIs
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
- Bootstrap the player package:
lerna bootstrap --hoist
- Run the development mode:
npm run dev
- Open your browser on
http://localhost:9000
to get started
Building
- Make sure that the dependencies are up to date:
lerna bootstrap --hoist
- Run the build step:
npm run build