@resonate/player-component
v3.0.0-1
Published
Player component
Downloads
6
Readme
@resonate/player-component
Player component
Installation
$ npm i --save @resonate/player-component
Usage
const Player = require('@resonate/player-component')
function (state, emit) {
return html`
<div class="bg-black white fixed bottom-0 left-0 right-0 w-100">
${state.cache('player').render({
menu: {
items: [
{
iconName: 'star',
text: 'favorite',
toggleState: state.track.fav === 0,
action: (toggle, data) => {
emit(toggle ? 'favorite' : 'unfavorite', data.id)
}
},
{
iconName: 'share',
text: 'share'
},
{
iconName: 'info',
text: 'artist profile'
}
]
}
})}
</div>
`
}
...
Options
prefix
A single class or classlistmenu
An array of menu item configuration for@resonate/menu-button
Playback control
Player state is exposed in state.components[componentId]
Playback state machine can be controlled
...
machine.playback.emit('play')
machine.playback.emit('pause')
Icons
See @resonate/icon-element
SVG icons set configuration.
Icon names
- play
- pause
- previous
- next
- volume
License
MIT
Author(s)
- Augustin Godiscal [email protected]